hi wondering if I could get some help with this?
I was using html to create a margin to the left of the page which I have managed to do using a class div,however I can't seem to float a list in it......I don't think there's much wrong with the CSS
hurry{
margin-left: 100px
}
table {
table-align :center;
width: 1000px;
table-layout: fixed;
border-collapse: collapse
}
td { border: 1px solid #3333FF;
text-align:center
}
#aaa{
line-height : 4.5;
font-family: Futura hv;
text-align:center;
background-image: url(Pearflower2.jpg);
background-repeat: repeat
}
#bbb {
border-right-style: medium;
border : solid;
border-width:2px 2px 2px 2px;
text-align:center;
border-color:#FFCCFF;
background-color:#00FFFF;
#navigation{
float:left;
width:7em;
}
Although it might be a little messy.......
and here's the xhtml content
<?xml version="1.0" encoding="UTF-8"?>
<!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>
apples
</title>
<link rel="stylesheet" type="text/css" href="farm.css" />
</head>
<body>
<div class = "hurry">
<div id ="aaa" >
<h1>
Dave's Garden Shop and Nursery
</h1>
</div>
<hr>
</hr>
<table>
<tr>
<td><a href="http://www.pageresoruce.com"> About Us</a></td>
<td><a href="http://www.pageresoruce.com">Garden Guide </a></td>
<td><a href="http://www.pageresoruce.com"> Events</a></td>
<td><a href="http://www.pageresoruce.com"> Links </a> </td>
<td><a href="http://www.pageresoruce.com"> Home</a></td>
</tr>
</table>
<h1>
Dealing with Garden Pest's
</h1>
<div id ="bbb" >
<p>
Is your Garden infested? Tired of battling aphids and other pests? You can find plenty of insects that help you control bad
bugs in your garden,and our garden shop can order them for you .For example,did you know that the Praying Mantis is
one the most useful insects to reside in your garden.
</p>
</div>
</div>
<div id = "navigation">
<ul>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
<li>To learn HTML</li>
<li>To show off</li>
</ul>
</div>
</body>
</html>
I think it might be something to do with the way the id and class are placed together at the top of the html coding...any help would be apreciated....thanks
Full Version: floating in a margin
Hi! 
You have a few errors in your CSS and I think you misunderstand how floats work.
http://jigsaw.w3.org/css-validator/validat...;usermedium=all
Lets start with an error the CSS checker doesn't notice. You've forgotten the dot before the hurry selector.
You have forgotten the closing "}" at the end of the #bbb rule.
As the validator says, there is no property 'table-align'.
See here how to center things: http://www.w3.org/Style/Examples/007/center.html
Lastly, 'medium' isn't a value for border-style.
http://www.w3.org/TR/CSS2/box.html#propdef-border-style
When you've fixed that it still won't work as you want, if I understand you right. To get the list to the left of .hurry it needs to be before .hurry in the HTML. It won't bubble upwards.
You have a few errors in your CSS and I think you misunderstand how floats work.
http://jigsaw.w3.org/css-validator/validat...;usermedium=all
Lets start with an error the CSS checker doesn't notice. You've forgotten the dot before the hurry selector.
You have forgotten the closing "}" at the end of the #bbb rule.
As the validator says, there is no property 'table-align'.
See here how to center things: http://www.w3.org/Style/Examples/007/center.html
Lastly, 'medium' isn't a value for border-style.
http://www.w3.org/TR/CSS2/box.html#propdef-border-style
When you've fixed that it still won't work as you want, if I understand you right. To get the list to the left of .hurry it needs to be before .hurry in the HTML. It won't bubble upwards.
Forgot to say, it's better to use the same unit for the margin and the width of the nav. 7em and 100px can end up being very different widths.
Ok thanks it works now I put the #navigation before the .hurry and the #navigation appears in the margin to the left as I wanted ,so thanks for that ,so simple after all .........
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.