problems coding a layout using divs

**dochappy** · 05-27-2005, 08:59 AM

I made a layout in photoshop and manually sliced it but after previewing the layout it isn't positioned right and when I try typing int the content area it makes it even worse

Basically I want the middle area and the middle area(under the What's new part) able so I can can write in those areas , but I really don't want to use Iframes

here's the code I'm using at the moment

Code:

<html>
<head>
<title>layout</title>
<style type="text/css">

body 
&#123; margin-top&#58; 0;
  margin-bottom&#58; 0;
  margin-left&#58; 0;
  margin-right&#58; 0;
  padding-left&#58; 0;
  padding-right&#58; 0;
&#125;

#header &#123;
  margin&#58; 0px;
  padding&#58; 0px;
  height&#58; 183px;
&#125;
#left &#123;
  position&#58; absolute;
  left&#58; 0px;
  top&#58; 0px;
  width&#58; 750px;
&#125;
#center &#123;
  top&#58;;
  margin-left&#58; 0px;
  margin-right&#58; 0px;
&#125;
#right &#123;
  position&#58; absolute;
  right&#58; 138px;
  top&#58; 180px;
  width&#58; 750px;
&#125;
#bottom &#123;
  position&#58; absolute;
  right&#58; px;
  bottom&#58; px;
  width&#58; 750px;
</style>
</head>
<body>
<div id="header">
<div align="center"><img src="1top copy.jpg " width="750" height="50" alt=">
<div align="center"><img src="2banner copy.jpg " width="750" height="88" alt=">
<div align="center"><img src="3topcontent.jpg " width="750" height="45" alt=">
</div>
<div id="left">
<div align="left"><img src="4leftnavi copy.jpg " width="118" height="235" alt=">
</div>
<div id="center">
My layout duh. jsut testing and it looks like  theres problems
</div>
<div id="right">
<div align="right"><img src="5rightside copy.jpg " width="128" height="221" alt=">
</div>
<div id="bottom">
<div align="center"><img src="6bottomcopyright copy.jpg " width="750" height="43" alt=">
<div align="center"><img src="7bottom copy.jpg " width="750" height="51" alt=">
</div>
</body>
</html>

any help will be greatly appreciated

**jonbalza** · 05-27-2005, 05:18 PM

To be honest, you've got a lot of problems with that code. A LOT.

Here's some changes to make:

Tags such as <div> tags should have closing tags as well. Right now I'm counting 12 opening tags and only 4 closing tags. This will screw ANY layout up beyond repair.

Change your style for the "body" tag to this:

Code:

body &#123; 
  margin&#58; 0;
  padding&#58; 0;
&#125;

Make sure to use a closing bracket after your #bottom DIV declaration.

Back to the HTML, make sure that you close all attributes with TWO quotes. Your alt attributes in your images are missing that closing quote.

Fix those issues, and we can start to deal with the rest of the code.

**dochappy** · 05-27-2005, 05:41 PM

Sorry for all the errors , I've been dabbling in html and css only for a few weeks and I'm still trying to wrapp my head around it , friends tell me I should use Dreamweaver , but it's too complex for me guess I'm pretty dim lol . thanks for pointing out the erros and trying to help me with this , other places I've been simply ignored my asking for help , lol

here's the revision

Code:

<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body 
body &#123;
  margin&#58; 0;
  padding&#58; 0;
&#125;
#header &#123;
  margin&#58; 0px;
  padding&#58; 0px;
  height&#58; 183px;
&#125;
#left &#123;
  position&#58; absolute;
  left&#58; 0px;
  top&#58; 0px;
  width&#58; 750px;
&#125;
#center &#123;
  top&#58; ;
  margin-left&#58; 0px;
  margin-right&#58; 0px;
&#125;
#right &#123;
  position&#58; absolute;
  right&#58; 138px;
  top&#58; 180px;
  width&#58; 750px;
&#125;
#bottom &#123;
  position&#58; absolute;
  right&#58; px;
  bottom&#58; px;
  width&#58; 750px;
&#125;
</style>
</head>
<body>
<div id="header">
<div align="center"><img src="1top copy.jpg " width="750" height="50" alt="">
</div>
<div align="center"><img src="2banner copy.jpg " width="750" height="88" alt="">
</div>
<div align="center"><img src="3topcontent.jpg " width="750" height="45" alt="">
</div>
<div id="left">
<div align="left"><img src="4leftnavi copy.jpg " width="118" height="235" alt="">
</div>
<div id="center">
My layout duh. just testing and it looks like  theres problems
</div>
<div id="right">
<div align="right"><img src="5rightside copy.jpg " width="128" height="221" alt="">
</div>
<div id="bottom">
<div align="center"><img src="6bottomcopyright copy.jpg " width="750" height="43" alt="">
</div>
<div align="center"><img src="7bottom copy.jpg " width="750" height="51" alt="">
</div>
</body>
</html>

**jonbalza** · 05-27-2005, 07:03 PM

So if you aren't using Dreamweaver, what are you using?

To clean up your CSS a bit, you are going to want to make sure that all your attributes are in this form:

attribute: value;

For example, attached to your "center" div, you have this statement:

Code:

  top&#58; ;

Make sure that you have a value in there for top, even if it is 0. It should look like this:

Code:

  top&#58; 0;

The same goes for your "bottom" div. There you have a measurement of "px," but no value to tell the browser how many px it needs to be. If you are leaving the lines blank like that, it's better to delete them then anything else.

You're also still missing 5 closing <div> tags in there, which will mess up your code. EVERY <div> tag needs a closing tag so your browser knows where to begin or end the others.

Try looking at the source on this page on my site. It's a pretty simply coded page, so hopefully you'll be able to follow it. Every div has a matching end tag that is lined up with it, even where the divs are nested.

I would also STRONGLY recommend working through some tutorials on web design, like the ones over at www.echoecho.com or www.w3schools.com . That will help you out a lot.

**dochappy** · 05-27-2005, 09:24 PM

sorry again thought I fixed everything. To answer your question , I'm currently using notepad. I have Dreamweaver but have chose to set it aside for the time being because it gave me a headache. I've been going through both of those sites slowly and reading through each lesson . thought it might be a good idea to show you the layout I'm trying to get to work.
http://img209.echo.cx/img209/4140/firstlayout7yw.jpg

thanks again for the help

Code:

<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body 
body &#123;
 padding&#58; 2;
&#125;
#header &#123;
 height&#58; 183px;
&#125;
#left &#123;
  position&#58; absolute;
  width&#58; 750px;
&#125;
#center &#123;
  margin-left&#58; 5px;
  margin-right&#58; 5px;
&#125;
#right &#123;
  position&#58; absolute;
  right&#58; 138px;
  top&#58; 180px;
  width&#58; 750px;
&#125;
#bottom &#123;
  position&#58; absolute;
  width&#58; 750px;
&#125;
</style>
</head>
<body>
<div id="header">
<div align="center"><img src="1top copy.jpg " width="750" height="50" alt="">
</div>
<div align="center"><img src="2banner copy.jpg " width="750" height="88" alt="">
</div>
<div align="center"><img src="3topcontent.jpg " width="750" height="45" alt="">
</div>
</div>
<div id="left">
<div align="left"><img src="4leftnavi copy.jpg " width="118" height="235" alt="">
</div>
</div>
<div id="center">
My layout duh. just testing and it looks like  theres problems
</div>
</div>
<div id="right">
<div align="right"><img src="5rightside copy.jpg " width="128" height="221" alt="">
</div>
</div>
<div id="bottom">
<div align="center"><img src="6bottomcopyright copy.jpg " width="750" height="43" alt="">
</div>
</div>
<div align="center"><img src="7bottom copy.jpg " width="750" height="51" alt="">
</div>
</div>
</body>
</html>

think I closed all the dis this time

**jonbalza** · 05-27-2005, 11:22 PM

You can use Dreamweaver - just set it to "code" view. The color coding and autoformatting features will really help you in both reading and writing your code. That's what I use, and it works very well.

Have you looked at this site for some sample CSS layouts:

http://www.thenoodleincident.com/tut...son/boxes.html

ps... now you have too many closing tags. 12 opening and 14 closing. You are going to have to get that stuff right before we can get the divs in the right places.

**dochappy** · 05-27-2005, 11:31 PM

didn't know you couyld use dreamweaver for jsut god I thought it was jsut for graphical layout and it did the coding for you.

I'll check out that site.

just so I get this right this time ;)

