Problem with CSS floats (images) in layout.

August 13th, 2009, 7:18 am

Well I am having serious problems with CSS floats.

I created a design in Photoshop, sliced it and imported everything in Dreamweaver. So far, so good. However when you slice with Photoshop, you get a CSS with "position: absolute", which I am trying to avoid.

However I managed to get the header partially correctly floated, but for some reason, it doesn't display correctly in Firefox and IE8.

Can someone take a quick peek and see what I am doing wrong here? And if possible correct the errors or tell me what I am doing wrong?

Cause I am really hitting a brick wall at the moment.

Here is the page: link

Thanks in advance.

[CXLink]

August 13th, 2009, 7:58 am

Hey HHawk,
Welcome to Ozzu. I think the header looks ok in FF3.5 on OSX except the image on the right which just needs a pad or margin added to it on the right side. Also there are some weird spacing things going on in IE6. You might want to run a css reset first to start all the browsers out at the same place. Yahoo has a pretty nice one i use here. Do you mind if I ask why you broke up the image into so many sections?

Also why are you trying to avoid position absolute?

August 13th, 2009, 8:02 am

Thanks for the welcome.

Yeah, everything looks okay, except for the right-ish part.
I have tried everything; padding / margin / etc. But everything I make it look good in Firefox it gets ruined in Internet Explorer and vice versa. :S

Well, not this part (header), but the main (body) part of the website will be using expandable columns, however when I use "position: absolute" the columns do not expand and the footer gets in the way. Don't know how to explain it better, but I have been busy with this design for the past several days and I am getting nowhere. :S

I already re-sliced the whole thing, in order to get it working properly.

August 13th, 2009, 12:58 pm

Okay this is the culprit; I cannot get this fixed: link

Anyone has an idea?

[digitalMedia]

August 13th, 2009, 2:20 pm

I'm not sure what you are trying to build here. The methods I see in the link you posted above are analogous to ideas that were used for tabled layouts. I think you need a whole new approach. You've essentially got one big graphic, just chopped up into bits.

If the red area of the header were one DIV with one background image, you could simply float a container with the inset image to the right and margin it off the parent container. That's one or two DIVs and two graphic versus however many you're using here. Not to mention it would work equally in all browsers.

Then, the next row - your menu. This can simply be a UL with a 1px wide image repeating in the background.

Also, you're using the wrong image format. PNG is great(woohoo.), and all, when used in the proper context. However, there is no good reason to dogmatically use them universally. There's just no advantage here.

The best thing to show us to get help is your overall design. Unfortunately, the approach you're using is just making it incredibly harder than it has to be.

August 13th, 2009, 2:32 pm

First thanks for the answer; I am using png cause compared to gif and jpg, the png was smaller.

The green circled part will have a php script, which will display random images, that's the reason I sliced it up like that in the first place. Also under the text part, there will be random text quotes from customers. Again a php script.

And I always thought loading 1 big image instead of 10 smaller images makes you website load slower and thus takes longer to display? Or at least that is my experience.

[digitalMedia]

August 13th, 2009, 3:13 pm

To create your menu properly, you need only one 1 x 15 pixel graphic of the gradient at the bottom. As a GIF that file would 94 bytes, as a PNG it would be 210 bytes. Currently, you're using 11 graphics I think.

HHawk wrote:

The green circled part will have a php script, which will display random images, that's the reason I sliced it up like that in the first place. Also under the text part, there will be random text quotes from customers. Again a php script.

Your use of server-side scripting shouldn't affect your markup here. Even if the content to be inserted dynamically is of varying length or varying pixel dimensions. In the end, the output will still be HTML.

HHawk wrote:

And I always thought loading 1 big image instead of 10 smaller images makes you website load slower and thus takes longer to display? Or at least that is my experience.

Who in the world told you that? The difference between one 100kb graphic and ten 10kb is 9 trips to the server.

By your tone, I assume you're approaching my advice with a degree of incredulity.

August 14th, 2009, 12:07 am

digitalMedia wrote:

By your tone, I assume you're approaching my advice with a degree of incredulity.

First I did not mean no offence, English is not my native language, therefor some words may sound different (hostile) to you, while they are not meant like that. For instance I don't even understand "incredulity", but I guess it's dissbelieve? And that would not be the case, cause I do take it under consideration.

digitalMedia wrote:

HHawk wrote:

And I always thought loading 1 big image instead of 10 smaller images makes you website load slower and thus takes longer to display? Or at least that is my experience.

Who in the world told you that? The difference between one 100kb graphic and ten 10kb is 9 trips to the server.

Uhm... I meant it like that, cause internet explorer or firefox use several http connections anyways to connect to a website, meaning that each connection will load multiple images/text/flash/etc from a website. Or am I wrong here.

digitalMedia wrote:

To create your menu properly, you need only one 1 x 15 pixel graphic of the gradient at the bottom. As a GIF that file would 94 bytes, as a PNG it would be 210 bytes. Currently, you're using 11 graphics I think.

