...

View Full Version : Now that page is xhtml-strict, layout changed



zactownsend
02-21-2009, 09:06 PM
I made a new layout for my page yesterday and uploaded it to the server I use this morning. It looked just as I expected, until I added all the doctype info and made it xhtml-strict.

The page didn't validate correctly at first but after putting in a few <ul> tags it now validates fine.

However, now that I've done this the layout has changed a bit. My navigation div isn't as long as it should be and the content div has moved over and is hidden by it.

This is what it looks like now:

http://zactownsend.oxyhost.com/index2.html

And this is what it should look like:

http://zactownsend.oxyhost.com

Should I just resize all the divs to make them correct again, or is there an easier solution? And why is this happening?

Excavator
02-21-2009, 10:59 PM
Hey zachtownsend,
See my reply to your other post.
Try this for now:

div.main {
background-color: #474728;
position: absolute;
top: 150px; left: 275px;
width: 700px; height: 100%;
z-index: 0;
}

Rowsdower!
02-21-2009, 11:18 PM
Also you can try this:
div.main {
background-color: #474728;
position: absolute;
top: 150; left: 275;
width: 700px; height: 100%;
z-index: 0;
margin-left:280px;
margin-top: 170px;
}

.left ul {
width:250px;
margin-left:0px;
}

Excavator
02-21-2009, 11:42 PM
That's a good idea. Get rid of the ap where it's not needed... but let's get rid of the extra stuff that's not getting used too:

.main {
background: #474728;
width: 700px;
margin: 170px 0 0 280px;
}


Instead of bandaiding the #left with this-


.left ul {
width:250px;
margin-left:0px;
}
We can fix #left itself by specifying a px width for it like this -

div.left {
background: #474728 url("left_2.png") no-repeat 5px 0;
position: fixed;
top: 27%;
left:0;
width: 250px;
height: 65%;
z-index: 5;
padding: 50px 0 0 10px;
}

Rowsdower!
02-21-2009, 11:59 PM
Well sure, if you want to get fancy :thumbsup:

Excavator
02-22-2009, 12:26 AM
Instead of bandaiding the #left with this-

I'm sorry Rowsdower, that did sound kind of rude.
When the ul got your width it forced the .left to be wide enough to show the background image. That works fine but, since there is a width specified for .left anyway... might as well correct the error there.

There is more there too.
By making .left a % height it grows longer than the background image. Just change it from div.left in the CSS to .left and see.
There is no point to having a % height on something in a position:fixed; div that is never going to change in sized itself. Might as well just tell .left to be the same height as the bg image in it.

Rowsdower!
02-22-2009, 12:32 AM
Oh, I wasn't taking any offense. I couldn't agree more about the use of % heights in this application, but for the purpose of fixing the OP's initial issue I was only getting the items to shift where he wanted them. I'm lazy like that. You overachiever! :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum