2015-04-15 1 views
0

У меня есть заголовок, в котором расположено меню таблицы, однако я сталкиваюсь с некоторыми проблемами при попытке сделать border-bottom, когда вы наведите указатель мыши на определенные td, border-bottom появится, когда вы наведите указатель мыши на него, но граница останется, когда вы наведете на другую часть страницы. (Граница появляется на пару пикселей выше нижней границы заголовка.) * Я уже решил эту проблему самостоятельно, забыл удалить заявление calc() ранееborder-bottom on hover issue и текстовый автоцентр

Также мне интересно, почему текст в документе td ' s автоматически центрируется по вертикали. Может быть, я что-то пропустил, пожалуйста, помогите?

* { 
 
    padding: 0; 
 
    margin: 0 auto; 
 
} 
 
header { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    margin-left: 0 auto; 
 
    margin-right: 0 auto; 
 
    height: 80px; 
 
    background-color: rgb(50, 50, 50); 
 
} 
 
#header_container { 
 
    width: 100%; 
 
    height: 100%; 
 
    max-width: 1000px; 
 
    border: 0px solid black; 
 
} 
 
#menu_container { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#menu_container tr { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#menu_container td { 
 
    height: 100%; 
 
    width: 25%; 
 
    text-align: center; 
 
    color: rgb(203, 207, 218); 
 
    font-family: Signika; 
 
    font-size: 30px; 
 
} 
 
.menuItem { 
 
    padding-top: 14px; 
 
    border: 0; 
 
} 
 
.menuItem:hover { 
 
    border-bottom: 1px solid blue; 
 
} 
 
#logo { 
 
    width: 50%; 
 
    height: auto; 
 
}
<header> 
 
    <div id="header_container"> 
 
    <table id="menu_container"> 
 
     <tr> 
 
     <td> 
 
      <img id="logo" src="img/desygn%20logo%20website.png"> 
 
     </td> 
 
     <td class="menuItem">Home</td> 
 
     <td class="menuItem">Over</td> 
 
     <td class="menuItem">Contact</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</header>

+1

Ваше сотрудничество де, кажется, работает для меня ... это * все * разметка? какой браузер вы используете? – ochi

+3

Вертикальное центрирование или, вернее, выравнивание по вертикали: середина наследуется от стиля браузера по умолчанию. Но что более важно, вы действительно должны смотреть не использовать

s для разметки меню навигации. – Neps

+1

'td' имеют 'vertical-align: center' по умолчанию, чтобы визуально выравнивать данные. Если вы хотите изменить это, вы можете, конечно. –

ответ

1

Логотип размер изображения тревожного сафари браузер, который был зафиксирован с

#logo { 
    max-width: 100%; 
    height: auto; 
} 

Надеется, что это решение отлично подходит для вас :)

* { 
 
    padding: 0; 
 
    margin: 0 auto; 
 
} 
 
header { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    margin-left: 0 auto; 
 
    margin-right: 0 auto; 
 
    height: 80px; 
 
    background-color: rgb(50, 50, 50); 
 
} 
 
#header_container { 
 
    width: 100%; 
 
    height: 100%; 
 
    max-width: 1000px; 
 
    border: 0px solid black; 
 
} 
 
#menu_container { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#menu_container tr { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#menu_container td { 
 
    height: 100%; 
 
    width: 25%; 
 
    text-align: center; 
 
    color: rgb(203, 207, 218); 
 
    font-family: Signika; 
 
    font-size: 30px; 
 
} 
 
.menuItem { 
 
    padding-top: 14px; 
 
    border: 0; 
 
    border-bottom: 1px solid rgb(50, 50, 50); 
 
    box-sizing: border-box; 
 
} 
 
.menuItem:hover { 
 
    border-bottom-color: blue; 
 
} 
 
#logo { 
 
    max-width: 100%; 
 
    height: auto; 
 
}
<header> 
 
    <div id="header_container"> 
 
    <table id="menu_container"> 
 
     <tr> 
 
     <td> 
 
      <img id="logo" src="img/desygn%20logo%20website.png"> 
 
     </td> 
 
     <td class="menuItem">Home</td> 
 
     <td class="menuItem">Over</td> 
 
     <td class="menuItem">Contact</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</header>

+0

Ну, это вроде работы, но не так, как я хочу. +1 для усилия, хотя, я исправляю свою проблему по-другому. – YSbakker

+0

Я думаю, что это будет, избавившись от стола и заменив его отдельными divs. – YSbakker

+0

Вот что я пытался сказать, он работает действительно, но я нашел альтернативный способ решить мою проблему, поэтому я не «счастлив», с вашим ответом, если вы так выразились. Однако это действительно работает, и именно поэтому я даю вам преимущество. – YSbakker