Логотип, перемещающийся из меню при добавлении списка

Я хотел бы иметь свой логотип внутри своего меню и список в середине страницы. Но только тогда, когда я сделать его плавать прямо мой логотип гостит в моем меню ... Вот пример: http://gyazo.com/76719bc76c08765cb1f8fee588b3daae Логотип, перемещающийся из меню при добавлении списка

<body> 
<div id="Wrapper"> 
<header> 
    <div id="Menu"> 
     <div id="Nav"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Contact Us</a></li> 
       <li><a href="#">Social</a></li> 
      </ul> 
     </div> 
     <Div id="logo"> 
      <img src="Breaking Bad.png" alt="Logo" height="150px"> 
     </div> 
    </div> 
</header> 
<div id="Video"><iframe width="640" height="360" src="http://www.youtube.com/embed/Gx7L8FWN80Y" frameborder="0" allowfullscreen></iframe></div> 
<div id="News"></div> 
<div id="Footer"></div> 
</div> 

</body>

body{ 
    font-family:impact; 
    overflow-y: scroll; 
    background-color:#4A4247; 
    margin:0px; 
} 
#Wrapper{ 
    margin:0 auto; 
    width:1000px; 
} 
#Menu{ 
    color:#09b800; 
    margin:0 auto; 
    width:1000px; 
    height:150px; 
    background-color:#151D04; 
} 
#Nav{ 
    text-align:center; 
    margin:0 auto; 
    display:table; 

} 
#Logo{ 
    clear:right; 
    float:left; 
} 
#Video{ 
    width:640px; 
    height:360px; 
    margin-top:20px; 
    float:left; 
    background-color:black; 
    margin-bottom:20px; 
} 
#News{ 
    margin-top:20px; 
    width:340px; 
    height:360px; 
    color:black; 
    float:right; 
    background-color:black; 
    margin-bottom:20px; 
} 
#Footer{ 
    clear: both; 
    background-color:black; 
    height: 100px; 
}

источник

2014-09-08 Frank Welles

Это неполное css/html, пожалуйста, создайте jsfiddle – Beowolve

Это может быть полезно:

<body> 
<style> 
    body{ 
    font-family:impact; 
    overflow-y: scroll; 
    background-color:#4A4247; 
    margin:0px; 
} 
#Wrapper{ 
    margin:0 auto; 
    width:1000px; 
} 
#Menu{ 
    color:#09b800; 
    margin:0 auto; 
    width:1000px; 
    height:150px; 
    background-color:#151D04; 
} 
#Nav ul{ 
margin:0 auto; 

} 
#Nav{ 
width:850px; 
margin-left:-75px; 
    text-align:center; 
    display:table; 
    float:left; 
} 
#Logo{ 
    clear:right; 
    float:left; 
    width:150px; 
} 
#Video{ 
    width:640px; 
    height:360px; 
    margin-top:20px; 
    float:left; 
    background-color:black; 
    margin-bottom:20px; 
} 
#News{ 
    margin-top:20px; 
    width:340px; 
    height:360px; 
    color:black; 
    float:right; 
    background-color:black; 
    margin-bottom:20px; 
} 
#Footer{ 
    clear: both; 
    background-color:black; 
    height: 100px; 
} 
</style> 
<div id="Wrapper"> 
<header> 
    <div id="Menu"> 

     <div id="logo"> 
      <img src="Breaking Bad.png" alt="Logo" height="150px"> 
     </div> 
     <div id="Nav"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Contact Us</a></li> 
       <li><a href="#">Social</a></li> 
      </ul> 
     </div> 
    </div> 
</header> 
<div id="Video"><iframe width="640" height="360" src="http://www.youtube.com/embed/Gx7L8FWN80Y" frameborder="0" allowfullscreen></iframe></div> 
<div id="News"></div> 
<div id="Footer"></div> 
</div> 

</body>

I объединить HTML и CSS вместе,
положил float слева на #Nav и #Logo, статическую ширину с отрицательным margin.Read код, и вы заметите трюк.

источник

2014-09-08 15:39:54 Masoud

Логотип, перемещающийся из меню при добавлении списка

ответ

Смежные вопросы