css layout help

I have been trying to convert my site to css for a while now, however i am at the stage where i wonder if it is easier just to leave it down to tables, I normally would not paste the whole lot of css and html but i really am at wits end with this, the idea is to have a liquid roundered corners design, i have got the top 2 corners no probs but problems with the bottom right and no idea at all about the bottom left, anyway i will now paste my code below and if anyone can offer any advice and get me back on the right track that would be great.
Here's the html.

<body>


<div class="nav"> <li>nav here</li>
<li>nav here</li>
<li>nav here</li>
<li> nav here</li>
<li>nav here</li></div>


<div class="Article">
<h2>Article header</h2>

<div class="ArticleBody">
<p> The plan is for this to be the whit area with the content on, i am trying
to get 30 x 30px corner images in the corners, I have managed 3 but cant
get the bottom left, the bottom right is there but hidden by the other div.</p>
<div class="highlight"><p>The plan for this is to give it a yellow background<br />
The text should be red but this only happens in IE.</p>
</div>
<p> In netscape 7.1and opera this div with the white background only goes
down as far as the content within it, it will not take notice of the height
= 100% css.</p>

</div>
<div class="ArticleFooter">
<p> This is the footer which will have just some small text in.</p>
</div>
</div>

</body>

heres the css

body {
background: blue;
font: .85em/1.5 Geneva, Arial, Helvetica, sans-serif; align:center; padding: 0;
margin: top;

}
div.Article {
background: #ffffff
url(images/MAIN/cornertl.gif) top left no-repeat;
/* width:100%;*/
border: 1px solid red;
margin-left: 150px;
margin-top: -5px;
height: 100%;

}

div.Article h2 {
text-align: center;
background: url(images/main/cornertr.gif)
top right no-repeat;
font-size: 1.3em;
padding:5px;
margin:0;
border: 1px solid green;
}
div.ArticleBody {
background:
url(images/main/cornerbr.gif)
bottom right no-repeat;
margin-top:-2em;
margin:0em;
padding:15px;
border: 1px solid brown;
text-align: center;
height:100%;
}
div.ArticleFooter {
background:
url(images/main/cornerbl.gif)
bottom left no-repeat;
border: 1px solid pink;
}
div.ArticleFooter p {
background: #0000ff

bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
border: 1px solid blue;
}

div.nav{
position:absolute; left:5px; top:60px;
text-align: center;
width:150;
border: 1px solid brown;
display: inline;
}
li.nav{
list-style: none;
margin: 0;
font-size: 5.75em;
}

div.highlight{
width:100%;
margin-left:-20px;
margin-right:-20px;
border: 1px solid blue;
background: yellow;
padding: 1px;
}
}
div.highlight p {
padding:1 px;
color: red;
font: 1.65em/ 1.85; geneva;
border:1px solid red;

}

Regards

css layout help

css layout help

meanweaver

createErrorMsg

Eric_Jarvis

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week