Расстояние для тега <br>

mxm008 · August 10, 2009

Подскажите пожалуйста, как можно уменьшить расстояние в теге <br>. Чтобы отступ был поменьше, чем стандартный.

P.S. смотрел на сайте, там только для элементов <p> есть такая штука...

Justnewone · August 10, 2009

Подскажите пожалуйста, как можно уменьшить расстояние в теге <br>. Чтобы отступ был поменьше, чем стандартный.
P.S. смотрел на сайте, там только для элементов <p> есть такая штука...

CSS

BR{display:none)

И делаем меню на UL>LI

Edited August 10, 2009 by Justnewone

psywalker · August 10, 2009

Подскажите пожалуйста, как можно уменьшить расстояние в теге <br>. Чтобы отступ был поменьше, чем стандартный.
P.S. смотрел на сайте, там только для элементов <p> есть такая штука...

1) Используй Доктайп <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

и пиши его так: <br />

2) Не используй этот тег там, где не нужно

3) Давай скрин того, что хочешь получить, мы тебе посоветуем, как лучше сделать в данной ситуации

mxm008 · August 10, 2009

Вот скрин. Расстояние, на которое указывают стрелки нужно сделать меньше.

То, что показано на рисунке я сделал так:

1. Блок с датой "9 августа" - это div.

2. Затем, после этого div'a я поставил <br>

3. Ну и дальше картинка.

Это код вышеописанного...

<div class="subname">
<font class="sub2">с 9 августа</font>
</div>

<br>

<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>

Edited August 10, 2009 by mxm008

Justnewone · August 10, 2009

Вот скрин. Расстояние, на которое указывают стрелки нужно сделать меньше.
То, что показано на рисунке я сделал так:
1. Блок с датой "9 августа" - это div.
2. Затем, после этого div'a я поставил <br>
3. Ну и дальше картинка.
Это код вышеописанного...
<div class="subname">
<font class="sub2">с 9 августа</font>
</div>

<br>

<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>

Убрать BR ваще и дать .sub2 нужный margin-bottom, вместо font воспользоваться span, а еще круче вообще

<font class="sub2">с 9 августа</font>

</div>

првратить в

<h2 class="subname">с 9 августа</h2>

И уже на .subname переписать все стили

Edited August 10, 2009 by Justnewone

psywalker · August 10, 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">
 div { width:; }
 	h2 { font: 15px Verdana, Geneva, sans-serif; margin-bottom: 10px;}
	a, a img { display: block; width:; margin: 0 auto; }
</style>
</head>

<body>
	<div>
		<h2>с 9 августа</h2>
		<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>
	</div>
</body>
</html>

Кстати если это какая нибудь афиша и таких блоков больше и к тамуже они стоят один за другим, я бы вообще делал списком UL не задумываясь

Edited August 10, 2009 by psywalker

mxm008 · August 10, 2009

Justnewone и psywalker

Спасибо за помощь

Кстати если это какая нибудь афиша и таких блоков больше и к тамуже они стоят один за другим, я бы вообще делал списком UL не задумываясь

Да, таких блоков будет по 4 в одном ряду, и они будут друг за другом. Можете пояснить про списки UL. А то я думал, что это только к тексту списки применяются...

dark_hero · August 10, 2009

Вот скрин. Расстояние, на которое указывают стрелки нужно сделать меньше.
То, что показано на рисунке я сделал так:
1. Блок с датой "9 августа" - это div.
2. Затем, после этого div'a я поставил <br>
3. Ну и дальше картинка.
Это код вышеописанного...
<div class="subname">
<font class="sub2">с 9 августа</font>
</div>

<br>

<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>

я бы вообще все сделал в 3 дива - дата, отступ, картинка, на мой взгляд так было бы проще и нагляднее

psywalker · August 10, 2009

Да, таких блоков будет по 4 в одном ряду, и они будут друг за другом. Можете пояснить про списки UL. А то я думал, что это только к тексту списки применяются...

Да не только к тексту, ко многим вещам, вот у тебя же например список фильмов с датами, да и ситуация сама диктует так поступить.

<!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">
* { margin: 0; padding: 0; border: none;}

	ul { list-style: none; overflow: hidden;}
		ul li { float: left; width: 25%; text-align: center;} /* для ИЕ напиши ширину 24.9%*/


	h2 { font: 15px Verdana, Geneva, sans-serif; margin-bottom: 10px;}
	a, a img { display: block; width:; margin: 0 auto; }

</style>
</head>

<body>
<ul>
	<li>
		<h2>с 9 августа</h2>
		<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>
	</li>
	<li>
		<h2>с 9 августа</h2>
		<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>
	</li>
	<li>
		<h2>с 9 августа</h2>
		<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>
	</li>
	<li>
		<h2>с 9 августа</h2>
		<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>
	</li>
</ul>
</body>
</html>

dark_hero

я бы вообще все сделал в 3 дива - дата, отступ, картинка, на мой взгляд так было бы проще и нагляднее

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

Edited August 10, 2009 by psywalker

dark_hero · August 10, 2009

dark_hero
Не согласен никак, твой способ некрасив и не семантичен, мало того, что он разделяет вещи, которые являются одним целым. Неправильный подход к делу друг

