Css Project Fix

[activeworker]

Hi,

 

Now I am working with a CSS project where I can set up a logo but when I want to set up navigation right side of logo it doesn’t work. You can see this in my attached file. If you want more information, please go this link: www dot net dot tutsplus dot com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

 

How do I fix it? Thank you.

CSS Pro.zip

[falkencreative]

I'm confused. If you have a tutorial that you are following along with, why aren't you doing step five, which explains how to build/position the logo and navigation?

[falkencreative]

In regards to the actual fix... the issue is that in your HTML, you have your navigation within your #logo div. In your HTML, I would suggest doing two things:

 

-- Use proper code indenting, like the NetTuts sample shows, so you can see what elements are nested within what other elements

-- Move the navigation ul after the #logo div

 

Next, you need to do some CSS fixes. The first thing would be to add some additional styles to your #container div, since that holds your site:

 

width: 960px; // sets a fixed width. May need to be adjusted, depending on your needs.
margin: 0 auto; // centers the site horizontally, in the middle of the browser
position: relative; // allows you to use absolute positioning on your elements, and the will be positioned relative to #container

 

Then, on your #logo, you need to change "left:320px;" to "left:0;"

 

And finally, on #menu, add "top: 20px;" to position it correctly.

 

Hope that helps? Personally, I'd highly suggest following along with the tutorial, building each step as they explain it, and working on it that way. It'll result in clean, error free code, and hopefully you'll learn something along the way?

[Andrea]

Right now, your nav division is inside the logo division, but the logo division is too small to hold all those words, especially in a row

 

Look at your CSS: At the beginning of it, you are setting all kinds of selectors to zero (note that no unit of measure is required with zero), but then you repeat the zero-setting throughout the rest of the CSS (just that you now add 'px', which is unnecessary - and that for the padding of your body, you have a typo and are using the letter 'o' instead of the zero. None of this will cause a problem, it's just redundant.

 

In your HTML, you probably don't need the wrapper AND the container div, unless you have some special formatting in mind.

 

But in general, to move your nav, give it a margin-left until it moves over to where you want it.

[activeworker]

Hi,

 

Thank you for your suggestion. Now I understood how to fix it. Keep well.