So simple with tables, but can i do it with css? [Archive]

View Full Version : So simple with tables, but can i do it with css?

cb2004

03-19-2007, 05:43 PM

I am just getting back into tableless design after learning some and then going back to the tabled design. Simply as I found it easier.

Can this be done with css? Is having 1 table so bad?

http://www.majesticit.co.uk/tabled.html

Basically if anything in the left, middle or right pushes everything down then the left bit stays how it should. Any ideas people?

Excavator

03-19-2007, 06:01 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
height: 392px;
margin: 20px;
background-image: url(left.jpg);
background-repeat: no-repeat;
background-position: left top;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>

cb2004

03-19-2007, 06:18 PM

No thats not what I am looking for.

Its a 3 column layout with a background image at the bottom of the left column. The column then contains a background color so if any column gets pushed down the left column is still full of color.

_Aerospace_Eng_

03-19-2007, 06:42 PM

Its not that hard. It just requires a 1px high background image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
}
#left {
width:198px;
float:left;
margin:0;
padding:0 0 352px 0;
list-style:none;
position:relative;
}
#right {
width:207px;
float:right;
}
#left a {
background:#7ABFE9;
display:block;
width:100%;
text-indent:5px;
margin:3px 0;
border-top:1px solid #FFF;
border-bottom:1px solid #FFF;
text-decoration:none;
color:#FFF;
padding:3px 0;
}
#left a:hover {
background:#6DBAE6;
border-color:#CCC;
color:#EEE;
}
#container {
min-height:100%;
position:relative;
background:#FFF url(bg.gif) repeat-y;
}
#container p {
margin:0;
padding:10px;
}
#content {
margin-right:207px;
}
#main {
margin-left:198px;
}
#bottom {
position:absolute;
bottom:0;
z-index:0;
left:0;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>

</head>
<body>
<div id="container">
<ul id="left">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
<div id="main">
<div id="right">right column</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sem turpis, convallis id, commodo vestibulum, porttitor eu, nisl. Nunc vehicula lorem. Quisque et urna. Duis dui odio, pellentesque a, faucibus sed, suscipit sit amet, libero. In posuere, magna non dictum pharetra, leo leo molestie metus, in pretium nisl libero et nisi. Aliquam erat volutpat. Sed rutrum dui eget tellus. Donec ut libero. Sed orci enim, commodo porttitor, dictum nec, semper id, purus. Sed at dolor. Sed at nibh. Duis egestas velit rutrum ante. Donec ac nisi. Vivamus quam leo, luctus sit amet, condimentum ut, mattis elementum, tortor. Phasellus fringilla, justo at rhoncus fermentum, nisi eros viverra turpis, ac sollicitudin diam elit non dui. Proin egestas libero a dolor. Duis sagittis sapien eget odio. Integer nonummy orci in leo. Suspendisse potenti. Etiam at quam eu pede feugiat faucibus.</p>
<p>Maecenas quis magna in lacus vulputate faucibus. Phasellus sem. Phasellus sodales feugiat orci. Etiam ullamcorper pede a velit. Integer vel urna. Duis quis diam. Praesent luctus vehicula turpis. Sed porttitor, dui ac commodo sodales, leo nibh auctor dolor, lacinia porttitor pede nibh sed dolor. Pellentesque in orci. In sed libero et sem semper vestibulum. Sed eu diam. Vivamus at massa eu felis sollicitudin molestie. Aenean tristique dolor nec purus. Phasellus tincidunt. Mauris vestibulum feugiat ligula. Maecenas ut nisi. Donec accumsan rutrum erat.</p>
<p>Sed porttitor, massa sit amet euismod aliquet, tortor diam vehicula justo, a sodales nulla tellus vitae mi. Pellentesque ultrices purus nec risus commodo interdum. Cras non ante non mi feugiat mattis. Duis tempus accumsan massa. Curabitur volutpat, felis ut pulvinar mollis, sapien nisi auctor purus, id dignissim ligula urna in magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac tortor. Duis libero turpis, hendrerit at, pretium quis, imperdiet in, lorem. Suspendisse libero nulla, dapibus ac, aliquam ac, mollis non, eros. Suspendisse sem metus, sollicitudin vitae, bibendum in, tincidunt ac, tortor. Proin sit amet elit fringilla libero eleifend malesuada. Aenean mollis rhoncus orci. Morbi nec neque. Etiam mattis, nisi sed tempor posuere, sem justo bibendum metus, a auctor ipsum libero id magna. Aenean eleifend, justo ac dictum vestibulum, felis ipsum congue urna, quis dictum turpis mi sit amet neque. Nulla facilisi. Sed fringilla, nisi ut pulvinar tincidunt, orci eros commodo est, ac blandit augue sapien et nibh. In varius. Fusce tempus pede.</p>
<p>Nulla facilisi. Pellentesque non odio nec augue elementum convallis. Etiam id nunc. Nullam rhoncus eros vitae lorem. Nunc et nulla nec dui placerat tristique. Morbi leo orci, vehicula nec, viverra in, euismod tincidunt, lacus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi leo metus, vehicula eu, dictum nec, fringilla at, nisi. In hac habitasse platea dictumst.</p>
<p>Donec ultricies iaculis elit. Etiam aliquam velit eget lorem. Nulla lacinia, nibh non porta viverra, leo ipsum placerat elit, consequat ultrices ipsum orci et risus. Aliquam dapibus. Donec lectus metus, aliquet sit amet, imperdiet quis, varius sit amet, leo. Praesent pellentesque aliquet mauris. Nunc odio. Proin pulvinar lorem eget enim. Vestibulum eros. Aliquam id tellus. Duis sit amet eros. Nulla non magna quis sem malesuada sollicitudin. In id enim iaculis justo ullamcorper adipiscing. Sed scelerisque erat ut enim. Ut non pede ut purus pretium interdum. Fusce ac velit nec diam tempus volutpat.</p>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
<img src="left.jpg" alt="" id="bottom" /> </div>
</body>
</html>

cb2004

03-20-2007, 12:16 AM

Ok will give this a whirl in the morning.

It may not be hard but its a lot more code in CSS for the desired effect with tables.

VIPStephan

03-20-2007, 02:48 AM

What you add in CSS you are saving twice in the HTML by scrapping those tables. E.g. one simple container in tables is like:

<table>
<tr>
<td>content</td>
</tr>
</table>

while the same container can be

<div>content</div>

And the CSS to give it a width and height, for example, is the same… even less for the div.

Also a CSS file may become fairly large but usually you are using one CSS file to serve the styles for all your HTML pages (and the file will be stored in the cache and not necessary to be reloaded).
So do the math: You save as much HTML as you add to the stylesheet but you need to add it only once and you are saving it on like ten pages. What’s the better option now?

And also you’re thinking the wrong way: A website is not about your coding pleasure. It’s about semantics and accessibility while having code that’s way easier to maintain. And if you’re deciding to change the layout from left to right you just change the stylesheet and not one single line of HTML in the ideal case. That’s how the CSS Zen Garden (http://csszengarden.com) is built and I recommend you to study that site thoroughly. Maybe it will enlighten you? :)

cb2004

03-20-2007, 10:58 AM

_Aerospace_Eng_

03-20-2007, 12:57 PM

Yeah I do love the concept of CSS. Its just a learning curve.

This is almost what I need. However I dont want it to go all the way to the bottom of the page and it wont start right at the top of the page. The left column just needs to expand if the middle or right column does.

It already does this. Try it. Take the text out of the middle column and put it in the right column. I gave you what you needed for a start, now show some a initiative and try to modify it. Do some tutorials if you have to.

cb2004

03-20-2007, 01:24 PM

It already does this. Try it. Take the text out of the middle column and put it in the right column. I gave you what you needed for a start, now show some a initiative and try to modify it. Do some tutorials if you have to.
Yeah I have showed some initiative and modified it and its fine. Thanks for your help.

cb2004

03-20-2007, 06:16 PM

Ok it turns out I am still struggling. I have created more of what I want with tables in about 2 mins. But I dont want to go down that route anymore.

I am just really really struggling. Obviously there will be more buttons on the left.

Any guidance would be fantastic.

_Aerospace_Eng_

03-20-2007, 10:24 PM

Then start doing some tutorials. You can't expect people to just give you things without you even trying.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
}
#left {
width:198px;
float:left;
margin:0;
padding:0 0 352px 0;
list-style:none;
position:relative;
}
#right {
width:207px;
float:left;
}
#left a {
background:#7ABFE9;
display:block;
width:198px;
text-decoration:none;
color:#FFF;
height:33px;
background:url(http://www.majesticit.co.uk/tabled/homeoff.gif) no-repeat;
text-indent:-9999px;
}
#left a:hover {
background:#6DBAE6;
border-color:#CCC;
color:#EEE;
background:url(http://www.majesticit.co.uk/tabled/homeon.gif) no-repeat;
}
#container {
min-height:100%;
position:relative;
background:#FFF url(bg.gif) repeat-y;
width:769px;
}
#container p {
margin:0;
padding:10px;
}
#content {
width:364px;
float:left;
}
#bottom {
position:absolute;
bottom:0;
z-index:0;
left:0;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>

</head>
<body>
<div id="container">
<ul id="left">
<li><a href="#" class="home">home</a></li>
<li><a href="#" class="home">home</a></li>
<li><a href="#" class="home">home</a></li>
<li><a href="#" class="home">home</a></li>
</ul>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sem turpis, convallis id, commodo vestibulum, porttitor eu, nisl. Nunc vehicula lorem. Quisque et urna. Duis dui odio, pellentesque a, faucibus sed, suscipit sit amet, libero. In posuere, magna non dictum pharetra, leo leo molestie metus, in pretium nisl libero et nisi. Aliquam erat volutpat. Sed rutrum dui eget tellus. Donec ut libero. Sed orci enim, commodo porttitor, dictum nec, semper id, purus. Sed at dolor. Sed at nibh. Duis egestas velit rutrum ante. Donec ac nisi. Vivamus quam leo, luctus sit amet, condimentum ut, mattis elementum, tortor. Phasellus fringilla, justo at rhoncus fermentum, nisi eros viverra turpis, ac sollicitudin diam elit non dui. Proin egestas libero a dolor. Duis sagittis sapien eget odio. Integer nonummy orci in leo. Suspendisse potenti. Etiam at quam eu pede feugiat faucibus.</p>
<p>Maecenas quis magna in lacus vulputate faucibus. Phasellus sem. Phasellus sodales feugiat orci. Etiam ullamcorper pede a velit. Integer vel urna. Duis quis diam. Praesent luctus vehicula turpis. Sed porttitor, dui ac commodo sodales, leo nibh auctor dolor, lacinia porttitor pede nibh sed dolor. Pellentesque in orci. In sed libero et sem semper vestibulum. Sed eu diam. Vivamus at massa eu felis sollicitudin molestie. Aenean tristique dolor nec purus. Phasellus tincidunt. Mauris vestibulum feugiat ligula. Maecenas ut nisi. Donec accumsan rutrum erat.</p>
<p>Sed porttitor, massa sit amet euismod aliquet, tortor diam vehicula justo, a sodales nulla tellus vitae mi. Pellentesque ultrices purus nec risus commodo interdum. Cras non ante non mi feugiat mattis. Duis tempus accumsan massa. Curabitur volutpat, felis ut pulvinar mollis, sapien nisi auctor purus, id dignissim ligula urna in magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ac tortor. Duis libero turpis, hendrerit at, pretium quis, imperdiet in, lorem. Suspendisse libero nulla, dapibus ac, aliquam ac, mollis non, eros. Suspendisse sem metus, sollicitudin vitae, bibendum in, tincidunt ac, tortor. Proin sit amet elit fringilla libero eleifend malesuada. Aenean mollis rhoncus orci. Morbi nec neque. Etiam mattis, nisi sed tempor posuere, sem justo bibendum metus, a auctor ipsum libero id magna. Aenean eleifend, justo ac dictum vestibulum, felis ipsum congue urna, quis dictum turpis mi sit amet neque. Nulla facilisi. Sed fringilla, nisi ut pulvinar tincidunt, orci eros commodo est, ac blandit augue sapien et nibh. In varius. Fusce tempus pede.</p>
<p>Nulla facilisi. Pellentesque non odio nec augue elementum convallis. Etiam id nunc. Nullam rhoncus eros vitae lorem. Nunc et nulla nec dui placerat tristique. Morbi leo orci, vehicula nec, viverra in, euismod tincidunt, lacus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi leo metus, vehicula eu, dictum nec, fringilla at, nisi. In hac habitasse platea dictumst.</p>
<p>Donec ultricies iaculis elit. Etiam aliquam velit eget lorem. Nulla lacinia, nibh non porta viverra, leo ipsum placerat elit, consequat ultrices ipsum orci et risus. Aliquam dapibus. Donec lectus metus, aliquet sit amet, imperdiet quis, varius sit amet, leo. Praesent pellentesque aliquet mauris. Nunc odio. Proin pulvinar lorem eget enim. Vestibulum eros. Aliquam id tellus. Duis sit amet eros. Nulla non magna quis sem malesuada sollicitudin. In id enim iaculis justo ullamcorper adipiscing. Sed scelerisque erat ut enim. Ut non pede ut purus pretium interdum. Fusce ac velit nec diam tempus volutpat.</p>
</div>
<div id="right">right column</div>
<div class="clear"> </div>
<img src="http://www.majesticit.co.uk/tabled/navigationbackground.jpg" alt="" id="bottom" /> </div>
</body>
</html>

cb2004

03-22-2007, 01:50 PM

Then start doing some tutorials. You can't expect people to just give you things without you even trying.
Yeah I agree. I dont expect people to. I should have explained more on what I was struggling with. But its all sorted now. Thanks for your help.