Topic: making this css layout work... Pages that link to <a href="https://ozoneasylum.com/backlink?for=11119" title="Pages that link to Topic: making this css layout work..." rel="nofollow" >Topic: making this css layout work...\
 
Author Thread
jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

 IP logged posted posted 12-16-2003 03:10 Edit Quote

I've decided that its just gotta happen. I'm going to start designing in all css. I have moderate experience and knowledge of it, but now I'm starting to use it for layout and positioning. How do I make this layout work in both ie, and netscape (6)/mozilla?


code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>Basic 3-Column Sample Page</title> 

<meta http-equiv="Content-Type" 

content="text/html; charset=iso-8859-1" /> 

<style type="text/css"> 

<!-- 

body { 

 background-color: teal; 

 margin: 20px; 

 padding: 0; 

 font-size: .7em; 

 font-family: verdana, arial, helvetica, sans-serif; 

} 

h1,h3 { 

 font-family: verdana, arial, helvetica, sans-serif; 

 margin: 0 0 15px 0; 

 padding: 0; 

 color: #888; 

} 

h2 { 

 font-family: verdana, arial, helvetica, sans-serif; 

 margin: 0 0 5px 0; 

 padding: 0; 

 font-size: 1.1em; 

} 

p { 

 font-family: verdana, arial, helvetica, sans-serif; 

 line-height: 1.1em; 

 margin: 0 0 16px 0; 

 padding: 0; 

} 

.content>p { 

 margin: 0; 

} 

.content>p+p { 

 text-indent: 30px; 

} 

a { 

 color: teal; 

 font-family: verdana, arial, helvetica, sans-serif; 

 font-weight: 600; 

 text-decoration: none; 

} 

a:link { 

 color: teal; 

} 

a:visited { 

 color: teal; 

} 

a:hover { 

 background-color: #bbb; 

}



.container {



align: center;

width: 600px;

background-color: red;

border: 1px solid blue;

margin: 10px auto 0px auto;

}



.header { 

 position: relative; 

 width: 600px; 

 min-width: 100px; 

 margin: 0px 0px 0px 0px; 

 border: 1px solid black; 

 background-color: white; 

 padding: 10px; 

 height: 150px;

 z-index: 4; 

} 

.footer { 

 position: relative; 

 width: 600px; 

 min-width: 100px; 

 margin: 0px 0px 0px 0px; 

 border: 1px solid black; 

 background-color: white; 

 padding: 10px; 

 height: 150px;

 z-index: 4; 

} 





 

/* All the content boxes belong to the content class. */ 

.content { 

 position: relative; 

 width: 300; 

 min-width: 100px;

 margin: 0px 175px 0px 0px; 

 border: 1px solid black; 

 background-color: white; 

 padding: 10px; 

 z-index: 3; 

} 



 

#navright { 

 position: absolute; 

 width: 175px; 

 top: 203px; 

 MARGIN-TOP: 3px; 

 MARGIN-LEFT: 425px;

 PADDING-RIGHT: 10px; 

 padding-left:10px;

 border: 1px solid black; 

 background-color: #eee; 

 padding: 10px; 





 

} 

.box {

background-color:white;

border:1px solid black;

width:600px;

height:200px;

margin: 0px 0px 0px 0px;

}



--> 

</style> 

</head> 

<body>

<div class="container">

<div class="header">blah blah<P></div>

 

<div class="content"> 

 <h3>Getting the Lay of the Land</h3> 

 <p>We can look at Cascading Style Sheets (CSS) from a number of 

    contextual perspectives. I prefer to view them as a 

    correction to a fundamental mistake that was made at the 

    beginning of Web Time, back in the old days of the mid-1990's 

    when Tim Berners-Lee and a subsequent phalanx of Web builders 

    first envisioned the beginnings of the Web.</p> 

 <p>What was that mistake?</p> 

</div> 



<div class="content"> 

 <h3>CSS in Context</h3> 

 <p>Almost as soon as the Web became popular, graphic designers 

    began noticing what they saw as a fundamental flaw: the 

    method by which a Web browser displayed information in HTML 

    files was not within the designers' control. No, it was the 

    users who were in primary charge of how the Web pages they 

    visited would appear on their systems.</p> 

</div> 

<div class="content"> 

 <h3>Keep Adding Content</h3> 

 <p>You can see that as you keep adding content to this page, it 

    adds nicely boxed and centered material down the center of 

    the page.</p> 

</div> 



<div id="navright"> 

 <h3>Why CSS is Better</h3> 

 <p>Style sheets allow you to separate content from its 

    presentation, which leads to pages that are more easily 

    reproduced as templates for other pages and to vastly easier 

    maintenance. Smaller file sizes, fewer place-holder graphics, 

    and faster load times are some of the other benefits of CSS.</p> 



 <p>If you have other ideas on this subject, 

    <a href="mailto:dan@danshafer.com">drop me an email</a> and 

    let's talk about it!</p> 

</div>



<div class="footer"></div>

</div>

</body> 





</html>



Please bear with me, I have a feeling I'll be posting alot here





krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

 IP logged posted posted 12-16-2003 03:26 Edit Quote

Looks to me like it works in Firebird.

:::11oh1:::
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 IP logged posted posted 12-16-2003 04:09 Edit Quote

Code is intimidating. Please, give us a *link* to the page.
jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

 IP logged posted posted 12-16-2003 09:53 Edit Quote

oh, sorry slime:

page.

Problem I'm having in netscape/mozilla is that the other div's are lapping over the container div...
JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

 IP logged posted posted 12-16-2003 16:29 Edit Quote

using the header div as an example, it's actual width is 622px and the container is set to 602px. The diference is the 10px of padding to the header, 10 left and 10 right equals 20 more on your width.

the original box model hack page explains your problem well. There's other hacks that give the same result but that page will explain the need for it.

Jason
jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

 IP logged posted posted 12-17-2003 02:02 Edit Quote

thanks JK. I got it working now....

It validates as valid xhtml, but I'm getting a parse error when trying to validate the css. heres my error:

Line: 0
Parse error - Unrecognized : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Basic 3-Column Sample Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { background-color: teal; margin: 20px; padding: 0px; font-size: .7em; font-family: verdana, arial, helvetica, sans-serif; }


validator: http://jigsaw.w3.org/css-validator/validator-uri.html

copy me: http://www.zerooneproductions.net/shaffer.html

I don't understand






JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

 IP logged posted posted 12-17-2003 19:34 Edit Quote

looks fine to me man, those validators can be a bit sketchy sometimes

Jason
jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

 IP logged posted posted 12-17-2003 22:03 Edit Quote

cool deal. thanks man!


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu