Website Design Forum

**noobie21** · 05-05-2006, 10:25 AM

so i have my layout set for a webpage I am creating. I started doing the page using layers, where layer 1 was the horizontal banner, layer 2 was the menu bar underneith the banner and layer 3 was the sidebar. After Putting my pictures and text and other stuff on the page with a layout table andlayout table cells i decided it would be better if I used a layout table with table cells for the banners and sidebar as well. When i tried to replace the layout cells with table cells, the page layout got all jacked up. Everything seemed to shift up and to the left.

Anyone have any suggestions? If not i can use the layers instead, but just would prefer to use the layout tables, they seem to be a little more powerful.

**finesse** · 05-17-2006, 02:16 PM

You need to place spacer images in your tables to keep them from collapsing.

**noobie21** · 05-30-2006, 04:45 PM

i'll give it a try.. thanks

**LadynRed** · 05-31-2006, 06:42 PM

Tables are NOT 'more powerful', they're just old web technology I can do anything with CSS and DIVs that you can do with a table.. and then MORE. No, tables are not 'more powerful'.

Dreamweaver is the only program that insists on calling CSS DIVs 'layers'. They are not Layers, they are DIVisions. You use them to DIVide your content into logical sections. You control placement of these DIVisions using the normal document flow and CSS. CSS is NOT just for styling text.

Unless and until you learn EXACTLY what it means to write proper markup and learn CSS, you will not get it as a noob trying to use 'layers'.

**noobie21** · 06-01-2006, 10:54 AM

Thanks finesse. I had used a spacer image, but i didn't realize i needed to put it in all tabel cells. But I played with it yesterday and got it to work the way i wanted.

And Lady, part of the reason i said i thought tables were more powerful was because the book i am learning out of (keep in mind i started about a month ago) prefers tables. Honestly though since i am learning, it's probably best i learn how to do it both ways now instead of learning one way and having it become obsolete later down the line.

I personally like the DIVs (even though i'm going to call them layers, because i am learning with DW and that's what they call them, and i don't want to cunfuse myself with terminology) and think they make the page easier to use.

**LadynRed** · 06-01-2006, 12:29 PM

Unfortunately there are far too many schools who are still teaching tables. It's good to hear that you are willing to learn BOTH and I can recommend a VERY good book by SitePoint that can help you with that:

"HTML Utopia: Designing Without Tables Using CSS"
http://www.sitepoint.com/books/css2/

And their new beginner's guide looks darn good too:
http://www.sitepoint.com/article/htm...eginners-guide

Once you learn the advantages of CSS, you'll never go back to tables.

Have a look at http://www.csszengarden.com

**noobie21** · 06-01-2006, 07:06 PM

Ok so i have decided to go with <DIV>'s, they just seem more intuitive to me. One of the reasons i had so much trouble updating my companies old website is that he used a full layout table for every single thing, and i had trouble decifering it all.. Layers seem a lot easier to decifer.

Anyways here's a problem i'm having with DIV's, I can line up these tags with the LEft side of the page, but i cannot line them up with the right side.. any ideas?

**LadynRed** · 06-02-2006, 10:58 AM

If you can show us your code it would be easier to figure out what you need to accomplish that

**wakata** · 06-02-2006, 11:24 AM

Can someone give me some advice on a content management programmer for a web site?

**noobie21** · 06-07-2006, 02:44 PM

Quote:

Originally Posted by LadynRed

If you can show us your code it would be easier to figure out what you need to accomplish that

Here:

Quote:

<!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>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Layer1"></div>
<div id="Layer2">   <a href="../index.html">Home</a> <a href="../Layout.html">About Us </a> <a href="../Learning table.html">Technology and Applications </a> <a href="../Layout.html">Products</a> <a href="../index.html">Company Information</a></div>
<div id="Layer3"></div>
<div id="Layer4">Home</div>
<div id="Layer5"></div>
<div id="Layer4b"></div>
<div id="Layer3b"></div>
<br />
</body>
</html>

Quote:

#Layer1 {
position:absolute;
left:0px;
top:0px;
width:935px;
height:100px;
z-index:1;
background-image: url(BannerBck.jpg);
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #000000;
}
#Layer2 {
position:absolute;
left:0px;
top:101px;
width:935px;
height:27px;
z-index:2;
background-image: url(Banner_Menu.jpg);
text-align: center;
padding-top: 8px;
vertical-align: text-bottom;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #000000;
}
#Layer3 {
position:absolute;
top:177px;
width:153px;
z-index:3;
background-image: url(Banner_Sidebar.jpg);
border-right-width: 1px;
border-right-color: #000000;
text-decoration: none;
padding: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
left: 0px;
text-align: left;
text-indent: 0px;
border-left-width: 1px;
border-right-style: solid;
height: 818px;
border-left-style: solid;
border-left-color: #000000;
}
#Layer4 {
position:absolute;
top: 136px;
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
font-size: 18px;
color: #CCFFFF;
text-decoration: underline;
background-color: #003399;
padding-top: 10px;
text-align: center;
width: 153px;
height: 32px;
left: 0px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}