Okay, now I understand what you mean with the menu. Didn't understand it at first; my HTML/CSS skills aren't the greatest. Regarding the images; I did use the high settings for both GIF/PNG (Photoshop), maybe that's the reason that GIF was bigger for me than PNG.

digitalMedia wrote:

Your use of server-side scripting shouldn't affect your markup here. Even if the content to be inserted dynamically is of varying length or varying pixel dimensions. In the end, the output will still be HTML.

Okay thanks, I wasn't sure about that. That reminds me to another problem; in the previous sliced design, I was using 1 background image for the full height. Of course this works great when the content of the website does not expand. However when it does expand (more text) it would expand, but the background image had a fixed height, so the content didn't align anymore with the background (hope you understand what I mean, trying my best here to explain).

Again; I didn't mean any kind of offence. :S

Just trying to understand this all; I used to create websites with HTML tables and such. Then moved to CSS, cause tables are for data, but I still find CSS difficult to use, even tough I have read many tutorials on it (even htmldog).

I will try to upload the full design what I am trying to achieve later on. Have to go out for an hour or so. It will get you a better idea of what I am trying to achieve and maybe even give some few pointers / advice.

[digitalMedia]

August 14th, 2009, 3:46 am

Equally my fault on the tone of the posts. It's really hard to tell sometimes. I know I've read my own posts from time to time and thought I sounded like a sarcastic ass.

I really think we could work out a better strategy for your whole layout. I also think, in doing so, you'll gain a better idea for overall design and build that can incorporate all your desires.

I hope you'll continue posting here and give us a chance to help you. Maybe you'll consider, also, looking through my tutorial on floated layouts. ( html-tutorials/tutorial-multi-column-layout-using-css-float-part-t85704.html )

Pax!

August 14th, 2009, 5:26 am

No problem; it's difficult for to sometimes find the correct words, cause I am not English, which result in poor choice of words, which are misunderstood.

Okay I don't have the full site's layout ready, so I will post a link to it's "sister" site, which also has the same problems (doh). This site was created when I sliced everything the first time (and uses position:absolute a LOT).

Website

On the index page, I will not run into a lot of problems with the fixed height, cause nothing really expands the content... So it will not mess up the layout.

The real problems start on this page, I am very limited to size of the content-text area's and if I type to much, the column doesn't expand. And if I fool around and make the columns bigger I am facing a problem with the background image and / or the footer stays fixed and doesn't move along.

I will also check your tutorial on floated layouts. I already checked it for a minute or two, but I will need some more time to read it more carefully and to make it understandable for me.

//update #1

By the way, I am trying to get the layout working like in your tutorial, I will keep you updated.

//update #2

Seems I am doing alright; I understand I will run into problems. But currently it's going okay. I will continue on monday, will be gone for the weekend.

Thanks so far for your help so far! Highly appreciated and your tutorial is better and more detailed for compared to the one on htmldog. If I run into new problems on monday, I will post in the forum.

Any tips, or advice? E.g. how do I get the background of the columns completely yellow/light-brown?

August 17th, 2009, 2:10 am

Okay after the weekend break, I started again with the layout.

It's going pretty okay so far, check it here.

However I have a few questions / problems;

Question 1 = SOLVED!

Question 2
How do I get the background working like in this example like here

Cause with that "old" layout everything was fixed, meaning it would not expand. With the new layout, the design "can" expand (probably not going to happen, but you never know) and when that happens the background image would probably look messed up, cause it has a fixed size.

Question 3 = SOLVED!
Question 4 = SOLVED!

Please advice. In the meantime I will continu my work.
Thanks so far!

//edit

Removed questions which were solved. The only problem is the background.
Updated links.

August 17th, 2009, 8:33 am

Seems I have solved everything!
Validated the HTML & CSS with no errors!

And the design now expands. Great!

Thanks for the help. If I encounter new problems I will be back!

[digitalMedia]

August 18th, 2009, 9:02 am

Awesome!!! Sorry, I wasn't more help. I've been swamped this week.

August 18th, 2009, 9:51 am

No problem, thanks to you I managed to redo it correctly.
And of course thanks to your awasome tutorial. Even understandable for a noob like me.

Thanks once again.

August 19th, 2009, 2:29 am

I do have a new question.
How do you expand a vertical line (or line image) to your content?

Take a look at this example: here

See middle brownish line? If the content on either side expands, how do I make the line (auto)expand as well? Can I use a 2-column layout, or should I have to use a 3-column layout to achieve this and how?

I want to use it here for example: here

One more problem I bumped into, is the footer. Though it looks and works great on big content pages, it doesn't look to great on short content pages (e.g. contact page). Also I want the footer to stay (stick to the bottom). Is this possible when using floats?

This also happens for the rest of the pages when viewing in a resolution like 1920x1440. You get a white part under the footer. If it is possible to stick the footer to the bottom, it would fix a lot of problems.

And last, but not least, I am having several white spaces in between for no reason. :S

Please advice.

Regards,
HHawk