I'm desperately trying to get rid of the tables in my layout, but I'm not able to reproduce my (table based) layout.
I tried to use nested, absolute positioned divs. The main section is problematic.The top of the main section should be a title. The rest of the sections should be divided into 2 colums (main_left and main_right). The 2 columns should be in a box with a yellow border.
The result in ie6 are awfull, but that's not my first concern.
In Firefox, the title is positioned below the 2 colums, it should be positioned above them. The 2 columns have no yellow border.
Any help would be much appreciated.
my code :
<html>
<head>
<title>testpage for css</title>
<style>
div
{
border-style:solid;
}
#top_left
{
position: absolute;
left: 0;
top: 0;
width:20%;
height:15%;
}
#top
{
text-align:center;
position: absolute;
left:20%;
right:0;
top:0;
height:15%;
}
#left
{
position: absolute;
top: 20%;
left: 0;
height: auto;
width:20%;
}
#main
{
position: absolute;
top:15%;
left:20%;
right: 0;
width: auto;
height: auto;
}
#main_left
{
position: absolute;
top:0;
left:0
right:auto;
width: 45%;
height: auto;
}
#main_right
{
position: absolute;
top:0;
left:auto;
right: 0;
width: 50%;
height: auto;
}
</style>
</head>
<body>
<div id="main">
<h1>title</h1>
<div style="border-color:yellow;">
<div id="main_left" style="background-color:red;">
main_left
</div>
<div id="main_right">
<div style="background-color: green;">
bla
</div>
<div style="background-color: green; ">
blabla
</div>
</div>
</div>
</div>
<div id="top_left" >
topleft
</div>
<div id="top">
top
</div>
<div id="left">
left
</div>
</body>
</html>Can you provide a link to the table-based page or provide some other indication of how this page is supposed to look? I strongly suspect you don't need as many divs as you have, and that you probably don't need near as much absolute positioning (or even any), but it's hard to tell without understanding what you are trying to accomplish.Thanks already for the interest.
Here is the link:
<!-- m --><a class="postlink" href="http://luak.studentenweb.org/luakwebsite/index.php">http://luak.studentenweb.org/luakwebsite/index.php</a><!-- m -->
It's the (dutch) website of the alpine club of the university of Leuven.Have you thought about using relative positioning and floating the columns?
You can still have the full title in a different division, and the two columns floated within a box, by use of a wrapper.
Absolute positioning can get a little funky in the different browsers...
And you would probably want to float the navigation column as well..
You can nest two columns in one much like...
#wrapper { float: left; position: relative; display: inline; width: 90%; margin: 0px 5% 0px 5%; padding: 0px; background-color: #fff; border: 1px solid #66C; }
#left-column { float: left; position: relative; display: inline; width: 23%; margin: 0px 1% 0px 1%; padding: 0; border: 1px solid #999; }
#middle-column { float: left; position: relative; display: inline; width: 46%; margin: 0px 1% 0px 1%; padding: 0; border: 1px solid #999; }
#right-column { float: left; position: relative; display: inline; width: 23%; margin: 0px 1% 0px 1%; padding: 0; border: 1px solid #999; }
That is from an example that I wrote a while back found here:
<!-- m --><a class="postlink" href="http://www.mayapdesigns.com/samples/nested-example.htm">http://www.mayapdesigns.com/samples/nested-example.htm</a><!-- m -->
Let me know if you need help with that one.Here is what I came up with, not an exact reproduction but the same general look:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>LUAK - Leuvense Universitaire Alpinisten Klub</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 5px;
background-color: #369;
color: black;
font: medium verdana, sans-serif;
}
#container {
margin: 0 auto;
width: 910px;
}
#left {
float: left;
margin: 0;
padding: 0 5px 0 0;
width: 201px;
font-size: small;
}
#left img {
display: block;
border: none;
margin: 0;
padding: 0;
}
#left ul {
list-style: square;
}
#left ul a {
color: #ff3;
text-decoration: none;
}
#left ul a:hover {
color: #cc6;
text-decoration: underline;
}
#main {
float: left;
width: 694px;
margin: 0;
padding: 110px 5px 5px 5px;
background: #ffc url("http://luak.studentenweb.org/luakwebsite/images/Image1.jpg")
no-repeat 50% 0;
line-height: 1.2em;
}
h1 {
font-size: large;
line-height: 2em;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
margin: 0 0 10px 0;
padding: 10px 0;
color: #039;
}
h1 span {
font-size: x-large;
}
#text {
float: right;
width: 370px;
margin: 0 0 10px 0;
padding: 5px 10px;
background-color: #efefad;
}
.sig {
text-align: right;
margin-bottom: 1.5em;
}
#email {
clear: both;
text-align: right;
font-size: small;
margin: 10px 0 0 0;
padding: 5px 0 0 0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://luak.studentenweb.org/luakwebsite/images/luaklogo.jpg" alt="LUAK"
width="201" height="100">
<p>Klik
<a style="color
range; text-decoration: none;" href=http://www.webdeveloper.com/forum/archive/index.php/"/luakwebsite/login_form.php">hier</a>
om in te loggen.</p>
<ul type="square">
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/index.php' >Home</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/wieZijnWe/wieZijnWe.php' >Info</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/yosemite/yosemite.php' >Initiatieven</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/fotos/fotos.php' >Fotopagina</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/calendar.php' >Kalender</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/forum' >Forum</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/materiaal/boeken/boekenLijst.php' >Materiaal</a></li>
</ul>
</div> <!-- left -->
<div id="main">
<h1>Welkom op de website van<br>
<span>de Leuvense Universitaire Alpinisten Klub</span></h1>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://luak.studentenweb.org/luakwebsite/images/openingsPagina/index.jpg"
alt="photo of members" width="300" style="float: left">
<div id="text">
<p>De intiantenavond voor nieuwe leden gaat door op 29 september om 22.00. Hier
krijg je alle info over onze klub en kan je jezelf lid maken. De data voor
initiaties en andere activiteiten vind je in onze kalender. Elke zondag om half
tien aan de spuye om te carpoolen naar de rotsen!</p>
<p class="sig">Hendrik (voorzitter)</p>
<p>Een louche foto van 4 barbaren in Bernina en een nieuwe poll cadeau.</p>
<p class="sig">Tim (webmaster)</p>
</div> <!-- text -->
<p id="email">Opmerkingen over de website?
<a class="mail" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto: Tim Morlion<[email protected]>">Mail</a>
gerust.</p>
</div> <!-- main -->
</div> <!-- container -->
</body>
</html>@Rockhound,
Your example has been a great help. Indeed, no absolute positioning is necessary. The only thing I noticed is that ie6 does not listen to the height of the relative positioned divs.
Anyway, thanks a lot.
Timyeh.. IE is not the best when it comes to CSS..
The height thing is one of my biggest problems especially when floating columns, the wrapper seems to take care of the whitespace, and make the design look a bit more uniform but the columns as you saw in my example display at different heights.
I tried to use nested, absolute positioned divs. The main section is problematic.The top of the main section should be a title. The rest of the sections should be divided into 2 colums (main_left and main_right). The 2 columns should be in a box with a yellow border.
The result in ie6 are awfull, but that's not my first concern.
In Firefox, the title is positioned below the 2 colums, it should be positioned above them. The 2 columns have no yellow border.
Any help would be much appreciated.
my code :
<html>
<head>
<title>testpage for css</title>
<style>
div
{
border-style:solid;
}
#top_left
{
position: absolute;
left: 0;
top: 0;
width:20%;
height:15%;
}
#top
{
text-align:center;
position: absolute;
left:20%;
right:0;
top:0;
height:15%;
}
#left
{
position: absolute;
top: 20%;
left: 0;
height: auto;
width:20%;
}
#main
{
position: absolute;
top:15%;
left:20%;
right: 0;
width: auto;
height: auto;
}
#main_left
{
position: absolute;
top:0;
left:0
right:auto;
width: 45%;
height: auto;
}
#main_right
{
position: absolute;
top:0;
left:auto;
right: 0;
width: 50%;
height: auto;
}
</style>
</head>
<body>
<div id="main">
<h1>title</h1>
<div style="border-color:yellow;">
<div id="main_left" style="background-color:red;">
main_left
</div>
<div id="main_right">
<div style="background-color: green;">
bla
</div>
<div style="background-color: green; ">
blabla
</div>
</div>
</div>
</div>
<div id="top_left" >
topleft
</div>
<div id="top">
top
</div>
<div id="left">
left
</div>
</body>
</html>Can you provide a link to the table-based page or provide some other indication of how this page is supposed to look? I strongly suspect you don't need as many divs as you have, and that you probably don't need near as much absolute positioning (or even any), but it's hard to tell without understanding what you are trying to accomplish.Thanks already for the interest.
Here is the link:
<!-- m --><a class="postlink" href="http://luak.studentenweb.org/luakwebsite/index.php">http://luak.studentenweb.org/luakwebsite/index.php</a><!-- m -->
It's the (dutch) website of the alpine club of the university of Leuven.Have you thought about using relative positioning and floating the columns?
You can still have the full title in a different division, and the two columns floated within a box, by use of a wrapper.
Absolute positioning can get a little funky in the different browsers...
And you would probably want to float the navigation column as well..
You can nest two columns in one much like...
#wrapper { float: left; position: relative; display: inline; width: 90%; margin: 0px 5% 0px 5%; padding: 0px; background-color: #fff; border: 1px solid #66C; }
#left-column { float: left; position: relative; display: inline; width: 23%; margin: 0px 1% 0px 1%; padding: 0; border: 1px solid #999; }
#middle-column { float: left; position: relative; display: inline; width: 46%; margin: 0px 1% 0px 1%; padding: 0; border: 1px solid #999; }
#right-column { float: left; position: relative; display: inline; width: 23%; margin: 0px 1% 0px 1%; padding: 0; border: 1px solid #999; }
That is from an example that I wrote a while back found here:
<!-- m --><a class="postlink" href="http://www.mayapdesigns.com/samples/nested-example.htm">http://www.mayapdesigns.com/samples/nested-example.htm</a><!-- m -->
Let me know if you need help with that one.Here is what I came up with, not an exact reproduction but the same general look:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>LUAK - Leuvense Universitaire Alpinisten Klub</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 5px;
background-color: #369;
color: black;
font: medium verdana, sans-serif;
}
#container {
margin: 0 auto;
width: 910px;
}
#left {
float: left;
margin: 0;
padding: 0 5px 0 0;
width: 201px;
font-size: small;
}
#left img {
display: block;
border: none;
margin: 0;
padding: 0;
}
#left ul {
list-style: square;
}
#left ul a {
color: #ff3;
text-decoration: none;
}
#left ul a:hover {
color: #cc6;
text-decoration: underline;
}
#main {
float: left;
width: 694px;
margin: 0;
padding: 110px 5px 5px 5px;
background: #ffc url("http://luak.studentenweb.org/luakwebsite/images/Image1.jpg")
no-repeat 50% 0;
line-height: 1.2em;
}
h1 {
font-size: large;
line-height: 2em;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
margin: 0 0 10px 0;
padding: 10px 0;
color: #039;
}
h1 span {
font-size: x-large;
}
#text {
float: right;
width: 370px;
margin: 0 0 10px 0;
padding: 5px 10px;
background-color: #efefad;
}
.sig {
text-align: right;
margin-bottom: 1.5em;
}
#email {
clear: both;
text-align: right;
font-size: small;
margin: 10px 0 0 0;
padding: 5px 0 0 0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://luak.studentenweb.org/luakwebsite/images/luaklogo.jpg" alt="LUAK"
width="201" height="100">
<p>Klik
<a style="color
range; text-decoration: none;" href=http://www.webdeveloper.com/forum/archive/index.php/"/luakwebsite/login_form.php">hier</a>om in te loggen.</p>
<ul type="square">
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/index.php' >Home</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/wieZijnWe/wieZijnWe.php' >Info</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/yosemite/yosemite.php' >Initiatieven</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/fotos/fotos.php' >Fotopagina</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/calendar.php' >Kalender</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/forum' >Forum</a></li>
<li><a class="side" href='http://www.webdeveloper.com/luakwebsite/materiaal/boeken/boekenLijst.php' >Materiaal</a></li>
</ul>
</div> <!-- left -->
<div id="main">
<h1>Welkom op de website van<br>
<span>de Leuvense Universitaire Alpinisten Klub</span></h1>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://luak.studentenweb.org/luakwebsite/images/openingsPagina/index.jpg"
alt="photo of members" width="300" style="float: left">
<div id="text">
<p>De intiantenavond voor nieuwe leden gaat door op 29 september om 22.00. Hier
krijg je alle info over onze klub en kan je jezelf lid maken. De data voor
initiaties en andere activiteiten vind je in onze kalender. Elke zondag om half
tien aan de spuye om te carpoolen naar de rotsen!</p>
<p class="sig">Hendrik (voorzitter)</p>
<p>Een louche foto van 4 barbaren in Bernina en een nieuwe poll cadeau.</p>
<p class="sig">Tim (webmaster)</p>
</div> <!-- text -->
<p id="email">Opmerkingen over de website?
<a class="mail" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto: Tim Morlion<[email protected]>">Mail</a>
gerust.</p>
</div> <!-- main -->
</div> <!-- container -->
</body>
</html>@Rockhound,
Your example has been a great help. Indeed, no absolute positioning is necessary. The only thing I noticed is that ie6 does not listen to the height of the relative positioned divs.
Anyway, thanks a lot.
Timyeh.. IE is not the best when it comes to CSS..
The height thing is one of my biggest problems especially when floating columns, the wrapper seems to take care of the whitespace, and make the design look a bit more uniform but the columns as you saw in my example display at different heights.