Problem with CSS floats (images) in layout.

  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

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?
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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. :(
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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

Anyone has an idea?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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!
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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?
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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.
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Awesome!!! Sorry, I wasn't more help. I've been swamped this week.
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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.
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

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
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

In your first link, everything has a fixed height. The page was designed and built to hold a very specific amount of content. The line in the center is a JPG. If you want that area to expand to hold a variable amount of content, you would need to use an image that tiles, or repeats.

In CSS, that would look something like this:
Code: [ Select ]
#my_container{background:url(images/brownish_line.jpg) repeat-y;}


However, the same thing could also be achieved by using the border property, like so:
Code: [ Select ]
#my_container{border-left:5px solid #EEE8D0;}


The above could be applied to the longer of the two columns.

For the issue regarding the footer; My preference would be to handle this with background images and colors in the parent container. That way, the container itself would not be expanding, but it would make sense visually.
Code: [ Select ]
#my_container{background:url(images/red_background.jpg) no-repeat #98000C;}


If implemented correctly, the outcome would be something like this:
Attachments:
backmast.jpg


Again, I think the best solution here is going to be a strategy of using background images and colors for different parent and child containers. You could divide your page into different horizontal sections:
Code: [ Select ]
 
<body> <--Red background color
<div id="head">
    <div>Header and Menu Content</div> <--width and margin:0 auto;
</div>
<div id="body"> <--Yellow background color   
    <div>Page Content</div> <--width and margin:0 auto;
</div>
<div id="foot"> <--Yellow background color
    <div>Footer Content</div> <--width and margin:0 auto;
</div>
 
  1.  
  2. <body> <--Red background color
  3. <div id="head">
  4.     <div>Header and Menu Content</div> <--width and margin:0 auto;
  5. </div>
  6. <div id="body"> <--Yellow background color   
  7.     <div>Page Content</div> <--width and margin:0 auto;
  8. </div>
  9. <div id="foot"> <--Yellow background color
  10.     <div>Footer Content</div> <--width and margin:0 auto;
  11. </div>
  12.  

It's overly simplified, I know. But I hope you'll get the idea.
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

First; thanks for taking the time to answer.

1. I got rid of the white backgrounds in the columns and on the sides. So that's solved!
2. I got the middle-line working with only 2 colums. I used border-right on the left column. So that's solved to!

However I cannot get the footer working like it should;

a) It should be completely at the bottom.

or

b) It should fill up the rest of the empty space (beneath the footer) with a red color or something.

I tried several things, but everything results in something which is not acceptable.

Check these screenshots:

- Screenshot #1
- Screenshot #2
- Screenshot #3

Screenshot 3 is my best result, however the background beneath the footer is not read. :(

Website is online: here. Only Home and Contact are working atm.

Please advice, cause I don't understand what I am doing wrong. Shouldn't be this hard, right?
Guess I am just plain stupid.

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 46 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.