Как заставить блок "толкать" ul

lavr-ik · August 9, 2009

Нужно сделать так, чтобы при уменьшении окна #adver "толкал" #navmenu, чтобы строки в нем переносились без указания ширины для #navmenu. Сейчас я обхожусь тем, что явно прописываю ширину, но это костыль. Если ширина не прописана, то при уменьшении #adver переносится на новую строку, #navmenu остается без изменений. Что делать?

</div>

<li><a href="#">Новости</a></li>

<li><a href="#">Программы</a></li>

<li><a href="#">Эфирная сетка</a></li>

<li><a href="#">Форум</a></li>

</ul>

<a href="#">Разместить рекламу</a><br /><br />

</div>

#logo {

text-align: center;

margin-left: 7%;

float: left;

display: inline;

}

#navmenu {

float: left;

margin: 7% 0 0 7%;

line-height: 2em;

width: 35%;

}

#navmenu li {

display: inline;

padding-bottom: 1em;

white-space: nowrap;

}

#adver {

float: right;

text-align: right;

margin: 2% 2% 0 0;

display: inline;

}

psywalker · August 9, 2009

Попробуй лучше так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { min-width: 500px;}
#logo {
text-align: center;
margin-left: 7%;
float: left;
width: 200px;

}

#navmenu {
margin: 7% 0 0 7%;
line-height: 2em;
overflow: hidden;

}

#navmenu li {
display: inline;
padding-bottom: 1em;
white-space: nowrap;
}

#adver {
float: right;
text-align: right;
margin: 2% 2% 0 0;
display: inline;
} 
</style>
</head>

<body>

<div id="logo">
<img src="img/logo.jpg" width="109" height="144" alt="Логотип" />
</div>
<div id="adver">
<a href="#">Разместить рекламу</a><br /><br />
<img src="img/header_adver.jpg" width="315" height="100" alt="Рекламный баннер" />
</div>
</div>
<ul id="navmenu">
<li><a href="#">Новости</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Эфирная сетка</a></li>
<li><a href="#">Ди-джеи</a></li>
<li><a href="#">Форум</a></li>
</ul>

</body>
</html>

p.s. - А вообще у тебя там какая та ересь понаписана, изначально неправильный подход к делу

Edited August 9, 2009 by psywalker

lavr-ik · August 9, 2009

Прости, в чем ересь?

psywalker · August 9, 2009

Прости, в чем ересь?

В том, что уже изначально вёрстка неправильная, все вот эти процентные отступы, особенно верхние, потом хаотическое задавание стилей всем блокам, явно показывает твою неопытность в этом деле и что тебе ещё нужно много читать и практиковаться, вот начни с этого: http://stepbystep.htmlbook.ru/ - проштудируй, как следует все разделы, вникни и тогда вопросов будет меньше

lavr-ik · August 9, 2009

В том, что уже изначально вёрстка неправильная, все вот эти процентные отступы, особенно верхние, потом хаотическое задавание стилей всем блокам, явно показывает твою неопытность в этом деле и что тебе ещё нужно много читать и практиковаться, вот начни с этого: http://stepbystep.htmlbook.ru/ - проштудируй, как следует все разделы, вникни и тогда вопросов будет меньше

1. Отступы в относительных единицах я использую там, где "резина" не имеет смысла. Отступ у логотипа должен быть резиновым.

2. "Хаотическое задание стилей всем блокам" - поясни, пожалуйста. Ты про алфавитный порядок CSS-правил? Или ты имеешь в виду не присваивать ul id, а в CSS объявить #header ul?

3. Тон твоего сообщения, если честно, несколько коробит. Вы тут на htmlbook все такие?

UPD: Ууу, дружище, за что ты так ненавидишь тех, кто сидит на 1400, 1600 и т.д.? Я про верстку твою http://psywalker.ru/SAITS/Raira/main-page.html. max и min-width - это то, о чем надо размышлять на самой ранней стадии разработки, имхо.

