Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

css layout help

css layout help

12:41 am on Sep 20, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 23, 2003
votes: 0

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.

<!-- now the nav div-->

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

<!--end of nav 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>
<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 class="ArticleFooter">
<p> This is the footer which will have just some small text in.</p>


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;
border: 1px solid green;
div.ArticleBody {
bottom right no-repeat;
border: 1px solid brown;
text-align: center;
div.ArticleFooter {
bottom left no-repeat;
border: 1px solid pink;
div.ArticleFooter p {
background: #0000ff

bottom right no-repeat;
margin:-2em 0 0 0;
border: 1px solid blue;

position:absolute; left:5px; top:60px;
text-align: center;
border: 1px solid brown;
display: inline;
list-style: none;
margin: 0;
font-size: 5.75em;

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;



1:03 am on Sept 20, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
votes: 0

Have you read Soren Madsen's article, "Custom Rounded Corners," on ALA? It may not be exactly what you need, but it might help get y our mind thinking in the right direction. Just search "rounded corners" on the ALA home page and it should pop right up.
1:34 am on Sept 20, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 6, 2001
votes: 0

I suggest that if you are going to move to css layout then do a new design that makes the best use of css features rather the rehash a design intended to be done with tables. All you are doing by attempting to recreate the old design is wasting a load of time trying to make style sheets do things they weren't intended to when you could use that time making a better design.