CSS список меню пролонгации / отступ - PullRequest
Новая
       7

CSS список меню пролонгации / отступ

3 голосов
/ 25 июля 2010

мне интересно, может кто-нибудь помочь мне с проблемой css / html.

У меня сложное фоновое изображение.Раздел меню расположен в правильном месте, чтобы наложить фон, где он должен располагаться.Весь LI имеет всплывающее изображение с отображением типа блока.В результате, когда указатель мыши находится над списком, href всего блока работает ...

Проблема возникает, однако, когда я пытаюсь добавить заполнение, чтобы создать буфер между текстом элемента списка и его границей.начнем смешно ... Я добавлю снимок экрана .. Заполнение требуется, чтобы переместить его от границы.

Вторая проблема заключается в том, что я не могу выровнять текст по центру, не применяя высоту строки. Решение прекрасно работает, пока элементы не будут перенесены. Мне нужно иметь возможность обернуть текст пункта меню.

В следующем примере показано состояние с текущим CSS / HTML.Строка меню и ролловер находятся на своем месте, как и ожидалось.Изменить я не могу поместить изображение в ограничения для публикации здесь как нового человека. Однако пример можно найти по адресу 213.40.100.100 / example1.jpg

В приведенном ниже примере показано состояние при добавлении отступа ИЛИ поля,Кажется, что LI полностью сдвигается, не перемещая внутренний текст ..

213.40.100.100 / example2.jpg 

 <div id="wrapper">      
  <div
  id="header">Header</div>      <div
  id="menu">
     <ul>
       <li><a>Contact Us</a></li>
       <li><a>Recommends</a></li>
       <li><a>Deals</a></li>
       <li><a>Home</a></li>
     </ul>      </div>      <div id="content">Content</div>      
  <div id="footer">Footer</div>  
</div>




 @charset "utf-8"; /* CSS Document */



 * {  margin: 0;  padding: 0; }

 body {  
padding-top: 10px;
  background: url(background.jpg) no-repeat center top;  height:100%; 
}

 div#wrapper {  
margin: auto;  
height: 100%;  
width: 978px;
  min-width: 978px;
 }

 div#header { 
 height: 196px;
 }

 div#menu { 
 height: 69px; 
 position:
 relative; 
}

 div#menu ul { 
 height: 69px;

  list-style-type: none; 
}

 div#menu ul li { 
 display: block;  

  height: 69px; 
 width: 140px; 
 float: right; 
 padding: 5px; 
}

 div#menu ul li a:hover {
  display:block;
  background:url(menu_red_bg.jpg) repeat-x;  height: 69px;  color:#FF0;
  font-family: Arial, Helvetica, sans-serif; 
 font-size: large; 
}

 div#menu ul li a { 
 text-decoration: none; 
 color:#000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
 }

 div#content {  margin-top: 80px; }

1 Ответ

0 голосов
/ 26 июля 2010

Я думаю, что вы добавляете отступ к неправильному элементу.или вы добавляете «поле» к <li>, или добавляете отступ к div#menu

Я должен сделать это:

Меню div # с желтым градиентным фоном, сОтступы 5px и поля: 80px 0 0 0;Внутри этого div, <ul><li>...</li></ul> Вам не нужно добавлять какие-либо отступы или поля к li, просто убедитесь, что высота каждого li меньше, чем div#menu heigh + padding.

...