UPD2: <img src="img/asto.jpg" alt="asto" /> Пользователи с ограниченными возможностями будут безмерно благодарны тебе за такое доступное текстовое представление изображения.

Edited August 9, 2009 by lavr-ik

psywalker · August 9, 2009

1. Отступы в относительных единицах я использую там, где "резина" не имеет смысла. Отступ у логотипа должен быть резиновым.
2. "Хаотическое задание стилей всем блокам" - поясни, пожалуйста. Ты про алфавитный порядок CSS-правил? Или ты имеешь в виду не присваивать ul id, а в CSS объявить #header ul?
3. Тон твоего сообщения, если честно, несколько коробит.

1) Отступ верхний? что-то я сомневаюсь, так как при сужении экрана верхний отступ поднимает все блоки, а не только логотип, да и то, делает это некрасиво

2) Я имею ввиду, что стили навешаны так, как будто от балды, от не знания своего дела, просто чё то знаю, вроде так должно быть и т. д.

3) Ты неправильно понял мой тон, я просто вижу по ситуации, что тебе нужно делать, советую

UPD: Ууу, дружище, за что ты так ненавидишь тех, кто сидит на 1400, 1600 и т.д.? Я про верстку твою http://psywalker.ru/SAITS/Raira/main-page.html. max и min-width - это то, о чем надо размышлять на самой ранней стадии разработки, имхо.

Эта работа, просто пример тем, кто взялся делать этот макет, я назначил минимальную ширину из тех соображений, что в этой работе надо кое что исправить, точнее рисунки сделать ПНГ, у меня нет времени возиться, поэтому я и поставил ограничитель!

UPD2: <img src="img/asto.jpg" alt="asto" /> Пользователи с ограниченными возможностями будут безмерно благодарны тебе за такое доступное текстовое представление изображения.

Пользователи мне благодарны за то, что я помогаю им своими советами и примерами

Edited August 9, 2009 by psywalker

lavr-ik · August 9, 2009

Я имел в виду, Раира не выстояла даже перед разрешением монитора в 1400 пикселей, какой уж там ураган. Про пользователей ты видимо тоже не понял. Атрибут alt у img должен давать текстовое представление в случае, если отключен показ изображений (еще не загрузились и т.д.). Скажи, о чем я должен подумать, когда прочитаю такой alt: asto? rosgor?

В общем, все ясно. Без обид, но ты low-skill, imho

UPD: И да, про проценты - вообще-то, я именно такого поведения и добиваюсь.

psywalker · August 9, 2009

Я имел в виду, Раира не выстояла даже перед разрешением монитора в 1400 пикселей, какой уж там ураган. Про пользователей ты видимо тоже не понял. Атрибут alt у img должен давать текстовое представление в случае, если отключен показ изображений (еще не загрузились и т.д.). Скажи, о чем я должен подумать, когда прочитаю такой alt: asto? rosgor?
UPD: И да, про проценты - вообще-то, я именно такого поведения и добиваюсь.

Для особо одарённых специально повторяю, что эта вёрстка была сделана специально для того, что-бы молодым был пример, а потом у меня всё отображается норма, при любом разрешении и размере шрифта...

В общем, все ясно. Без обид, но ты low-skill, imho smile.gif

По твоим вопросам и коду я уже понял, кто ты есть и насколько хорошо знаешь своё дело. И если ты обращаешься за помощью и советом, будь добр услышать про себя не только хорошие стороны, но и правду! И вместо того, что-бы прислушаться и сделать выводы, ты глупо споришь и доказываешь свою правоту. В общем я тебе высказал своё мнение и мне плевать, как ты его расценишь, это уже твои личные проблемы

Edited August 9, 2009 by psywalker

lavr-ik · August 9, 2009

http://www.bestiary.us/images/troll_zv.jpg

Удачи

Searcher · August 10, 2009

Уважаемый lavr-ik. Ваша агрессивнгая реакция говорит только о неопытности, которую вы сами и ощущаете и боитесь этого. Я тоже склоняюсь к мнению psywalker'а... Но будем отделять зерна от плевел. Вы действительно плохо понимаете предмет. Поясняю:

