Css Layout Questions...

[dragon11689]

Hey Guys! I'm trying to transition from tables to div's for my layout. I've been setting up this very simple layout in css but cant seem to get it to display properly with my images. I'm uploading the files to this thread so it's easier to access the images along with the html/css code. The border for each css style is for troubleshooting purposes, but I can't seem to get my images to display. Any ideas or suggestions are appreciated. Thanks in advance.

[coothead]

Hi there dragon11689,

check out the attachment to see a modification of your code.

coothead

[dragon11689]

Thanks a bunch coothead....I saw that it displayed properly. Awesome job! I haven't compared the code, but I'm sure I'll learn plenty from the comparison. Thanks again man!

[coothead]

No problem, you're very welcome.

coothead

[dragon11689]

Hey Coothead,

I was just looking at the code and learning from it as much as I can. I'm curious though how did you go about getting the measurements for the following code in pixels:

#header {
height:66px;
padding:96px 0 0 406px;
background-image:url(../images/header-bg.gif);
}

#home span { background-position:0 0; }
#abou span { background-position:-69px 0; }

#serv span { background-position:-151px 0; }
#cont span { background-position:-222px 0; }

I understand how you came about the measurments for:

#navigation {
width:325px;
height:31px;
padding:0;
margin:0 0 0 0;
list-style-type:none;
background-color:#000;

I've learned to look at the image properties to set the width and height of the div for a specific image. That is what I'm seeing for the the div navigation but not the others. I'm curious to see how you went about that. Thanks for the big help so far. It is much appreciated.

[coothead]

Hi there dragon11689,

the "header-bg.gif" - (849x162 pixels) - was made by joining together your "ImprovedFitness_01.gif" - (289x163 pixels)
and the "ImprovedFitness_Nav.gif" - (560x162 pixels).

Before joining, as your images had slightly varying heights, I sliced 1px from the bottom of the "ImprovedFitness_01.gif".

In the CSS, the containing div - "#page" - was given the width of 849px and centered horizontally with "margin:auto".

In this code...

#header {
    height:66px;
    padding:96px 0 0 406px;
    background-image:url(../images/header-bg.gif);
 }

...the height value was calculated by subtracting 96px top padding from the "header-bg.gif" height of 162px.

The padding values were used to position the "#navigation" over the "background-image".

In this case 96px from the top and 406px to the left.

If you wanted to move the "#navigation" up or down, corresponding adjustments would be required for the height value.

The "navigation-bg.gif" - (317x31 pixels) - was made by joining horizintally together 4 images of respective widths - (69,82,71,95 pixels).

In this code...

#home {  width:69px; }
#abou {  width:82px; }
#serv {  width:71px; }
#cont {  width:95px; }

#home span {  background-position:0 0; }
#abou span {  background-position:-69px 0; }

#serv span {  background-position:-151px 0; }
#cont span {  background-position:-222px 0; }

...the "background-position:0 0;" sets the starting point for the Home section of "navigation-bg.gif".

To display the About Me section, which begins after the Home section, we move the "navigation-bg.gif" to the left by a value equal
to the width of the previous section - 69px.

This gives "background-position:-69px 0; as the starting point for the About Me section.

For each section, the process is repeated - adding together the widths of the previous sections and then moving the "navigation-bg.gif"
to the left by that value.

I really hope that this long-winded explanation helps.

If not then there is always...

Further reading:-

• CSS "Sprites"

coothead

[dragon11689]

Thanks for getting back to me. The idea with using sprites is great! I get that 100% but am still having trouble understanding the header measurements. Where did you happen to come up with the number for 96px. I guess once I know that, I'll probably get what I'm missing. Thanks again!

[coothead]

Hi there dragon11689,

...Where did you happen to come up with the number for 96px..

The number 96 was a totally arbitrary choice.

I could just as easily have chosen 50, 16 or or even 0.

I used 96 because, I thought that aesthetically, 96px from the top
of the "header-bg.gif" was an ideal position for the "#navigation"

coothead

[dragon11689]

Gotcha...actually looking at the css code and manipulating the numbers by playing around, I realize that it's not the numbers that were throwing me off, but it was the padding and height added together to equal height of the actual header image. I needed to get my head around to seeing the "big picture" and how it was functioning. Thanks a lot for your help. It is really much appreciated.

[coothead]

It is my pleasure to help in some small way.

coothead

[dragon11689]

Ok...I realized why my images were not showing up from the css style sheet...

for some odd reason, index.html was referencing the css file because the background color would show up but not the background images.

So, I looked line by line again at your code and compared to mine. I realized that you put the css file in a sub folder css instead of leaving it in the root folder. When I did the same and made the index file reference css/styles.css, the background images all showed up. I have been pulling my hair out for sometime now because of something so small such as this but I will not forget this ever again. Not sure why the stylesheet needs to be in its own subfolder, but I will not forget it ever again LOL!

[coothead]

Hi there dragon11689,

...Not sure why the style-sheet needs to be in its own sub-folder...

It doesn't.

By habit, I create folders for CSS and javascript files, when coding, as there may often be more than one.

Call it good housekeeping.

coothead

[dragon11689]

Hi there dragon11689,

It doesn't.

By habit, I create folders for CSS and javascript files, when coding, as there may often be more than one.

Call it good housekeeping.

coothead

hmm..that is odd since I put my stylesheet into a folder and referenced it by ../css/styles.css and it works as opposed to before when it was in its root folder being referenced as ../styles.css...it was the difference between my images showing up and not showing up.

[coothead]

Hi there dragon11689,

if the css file was not in a sub-folder, but next to the html file, then it would be...

<link rel="stylesheet" type="text/css" href="styles.css">

...as opposed to...

<link rel="stylesheet" type="text/css" href="css/styles.css">

coothead