is this the way the divs are supposed to be

Code:

<div id="bottom">
<div align="center"><img src="6bottomcopyright copy.jpg " width="750" height="43" alt="">
</div>
</div>

do I put a </div> at the end of the <div id=""> sections only or do I out one there and at the end of the <div align="">

**jonbalza** · 05-28-2005, 07:44 AM

Originally Posted by dochappy

Code:

<div id="bottom">
<div align="center"><img src="6bottomcopyright copy.jpg " width="750" height="43" alt="">
</div>
</div>

do I put a </div> at the end of the <div id=""> sections only or do I out one there and at the end of the <div align="">

That all depends on how you want the page to look! The way you have it in that example, you'll have a box inside another box. If you wanted two completely separate boxes, then you'd have something like this:

Code:

<div id="bottom">
</div>
<div align="center">
   <img src="6bottomcopyright copy.jpg " width="750" height="43" alt="">
</div>

... which I don't think is what you are going for. (But yes, both ways are completely valid ways of coding.)

**dochappy** · 05-28-2005, 02:35 PM

opened the file in dreamweaver and cleared the tags it said were not needed , hopefully I did this right ;)

Code:

<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body 
body &#123;
 padding&#58; 2;
&#125;
#header &#123;
 height&#58; 183px;
&#125;
#left &#123;
  position&#58; absolute;
  width&#58; 750px;
&#125;
#center &#123;
  margin-left&#58; 5px;
  margin-right&#58; 5px;
&#125;
#right &#123;
  position&#58; absolute;
  right&#58; 138px;
  top&#58; 180px;
  width&#58; 750px;
&#125;
#bottom &#123;
  position&#58; absolute;
  width&#58; 750px;
&#125;
</style>
</head>
<body>
<div id="header">
<img src="1top copy.jpg " width="750" height="50" alt="">
<img src="2banner copy.jpg " width="750" height="88" alt="">
<img src="3topcontent.jpg " width="750" height="45" alt="">
</div>
<div id="left">
<img src="4leftnavi copy.jpg " width="118" height="235" alt=""> 
</div>
<div id="center">
My layout duh. just testing and it looks like  theres problems
</div>
<div id="right">
<img src="5rightside copy.jpg " width="128" height="221" alt=""> 
</div>
<div id="bottom">
<img src="6bottomcopyright copy.jpg " width="750" height="43" alt="">
<img src="7bottom copy.jpg " width="750" height="51" alt=""> 
</div>
</body>
</html>

**jonbalza** · 05-28-2005, 03:35 PM

Well, the HTML should be able to work now - now you can start to work on the CSS. ;)

The links that I've given you before should be able to help you out with that.

Thread: problems coding a layout using divs

LinkBack

Thread Tools

Search Thread

Display