PDA

View Full Version : What am i doing wrong?


kearnsy
02-04-2010, 12:14 AM
Ahhh yes, this is the life, 1am, staring at a screen with a red container div, a green header div, blue main content div, and a yellow footer div, and nothing much else.

Right, let's see what i have got. what i've got is the design and layout done in PS, everything sliced up, images exported into dreamweaver, and i've made a container div, header, mc, footer, then, i've inserted a div for the first slice to go in, no problems.

http://merseyme.co.uk/halobums/test.jpg

The problem i have folks is that when i try to insert the next slice into the header, everything goes pear shaped. i've tried inserting slice 2, after tag, before tag, wrap around tag, before end of tag, floating left, floating right, clear left, clear right, clear both. the only thing i haven't cleared is my head, and the only thing i haven't floated is off to bed.:mrgreen:

If i insert my code and style sheet, would anyone be so kind as to put me out of my misery and tell me what i'm doing wrong, or what i'm forgetting to do. thanks very much folks.

<!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>
<link href="css/style.css (http://www.dreamweaverclub.com/forum/view-source:file:///E:/Vassari/css/style.css)" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<div id="vassarilogo"><img src="slices/images/vassari_logo.jpg (http://www.dreamweaverclub.com/forum/view-source:file:///E:/Vassari/slices/images/vassari_logo.jpg)" width="276" height="100" /></div>
</div>
<div id="mc1"></div>
<div id="mc2"></div>
<div id="footer"></div>
</div>
</body>
</html>
and the style sheet looks like this.....

body {
margin: 0px;
padding: 0px;
}
#container {
width: 800px;
margin-right: auto;
margin-left: auto;
height: 783px;
}
#container #aboutbtn {
background-color: #0F0;
height: 100px;
width: 127px;
float: right;
}

#container #header #vassarilogo {
background-color: #0F0;
height: 100px;
width: 276px;
}
#container #header {
background-color: #F30;
height: 100px;
}
#container #mc1 {
background-color: #06F;
height: 257px;
}
#container #mc2 {
background-color: #FF0;
height: 333px;
}
#container #footer {
background-color: #F0F;
height: 93px;
}so the part where i'm up to is, i've created and inserted a logo div that sits inside the header div, now what i'm trying to do is insert a new div inside the header div for the about us button, and that should sit next to the logo div, if that makes sense?

DWcourse
02-04-2010, 01:20 AM
It would help if you could post the current state of your page somewhere for us to look at. That said, I don't see why you need separate divs for the logo and the 4 buttons. Putting the images into the header div one after the other with no space between them should work (as long as the header is wide enough to hold them).

Corrosive
02-04-2010, 05:57 AM
Yes, where you have your header and navigation you can use one div. Set the whole header (inc logo) as a background image. Then create your nav with an unordered list and position that inside the div with margins and padding.

kearnsy
02-04-2010, 02:11 PM
thanks chaps, i'll give that a go

I thought that every slice would have to have it's own div? i did try just dragging the images into the header div at first, and that worked, then i decided against it, as i was thinking the logo and the buttons must have to sit inside a div

8am i went to bed this morning, and low and behold, i'm back to the grind again.

I know though once i crack it, i'll be happy

Does how i've got things laid out so far look right? apart from the header, if i remove the div's for the logo and the about button, i should be back on track?

one last thing chaps, i was experimenting last night with templates, and what i done was create a template from the index page to use for the about us page, the problem i ran into was, after i'd made editable regions for the main content boxes, i removed the images inside the main content boxes to put say for example text in there, but there was a thin line overhanging from the button slices. do i need to get my slices exact, or have i cocked up somewhere?

Corrosive
02-04-2010, 03:57 PM
Well.... I tend not to use heights in things very often. I try and create a site in such a way that it will 'grow' with the content. All of this only comes with experience though and it looks like you are on the right track.

DWcourse
02-05-2010, 01:30 AM
Corrosive is right.

Specifying heights is one of those things that you have to do occasionally but usually it just leads to trouble eventually. Let the content determine the height of its container.