What's new
By:
Filters
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

problems coding a layout using divs


D

dochappy

Active Member
Messages
37
Likes
0
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 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#header {
  margin: 0px;
  padding: 0px;
  height: 183px;
}
#left {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 750px;
}
#center {
  top:;
  margin-left: 0px;
  margin-right: 0px;
}
#right {
  position: absolute;
  right: 138px;
  top: 180px;
  width: 750px;
}
#bottom {
  position: absolute;
  right: px;
  bottom: px;
  width: 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
 
J

jonbalza

Well-Known Member
Messages
84
Likes
0
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 { 
  margin: 0;
  padding: 0;
}

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.
 
D

dochappy

Active Member
Messages
37
Likes
0
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 {
  margin: 0;
  padding: 0;
}
#header {
  margin: 0px;
  padding: 0px;
  height: 183px;
}
#left {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 750px;
}
#center {
  top: ;
  margin-left: 0px;
  margin-right: 0px;
}
#right {
  position: absolute;
  right: 138px;
  top: 180px;
  width: 750px;
}
#bottom {
  position: absolute;
  right: px;
  bottom: px;
  width: 750px;
}
</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>
 
J

jonbalza

Well-Known Member
Messages
84
Likes
0
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: ;

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

Code: 
  top: 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.
 
D

dochappy

Active Member
Messages
37
Likes
0
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 {
 padding: 2;
}
#header {
 height: 183px;
}
#left {
  position: absolute;
  width: 750px;
}
#center {
  margin-left: 5px;
  margin-right: 5px;
}
#right {
  position: absolute;
  right: 138px;
  top: 180px;
  width: 750px;
}
#bottom {
  position: absolute;
  width: 750px;
}
</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
 
J

jonbalza

Well-Known Member
Messages
84
Likes
0
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/tutorials/box_lesson/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.
 
D

dochappy

Active Member
Messages
37
Likes
0
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="">
 
J

jonbalza

Well-Known Member
Messages
84
Likes
0
dochappy said:
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="">
Click to expand...
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.)
 
D

dochappy

Active Member
Messages
37
Likes
0
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 {
 padding: 2;
}
#header {
 height: 183px;
}
#left {
  position: absolute;
  width: 750px;
}
#center {
  margin-left: 5px;
  margin-right: 5px;
}
#right {
  position: absolute;
  right: 138px;
  top: 180px;
  width: 750px;
}
#bottom {
  position: absolute;
  width: 750px;
}
</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>
 
J

jonbalza

Well-Known Member
Messages
84
Likes
0
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.
 
D

dochappy

Active Member
Messages
37
Likes
0
good , finally got it right :perfect: thought I was never going to get it lol . I've been reading through the sites you linked and after expereiemnting with the way I want the layout but each part of the layout is being placed wrong. for instance , I have my header , I want it at the top then I have a lft navigation menu that I want to sit to the left but still be lined up with the header then I want an open space so I can type my content then next to it another bar(leftbar - with the what'snew portion) on the left lined up with the header then a footer below it all. I can get it pretty much in the spot I want but there's usually a gap between each image(which I don't want) and when I try to type in my content in the middle ever part of the layout shifts gets out of position.

A friend told me that from looking at the layout he thinks it will be impossible to code it right so I can type content both in the middle section and the small section under What's new.

I'm goin to keep trying and hopefully I'll get it(It might be the way I sliced the layout) if not I might have to put web designing on the back burner.

thanks again for the help I appreciate it
 
J

jonbalza

Well-Known Member
Messages
84
Likes
0
dochappy said:
A friend told me that from looking at the layout he thinks it will be impossible to code it right so I can type content both in the middle section and the small section under What's new.
Click to expand...
Just so you know, your friend is wrong. You can definitely create that layout with the HTML you have now.
 
D

dochappy

Active Member
Messages
37
Likes
0
thanks , i figured as much cause I've seen layouts 20 times as bad as mine and they were coded.

Messing around in dreamweaver earlier i got pretty close to the result i wanted using tables I had the layout perfect fitting together but when I went to type stuf in the content area the layout really messed up , still haven't figured out how to fix that or how to make it so I can enter content under the whats new section.
 
J

jonbalza

Well-Known Member
Messages
84
Likes
0
dochappy said:
thanks , i figured as much cause I've seen layouts 20 times as bad as mine and they were coded.
Click to expand...
I'm not really sure what you mean by "coded." because if a site is up on the web and DOESN'T have code behind it (ie., is just an image) then it probably shouldn't even be considered a website (IMHO).

As to the slicing issue, I'll address that in the other thread you started, although I don't know why you started a new thread on this same topic.
 
D

dochappy

Active Member
Messages
37
Likes
0
sorry about that , I just figured that slicing my layout was the main problem and figured it would be suited in the photoshop webdesign area instead . sorry for the mistake , if need be one of the threads can be closed
 
J

jonbalza

Well-Known Member
Messages
84
Likes
0
A moderator would have to determine that, but personally I wouldn't close one of the threads, I'd just merge them together.
 
theKeeper

theKeeper

Guru
Messages
2,313
Likes
63
Naaa that would be too confusing now at this point. We'll just leave the threads as they are. No biggy.

Nice line of help/advice too btw Jon. :perfect:
 
S

SARUKAN

Banned
Messages
1
Likes
0
Okay so basically, you probably forgot to change the links in the image map before you pressed "Submit" on Myspace. As a precaution, they demorph the links into a redirect that way they can filter out the spam links. What you're going to have to do is find which imagemap (<AREA>) tag corresponds to "Comments" and "More Pictures," and change the "href" value to the correct link.
_____________________________________________________
Euromillions Lottery playstation 3
 
You must log in or register to reply here.

Top