Navbar Сидеть до низкого

У меня есть простой навигатор на моем сайте, используя только HTML и CSS. Navbar выглядит и функционирует так, как должно, но между изображением и фактическим навигатором есть пробел. Я хочу, чтобы навигатор сидел прямо под изображением.Navbar Сидеть до низкого

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title> 
    CrossFit Villains 
    </title> 
</head> 

<link rel="stylesheet" type="text/css" href="style.css" /> 

<body> 
    <header> 
     <span class="title"> 
      <a href="crossfitvillains.com">CrossFit Villains</a> 
     </span> 
     <br /> 
     <span>1702 McAra Street, Regina, SK</span> 
     <br /> 
     <br /> 
    </header> 

    <div id="banner"> 
     <img src ="banner.jpg" /> 
    </div> 

    <nav> 
     <ul id="menu" class="black"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Daily News</a></li> 
      <li><a href="#">Hours</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Class Sign In</a></li> 
     </ul> 
    </nav> 



body { 
background-image:url('dark_leather.png'); 
font-family: arial; 
color: white; 
margin-left: 15%; 
} 

.title { 
font-size: 90px; 
font-family: "Space Ranger"; 

text-decoration: none; 
} 

#address { 
font-size: 18px; 
text-decoration: none; 
color: white; 
} 

#email { 
text-decoration: none; 
} 

a { 
text-decoration: none; 
color: white; 
} 

a:hover { 
text-decoration: none; 
color: grey; 
} 

#container { 
float:left; 
vertical-align: top; 
} 


.image-section{ 
float:left; 
padding: 0 10px; 
} 

.cb{ 
clear: both; 
} 

.image-title { 
padding-left: 50px; 
} 

footer { 
padding-left: 10px; 
color: white; 
background-color: #333; 
position: fixed; 
left: 0; 
bottom: 0; 
width: 100%; 
} 

#footertext { 
margin-left: 15%; 
} 

#menu { 
text-transform: uppercase; 
margin: 50px 0; 
padding: 0 0 0 10px; 
list-style-type: none; 
font-size: 13px; 
background: #eee; 
height: 40px; 
width: 1280px; 
border-top: 2px solid #eee; 
border-left: 2px solid #eee; 
border-bottom: 2px solid #ccc; 
border-right: 2px solid #ccc; 
} 

#menu li { 
float: left; 
margin: 0; 
} 

#menu li a { 
text-decoration: none; 
display: block; 
padding: 0 20px; 
line-height: 40px; 
color: #666; 
} 

#menu li a:hover, #menu li.active a { 
background-color: #f5f5f5; 
border-bottom: 2px solid #DDD; 
color: #999; 
} 

#menu.black { 
border-top: 2px solid #333; 
border-left: 2px solid #333; 
border-bottom: 2px solid #000; 
border-right: 2px solid #000; 
background: #333; 
} 
#menu.black a { 
color: #CCC; 
} 

#menu.black li a:hover, #menu.black li.active a { 
color: #999; 
background: #555; 
border-bottom: 2px solid #444; 
}

источник

2013-06-09 ryandonohue

Вы пробовали сброс css? http://meyerweb.com/eric/tools/css/reset/ – Brannon

Я создал jsFiddle на основе html и css, которые вы создали here.

Я закончил тем, что убил дополнительные пиксели вашего #banner ДИВ были в письменной форме:

#menu { margin: 0; } 
#banner { line-height: 0; }

Edit: Как Вениамин был сказано выше, если вы хотите сохранить свою нижнюю границу, вы можете написать:

#menu { margin: 0 0 50px 0 }. 
// The order of specification is top, right, bottom, left

источник

2013-06-09 19:16:20

Работал, спасибо миллион! – ryandonohue

Звучит так, как будто ваш CSS нуждается в сбросе. Попробуйте следующее.

applet, object, iframe,body,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,  address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dd, dl, dt, li, ol, ul,fieldset, form, label, legend, caption,img, header, section { 
    margin: 0; 
    padding: 0; 
    outline:none; 
    border: none; 
}

источник

2013-06-09 19:06:29

Неупорядоченный список в вашем навигаторе имеет край 50px сверху и снизу. Это то, что отделяет ваш логотип от навигатора.

#menu { 
... 
margin: 50px 0; 
... 
}

Если вы хотите 50px ниже, вы хотите, чтобы написать это:

margin: 0 0 50px 0;

или просто:

margin-bottom: 50px;

Вам не нужно сброса CSS. Это похоже на использование пушки для работы скальпеля.

источник

2013-06-09 19:13:23 Benjamin

Navbar Сидеть до низкого

ответ

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