问题

I've been sat here for 2 hours simply tring to align my logo with the navigation bar so it all fits on one line similar too http://weightshift.com/

Im trying too add this image

http://imageshack.us/photo/my-images/26/logonkg.png/

to align with the navigation bar im using which uses the following CSS, and am really stuck everytime i try to align it the nav bar goes below the header, im creating this on dreamweaver using the responsive framework, help would be greatly appreciated.

#menu {
     background:#333;
    height:100px;
}

#h1 {
width: 100px;

}


#menu-wrap {
      margin:0 auto;
    width:1200px;
}

#navigation-main {
    display: inline-block;
    padding:0px;
    color:#fff;
    font-size:24px;
    font-weight:bold;
    margin-bottom:5px;
    float: right;
}

#navigation-main li {
    float:left;
    margin-right:20px;
}

#navigation-main li a {
    display:block;
    color:#fff;
}

#navigation-main li ul  {
    display:none;
    z-index:0;
}

#top-nav-info {
    background:#dddddd;
    float:left;
    width:1200px;
}

#top-nav-sec li a {
    padding:0px;
    display:inline;
    height:42px;
    color:#a19f9f;
}

With the html currently being

<body>
<div class="gridContainer clearfix">
  <div id="LayoutDiv1">

    <div id="header">

      <div id="menu">
         <h1> <img src="images/logo.png"> </h1>

                <div id="menu-wrap">



<ul id="navigation-main">
          <li><a href="">Home</a><span class="nav-sec">The Beginning</span></li>
            <li><a href="">Articles</a><span class="nav-sec">Tips, Tricks, Advice</span></li>
            <li><a href="">Tutorials</a><span class="nav-sec">Photoshop Techniques</span></li>
            <li><a href="">Resources</a><span class="nav-sec">Fonts, freebies, wallpapers</span></li>

        </ul><!--end navigation-menu-->
    </div><!--end menu-wrap-->
    </div>
   </div>
  </div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>

回答1:

To recreate the header in the example you gave you simply need to add a float: left to the logo image and float: right to the ul that contains your navigation links.

<img class="left" />
<ul class="right">
    <!-- nav links here -->
</ul>

.left { float: left; }
.right { float: right; }

Here is a working jsfiddle. What were you trying to do with #menu-wrap? That is the only thing I took out because I couldnt see what you were trying to do with it and it was breaking the header.

回答2:

In addition to @Simplify's answer, there is more than one way to do this. If you wish to float these items left and right, make sure the total width of the two floated elements do not exceed the width of their container.

Option 1

JS Fiddle

http://jsfiddle.net/bjuGB/1/

HTML

<div class="container">
  <img class="logo" />
  <ul class="nav">
    <!-- nav links here -->
  </ul>
  <div style="clear: both"></div>
</div>

CSS

.container { width: 1000px; }
.logo { 
  float: left; 
  width: 300px;
}
.nav { 
  float: right; 
  width: 600px;
}

I also added a clear: both styled div to ensure any new elements do not "fall into" the float, but move to a new line.

Option 2

It may be less of a headache to use absolute positioning here. Just make sure you define the container with relative positioning.

JSFiddle

http://jsfiddle.net/6gnkW/

HTML

<div class="container">
  <img class="logo" />
  <ul class="nav">
    <!-- nav links here -->
  </ul>
  <div style="clear: both"></div>
</div>

CSS

.container {
  position: relative;
  width: 1000px;
}
.logo, .nav { 
  position: absolute; 
  top: 5px;
}
.logo { left: 10px; }
.nav { right: 10px; }

回答3:

I would personally move your logo outside the menu. Instead of

<div id="header">

  <div id="menu">
     <h1> <img src="images/logo.png"> </h1>

I would do this

<div id="header">
     <h1> <img src="images/logo.png"> </h1>

  <div id="menu">

That's just personal preference. Next like @Simplify mentioned then you would want to make these elements float left and right like so:

<div id="header">
     <h1>Name of Site<img class="left" src="images/logo.png" alt="" /></h1>

  <div id="menu">

You will notice that I put the class left, an alt and closing tag in the image "/" as well. It wouldn't hurt to check your code from time to time with http://validator.w3.org/

Finally you want to add this to your css file.

.left { 
float: left; 
}

#menu { 
width: 100%; 
padding: 0; 
margin: 0; 
}

#menu-wrap { 
margin: 0 auto; 
width: 1200px; /* You will need to change this */
float: right; 
}

#header h1 { 
text-indent: -9999px; 
} 

#header h1 img { 
border: none; 
}

The text indent will make the h1 text disappear while keeping good seo. Ignore the grey text. Not sure why its doing that :)

Also, I notice you have a set width for your menu as 1200px. I am sure you are wanting the entire width of the page to be this size. In this case you will need to adjust that for your logo to fit in the same line. For example. If your logo is 200px wide you will want to lessen the width of the menu to reflect that including any margin or padding your add. This will allow the logo and menu float side by side. Simply put, you don't want both of these elements to be wider than its main container of 1200px or it will not float side by side.

You will also need to create a class that clears the floating elements. I like to use .breaker

.breaker { clear: both; }

Add

<div class="breaker"></div>

after your closing menu tag.

回答4:

The logo and the navigation have the parent container of, #navigation .stack-width. That stack-width has a width set to 960 pixels. By default, the logo and nav blocks have inherited the width of 100% of the box. They need to have specific widths added to them, so that they can be floated within the parent container. I tend to work on CSS in the browser using Firefox as opposed to logging in to the site and making edits in the Themebuilder. One of the following styles is to override the margin-left that is currently applied to, #navigation-region .content .view-multilingual-menu. Instead of pasting in this part of the CSS, you could just remove the style wherever it has been applied in the Themebuilder. Since the parent container is 960 pixels, the CSS will set the widths as follows. The logo is set to 218 pixels to accomodate the width of the image. The navigtion is set to 728 pixels. Each of the table elements is given a padding of 4 pixels top & bottom and 7 pixels left & right. This is an override of the default theme styles for tables which is usually 4px, 10px. 218px for logo + 728px for the nav + 14px of padding = 960 pixels

#navigation-region .content .view-multilingual-menu {margin-left: 0 !important;}

#block-block-476 {width: 218px; float: left;}

#block-views-multilingual-menu-block {width: 728px; float: right;}

.view-multilingual-menu table th:first-child, .view-multilingual-menu table td:first-child, .view-multilingual-menu table td, .view-multilingual-menu table th {

padding: 4px 7px;

}

来源：https://stackoverflow.com/questions/14104599/problems-aligning-my-logo-with-the-navigation-bar

标签

html