Space? Like a white area of a few pixels?

Klaas Koopman · 12-04-2006, 07:55 AM

Hi All,

Currently I am working on my new weblog design, but somehow can't figure a certain part out.

I designed my design with photoshop and how am working on putting it into html/css ( and then going to add the wordpress in ). But I am being held down on 2 area's, which both should be white area's...

Below is the link to the design how it should be, and the second link is how it is currently. The white part should be between menu's and below the second menu should be a white part.

This is how it should be:
http://www.koopmansblog.nl/problem/v1copy.png

This is what I got so far:
http://www.koopmansblog.nl/problem

If you see any other things that you would change, let me know.

Thanks Alot!
P.S. am I correct when i'm saying a div can't be small like 5px in height?

Taltos · 12-04-2006, 09:49 AM

Hi Koopman,

<div> height can be whatever you want. Some browsers will extend that height to match what you put in the <div> so you have to be careful. Based on the way you have the HTML right now, you probably do want to add a <div> that uses a white background color and contains a non-breaking space (  ) or a 1 x 1 pixel transparent spacer gif. Use it after your "class=menu" <div> and again after the submenu <div>.

I think you should also be able to just add to your menu and submenu classes:

Code:

margin-bottom: 5px;

Good Luck

Klaas Koopman · 12-04-2006, 10:13 AM

Quote:

Originally Posted by Taltos

Hi Koopman,

<div> height can be whatever you want. Some browsers will extend that height to match what you put in the <div> so you have to be careful. Based on the way you have the HTML right now, you probably do want to add a <div> that uses a white background color and contains a non-breaking space (  ) or a 1 x 1 pixel transparent spacer gif. Use it after your "class=menu" <div> and again after the submenu <div>.

