I've been stuck on this for awhile now. I have an answers-container div that's going to contain 4 rows, each with a checkbox and a button like this.
The problem is, I can't figure out how to get the width of the checkbox to be the same as the height, since if I set answers-container to be a grid and do grid-template-rows: 25% 25% 25% 25% the height of each answer will be correct but there's no way to set the width to be the same as the height. I know it's possible to do this in Jquery by manually grabbing the value of the height, but if possible I would like to find a solution in CSS.
I saw an answer that used a dummy div with padding set to a percentage which inherits that percentage from the parent, but I couldn't figure out a way to get that method to work while still keeping the button divs next to the checkboxes.
I don't have much code to share because I've deleted and rewritten this so many times, but this is the codepen:
https://codepen.io/TheNomadicAspie/pen/QWvWOgz
And this is what I'm trying to do:
.answers-container {
grid-columns: 2/3;
position: relative;
background-color: blue;
height: 100%;
}
.answer {
}
.checkbox {
}
.button {
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 50%;
padding-top: 50%;
/* 1:1 Aspect Ratio */
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
1:1 Aspect ratio<br/> width and height are always equeal
</div>
</div>
</body>
</html>
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
For some reason it was working before, but I haven't changed anything in these files, and the background-image stopped loading. I mocked up a codepen to re-produce the problem:
https://codepen.io/jamespagedev/pen/WYNPYv
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UI Project Wk - Home</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<div class="coming-soon">
<div class="notice">
<h1>COMING SOON</h1>
<hr>
<p id="countdown-clock" style="font-size:30px"></p>
</div>
</div>
</body>
</html>
CSS:
.coming-soon {
background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.notice {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: 50px auto;
width: 40%;
}
Can anyone tell me why background-image isn't showing up?
To use height: 100%; the parent element must have a defined height. In the codepen, adding this works:
html, body {
height: 100%;
}
Height of Html and body tag is not define. That's why your image is not render properly.
you need to add height of html and body tag.
html,body {
height:100%;
}
You can check updated codepen. link
seems you have given height:100% for .coming-soon class. Give the height value in px or pt instead of giving value in %.
For example.
.coming-soon {height:700px}
.coming-soon {height:100vh} /*Background will be applied for the whole vieport height.*/
What's a simple way to do this in CSS?
selector {
width: 75%;
height: width;
}
I've tried set the height to various properties, but they don't seem to accomplish what I want. How can I set one value to the value of another?
Padding-top percentages are based on width, so it's easy to calculate using pure CSS.
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 100%;
/* 1:1 ratio, set from padding top being 100% */
/* If you wanted one half as high, use 50% */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-color: red;
/* let's see it! */
color: white;
}
<div class="wrapper">
<div class="main">
This is a sample 1:1 responsive DIV.
</div>
</div>
You can't currently in css except in firefox with CSS variables
http://caniuse.com/#feat=css-variables
You can use a dynamic stylesheet language like less or sass to write css with variables. You can then compile the code into plain css.
Example in less:
#size: 75%;
selector {
width: #size;
height: #size;
}
Well, if you know width = 75%, you could just say height = 75%.
selector {
width: 75%;
height: 75%;
}
Now if you change width using PHP/Javascript, just change height, too. This appears to be the simplest way to me, but I'm still pretty new to making websites.
This is also answered here: stackoverflow.com/q/5445491/1004522
The easiest way i see is to use jquery in a way such as this:
<html>
<head>
<script>
selector{
width: 75%;
}
</scipt>
</head>
<body>
<script type="text/javascript" src="/jquery.js"></script>
<selector></selector>
<script type="text/javascript">
$("selector").css("height", $("selector").width());
</script>
</body>
</html>
To my understanding, this should make both width and height 75%.
im making a self financial accounting program but im gonna use html,css and php to do it
i have a basic layout with 5 main divs on the front page
here it is the mock:
http://s24.postimage.org/le9yrx4np/divs.jpg
i never coded before and im failing hard
i want this layout compatible with "desktops" this is my desktop version
im working based on a 1024 x 768 screen
but i want webkits compatible for all browsers because i want this able to resize if its a little bigger or smaller
im not sure if need em since i can just set things to like 100% but thats where my problem starts
here is my work so far
http://jsfiddle.net/dhJPS/
my prblems are
the middle three divs are being overlapped by the right div, notice on the words how they are not centered from the left div to the right div
i cant seem to understand the concept of floating to well i cant make this layout work like i want
anyways if you can help me out a little with this one is greatly appreciated!!
thanks
#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;
}
#intab {
background-color: yellow;
width: 100%;
height: 297px;
}
#currentday {
background-color: white;
width: 100%;
height: 170px;
}
#outtab {
background-color: yellow;
width: 100%;
height: 297px;
}
#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body {
text-align: center;
display: block;
}
img {
border: none;
}
You simply need to rearrange some things.
When floating something to the right, the HTML always need to come before any other HTML. Right, left, static is the best order to follow.
You always want to cascade your CSS. Put global styles at the top of the style sheet. The body styles should be at the top of your CSS, not the bottom.
I added a wrapper div to set a minimum width. This way the interior content will never go below that width, ensuring things never overlap. However they will expand as much as needed.
It is rare you need to set width: 100%; in the CSS. It's not always a bad thing, but you shouldn't bother setting that unless you specifically know you need it.
I rearranged some things, and removed some of the HTML that jsFiddle don't need.... UPDATED FIDDLE HERE
Here is your answer.
Key issues:
margin
inner div to group all the central ones
[VERY IMPORTANT] display: inline-block; - This will make sure that your div will be the exact size you defined. if not used it will use 100% for both width and height
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.panels {
height: 768px;
}
.rightside, .leftside {
width: 170px;
height: 100%;
background-color: yellow;
display: inline-block;
}
.leftside {
float: left;
}
.rightside {
float: right;
}
.innerPanels {
height: 100%;
margin: 0 170px;
}
.intab, .outtab {
height: 25%;
background-color: lime;
opacity: 0.75;
}
.currentday{
height: 50%;
background-color: darkgray;
}
</style>
</head>
<body>
<div class="panels">
<!--LEFT SIDE -->
<div class="leftside">left side</div>
<!-- RIGHT SIDE -->
<div class="rightside">right side</div>
<div class="innerPanels">
<!-- IN -->
<div class="intab">in</div>
<!-- CURRENT DAY -->
<div class="currentday">current day</div>
<!-- OUT -->
<div class="outtab">out</div>
</div>
</div>
</body>
</html>
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!
I want to have XHTML+CSS progress bar with contrast colors between filled and empty background areas.
I have a problem with text color. Because filled and empty backgrounds are too contrast (this is a requirement), to remain readable the text should be double-colored to be contrast to both of them. The image should explain it better than words:
Progress bar with dark blue filled area and white empty background http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png
Example of the problem http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png
My current progress bar implementation is trivial, but as example above shows, the text can be hard to read in some cases, which is exactly a problem I want to solve.
My current (simplified) implementation attempt (fails, because overflow: hidden does not work without positioning div.progress which I cannot position because of inner span's width):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Progress bar test</title>
<style type="text/css">
div.progress_bar {
border: 1px #ccc solid; position: relative;
text-align: center; height: 32px;
}
div.progress_bar .progress {
height: 32px;
overflow: hidden; /* This does NOT work! */
}
div.progress_bar .progress div {
position: absolute; width: 100%; height: 32px;
z-index: 30; overflow: hidden;
background-color: #44a;
}
div.progress_bar span {
position: absolute; top: 0; left: 0; width: 100%;
z-index: 20;
color: #000;
}
div.progress_bar .progress span {
position: absolute; top: 0; left: 0; width: 100%;
z-index: 40;
color: #eee;
}
</style>
</head>
<body>
<!-- Can be of any (unknown) width. Think of "width: auto".
The 400px value is just to keep it small on a big monitor.
DON'T rely on it! -->
<div id="container" style="width: 400px;">
<div class="progress_bar">
<!-- div.progress is a dark filled area container -->
<div class="progress" style="width: 51%;">
<!-- Actually dark filled area -->
<div style="width: 51%;"></div>
<!-- Text (white).
Does not clip, even with overflow: hidden on parent! -->
<span>This is a test</span>
</div>
<!-- Text (black) -->
<span>This is a test</span>
</div>
</div>
</body>
</html>
Live version of the above: http://drdaeman.pp.ru/tmp/20090703/test2.html
Previous attempt: http://drdaeman.pp.ru/tmp/20090703/test.html
The images are GIMP edited prototypes, and not exactly what this code displays.
Add: Thank you all, especially Meep3D, Nosredna and Lachlan! However I still have a problem — in my case progress bar should have no fixed width and take all horizontally available space (width: auto; or width: 100% are acceptable). But without width: 400px rule Lachlan's code breaks. And I'd still like to avoid using JavaScript, if that's possible.
As per Meep3D's suggestion, take 2 copies of the text.
Wrap each in a div of the same width as the container. The "upper" div is wrapped with another div which clips at the desired percentage.
Update: removed the fixed widths.
The "upper" div is sized to the inverse percentage of its wrapper.
<html>
<head>
<style type="text/css">
#container {
position: relative;
border: 1px solid;
text-align: center;
width: 400px;
height: 32px;
}
.black-on-white {
height: 32px;
color: #000;
}
.white-on-black {
height: 32px;
color: #fff;
background-color: #44a;
}
.wrapper {
width: 53%;
overflow: hidden;
position: absolute;
top: 0; left: 0;
}
.black-on-white {
width: 100%;
}
.white-on-black {
width: 188.7%;
}
</style>
</head>
<body>
<div id="container">
<div class="wrapper">
<div class="white-on-black">
<span>This is a test</span>
</div>
</div>
<div class="black-on-white">
<span>This is a test</span>
</div>
</div>
</body>
</html>
What about putting a second copy of the progress bar text inside the div, and set the div's overflow to hidden, so it reveals with it?
--
Update: I am also not a javascript expert, but I am sure that you can find out the width of an object and then set the offset based upon that if the width is flexible as you say.
You could:
Find a grey which suits
Use JavaScript to change the colour between white and black dynamically, depending on where it is
Make the middle colour of the background gradient closer to white, and always use dark text
Put the progress outisde the box:
[######### ] 50 %
You could use a text shadow for your "percentage" text. The only downside to this is that it would only work in the latest browsers. Only Firefox 3.5, Safari (all versions), and Chrome 2+ support it.
Here is a demo of using text-shadow in a way that would make your progress readable.
http://www.w3.org/Style/Examples/007/text-shadow#white
If you're willing to use more JavaScript, you could try this jQuery plugin:
http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/
The article says it works in IE only, however it works in Chrome 3 (what I'm using), Firefox 3.5, Internet Explorer, and Safari. It may work in older browsers but I haven't tested it.
Meep3D has the correct answer. Two versions of the box. Reveal n% of the top one.
More options:
Put a translucent box under the
number that either darkens the area
for a white number or lightens the
area for a black number.
Use red and white as backgrounds and
a black number. (Problem here is red
is associated with error, so you can
play with other combinations of three
colors that are all high contrast
against each other.)
You need 2 values styled differently. And fixed width
let counter = 0
const increment = () => {
counter++
}
let interval = setInterval(() => {
increment();
document.querySelectorAll('.value').forEach(node => {
node.textContent = `${counter}`
});
document.querySelector('.progress-bar').style.width = `${counter}%`
if (counter >= 100) clearInterval(interval);
}, 50)
.progress-wrapper{
margin: 20px auto;
width: 400px;
height: 20px;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent);
animation: progress-bar-stripes 2s linear infinite;
background-size: 40px 40px;
position: relative;
border-radius: 5px;
overflow: hidden;
}
.progress-bar{
z-index: 3;
overflow: hidden;
position: absolute;
height: 20px;
background-color: #8178d9;
text-align: center;
transition: width 0.5s ease;
}
.progress-value-1, .progress-value-2{
margin: 0;
position: absolute;
width: 400px;
color: #8178d9;
text-align: center;
z-index: 2;
font-weight: bold;
}
.progress-value-2{
color: #fff;
z-index: 1;
}
#keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
<div class="container">
<div class="progress-wrapper">
<div class="progress-bar">
<p class="progress-value-2">
<span class="value"></span>%
</p>
</div>
<p class="progress-value-1">
<span class="value"></span>%
</p>
</div>
</div>
https://codepen.io/kosachevlad/pen/dypEjBa
This answer with the use of clip-path: inset(0 0 0 50%); is great.
The use of a background linear gradient with a background-clip as described in this answer is also interesting.