1. float: right; или left совместно с display: inline; - белеберда. Как вы себе представляете плавающие инлайн-элементы?

2. Когда у вас width: 35%; у navmenu оставляет слева пространство для баннера с width="315", тогда, естественно, ничего не переносится, но как только при уменьшении окна логотип и меню не оставляют этих 315 пикселей, да еще прибавляются места для отступов, и все начинает переносится.

3. Совмещать относительные и абсолютные величины надо очень осторожно. Изучайте уже изобретенные велосипеды:

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

...

4. Для всплывающих элементов важен порядок их объявления в структуре.

5. При изменении горизонтальных размеров окна, вертикальные относительные отступы изменяются пропорционально. Неужели вы хотите, чтобы меню плавало по вертикали в зависимости от ширины окна? Это выглядит очень странно и не красиво. Возникает какой-то отступ сверху у меню... Если вы хотите, чтобы все отступы масштабировались, то скажу честно, это неблагодарная работа: возни много, а эффект несущественный, да и от ошибок не застрахованный.

6. Вопрос "Что делать?" подразумевает не только описание того как уже обстоят дела, но и как вы хотите, чтобы это все работало. Мы ж не телепаты. Ну вот могу только догадываться:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<style type="text/css">
#logo {
text-align: center;
margin-left: 7%;
float: left;
}

#navmenu {
margin: 7% 315px 0 7%;
line-height: 2em;
}

#navmenu li {
display: inline;
padding-bottom: 1em;
white-space: nowrap;
}

#adver {
float: right;
text-align: right;
margin: 2% 2% 0 0;
width: 315px;
} 
</style>

<BODY>

<div id="logo">
<img src="img/logo.jpg" width="109" height="144" alt="Логотип" />
</div>
<div id="adver">
<a href="#">Разместить рекламу</a><br /><br />
<img src="img/header_adver.jpg" width="315" height="100" alt="Рекламный баннер" />
</div>
<ul id="navmenu">
<li><a href="#">Новости</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Эфирная сетка</a></li>
<li><a href="#">Ди-джеи</a></li>
<li><a href="#">Форум</a></li>
</ul>

</body>
</html>

Исправил на скорую руку основные ваши ошибки.

psywalker · August 10, 2009

Searcher

Зря старался, он сам кого хочешь обучит, нам далеко ещё до него

lavr-ik · August 10, 2009

Searcher, благодарю за комментарий. Неопытность я свою действительно ощущаю и действительно страшусь ее, поэтому читаю, читаю, читаю. Сначала не по теме: агрессивность моего тона вызвана в свою очередь снисходительностью тона psywalker (все эти "ересь", "изначально неправильный подход", "изучай степ-бай-степ"). Я задал ему несколько вопросов, ответов не получил Человек использует h1 для оформления логотипа, о чем тут можно говорить? Ну да ладно, проехали.

1. float: right; или left совместно с display: inline; - белеберда. Как вы себе представляете плавающие инлайн-элементы?

