div строго под заданным div

sw33t · December 3, 2012

Здравствуйте, уважаемое сообщество htmlbook.

Мне нужен совет: как сделать так, чтобы блок меню начинался точно с того места, откуда начинается блок баннера?

Код страницы под спойлером. Заранее спасибо.

<!DOCTYPE html>
<head>
<title>Новые веяния в веб дизайне</title>
<meta name="description" content="Я криворукий веб-дизайнер, начинающий «пилить» сайты. Пока только на pure html">
<meta name="keywords" content="html, криворукость, неуч">
<style>
#banner
{
color:white;
}
span
{
color:blue;
}
</style>
</head>
<body>
<div align="center">
<div 
style="background:blue;height:77px;width:77%;float:top;" 
align="center" >
<span id="banner" style=""> Это вроде как баннер (условно) </span>
</div>
</div>
<div style="float:left;width:23%;background:grey;">
<p style="color:white;"> Условно, меню:<p><br/>
<span>Контакты</span><br/>
<span>Адреса</span><br/>
<span>Явки</span><br/>
<span>Помидорка</span>
</div>
</body>

alekseyk24 · December 3, 2012

<div

style="background:blue;height:77px;width:77%;float:right;"

align="center" >

sw33t · December 4, 2012

<div
style="background:blue;height:77px;width:77%;float:right;"
align="center" >

Нет же. Тогда баннер начинается с меню (оно к нему успешно флоатится).

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

Спасибо.

alekseyk24 · December 4, 2012

Так что ли:

Vadimka · December 4, 2012

вы хотите чтобы у вас меню на баннер как бы наезжало? задайте отрицательный margin-bottom тому элементу который идёт первым, и чтобы этот margin-bottom был равен высоте своего элемента

sw33t · December 4, 2012

Так что ли:
<div style="margin:0 auto;width:23%;background:grey;">

вы хотите чтобы у вас меню на баннер как бы наезжало?

Эм, нет.

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

alekseyk24 · December 4, 2012

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

То есть левый верхний угол меню должен находиться прямо под левым нижнем углом баннера?

Vadimka · December 4, 2012

дык...если просто два дива с заданой шириной и высотой и с нулевыми margin задать, без float даже, они так и так будут так как вы хотите http://jsfiddle.net/NGUMU/ если нет то вы плохо объясняете)) нарисуйте если не так как надо получилось

и ещё...пригляделся в ваш код, float:top; ?????? вы где то увидели или сами придумали?)) http://htmlbook.ru/css/float

Edited December 4, 2012 by Vadimka

alekseyk24 · December 4, 2012

дык...если просто два дива с заданой шириной и высотой и с нулевыми margin задать, без float даже, они так и так будут так как вы хотите http://jsfiddle.net/NGUMU/ если нет то вы плохо объясняете)) нарисуйте если не так как надо получилось
и ещё...пригляделся в ваш код, float:top; ?????? вы где то увидели или сами придумали?)) http://htmlbook.ru/css/float

Вы тоже не можете понять как это может быть?

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

Vadimka · December 4, 2012

если у них ширина одинаковая, высота задана, float нет, задать margin: 0 auto; для каждого, вот вам выравнивание по центру и они друг под другом http://jsfiddle.net/YEeNT/ в избежание недопонимания лучше нарисовать в паинте хотя бы то как вы это хотите чтобы люди голову не ломали))

или же так нужно? http://jsfiddle.net/rUAfX/ оборачиваем меню и баннер в контейнер выровненный по центру и всё

sw33t · December 5, 2012

Эм, нет. В этом случае они буду идти друг за другом. Нужно же, чтобы "блок меню начинался точно с того места, откуда начинается блок баннера", т.е. они начинались от одной вертикальной прямой и висели друг под другом.
То есть левый верхний угол меню должен находиться прямо под левым нижнем углом баннера?

Да, верно.

и ещё...пригляделся в ваш код, float:top; ?????? вы где то увидели или сами придумали?))

В мета тегах "неуч" же

или же так нужно? http://jsfiddle.net/rUAfX/ оборачиваем меню и баннер в контейнер выровненный по центру и всё

О да. Именно так. Спасибо.

Но если я поставлю у margin значчение auto, не будет ли это черевато? Ведь браузер же, как я понял, будет сам выбирать значение отступов.

проделанный контейнер:

<!DOCTYPE html>
<head>
<title>Новые веяния в веб дизайне</title>
<meta name="description" content="Я криворукий веб-дизайнер, начинающий «пилить» сайты. Пока только на pure html">
<meta name="keywords" content="html, криворукость, неуч">
<style>
#banner
{
color:white;
margin: 0 auto;
}
span
{
color:blue;
}
</style>
</head>
<body>
<div #container style="margin: 0px auto;width: 77%;align="center"">
<div style="background:blue;height:77px;width:77%;">
<span id="banner" style=""> Это вроде как баннер (условно) </span>
</div>
<div id="menu" style="float:left;width:23%;background:grey;">
<p style="color:white;"> Условно, меню:<p><br/>
<span>Контакты</span><br/>
<span>Адреса</span><br/>
<span>Явки</span><br/>
<span>Помидорка</span>
</div>
</div>
</body>

нарисуйте если не так как надо получилось

В следующий раз обязательно будет картинка. Прошу прощения.

Vadimka · December 5, 2012

Но если я поставлю у margin значчение auto, не будет ли это черевато? Ведь браузер же, как я понял, будет сам выбирать значение отступов.

сам блочный элемент по умолчанияю растягивается на всю ширину своего родителя, задаём ему ширину и он по умолчанию прижат влево, а margin: 0px auto; браузер делит разницу от ширины родителя и ширины дочернего блока на левый и правый марджин, вот и получается выравнивание по центру. это нормальный способ выровнить блок по центру (если конечно у него нет float), в старых IE6 и ниже не работает, тут мы дополнительно ставим text-align: center; тому блоку внутри которого выравниваем контейнер, таким образом и в IE6 работает и в нормальных браузерах.

sw33t · December 6, 2012

Но если я поставлю у margin значчение auto, не будет ли это черевато? Ведь браузер же, как я понял, будет сам выбирать значение отступов.
сам блочный элемент по умолчанияю растягивается на всю ширину своего родителя, задаём ему ширину и он по умолчанию прижат влево, а margin: 0px auto; браузер делит разницу от ширины родителя и ширины дочернего блока на левый и правый марджин, вот и получается выравнивание по центру. это нормальный способ выровнить блок по центру (если конечно у него нет float), в старых IE6 и ниже не работает, тут мы дополнительно ставим text-align: center; тому блоку внутри которого выравниваем контейнер, таким образом и в IE6 работает и в нормальных браузерах.

Спасибо большое. Очень доходчиво!

Sign In

div строго под заданным div

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information