тег <p> в диве

Softlink · April 28, 2011

Приветствую!

Сегодня столкнулся с необычной для себя проблемой.

Страница сверстана с контентом в центре.

Разбита на 4 блока дивами. В двух блоках находятся ссылки в столбик. Так вот в чем суть. Если я в верхнем блоке ставлю ссылки в тег <p> то при разрешении 1024 появляется 1 пиксель справа от контента. Т.е. сам контент не разъезжается, а появляется именно отступ справа.

В нижнем блоке применение этого же тега проходит без проблем. хотя блоки одинаковы.

В разных браузерах отображается по разному.

У меня во всех, кроме Оперы лезет этот пиксель, в Опере нормально. У кого-то и в ФФ все ок. Я даже не знаю в каком направлении думать уже.

Код прилагается.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
</head>
_____________________________________________________________________

в таком виде лезет пиксель

			
<div id="string">
				<div id="stolb1">
					<div id="zagolovki">Регистрация</div>
					<p><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<div id="more"> <a href="#" class="more">Все статьи</a></div>
				</div>
				<div id="stolb2">
					<div id="zagolovki">Аудио</div>
					<p><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<div id="more"> <a href="#" class="more">Все статьи</a></div>
				</div>
				<div id="stolb3">
					<div id="zagolovki">Видео</div>
					<p><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<div id="more"> <a href="#" class="more">Все статьи</a></div>
				</div>
			</div>

в таком не лезет



			<div id="footer">
				<div id="string">
					<div id="footer-stolb">
					<div id="zagolovki">Самые полезные</div>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					</div>
					<div id="footer-stolb">
					<div id="zagolovki">Самые популярные</div>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					</div>
					<div id="footer-stolb">
					<div id="zagolovki">Самые новые</div>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					</div>
				</div>

				<div id="line"></div>
				<div id="copyright">копирайт</div>
			</div>

блоки идут друг за другом


#string{
padding-left:20px;
overflow:hidden;
}
#stolb1{
float:left;
width:30%;
margin-top:10px;
padding:15px;
border:1px solid #ffffff;
}

#stolb1:hover{
float:left;
width:30%;
margin-top:10px;
padding:15px;
border:1px solid #888888;
}

#footer{
height:100%;
border:0px solid #000000;
}

#footer-stolb{
float:left;
width:33%;
margin-top:20px;
}

дело точно не в ширине столбцов и паддингах. Потому как если убрать <p> и заменить его просто дивом, все прекрасно работает. Методом перебора и манипуляций с тегами пришел к такому выводу.

Может подскажете чем?

Могу всю верстку скинуть. Мы сегодня втроем ломали голову, но так и не поняли в чем может быть дело. Может у <p> есть какие-то специфические свойства? Сегодня нашел статью, что была подобная проблема (<p> в диве)у ие6, также появлялся отступ. У Лебедева в техногрете почитал примерно об этом же.

psywalker · April 29, 2011

Не очень жалую списки. Об этом варианте знал, но не рассматривал даже.

А вот и зря.

Softlink · April 29, 2011

Не очень жалую списки. Об этом варианте знал, но не рассматривал даже.
А вот и зря.

а может быть. В менюшках - пожалуйста, а в таких случаях не очень люблю их применять.

psywalker · April 29, 2011

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

Но почему же сразу разговор о менюшках. Ведь UL не для менюшек, а списков, каких то перечислений. Как раз твой случай.

Great Rash · April 29, 2011

Проблема не в оборачивании в <p> ссылок. Проблема в <div id="menu">. Поставьте ему display: none; и увидите, что все станет в порядке. По крайней мере у меня в Хроме все ок.

Нафига вы задали меню float, а затем position: absolute;? Верстка ужасна конечно. Порылся в стилях - куча ненужных правил. Куча ненужных оберток для элементов. Переделывайте по нормальному тогда все будет работать как надо.

psywalker · April 29, 2011

Нафига вы задали меню float, а затем position: absolute;? Верстка ужасна конечно. Порылся в стилях - куча ненужных правил. Куча ненужных оберток для элементов. Переделывайте по нормальному тогда все будет работать как надо.

Вот об этом то я и говорил. Вёрстку нужно с умом делать и будет всё нормально тогда.

Softlink · April 29, 2011

Проблема не в оборачивании в <p> ссылок. Проблема в <div id="menu">. Поставьте ему display: none; и увидите, что все станет в порядке. По крайней мере у меня в Хроме все ок.
Нафига вы задали меню float, а затем position: absolute;? Верстка ужасна конечно. Порылся в стилях - куча ненужных правил. Куча ненужных оберток для элементов. Переделывайте по нормальному тогда все будет работать как надо.

Нафига вы задали меню float, а затем position: absolute;? Верстка ужасна конечно. Порылся в стилях - куча ненужных правил. Куча ненужных оберток для элементов. Переделывайте по нормальному тогда все будет работать как надо.
Вот об этом то я и говорил. Вёрстку нужно с умом делать и будет всё нормально тогда.

Ребят, эти float и асболют, сейчас там от меню, которое я пытаюсь приделать и уже создал тему. На момент самой проблемы их не было)))

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

p.s. если сомневаетесь, уберите вообще блок id="menu". И поставьте всю ту же ширину в 1008px. Проблема останется.

Edited April 29, 2011 by Softlink

Great Rash · April 29, 2011

В общем переделывать с нуля и сразу нормально. Тогда проблем не будет.

Softlink · April 29, 2011

В общем переделывать с нуля и сразу нормально. Тогда проблем не будет.

так-то да, а если еще и таблицами наверстать, то поди вообще проблем не будет)))

Great Rash · April 29, 2011

Ну если вам нравится секс, то вам и карты в руки.

Softlink · April 29, 2011

к тому же там стили для еще 4-х страниц. Разве там много всего?

Меня просто зацепило выражение с "ужасной версткой" .

Вложенность минимальна, в html нет никаких вставок типа "style=..", стили для текста прописаны в одном месте, всяких извращений с паддингами нет, валидатор особо не ругается, разве что на одинаковые id, так с этим разберусь. Что же там такого ужасного и что бы вы сделали кардинально по другому? Вот интересно.

И вообще - это моя 3-я верстка на дивах

Edited April 29, 2011 by Softlink

Great Rash · April 29, 2011

Извращений там миллион! Начиная с простого - использования id где попало.

Softlink · April 29, 2011

Извращений там миллион! Начиная с простого - использования id где попало.

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

Спасибо

Edited April 29, 2011 by Softlink

Great Rash · April 29, 2011

Не дам

swetlana · April 29, 2011

дайте пожалуйста ссылку на сайт с хорошей версткой…

а такое бывает вообще?

psywalker · April 29, 2011

Извращений там миллион! Начиная с простого - использования id где попало.
дайте пожалуйста ссылку на сайт с хорошей версткой, чтобы понять что такое хорошо и что такое плохо. Про id взял на заметку.
Спасибо

Тебе дружище не сайты надо с вёрсткой смотреть, а книжки читать, блоги и на форумах жить. Вот только тогда ты поймёшь, что такое "хорошая" вёрстка

Softlink · April 29, 2011

Всем спасибо за советы)), но внятного ответа так никто и не дал. Какая бы верстка "ужасной" ни была, из-за тега <p> не должен ехать сайт на 1 пиксель. Причем в каком браузере разъехаться - страничка выбирает сама, вопреки логике.

Думаю, тему можно закрывать.

Sign In

тег <p> в диве

Question

Link to comment

Share on other sites

41 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

Join the conversation

Обсуждения

Important Information