Jump to content
Stef's Coding Community
activeworker

Css Project Fix

Recommended Posts

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...