homepage Welcome to WebmasterWorld Guest from 54.166.66.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css layout help
css layout help
meanweaver




msg:1183676
 12:41 am on Sep 20, 2004 (gmt 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.

<body>
<!-- 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>
</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

 

createErrorMsg




msg:1183677
 1:03 am on Sep 20, 2004 (gmt 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.

Eric_Jarvis




msg:1183678
 1:34 am on Sep 20, 2004 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved