...

View Full Version : tabless design probs using div/css, help pls?



thepcnerd
10-02-2006, 05:02 PM
tabless design probs using div/css, help pls?

k my first prob is in ie the main table dubbed "table" will not center, however when using the 'margin: auto;' it centers, in firefox the border will not contain the "center" and "right" div's also when lots of text are added into "center" and "right" it will cause the "center" and "right" to go out of bounds on the "table" <--- the wrapper "main table"... i believe i have the correct dtd's above

the exaple is posted at www.silvermushroom.com

mark87
10-02-2006, 05:34 PM
You need a full doctype in there... You also don't have a closing </head>; add that and see what changes. :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

thepcnerd
10-02-2006, 06:58 PM
heres what i have so far...



<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01

Transitional//EN">
<html>
<head>
<title>example</title>

<style type="text/css">

body {background-color: #000000;

color: #FFFFFF;
margin: 0;
padding: 0;
height: 100%;}

#table {position: relative;
width: 752;
margin: auto;
border: 1px solid #FFFFFF;}

#content {position: absolute;
width: 600px;
min-hight: 100%;
border: 0px solid

#FFFFFF;}

#right {position: absolute;
width: 150px;
min-hight: 100%;
left: 602px;
border: 0px solid #FFFFFF;}

</style>

</head>

<body>

<div id="table">

<div id="content">111 11 11 1 11 11

1111 11 11 1 11 11 1111 11 11 1 11

11 1111 11 11 1 11 11 1111 11 11 1

11 11 1111 11 11 1 11 11 1111 11 11

1 11 11 1111 11 11 1 11 11 1111 11

11 1 11 11 1111 11 11 1 11 11 1111

11 11 1 11 11 1
</div>
<div id="right">111 11 11 1 11 11

1111 11 11 1 11 11 1111 11 11 1 11

11 1111 11 11 1 11 11 1111 11 11 1

11 11 1111 11 11 1 11 11 1111 11 11

1 11 11 1111 11 11 1 11 11 1111 11

11 1 11 11 1111 11 11 1 11 11 1111

11 11 1 11 11 1</div></div>

</body>

</html>

dont know what im doing wrong cant figure out wich dtd is the correct one

_Aerospace_Eng_
10-02-2006, 07:03 PM
You didn't read Mark's post carefully. You need a FULL valid doctype for margin:auto; to even work in IE. Valid CSS goes along way as well. Check your spelling.

thepcnerd
10-02-2006, 07:10 PM
i did read and as i said im not sure wich dtd (document type) to use, if u can pls help as i dont understand the difference between all the styles there are

mark87
10-02-2006, 07:16 PM
You need the full doctype (with the url in), which I posted above. Also, as Aerospace_Eng said, check your spelling (min-height).

thepcnerd
10-02-2006, 07:28 PM
sry im new to this stuff dont mean to be a noob



<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"

>
<html>
<head>
<title>example</title>

<style type="text/css">

body {background-color: #00008b;

color: #FFFFFF;
margin: 0;
padding: 0;
height: 100%;}

#table {position: relative;
width: 752;
min-height: 100%;
margin: auto;
border: 1px solid #FFFFFF;}

#content {position: absolute;
width: 600px;
min-height: 100%;
border: 0px solid

#FFFFFF;}

#right {position: absolute;
width: 150px;
min-height: 100%;
left: 602px;
border: 0px solid #FFFFFF;}

</style>

</head>

<body>

<div id="table">

<div id="content">111 11 11 1 11 11

1111 11 11 1 11 11 1111 11 11 1 11

11 1111 11 11 1 11 11 1111 11 11 1

11 11 1111 11 11 1 11 11 1111 11 11

1 11 11 1111 11 11 1 11 11 1111 11

11 1 11 11 1111 11 11 1 11 11 1111

11 11 1 11 11 1
</div>
<div id="right">111 11 11 1 11 11

1111 11 11 1 11 11 1111 11 11 1 11

11 1111 11 11 1 11 11 1111 11 11 1

11 11 1111 11 11 1 11 11 1111 11 11

1 11 11 1111 11 11 1 11 11 1111 11

11 1 11 11 1111 11 11 1 11 11 1111

11 11 1 11 11 1</div></div>

</body>

</html>

is what i have i corrected the height speling erros still i cannot get the main table border to appear correctly

_Aerospace_Eng_
10-02-2006, 07:33 PM
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
background-color: #000000;
color: #FFFFFF;
margin: 0;
padding: 0;
height: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
}

