4 replies [Last post]
tripdog
Offline
newbie
san diego
Last seen: 15 years 9 weeks ago
san diego
Joined: 2006-11-21
Posts: 4
Points: 0

Hey everyone-

I'd like to take this opportunity to introduce myself to the forum and ask a question. I'm a graphic designer trying to add a few new items to my skillset.

I'm designing this site for a client and I can't get the columns to line up especially when the font size is increased. When the user increases the font size the layout really falls apart.

I am wondering if I've structured this improperly.

I'd really appreciate some input!

See the layout in question here http://www.phillipscreative.us/lwi

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You have missed some simple

You have missed some simple points, with floats you need to need to use some form of containing property for the parent element otherwise it doesn't expand with it's children if you put display:table on the #wrapper and a white background you will see what I mean and this will form the basis of the solution to the column heights or trying to keep the layout looking whole while actually expanding. You will need to employ tricks to create the illusion that the columns are continuous by using images repeated along y-axis or solid block color that is placed as an image the width of a column but placed on the element behind.

This is one of the problems I'm afraid when graphic designers decide to branch out ( Disclaimer: the following comments are not in anyway meant to offend ) It's easy to see designs as finished articles and that CSS/HTML are just secondary props for hanging a design on but nothing is further from the truth really. These two skills (CSS, HTML ) whilst seeming simple enough have hidden depths of complexity especially so CSS, and some work must be put into understanding and learning the skills needed to work effectively.

The nature of the three columns cause problems right away as height in CSS is meant to be fluid and really is it set nor are columnar heights ever actually equal in length (unless you want to take the easy way out and table-ise the layout).

You will need to be thinking of where you can run colour you may well need another div that holds the right hand orange colour as a graphic fixed width that's run along the right edge while the rest of the element is set to white to account for the centre section the left hand side could be handled by fading the green graphic into a solid colour the graphic remains to the top but as the height increases you will see more of the solid green towards the bottom in the same way the orange rounded corner is placed as a background to the right column.

Conversely a different approach could be to take a slice of the main body that starts to the outside edge of the green left column runs right across to the right outer edge of the orange column and that is say 4-5px high you then repeat that down a new div that wraps the three floats you will then always have equal height as the new inner wrapper will expand with whatever column is longest, your green graphic is then set as a background to the left column.

With graphics for decoration you should really place them always as backgrounds not foreground inline images as a background they are a little more flexible and inline images should be kept for informational photos. Always view a layout without any styling as you then see how odd decorative images look when displayed without CSS styling on their parent elements inline.

BTW if I didn't say so earlier it's a nice design!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tripdog
Offline
newbie
san diego
Last seen: 15 years 9 weeks ago
san diego
Joined: 2006-11-21
Posts: 4
Points: 0

it's fixed...I think

Hugo-

Thank you so much! I think it is fixed! I put display:table on the wrapper and added a 5 pixel high background image repeating on the y axis that spans the entire layout and it works great (in Safari and Firefox anyway). I think there is a small glitch in IE where it puts that 5pixel image at the top of the content area but I'll try to figure that out next.

No offense taken on the whole designer issue at all. I get where you are coming from believe me, because the world of print is just so different.

This information is hard won and I really appreciate all your help and advice.

Thanks also for the compliment on the design.

Tom

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That seems to be ok I think

That seems to be ok I think that was the best approach but as always with CSS they're are many routes one can take, I only looked superficially but will try and have a more detailed look a bit later, I can see you'll have fun with the links on the left , but then again maybe not you seemed to get this bit done quite rapidly.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tripdog
Offline
newbie
san diego
Last seen: 15 years 9 weeks ago
san diego
Joined: 2006-11-21
Posts: 4
Points: 0

I would appreciate the more

I would appreciate the more detailed look very much. Please let me know what you think! As for the navigation on the side, well, I think I am going to try to use flash as the navigational engine so I can design some pretty rollovers.

Another can of worms entirely, I know!

Thanks again.

t