I was hoping someone could tell me why there is so much space to scroll to, and how to get the footer lined up, does z-index work with relatively positioned stuff ?
Any good links to thse kinda tutorials would be good, any I found on google werent very useful
Any idea why the scrollbars think there is a lot to scroll through? or know a good visual tutorial showing how to position elements relatively into frames.
Edit: The whole things has fallen apart without me knowing, dont have alcue now, Im contemplating going back to tables.
The only thing I changed was that it validated, lowercased tag names, put <link> in the head, and put attribs in "quotes" that was about it.
Could this drastically change its output ?:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Tyberius Prime
Maniac (V) Mad Scientist with Finglongers
From: Germany Insane since: Sep 2001
posted 03-30-2006 21:48
Indeed it could. Going from quirkmode to xhtml-strict will make your output much more reliable, but it will also change it from the quirkmode output.
It seems you don't have a doctype specificed right now... looks completly broken in my opera - the top background image repeated over and over again.
You don't need zindices on position:relative elementns. you should probably not be saying 'position:relative' in the first place. You shouldn't need negative top's either if you used float: left;...
There are many more things where you are doing this completly different from how I'd approach the problem, but they aren't necessarily wrong.
Here's how I'd set this up: one div inside the body for centering... another full inner width div, background image the whole top without the navigation. Then the navigation as one or three lists, depending on how well it'd work with a br, with float: right, and appropriate margins on the uls and lis.
Then the content div, border-left: 10 px solid black; (or what ever width), same on the right.
Then the bottom div, background-color:black; hearts image with float:left, a <p> with margin-top: 0px; and float:right; for the text.
The cards I'd try a div outside the centered div, float: right, valign:bottom.
Cool thanks, I've been looking everywhere for relatively positioned 3 column setups the nearest ive seen is using float.
btw, the cards arent actually part of it anymore, heh :P Im gonna try some more with floats and come back here, when I use float they all over lap, so which order does it go by? the order of the html or the style sheet ? I know these are awfully dumb questioned but I usually position absolutely and use code to move stuff, but this site doesnt have any animation and using code would be too much.
<content>
<left border>
<center div> <- When using float on the borders, this is over the borders, and the total width of the center, do I also need float:middle?
<right border>
</content>
The only thing I changed was that it validated, lowercased tag names,
put <link> in the head, and put attribs in "quotes" that was
about it.
Could this drastically change its output ?:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Of course! That's why you *always* start with your doctype in place and your code valid.
quote: Hugh said:
Oh also.. any idea why you gotta scroll to the right?
Off hand - no. I'll come back later and dig through your example more, but all the positioning you have going on, and all those needless divs in the header portion are jsut asking for trouble.
Specifying position:relative; is pointless - that's teh defualt. Specifying all the top/left values is completely unnecessary. It is the way people always try to do it when they go for a CSS layout for the first time. You have to change your way of approaching this, and allow the document to flow naturally. More often than not, things will line up properly almost by default.
Also, specifying a div whose sole purpose is to hold a background image is about as semantically incorrect as using an image tag for decorative images, or using a table for layout.
Trim down your markup - cut out anything not needed for the *structure* of the document.
Trim out all the positioning attributes of your CSS, use FLOAT where necessary to line elements up side by side, and attach background images to the existing elements where possble. The z-indexes aren't doing anything for you either.
It is always best to start with the least amount of code, and build up only when needed. Always try to solve your problem without adding extraneous mark-up, and without trying to nail down your CSS positioning. At the same time, don't fight to avoid adding tags that are relevant structurally.
Gotta run for the moment...be back later to look more at the code.
Cool thanks, I've been looking everywhere for relatively positioned 3 column setups the nearest ive seen is using float.
Again, it's worth reiterating: forget about the "position" attribute. It has it's function, but for general alyout issues just forget that it even exists. Forget about specifying top/left/right/bottom position values. Use float, margins, and padding to achieve the positioning you need.
As for the <border> specified in your layout scheme - avoid this too! This has no structural relevence, and so should not be in your markup.
Define your borders with CSS, applying your background images to existing elements. The approach you are taking is still emersed in table-layout thinking.
I've been playing with all sorts of combinations of stuff, I stripped all the top left and position relatives etc.. and used floats, it look okay, but I couldnt see it as being possible to make a 9 gridded layout with a variable width and height in the center and outside. After spending about 4 hours on it tonight (which i really shouldnt have as I have exams on monday) and because its to be rushed a little bit, a gave it a go in tables, it only took 10 min: Fuck it
I might still try to make it css, but its usuable for now once I get a menu into it.
posted 03-30-2006 18:53
surely we can find a better way than that. But more on that once the validation errors are gone =)