Почему этот DIV смещен вниз?

Я пытаюсь создать простой веб-сайт, используя DIV -s, по какой-то причине menuДИВ сдвигается вниз примерно 200px, Что вызывает это?Почему этот DIV смещен вниз?

Website Link

JSFiddle

HTML:

<div id="titlediv"><!--Title--> 
    <a href="Default.html"><img src="res1/title500x100.png" class="pagelogo"/></a> 
</div> 

<div id="container"><!--Full Width Content--> 
    <div id="menu"><!--Title--> 
     <ul class="tablemenu"> 
      <li><a href="Default.html" id="link">Home</a></li> 
      <li><a href="#" id="link">Link1</a></li> 
      <li><a href="#" id="link">Link2</a></li> 
      <li><a href="#" id="link">Link3</a></li> 
      <li><a href="#" id="link">Link4</a></li> 
      <li><a href="#" id="link">Link5</a></li> 
     </ul> 
    </div> 

    <div id="divider"><!--Black Divider--> 
    </div> 

    <div id="content"><!--Main Content--> 
    </div> 
</div>

CSS:

body{ 
    font-family: Arial, Helvetica, sans-serif; 
} 

#titlediv{ 
    width:100%; 
    height:100px; 
    display:block; 
    text-align:center; 
    background-color:red; 
} 

.pagelogo{ 
    max-height:100px; 
} 

#container{ 
    width:100%; 
    height:500px; 
    background-color:blue; 
} 

#menu{ 
    width:250px; 
    height:100%; 
    background-color:orange; 
    display:inline-block; 
} 

#menu ul{ 
    list-style:none; 
    text-align:right; 
} 

#menu a{ 
    font-size:40px; 
    text-decoration: none; 
    font-color:black; 
    line-height: 50px; 
    padding-right:10px; 
    padding-left:10px; 
    color:black; 
    border-top-left-radius:8px; 
    border-bottom-left-radius:8px; 
} 

#menu a:hover{ 
    background-color:#999967; 
} 

#divider{ 
    width:5px; 
    height:500px; 
    display:inline-block; 
    background-color:black; 
} 

#content{ 
    width:500px; 
    height:500px; 
    display:inline-block; 
    background-color:yellow; 
}

Также я хотите второй ряд div -s (меню + делитель + содержания) быть центром в голубого#containerdiv, как я могу это сделать?

источник

2013-05-31 Edd

Вы используете 'id = 'link'' несколько раз. 'id' должен быть уникальным, вы должны изменить это на 'class'. – Aquillo

Контейнер меню установлен в display: inline-block, по умолчанию vertical-align: bottom. Все, что вам нужно, это добавить следующее:

#menu { 
    vertical-align: top; 
}

источник

2013-05-31 10:29:46

Простите, но я не могу понять: если 'vertical-align' по умолчанию имеет значение' bottom', почему '#menu div', похоже, не согласуется ни с чем? Верхняя часть находится где-то посередине остальной части контента, а нижняя часть проходит мимо. Как он выравнивается по дну? Дно чего? –

«Как он выравнивается по дну?» Нижняя часть текста в div 'menu' выравнивается с нижней частью' container' div. Изменение вертикального выравнивания на 'top' сообщает тексту в' menu' div выравниваться с вершиной 'container' div. –

Вертикальный сдвиг в меню вызывается display: inline-block; в CSS для #menu. Если вам нужно использовать inline-block, вы также можете добавить vertical-align: top;, чтобы исправить это.

источник

2013-05-31 10:30:06 rtcherry

Должен ли я сделать это для всех 3 DIVs в этой строке? – Edd

В настоящее время это не имеет значения, так как на этих других div есть высота, и нет ничего выше их. Но лучше не устанавливать высоты таких основных элементов, поэтому на самом деле вы, вероятно, обнаружите, что вам нужно также установить вертикальное выравнивание, как только они начнут заполнять контент. –

Удалить display: inline-block и использовать float:left на #menu и #divider.

Чтобы сконцентрироваться, ограничьте # контейнера так, чтобы он был нужной шириной, а затем используйте margin:0px auto (или используйте новый div с этим свойством margin).

Возможно, вам удастся избавиться от #divider, если вы используете границы или свойства фона в #menu, это зависит от того, что вы хотите для этого разделителя.

источник

2013-05-31 10:34:07

Почему этот DIV смещен вниз?

ответ

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