CSS Layout Help
- Started
- Last post
- 18 Responses
- Amicus
As a CSS newbie I'm trying to determine how I should create the header and footer navigation. I have thought of 3 ways of achieving it and wondering how you guys would go about it...
The other question concerns my third column and I'm tearing my hair out to get it lining up with the other two..
http://www.supercogroup.com/yesh…
I know the footer isn't lining up at the moment, but I know the problem there.
- bulletfactory0
my mind has been blown.
what is your question.- what I mean is, how would you like it to look?bulletfactory
- needs to look exactly as it appears above - except for sizesAmicus
- IRNlun60
unordered lists
- Amicus0
sorry... damn print guys desiging websites I know... shit I wouldn't have designed it this way mysel. After stalling on coding it for months cause I hate it, I've finally lost the battle and as the boss puts it I need to CSS it pronto.
The upper navigation area (above the white content area) has numerous buttons and I'm wondering whether I should code it with Tables, Divs or a combination.
Just looking for advise on how you real coders would split this task up... Thanks
- ETM0
First off you have to understand how floats work. They remove the content out of the standard flow. You can't have a center column than simply have one floated left and floated right and have them simply line up. You can two things. Either float BOTH the left and center column to the left and keep the right as is. Ensure your dimensions are perfect. Anything too big it will simply drop below.
Another option is to contain the left AND center column in a new div that itself floats left and then again keep the right one as is.
- Excuse my grammar... typed too quickly... and me fail english... n,o it's no unpossible.ETM
- Amicus0
thanks ETM... I think I actually understood that. :)
- ETM0
To answer your upper nav question, that's easy with CSS. Create the nav options as a standard list. Then we can format the list to remove bullets etc and display inline. There are a millions tutorials on this and is the cleanest way to do it.
http://www.alistapart.com/articl…
http://css.maxdesign.com.au/list…You can also create two separate divs to contain 2 different lists if you want the 2 separate rows of nav options.
- And add clear:both; to your footer div to ensure you have no issues with the floats above.ETM
- bulletfactory0
also - position is everything may help you work out different quirks
http://www.positioniseverything.…
- ETM0
No because each nav option is just a list item <li>, rather than an individual table cell.
- Amicus0
thanks guys... I think I'm understanding... been about 8-10 years since I used to hand code, and it gets a little hazy and confusing sometimes. Especially since those were all preCSS sites.
- thizzbobby0
Im surprised to actually find helpful feedback in this thread. Wow.
- Hey, some of us want for a more helpful/useful community here. :)ETM
- Totally with you on that.thizzbobby
- +1Amicus
- SHOW SOME TIT!iCanHazQBN
- ETM0
@Amicus -- I'll be around a few hours, so if you need any more help post here and I'll check in.
- Amicus0
thanks ETM people like you are in too short a supply!
- Amicus0
slowly getting there... any tips on what I have done so far?
- ETM0
I would add 'clear:both;' to your footer div. You will most likely have issues once you insert more content into the floated divs above.
Becareful about missing units in your code. Example:
line-height: 1;
Things like that, or 'line-height: normal;' will have different default values in different browsers.Any specific issues yet?
- Amicus0
thanks ETM
yeah, I realised the Eric Meyer reset needed some more polish, but haven't gotten around to finishing it yet.
oh and thanks for the clear: both... we'll see what happens without it for a few shits and giggles and then throw it in if needed.
- boobs0
1) Lay it out exactly like you want it in Photoshop.
2) Give it to one of the office interns to slice and code.