body {
background-color: #FFFFFF;
}
h1 {
font-size: x-large;
color: #003399;
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
background-position: center center;
text-align: justify;
vertical-align: middle;
padding-left: 5px;
border-bottom-width: thin;
border-bottom-style: solid;
margin-bottom: 0px;
padding-bottom: 0px;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
}
h3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
padding-left: 50px;
color: #003399;
list-style-position: inside;
list-style-image: url(oldWeb/htdocs_old/image/ani_top.gif);
list-style-type: disc;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
line-height: 1.7em;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
text-align: justify;
margin-top: 5px;
margin-right: 10px;
margin-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-left: 20px;
margin-bottom: 10px;
padding-bottom: 0px;
line-height: 1.7em;
}
h2 {
font-size: large;
color: #003399;
padding-left: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 5px;
padding-top: 5px;
}
h6 {
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
font-size: 20px;
font-variant: small-caps;
color: #CCFFFF;
text-decoration: underline;
text-align: center;
margin-bottom: 15px;
background-color: #003399;
}
#Layer3 {
font-family: "Arial Rounded MT Bold", Palatino, "Lucida Fax", serif;
font-size: 14px;
color: #CCFFFF;
text-align: center;
vertical-align: bottom;
bottom: auto;
}
.contactinfo {
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
font-size: 14px;
color: #003399;
background-color: #CCCCCC;
}

#Layer3 a {
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
color: #CCFFFF;
display: block;
font-size: 14px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCFFFF;
border-bottom-color: #CCFFFF;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 6px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#Layer3 a:hover {
background-color: #CCFFFF;
color: #003399;
}
#Layer3 a:active {
background-color: #3399CC;
}

a:link {
text-decoration: none;
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
}
a:hover {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.smallprint {
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
font-size: 10px;
color: #003399;
background-color: #CCCCCC;
text-align: center;
}
#Layer2 a {
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
font-size: 14px;
color: #FFFFFF;
vertical-align: text-bottom;
margin-right: 10px;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
margin-top: 10px;
font-weight: bold;
padding: 5px;
}
#Layer2 a:hover {
color: #CCFFFF;
text-decoration: underline;
background-color: #003399;
}
#Layer2 a:active {
color: #003399;
background-color: #3399CC;
}
#Layer4b {
position:absolute;
top: 136px;
font-family: "Book Antiqua", Century, "Times New Roman", sans-serif;
font-size: 18px;
color: #CCFFFF;
text-decoration: underline;
background-color: #003399;
padding-top: 10px;
text-align: center;
width: 151px;
height: 32px;
left: 782px;
border-right-width: 3px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
#Layer3b {

position:absolute;
top:177px;
width:151px;
z-index:3;
background-image: url(Banner_Sidebar.jpg);
border-right-width: 3px;
border-right-color: #000000;
text-decoration: none;
padding: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
left: 782px;
text-align: left;
text-indent: 0px;
border-left-width: 1px;
border-right-style: solid;
height: 818px;
border-left-style: solid;
border-left-color: #000000;
}

I would like Layers 1,2,3b, & 4b all to be on the right boder when the page loads into a browser. I am sure there's a better way to line everything up on the left as well.

Thanks for looking at this for me