#table {
position: relative;
width: 752px;
margin: auto;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
min-height:100%;
}
* html #table {
height:100%;
}
#content {
width: 100%;
float: left;
margin-right:-150px;
}
#main {
margin-right:150px;
}
#right {
width:150px;
float:right;
}
p {
margin:0;
padding:10px;
text-align:justify;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>
</head>
<body>
<div id="table">
<div id="content">
<div id="main">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus lorem, vestibulum lobortis, condimentum a, pulvinar id, nisl. Vivamus a purus. Suspendisse pede neque, viverra ut, interdum quis, faucibus a, lacus. Proin ut lacus. Cras laoreet gravida nisi. Donec in turpis. Integer enim justo, placerat nec, adipiscing ac, facilisis a, felis. Aenean blandit fermentum pede. Cras nec turpis. Maecenas non ipsum quis massa imperdiet varius. Suspendisse non ligula aliquet nisi condimentum sagittis. </p>
<p> Nullam mattis dictum turpis. Aliquam congue pellentesque erat. Sed enim ipsum, tristique eu, scelerisque eu, fermentum eget, mi. Ut sollicitudin commodo erat. Praesent sapien nunc, feugiat at, malesuada ac, convallis in, metus. Ut ac sem. Morbi vitae enim. Aliquam fringilla, sem eget aliquam viverra, magna mauris consequat orci, eget placerat nisl erat sit amet arcu. Sed at nulla. Ut vehicula. Pellentesque sit amet orci. Aenean neque sapien, pharetra ac, tempor ut, rhoncus sed, nisl. Proin vestibulum metus nec tortor. Maecenas condimentum tincidunt erat. Mauris id nisl. Donec ipsum lectus, cursus in, euismod nec, scelerisque ut, sapien. Maecenas vel nisl nec diam tempus semper. Aliquam molestie, velit eu iaculis dapibus, magna nisi consequat quam, faucibus iaculis lorem nisi id enim. Nam rutrum euismod purus. </p>
<p> Mauris et metus. Sed placerat felis nec diam. Donec porttitor. Mauris faucibus. Cras elementum turpis sagittis diam. Aliquam nibh metus, vehicula in, adipiscing eu, sodales a, libero. Pellentesque ante pede, iaculis sit amet, porta ut, scelerisque sed, urna. Pellentesque tellus. Nunc nisi. Fusce volutpat lacinia lectus. Quisque tempor, neque ut nonummy cursus, tortor ante pellentesque mi, in lacinia turpis augue quis sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div>
</div>
<div id="right">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus lorem, vestibulum lobortis, condimentum a, pulvinar id, nisl. Vivamus a purus. Suspendisse pede neque, viverra ut, interdum quis, faucibus a, lacus. Proin ut lacus. Cras laoreet gravida nisi. Donec in turpis. Integer enim justo, placerat nec, adipiscing ac, facilisis a, felis. Aenean blandit fermentum pede. Cras nec turpis. Maecenas non ipsum quis massa imperdiet varius. Suspendisse non ligula aliquet nisi condimentum sagittis. </p>
</div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>

For min-height:100% to work the html element needs to have a height of 100% as well and min-height in percentages will only be applied to the first element in the body.

thepcnerd
10-02-2006, 07:44 PM
thanks

i didnt think about just stating left and right borders looks much better anyhows then having all 4 sides...

also

what exactrly do these guys do

* html #table {
height:100%;
}

.clear {
clear:both;
font-size:0;
line-height:0px;
}

just so i can understand for feature reference

_Aerospace_Eng_
10-02-2006, 07:52 PM
IE6 doesn't support min-height but it does treat height the same as min-height. IE7 will not see that part of the CSS if and ONLY IF you use a full valid doctype. That clear thing is there because once you use floats you need to clear your floats or the containing element won't fit to the floats because they are taken out of flow. I repeat for the * html thing to be ignored by IE7 you MUST use a FULL valid doctype.

thepcnerd
10-02-2006, 08:39 PM
whats the differences betweek html 4.0 and xml, xhtml and all teh other tpyes of dtd's (doctypes

_Aerospace_Eng_
10-02-2006, 08:41 PM
http://www.w3schools.com/xhtml/xhtml_html.asp
http://webdesign.about.com/cs/xhtmlxml/a/aa013100a.htm
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml
http://kurafire.net/log/archive/2005/04/20/difference-between-html-and-xhtml



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum