如何在同一背景div的左侧放置图片和菜单？ （含图片）

Question

So I have 3 elements: the Nav bar which is the container and stretches across the whole screen, the logo which should be contained and positioned to the left (although the height is bigger than the container so I don't know if this causes a problem) and the navigation menu which should be exactly in the middle of the page. Sorry for the bad paint picture but I wanted to be able to show what I mean:

I've tried multiple ways to do this, made the Nav bar a block and the nav menu and logo inline-blocks and tried to text-align: center the nav menu but it stays to the left. I could use a percentage margin here to try get it to the middle but it seems off center if I try it on different screens. I tried to just use margin: auto 0; on the nav menu and it centers it but then appears below the menu not inside the nav bar. The closest I've come is having the logo outside the nav bar div then the nav bar floated next to it, but then margin: auto 0; would only put it in the center of the shortened nav bar and not the center of the page.

Thanks in advance.

Edit:

It works by floating the logo left within the navBar div like so:

    #navBar { 
background-image: url('transp50.png'); 
min-width: 100%; 
height: 50px; 
} 
    #logo { 
float: left; 
width: 200px; 
} 
    #navmenu { 
margin: 0 auto; 
width: 350px; 
}

The only thing that doesn't work with this, is that when I resize the window to be small the menu elements get knocked onto another line. Anyway to prevent this?

Answer 1

Have the logo float to the left side, and then it will not interfere with the width of the Nav bar. Your LOGO image should be inside the NAV bar element and float:left, set the width, but ensure that the min-width of the nav bar is equal (or greater) to the width of the image and the nav menu.

Your picture is awesome.

Pseudo code / HTML5:

<nav>

<a>menu element</a>
...
<a>menu-element</a>
</nav>
<img id="logo" src="..." width="120">

CSS:

nav {
width:100%;
text-align:center;
padding-left:120px; // the same width as the logo to prevent overlap 
}
nav > a {
display:inline-block;
}
#logo {
float:left;
width:120px;
}
#logo::after {
clear:both; //clears the floating element space.
}

There are various guides about working this better to ensure that the nav elements Never move within the width of the logo, as in, the nav elements always stay 120px away from the left hand side of the screen, but this is a starting point for you

ANSWER PART 2

The only thing that doesn't work with this, is that when I resize the window to be small the menu elements get knocked onto another line. Anyway to prevent this?

Without seeing your HTML for this section, I am guessing you need to use min-width to stop the #navmenu section shrinking.

so judging that the 350px is your minimum working width for that #navmenu add:

#navBar {
min-width:550px; //200+350
}

Answer 2

You can do this:

<div id="navbar">
<img id="mylogo" />
<div id="nav"></div>
</div>

some css that may help:

#navbar {
  // should not require anything in particular
}

#nav {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

#mylogo {
  float: left; // won't increase the bar size will stay on the left
}