 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
uk1simon
Joined: 05 Nov 2008
Posts: 16
|
 Posted: Tue Nov 11, 2008 2:36 am <float> tag |
 |
|
|
Hello,
I can't understand why float interferes with backgound-color in css. This is my code:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="refresh" content="300">
<meta name=description content="">
<meta name=keywords content="">
<meta name=author content="">
<title>Learning html</title>
<style type="text/css">
* {margin: 0
}
body {
font-family: verdana, sans-serif;
font-size: 10pt
}
div {
background-color: red;
padding: 3em;
margin: 3em;
text-align: left
}
ul {
margin: 0;
list-style-type: none;
padding: 0;
background-color: #ffff00
}
li {
float: left
}
</style>
</head>
<div>huasdadaj</div>
<ul>
<li>the first item</li>
<li>the second item</li>
<li>the third item</li>
</ul>
<body>
</body>
</html>
|
And my problem:
Why does li change its color when I'am using float in css. If there's no float there the color is yellow. Do I have to repeat background-color in li element and why is that?
regards,
simon |
|
sticks464
Joined: 31 Dec 2006
Posts: 1284
|
| Posted: Tue Nov 11, 2008 5:54 am |
|
|
|
| Quote: |
uk1simon says:
I can't understand why float interferes with backgound-color in css. |
Floats do not interfere with background color. If you give the ul a set height the li color will appear.
| Code: |
ul {
margin: 0;
list-style-type: none;
padding: 0;
background-color: #ffff00;
height: 26px;
} |
Now you may even style the li differently.
| Code: |
li {
float: left;
padding: 2px 10px;
margin-right: 2px;
background: green;
line-height: 22px;
}
Line height = top and bottom padding (2px+2px=4px) + a number when added will equal the ul height (26px) |
| Code: |
| <div>huasdadaj</div> |
is next to impossible to style correctly. Elements inside a div need their own styles.
So let's give the div a class so the style can be reused on another div and the text inside is given an element tag with it's own style
| Code: |
<div class="one">
<p class="two">huasdadaj</p>
</div> |
Now we change the styles a little to reflect the classes we now have on the html elements
| Code: |
.one {
background-color: red;
padding: 3em;
margin: 3em;
text-align: left
}
.two {
text-transform:uppercase;
text-align:center;
} |
I just happened to see this
in the body style. pt is used for printing not for website font styling. Use em's or percentages http://www.bigbaer.com/css_tutorials/css_font_size.htm |
|
uk1simon
Joined: 05 Nov 2008
Posts: 16
|
| Posted: Tue Nov 11, 2008 7:11 am |
|
|
|
thanks a lot,
i've just read the article and I think i'm clear on em's
the more i read the more i realize i don't know, is it gonna end?
regards,
simon |
|
uk1simon
Joined: 05 Nov 2008
Posts: 16
|
| Posted: Tue Nov 11, 2008 7:28 am |
|
|
|
and one more thing
so float cancels height and if i use display: inline; i don't need to set the height. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1284
|
| Posted: Tue Nov 11, 2008 8:12 am |
|
|
|
Correct, you can do away with height on the ul. Just change float: left on the li to display: inline
| Code: |
ul {
margin: 0;
list-style-type: none;
background-color: #ffff00;
}
li {
display: inline;
padding: 4px 10px;
margin-right: 2px;
background: green;
line-height: 22px;
} |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