Очень хорошо представляю, например, img с выравниванием (которое через html задается через атрибут align, а CSS, соответственно, float). display: inline в данном случае необходим для ИЕ6 , решает проблему неверной калькуляции ослом margin (пруфлинк: http://www.positioniseverything.net/explor...ed-margin.html). И да - я предпочитаю в стили для осла выносить специфичные правила (zoom, holy hack's и т.д.). Поэтому объявление display: inline в общем файле стилей.

2. Когда у вас width: 35%; у navmenu оставляет слева пространство для баннера с width="315", тогда, естественно, ничего не переносится, но как только при уменьшении окна логотип и меню не оставляют этих 315 пикселей, да еще прибавляются места для отступов, и все начинает переносится.

Прошу прощения, моя вина, неправильно сформулировал то, что требуется.

3. Совмещать относительные и абсолютные величины надо очень осторожно. Изучайте уже изобретенные велосипеды:

За ссылки спасибо, сейчас займусь чтением.

4. Для всплывающих элементов важен порядок их объявления в структуре.

Я подозревал об этом, но не думал, что порядок настолько критичен.

5. При изменении горизонтальных размеров окна, вертикальные относительные отступы изменяются пропорционально.

Вообще да, хочу, чтобы меню плавало. У каждого из нас, я думаю, есть свои какие-то бзики относительно верстки (это и делает нас непохожими друг на друга Вот у меня бзик плавающее меню.

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

Господа, если есть аргументы для дискуссии, давайте перенесем тему в другой раздел и начнем обсуждение, не переходя на личности и уважая точку зрения друг друга Я бы хотел обсудить верстку psywalker.

Edited August 10, 2009 by lavr-ik

psywalker · August 10, 2009

Searcher, благодарю за комментарий. Неопытность я свою действительно ощущаю и действительно страшусь ее, поэтому читаю, читаю, читаю. Сначала не по теме: агрессивность моего тона вызвана в свою очередь снисходительностью тона psywalker (все эти "ересь", "изначально неправильный подход", "изучай степ-бай-степ"). Я задал ему несколько вопросов, ответов не получил smile.gif Человек использует h1 для оформления логотипа, о чем тут можно говорить? Ну да ладно, проехали.

Да, я тоже делаю ошибки, но в отличии от тебя я осознаю это и говорю спасибо людям, которые мне говорят об этом! А во вторых извини конечно, но подход у тебя действительно не правильный и явно во всём сказывается неопытность и плохое владение своим делом

Господа, если есть аргументы для дискуссии, давайте перенесем тему в другой раздел и начнем обсуждение, не переходя на личности и уважая точку зрения друг друга smile.gif Я бы хотел обсудить верстку psywalker.

Опоздал, обсуждали уже давно

lavr-ik · August 10, 2009

psywalker, ты лишен способности вести конструктивный спор, считаю бессмысленным дальнейшее комментирование какой-либо твоей фразы.

Justnewone · August 10, 2009

Извините, что влезу... <br /><br /> - вот такие конструкции посоветовал бы не использовать, а то потом вдруг - перемена дизайна, и их прятать только display:none если не ко двору.

Если Вам важна последовательность блоков в HTML, то только если указывать ширину.

lavr-ik · August 10, 2009

Я тоже поступаю так в большинстве случаев (когда сайт поддерживается сторонними людьми). Но когда я веду сайт дальше, обновляю его, поддерживаю (довольно часто поступают и такие просьбы), то стараюсь использовать меньше интуитивно понятных конструкций (все-таки, мне кажется, <a href="#">Hello!</a><br /> интуитивно больше понятно, чем <div class="somediv"><a href="#">Hello!</a><a href="#">World!</a></div>, CSS div.somediv a { display: block; margin: 1em 0 0 0})

Вообще, я достаточно серьезно меняю стиль верстки, если знаю, что дальше с ней буду работать я

Edited August 10, 2009 by lavr-ik

Justnewone · August 10, 2009

Я тоже поступаю так в большинстве случаев (когда сайт поддерживается сторонними людьми). Но когда я веду сайт дальше, обновляю его, поддерживаю (довольно часто поступают и такие просьбы), то стараюсь использовать меньше интуитивно понятных конструкций (все-таки, мне кажется, <a href="#">Hello!</a><br /> интуитивно больше понятно, чем <div class="somediv"><a href="#">Hello!</a><a href="#">World!</a></div>, CSS div.somediv a { display: block; margin: 1em 0 0 0})
Вообще, я достаточно серьезно меняю стиль верстки, если знаю, что дальше с ней буду работать я

А если еще <div class="somediv"><a href="#">Hello!</a><a href="#">World!</a><a href="#">Kill</a><a href="#">yourself!</a></div> - совсем неинтуитивно по сравнению с <div><a href="#">Hello!</a><div> и уж тем более <a href="#">Hello!</a> (a { display: block; margin: 1em 0 0 0})

lavr-ik · August 10, 2009

Разумеется.

Sign In

Как заставить блок "толкать" ul

Question

Link to comment

Share on other sites

17 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

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