I am trying to make a SIMPLE Css percent bar.
OK go to http://htmledit.squarefree.com/
and copy/paste this in it:
<!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>
<style>
#perc {
width:667px;
border:4px solid blue;
}
#perc_in {
width:100%;
padding:3px;
font-size:17pt;
background:red;
margin:3px;
}
</style>
</head>
<body>
<div id="perc"><div id="perc_in">100%</div></div>
</body>
</html>
As you can see the red inside bar is overlapping the blue border... why? :\
By the W3C box model, margins and padding add to the width of a <div>. So instead of 100%, the width becomes more than that, and causes the progress bar to overflow the blue border.
You'll have to change the 3px margin of #perc_in to a 3px padding on #perc, and remove the padding on #perc_in.
Here is the updated code (added by Blaenk):
#perc {
width:667px;
border:4px solid blue;
padding:3px;
}
#perc_in {
width:100%;
font-size:17pt;
background:red;
}
The reason is: W3C box model. It says that final width of an element is a sum of width and padding properties. So if you declare that element suppose to have width: 100% (to be exact: 667 pixels in this case) and also declare that element should have 3-pixel padding from left and right (total: 6 px) the final width of the element is: 667 + 3 + 3 = 673 pixels.
Related
Can it be done - crossbrowser (IE9, Mozilla, Chrome, Opera) ?
In this snippet .box border is affected by zoom property. Can this be avoided ?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box {
zoom: 3;
-moz-transform: scale(3); /* FF fix */
border: 1px dotted black;
padding:10px;
}
</style>
</head>
<body>
<div class="box">content</div>
</body>
</html>
I'm not really sure what you expect here. If you apply the zoom property to any element, then all of it's measurements will be transformed by 1/x. Away your example, the best way to do this would be to divide the intended measurements by the value of your zoom. In your example, if you wanted to keep padding at 10px (or thereabouts), you'd use padding:3px instead.
However, because your issue is with the border property and specifically, having set 1px as the value, you can't divide this by your zoom value. Instead, you're going to have to wrap HTML around it:
<div class="border">
<div class="box"></div>
</div>
And move your border styling from .box to .border
Working Fiddle
Consider this simple example.
HTML
<div>
Some link here
<div>a div here</div>
Another link
<br/>
And one more!
</div>
CSS
div > a, div > div {
color: white;
line-height: 1.6;
height: 30px;
text-align: center;
width: 150px;
}
div > a {
border: 1px solid black;
display: inline-block;
text-decoration: none;
}
div > a:first-child {
background-color: red;
margin-bottom: -8px;
}
div > div + a {
background-color: green;
margin-bottom: -8px;
}
div > br + a {
background-color: blue;
}
div > div {
background-color:black;
border: 1px solid gray:
margin-bottom:-8px;
}
Fiddle here http://jsfiddle.net/rHupy/2/
This issue relates to latest Chrome and Firefox.
I've lost my whole afternoon yesterday fiddling with this. Basically, in this example the negative bottom margin acts very strangely. If you use the negative margin on the red A tag, it will draw in the DIV tag, but up to 8px. If you go below -8px (a more negative value, that is) the DIV tag stays put, it's not drawn more into the red A tag.
Applying the margin to the DIV tag works as expected, that is you can make the green A tag completely cover the DIV tag with -25px.
I'm quite certain this is related to the inline-block display style, because if I apply the block display style to all tags and omit the BR tags this problem is circumvented, but more arise. Example here http://jsfiddle.net/rHupy/3/
I have also tried combining the block display style with float left style, but that gave me more problems; some elements would just collapse, instead of aligning one to another.
My question is: why is the negative margin applied on A tag with inline-block display style set "limited" to some value?
OK, I played some more with it and here are the results.
The initial doctype produced this.
HTML
<!DOCTYPE html>
Changing the doctype gives entirely different results, with exactly the same CSS and HTML.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Here's the final HTML
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
div > a {
background-color:green;
border:1px solid red;
display:inline-block;
height:20px;
margin-bottom:-15px;
margin-right:11px;
width:23px;
}
div > a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + br + a {
margin-left:17px;
}
</style>
</head>
<body>
<div>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
Lets say that this solves my problem, even though I don't understand all the consequences of making this change.
I've been scratching my head over this for the last few hours. I'm trying to make an input field that stays put at the bottom of the page, similar to the Omegle chat bar.
I've set my height to 100% (well, 99, because if it's set to 100 the page has unnecessary scroll bars) and set the CSS bottom property to 0, but no matter what I try, the bar stays floating around 10% down the page.
My CSS code is:
html {
height:99%;
width:99%;
}
input.chatbar {
bottom:0;
width:90%;
height:5%;
outline:none;
resize: none;
border:none;
border-bottom:#000 medium solid !important;
}
and my HTML code is
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Global Chat</title>
</head>
<body>
<input class="chatbar" />
</body>
</html>
and here is a JSFiddle of it.
I want it to float above the page and scroll with the user, like the Omegle bar. How would I do this?
Sorry, I know this is a basic question, but I can't find the answer anywhere else.
Add position: fixed; to the css
Also be careful about the percent heights. Check out min and max height properties
I'm not so good at CSS design, but I'm just working on a content display layout for a website.
I basically wanna make a thin line by putting an image inside a container div. and set all dimension properties as below.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
#thinLineWrap{
width: 510px;
height: 3px;
background-color: #000000;
}
#thinLineWrap img{
width: 170px;
height: 3px;
background-color: #000000;
margin-top: 0px;
float:left
}
</style>
</head>
<body>
<div id="thinLineWrap">
<img src="images/thin_line.gif" border="0">
</div>
</body>
</html>
But when viewing the output in Chrome inspect, the output result couldn't seem to have the specified sizes as expected, as illustrated in the snapshot below.
You might also notice that my image width and height became 171px and 4px respectively, unlike what it was set in the stylesheet section.
Any possible mistake I might have done? Why did the image element become 1 pixel bigger than it should be?
any advice would be very appreciated.
EDIT:
A copy of the original problematic thin line image is here. Not sure if there could be anything wrong with the image itself.
https://lh5.googleusercontent.com/-kDRsR493dZU/UMOXRBbty9I/AAAAAAAAAh8/g58GnqQZ3pk/s128/thin_line.gif
You defined an Img within the #thinlinewrap to have the properties.
div#thinLineWrap{
border:0px;
}
#thinlineWrap img{
height:3px;
}
Might be the code you are looking for.
i found it out.you'r img inherited it's border from another style ,try overriding it like this :
#thinLineWrap img{
border:none;
width: 170px;
height: 3px;
background-color: #000000;
margin-top: 0px;
float:left
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<style type="text/css">
.class1{
border:10px solid #000000;
padding:5px;
border-radius:12px;
opacity: 0.1;
}
.class2{
border:10px solid #000000;
padding:5px;
border-radius:12px;
opacity: 100px !important;
}
</style>
</head>
<body>
<div class="class1">
nghi
<div class="class2">
nghi2
</div>
</body>
</html>
In html file. I have 2 div. I want only opacity class1 not opacity div 2. I has use important property for div2 but it not effect. please help me take it thanks
opacity: 100px !important;
Should be:
opacity: 100%;
or:
opacity: 1;
Also, you're missing a closing div tag. Did you mean for the divs to be separate, or one inside the other?
as far as i know, you can't set opacity on a parent div and then set a different opacity (making it more opaque) on the child div
Beside the syntactical error with the px and the fact that opacity goes from 0 to 1 (and not 100), If the .div2 element is contained inside .div1 then you cannot do it..
The way your code is right now, where you only close one of the two divs it gets interpreted as the second div being inside the first one.
You might want to clarify/corerct this (to make it valid as well)
You are missing the closing Tag in the first DIV. When you fix it, should it for sure work.