I tried this, but somehow in FF ( or IE don't remember ) it's just like thesame high as this font... I had it like 3px or something but it was as high as size 12 font...

Quote:

Originally Posted by Taltos

I think you should also be able to just add to your menu and submenu classes:

Code:

margin-bottom: 5px;

Why is this?

Quote:

Originally Posted by Taltos

Good Luck

Thanks I can use it

Taltos · 12-04-2006, 10:22 AM

Hi Koopman,

On the <div> you would need to make sure the div didn't inherit a font size from like body or html. But I think the easy answer is your body background is white. The bottom-margin: 5px should create a 5 pixel space on the bottom of menu and submenu areas that will show the white background from body. This should be created outside the border. The possible problem for this solution is that you may have to use the box-model hack for IE5.5 or older (or didn't IE 6 need the box-model hack also? don't remember now).

After I took a quick look at style.css, you don't have any font sizes yet for body or html. Hmmm, you sure you had a non-breaking space in that div or better yet, the transparent spacer?

Klaas Koopman · 12-04-2006, 10:34 AM

Quote:

Originally Posted by Taltos

Hi Koopman,

On the <div> you would need to make sure the div didn't inherit a font size from like body or html. But I think the easy answer is your body background is white. The bottom-margin: 5px should create a 5 pixel space on the bottom of menu and submenu areas that will show the white background from body. This should be created outside the border. The possible problem for this solution is that you may have to use the box-model hack for IE5.5 or older (or didn't IE 6 need the box-model hack also? don't remember now).

I tried it and it looks perfect! Thanks alot, even works in IE. Is there anyone who can check if it works in any other browser? I think I got the IE 6.0.
I never heard of the box-model hack though.. is it still needed if yes how does it work?

Quote:

Originally Posted by Taltos

After I took a quick look at style.css, you don't have any font sizes yet for body or html. Hmmm, you sure you had a non-breaking space in that div or better yet, the transparent spacer?

Could you tell me what you mean with a non-breaking space or a transparent spacer?

Thanks alot for helping me out here, I really appreciate it!

[ btw, if you look at the first menu and the second, at the bottom the border bottom and border top they aren't right. I mean I got a border top, right and bottom. How can I make it so the top is actually the top and the bottom is actually the bottom and the right is in between? is this even possible without using a background?]

Taltos · 12-04-2006, 12:30 PM

Good to hear the easy solution worked for you!

Box model hack shouldn't be needed if the margin-bottom worked for you. Box model hack is a CCS fudge for IE5.5 and older. Standard CSS says the width and height of an element is the width and height you specify or that the element takes up. IE5.5 and older include the padding and border in that same width. IE had to do something different!!!! The bottom line is that you ended up having to specify different widths for IE browsers than you did for FF and other standards compliant browsers. Google "IE box model hack" and you will come up with tons of results if you are really curious.

A non-breaking space is " " in an html document. Use it if you need more than one space in a row since html ignores extra spaces. You can also use it when you really don't want anything in a <div> or a <td> other than creating some space.

The transparent spacer is a GIF image file that is 1 x 1 pixel. Using your favorite graphics program you create a very small ( 1 x 1 pixel ) image and all that is in that one pixel is the transparent color that GIF's support. So it is a very small invisible spacer image. Table based layouts use them a lot. CSS layouts don't use them very much.

As for your borders, it doesn't look like you made any changes on the original URL. I'm not sure what you are asking. I think your problem or question relates to the fact that your borders were originally overlapping. When you add the margin-bottom to your CSS, that shouldn't happen anymore. Let me know where the updated version is and I'll take a look.

Have Fun!

Klaas Koopman · 12-04-2006, 01:48 PM

Quote:

Originally Posted by Taltos

Good to hear the easy solution worked for you!

Box model hack shouldn't be needed if the margin-bottom worked for you. Box model hack is a CCS fudge for IE5.5 and older. Standard CSS says the width and height of an element is the width and height you specify or that the element takes up. IE5.5 and older include the padding and border in that same width. IE had to do something different!!!! The bottom line is that you ended up having to specify different widths for IE browsers than you did for FF and other standards compliant browsers. Google "IE box model hack" and you will come up with tons of results if you are really curious.

A non-breaking space is " " in an html document. Use it if you need more than one space in a row since html ignores extra spaces. You can also use it when you really don't want anything in a <div> or a <td> other than creating some space.

The transparent spacer is a GIF image file that is 1 x 1 pixel. Using your favorite graphics program you create a very small ( 1 x 1 pixel ) image and all that is in that one pixel is the transparent color that GIF's support. So it is a very small invisible spacer image. Table based layouts use them a lot. CSS layouts don't use them very much.

Thanks alot for these answers, sounds quite logical all! But that's with all this coding stuff!

Quote:

Originally Posted by Taltos

As for your borders, it doesn't look like you made any changes on the original URL. I'm not sure what you are asking. I think your problem or question relates to the fact that your borders were originally overlapping. When you add the margin-bottom to your CSS, that shouldn't happen anymore. Let me know where the updated version is and I'll take a look.

Have Fun!

I reuploaded it, btw I made it HTML and CSS validate, but the thing I said about the borders is still there in the menu's! Let me know!

Taltos · 12-04-2006, 03:10 PM

OK, I think I understand the border problem. You have slightly different colors for each border. You want the border-top (for .menu as an example) to be 3px tall and to cover the border-right all the way out to the outer edge of border-right. Same thing on the bottom.

If I have understood it correctly, the answer is you can't do that with just borders for a single <div>. The browsers want to make those borders join like the wood corners in a picture frame, on an angle. Yours is thin enough that it can't do a good job of making it look like it joins on an angle so it just doesn't look the way you need it to.

Bottom line is either go to a background with multiple <div> 's or accept it. It is very, very small. I would never have noticed if you hadn't mentioned it. We are all much more critical of our own work than most people would see to even think about being critical

Design looks nice though! Very clean and open. Good blog design IMO.

Klaas Koopman · 12-05-2006, 01:02 AM

Quote:

Originally Posted by Taltos

OK, I think I understand the border problem. You have slightly different colors for each border. You want the border-top (for .menu as an example) to be 3px tall and to cover the border-right all the way out to the outer edge of border-right. Same thing on the bottom.

If I have understood it correctly, the answer is you can't do that with just borders for a single <div>. The browsers want to make those borders join like the wood corners in a picture frame, on an angle. Yours is thin enough that it can't do a good job of making it look like it joins on an angle so it just doesn't look the way you need it to.

Bottom line is either go to a background with multiple <div> 's or accept it. It is very, very small. I would never have noticed if you hadn't mentioned it. We are all much more critical of our own work than most people would see to even think about being critical

Design looks nice though! Very clean and open. Good blog design IMO.

Thanks alot for helping me out, I really appreciate it.

About the being critical part, I totally agree on this. I had to make a portfolio for a course at school and have redone it like 6 or 7 times, but now I have come up with a final one which I'm going to develop.

And thanks about your comments on the blog design. It's a reall tough one to crack ( code ). But once it works, it''l be a really fine looking design!

Once again thanks alot for helping me out, really appreciate it. If you ever need any help, let me know!