Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Stu Cowley
Stu Cowley
26,287 Points

CSS Navigation Issue

Hey guys,

I currently building a web site for a client and and I have come across a rather annoying issue with the navigation and a intro image.

I am using the grid.css that was used for smells like bakin'. I have a large black box that has a div class of grid_12 and an ID of header and a contains a text logo, I also have a header image that is also the size of grid_12 with a navigation menu that sits atop the header image with a 70% opacity.

The issue that I have is, on my about.html I have the same layout as index.html except the the image has a smaller height, and this then pushes the navigation into the black logo section. I have been trying to fix this issue for a while and I just can't fix it (I hope this makes sense).

I have attached the HTML and CSS and a couple of images for your to see.

Live web site *I was having some issues with my FTP and have since worked it out :D

index.html

<div class="container clearfix">
            <!-- header -->
            <div id="header" class="grid_12">
                <a href="index.html">
                    <h1>Loveday Spa</h1>
                    <h2>Skin and Body Treatments for Men &amp; Women</h2>
                </a>
            </div>
            <div id="imageSlider" class="grid_12">
                <img src="images/introSliderA.jpg" alt="An outside image of Loveday Spa">
            </div>
            <div id="navigation" class="grid_12">
                <nav>
                    <a href="index.html">Home</a>
                    <a href="about.html">About</a>
                    <a href="treatments.html">Treatments</a>
                    <a href="blog.html">Blog</a>
                    <a href="content.html">Contact</a>
                </nav>
            </div>

about.html

<div class="container clearfix">
            <!-- header -->
            <div id="header" class="grid_12">
                <h1><a href="index.html">Loveday Spa</a></h1>
                <h2><a href="index.html">Skin and Body Treatments for Men &amp; Women</a></h2>
            </div>
            <div id="imageSlider" class="grid_12">
                <img src="images/aboutSliderA.jpg" alt="An image of a waxing room at Loveday Spa">
            </div>
            <div id="navigation" class="grid_12">
                <nav>
                    <a href="index.html">Home</a>
                    <a href="about.html">About</a>
                    <a href="treatments.html">Treatments</a>
                    <a href="blog.html">Blog</a>
                    <a href="contact.html">Contact</a>
                </nav>
            </div>

I can't seem to get the HTML code to display nicely for some reason

style.css

#header {
    background-color: #000;
    color: #FFF;
    padding: 1em 0 1em 0;
}
#header h1 {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 5.500em;
    font-weight: 100;
    text-align: center;
    font-variant: small-caps;
    letter-spacing: 4px;
    margin: 0;
    padding: 0;
}
#header h2 {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1em;
    font-weight: 100;
    text-align: center;
    letter-spacing: 3px;
}
#header a {
    color: #FFF;
    text-decoration: none;
}
/* intro slider */
#imageSlider {
    margin: -0.780em 0 0;
}

/* about slider */
#aboutSlider {
    margin: -0.780em 0 0;
}
/* navigation */
#navigation {
    text-align: center;
    text-transform: uppercase;
    background-color: #FFF;
    opacity: 0.7;
    margin: -31.1em 0 0;
    height: 3em;
    z-index: 999999px;
}
#navigation nav {
    margin: 0.750em 0 0;
}
#navigation nav a {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    font-size: 1.150em;
    color: #333;
    letter-spacing: 2px;
    margin: 0 2em 0 2em;
    transition: 0.5s;
    -webkit-transition: 0.5s;
}
#navigation nav a:hover {
    color: #F15A29;
}

If someone has any suggestions as to why this is happening I would be truly thankful as this has been kicking my ass since Tuesday.

Thanking you in advance

Stu :)

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Stu,

I edited your post so the code will display nicely. You needed to add a line break between the bolded filenames and the start of the code. :)

7 Answers

Nora Demirjian
Nora Demirjian
7,160 Points
Nora Demirjian
Nora Demirjian
7,160 Points

Try adding this <br style="clear: both;"> before the start of your navigation so before this: <div id="navigation" class="grid_12">

Hope this helps :)

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Stu,

Where are the images? They would really help to see what's going on.

Jeff

Nora Demirjian
Nora Demirjian
7,160 Points

pic.twitter.com/fOZOp2DUcB pic.twitter.com/hdgm53irRA

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey Jeff,

I don't why this has happened, but if you head over to http://www.stucowley.com/lovedayspa I've put up the actual live example. Might see if Nick Pettit or Guil Hernandez could possibly shine some light on this.

Stu :)

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Stu,

I think I fixed your problem. I figured the problem had to be in the markup somewhere. Since both index.html and about.html were using the same css files I didn't think that was the problem. So I took both html files and stripped them of everything except the divs to compare the structure of them; didn't see a problem there. So the only real difference I could see was that different images were being used in the imageSlider div. The introSliderA.jpg image was 1000px by 400px and the aboutSliderA.jpg image was 1000px by 300px. So I changed the aboutSliderA.jpg image to 1000px by 400px and what do you know. You can look at the pages at the links below and then simply copy the aboutSliderA.jpg image and use it as is if you think it looks OK. I think the image file sizes are a little big but I guess you can change that if you like.

Jeff

Index About

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hi Jeff

I am aware that the image on the about page is smaller than the one on the home page as the design requires that.

Stu :)

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hi Jeff

I am aware that the image on the about page is smaller than the one on the home page as the design requires that.

I reckon what I'll need to do is make separate IDs for the intro navigation on index.html and a global navigation ID. I'll give that a crack and I'll post up the out come.

And @Nick Pettit that makes perfect sense, I always forget to close out italics and/or bold. :)

Stu :)

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

OK guys,

So I have corrected the issue, I'm not 100% if it is the correct way to do it, but it seems to display correctly in all major browsers, include IE!!!

What I did was declare a separate ID on the home page as introNavigation and a global ID called navigation, as I said I would do earlier on.

Stu :)