ну что целое разделяет это верно

psywalker · August 10, 2009

ну что целое разделяет это верно smile.gif

А зачем тогда советовать такие способы, от которых потом могут быть проблемы?

dark_hero · August 10, 2009

А зачем тогда советовать такие способы, от которых потом могут быть проблемы?

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

psywalker · August 10, 2009

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

Никаких удобств я тут не вижу, а вижу только кучу лишних элементов+классов, совершенно не подходящих для данной ситуации, да и потом я вообще в принципе не стал бы делать div ради отступа - это говорит лишь о твоей неопытности в этом деле

Justnewone · August 10, 2009

<ul class="belt">
<li>
<h2>с 9 августа</h2>
<a href="#" target="_parent"><img src="../img/02.jpg" alt="Ченеть внятное" /></a>
</li>
<li>
<h2>с 9 августа</h2>
<a href="#" target="_parent"><img src="../img/02.jpg" alt="Ченеть внятное" /></a>
</li>
<li>
<h2>с 9 августа</h2>
<a href="#" target="_parent"><img src="../img/02.jpg" alt="Ченеть внятное" /></a>
</li>
<li>
<h2>с 9 августа</h2>
<a href="#" target="_parent"><img src="../img/02.jpg" alt="Ченеть внятное" /></a>
</li>
........
<li>
<h2>с 9 августа</h2>
<a href="#" target="_parent"><img src="../img/02.jpg" alt="Ченеть внятное" /></a>
</li>
</ul>

CSS:

.belt, 
.belt LI{
margin:0;
padding:0;
}/*этот блок можно раделить написав отдельно нужные маргины и паддинги при желании*/

.belt LI{
display:inline-block;
width:XXX;
vertical-align:top;
* display:inline;/*эта, и след. строки - лекарство для ослов 6 и 7, при необходимости перенести их в отдельный файл стилей для IE7 и ниже*/
* zoom:1;
}

.belt LI H2{
margin-bottom:XXX;
/*фонтсайз и прочие стили*/
}

.belt LI IMG{
vertical-align:bottom;
}

psywalker, для чего же xhtml стриктами понтоваца, если элементарные ошибки допускаете? На валидатор не пробывали верстку свою запускать?

Edited August 10, 2009 by Justnewone

dark_hero · August 10, 2009

Никаких удобств я тут не вижу, а вижу только кучу лишних элементов+классов, совершенно не подходящих для данной ситуации, да и потом я вообще в принципе не стал бы делать div ради отступа - это говорит лишь о твоей неопытности в этом деле

ну например у нас есть 20 разных(различного оформления с различными классами и стилями) блоков, нужно чтобы все горизонтальные и вертикальные отступы у всех блоков были по 10px - в таких случаях я пользую свой метод.

psywalker · August 10, 2009

Justnewone

psywalker, для чего же xhtml стриктами понтоваца, если элементарные ошибки допускаете? На валидатор не пробывали верстку свою запускать?

Не понимаю, к чему эти заявления, при чём тут "Скрикт" и темболее уж "Пантоваться"?? У меня по умолчанию в Дриме стоит этот Доктайп, я его копирую сразу весь и всё, а код я пишу не для Валидатора, а для человека, которому нужна помощь и не для того, что-бы он тупо скопировал его и себе вставил, а для того, что бы он понимал, в какую сторону ему копать и если понял, то сделал под себя уже со всеми вытикающими.

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

dark_hero

ну например у нас есть 20 разных(различного оформления с различными классами и стилями) блоков, нужно чтобы все горизонтальные и вертикальные отступы у всех блоков были по 10px - в таких случаях я пользую свой метод.

	
Тогда бы максимум всё равно я сделал бы так, не более:
<div>
		<h2>с 9 августа</h2>
		<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>
	</div>

Edited August 10, 2009 by psywalker

dark_hero · August 10, 2009

Justnewone
Не понимаю, к чему эти заявления, при чём тут "Скрикт" и темболее уж "Пантоваться"?? У меня по умолчанию в Дриме стоит этот Доктайп, я его копирую сразу весь и всё, а код я пишу не для Валидатора, а для человека, которому нужна помощь и не для того, что-бы он тупо скопировал его и себе вставил, а для того, что бы он понимал, в какую сторону ему копать и если понял, то сделал под себя уже со всеми вытикающими.
Вообще не ожидал от тебя такой детской чуши, извнини
dark_hero
	
Тогда бы максимум всё равно я сделал бы так, не более:
<div>
		<h2>с 9 августа</h2>
		<a href="#" target="_parent"><img src="../img/02.jpg" class="big"></a>
	</div>

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

Justnewone · August 10, 2009

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

Нет уж, Батенька, извольте...

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

psywalker · August 10, 2009

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

Стоп, не понял юмора, если я не ошибаюсь, то мой пост на несколько постов раньше твоего? Может просто произошла непонятка, так что ты ошибся друг, всё нормально, я не ворую чужие идеи

Justnewone · August 10, 2009

Вощем, смари внимательней )

psywalker · August 10, 2009

Вощем, смари внимательней )

Как скажешь дядь

Sign In

Расстояние для тега <br>

Question

Link to comment

Share on other sites

20 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

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