homepage Welcome to WebmasterWorld Guest from 23.23.9.5
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
<DIV>s with Tables and CSS
musings and 1.5 questions
ukgimp

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 577 posted 11:08 am on Jan 29, 2003 (gmt 0)

Well I have printed off the CSS courses that Nick has been good to do and I have messed with 100 CSS and Table free formatting. It is not that easy though.

You imaging that you can create it and it will work. Well it does in IE then you consider testing it in opera and netscape. Hmmmmmmmm. Not as good, in fact, cack!

Having read this thread rather coincidently I have found myself looking for real world examples out there. I have found the majority use tables. Well they do work dont then.

[webmasterworld.com...]

So the question:
In a fraction of the time I spent on total <div>s I got a layout I desired using a mixture but how much will I "lose" by using the following 3 <DIV> approach-

----------------------------------------

100% div

----------------------------------------
100% div
----------------------------------------
100% div
========================================
A three column table made up of

MENU Content of page Optional Menu

========================================
----------------------------------------

The left menu can utilise Display BLOCK and CSS button type method with maybe around 10 menu items so code is at a minimum.

Will a day come when it will be easier to be cross broswer compatible and if so HOW LONG? :)

Regards

 

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 577 posted 11:13 am on Jan 29, 2003 (gmt 0)

A three column layout is pretty easy to do cross browser (discounting nn4 of course), what seems to be the trouble?

Nick

ukgimp

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 577 posted 11:25 am on Jan 29, 2003 (gmt 0)

You dont hang around Nick :)

Difficult to try and explain really but....

In opera the second 100% DIV has a strip missing from it at its bottom. It looks like the middle of the 3 virtical divs is not sitting right. The same seems to happen with Netscape 7. As I said it looks how I would want it in IE.

Sounds like I have to read your tutorials a bit more Nick.

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 577 posted 11:27 am on Jan 29, 2003 (gmt 0)

And difficult to understand too ;)

Can you post a stripped down version of the code with the styles in the <head>?

Nick

ukgimp

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 577 posted 11:45 am on Jan 29, 2003 (gmt 0)

OK.

It is only cos you are the forum "Don" that I will post that amount of code. I know I have to convert it to shorthand css but that come come once I get the formatting. Also in this case it is not a 3 column approach only two:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
body { margin-top: 0px;
margin-right: 0px;
margin-left: 0px}
#Top {
left: 0px;
top: 0px;
height: 70px;
width: 100%;
position: absolute;
visibility: visible;
background-color: #FFCCFF;
vertical-align: middle;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding-bottom: 1px;
padding-top: 17px
}

#TopMenu {
position:absolute;
left:0px;
top:70px;
width:100%;
height:30px;
z-index:2;
background-color: #FF99CC;
layer-background-color: #FF99CC;
border: 1px #000000 none;
padding-bottom: 2px; padding-top: 2px;
text-align: center
}

#LeftMenu {
position:absolute;
left:0px;
top:100px;
width:150px;
height:300px;
z-index:3;

}

#LeftMenu p{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #000000
}

#Content {
position:absolute;
left:160px;
top:100px;
width:60%;
height:400px;
z-index:4;
background-color: #FFFFFF;
layer-background-color: #CCCCCC;
border: 1px #000000 none;
padding-top: 10px;
padding-left: 10px
}

#TopMenu a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FFFFFF;
padding-left: 2%;
padding-right: 2%;
font-weight: bold;
align: center
}

#TopMenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FFFF00;
padding-left: 2%;
padding-right: 2%;
font-weight: bold
}

.Mtitle {
width: 100%;
font-size: x-small;
display: block;
padding-left: 1px;
padding-top: .1px;
padding-right: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
color: #000000;
background-color: #FF99FF;
text-decoration: none;
font-weight: bold
}

#LeftMenu a {
width: 100%;
font-size: x-small;
display: block;
padding-left: 1px;
padding-top: .1px;
padding-right: 1px;
padding-bottom: 1px;
border-right: #000000 1px solid;
border-bottom: #000000 1px solid;
border-left: #000000 1px solid;
color: #000000;
text-decoration: none;
}

#LeftMenu a:hover {
background-color: #FFCCFF;
}

#LeftMenu a:visited {
color: #000000;
}

-->
</style>
</head>

<body>
<div id="Top"></div>
<div id="TopMenu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
<div id="LeftMenu">
<font class="Mtitle">Menu</font>
<a href="#">Algebra</a>
<a href="#">Geometry</a>
<a href="#">Topology</a>
<a href="#">Another</a> <br>
</div>
<div id="Content">
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</div>
</body>
</html>

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 577 posted 3:39 pm on Jan 29, 2003 (gmt 0)

ukgimp...Just copied your code to play around (I need to get away from the decorating!)

anyhow first thing I always repeat to myself is I hate IE's Box Model

If you design mainly in IE then this is really something you need to get your head around and remember they've got it wrong and the other browsers have it right...so goodness knows how long we'll have to live with it!

So having that rant out of the way the the first thing that you could take out out of your code is the absolute positioning on your divs, because they are 100% wide their relative(default) position will make them appear where you want and they will not overlap..

If you were to use absolute positioning in this code you would need an IE Box model hack (which IMHO is best avoided for reasons mentioned above!) because borders and padding are the cause of IE's mis-interpretation of the Box Model.

I find it best not to create pixel perfect designs for this reason and also because I feel that this is CSS's best use to get away from the fixed (as opposed to fluid) layouts.

as for sample code for your design: try three 100% wide divs (no positioning) then in the third div float the menu and content divs left to create your two columns...

You needn't lose anything in this design due to using divs instead of tables (in fact you gain because you can add your third column by floating in another one after your content and you could add a footer too)

hope this is some help and is not too much of a rant ;)
Suzy

<edit>spelling!</edit>

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 577 posted 3:42 pm on Jan 29, 2003 (gmt 0)

stripped down! - Sheesh ;) - Well, guess I opened the door....

Thanks for stepping in Suzy, looks like you've got a handle on this one, how's it looking ukgimp?

Nick

ukgimp

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 577 posted 3:51 pm on Jan 29, 2003 (gmt 0)

Suzy

Thanks, I will look into all you suggest especially the Box model bit and the floating aspect.

Sorry Nick :)

I dont have owner rights anymore and the code is not really relavent in light of Suzy's response so can you delete the code for me if you want. It not essential for others to potentially benefit from this post.

Cheers

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