Несколько вопросов по вёрстке...

DjTarik · October 19, 2008

В общем - сразу к делу.

1. Нужно сверстать макет из 4-х колонок... С этим нет проблем... Но когда я все эти дивы помещаю в див-обертку - мои столбцы отображаются поверх него... Ширина и высота не известны... Всё зависит от контента...


<div>
     <div class="col">1</div>
     <div class="col">2</div> 
     <div class="col">3</div>
     <div class="col">4</div>
</div>

————-->


div.col {
float: left;
width: 25%;
}

Что я не так делаю? Или это анрил? O_o

2. Смотрим картинку:

Как сверстать - всё понятно, списки и т.д. Вопрос вот в чём:

- мне заранее известна высота этой "полоски" с элементами меню. Как её лучше верстать - указывать точную высоту - или оставлять её, чтобы она растягивалась при увеличении шрифта в em? (если в Мозилле нажать контрл+)

P.S. Или при резиновой вёрстке считают только гороизонтальное растягивание? Просвятите молодого! =)

P.P.S. Надеюсь понятно спросил... )))

Victor Ananiev · October 20, 2008

когда резина, выставляют резиновую ширину а высота под нее подстраивается.

DjTarik · October 20, 2008

когда резина, выставляют резиновую ширину а высота под нее подстраивается.

Т.е. - указывать точную высоту не надо? Пусть подстраитвается под размер шрифта?

caprella · October 20, 2008


<div>
     <div class="col">1</div>
     <div class="col">2</div> 
     <div class="col">3</div>
     <div class="col">4</div>
</div>

————-->


div.col {
float: left;
width: 25%;
}

Что я не так делаю? Или это анрил? O_o

Попробуй родительскому диву поставить float: left;

DjTarik · October 20, 2008

Попробуй родительскому диву поставить float: left;

не... так тож не пашет... O_o

Searcher · October 20, 2008

Возможно, стоит внешнему диву задать какую-то ширину. Либо относительную либо абсолютную. А то не понятно от чего считать внутренние. И оставитть float:left у внешнего, чтобы они были в одном потоке. Можно еще с position поиграть...

DjTarik · October 20, 2008

с 1-ым вопросом разобрался - через позишн вроде получилось...

А кто что по поводу 2-ого посоветует??? Как кто верстает?

DjTarik · October 24, 2008

Всё-таки не получается так, как нужно... Вот код, для наглядности:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Проверка</title>

<style type="text/css">

body {
	margin: 100px auto;
	width: 700px;
}

div.son {
	float: left;
	width: 33%;
	border: 1px solid red;
}

div#mother {
	border: 1px solid green;
	padding: 20px;
}

</style>

</head>

<body>

<div id="mother">
	<div class="son">1<br>1<br>1<br>1<br>1<br></div>
	<div class="son">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br></div>
	<div class="son">3<br>3<br></div>
</div>

</body> 

</html>

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

P.S. Ну и по второму вопросу - тоже хотелось бы услышать ваше мнение (экспертное, кто как делает... сам вопрос - в первом сообщении)

mini · October 24, 2008

div#mother {

border: 1px solid green;

padding: 20px;

overflow:hidden;

}

поробуй так, если я првильно понял...

Когда есть к примнеру несколько блоков с флоатом лефт или райд, то делай им обвёрточку со свойством overflow:hidden;, тогда нижним блокам не нужно указывать clear:both;

по воторому вопросу,

итересно а каким обраом ты ёё будеш тянуть по высоте?

DjTarik · October 24, 2008

mini:

Точно... То, что надо... Это написано где-нить на HTMLBOOK или я просто не внимательно читал? (просто всё перерыл - ничего подобного не видел)

Других решений нет??? =)

По второму вопросу - интересует только при изменении размера шрифта в Мозилле при помощи Контрл+... Или сейчас это уже никто не практикует? O_o

mini · October 24, 2008

mini:
Точно... То, что надо... Это написано где-нить на HTMLBOOK или я просто не внимательно читал? (просто всё перерыл - ничего подобного не видел)
Других решений нет??? =)
По второму вопросу - интересует только при изменении размера шрифта в Мозилле при помощи Контрл+... Или сейчас это уже никто не практикует? O_o

можно ещё так

#mother {

border: 1px solid green;

padding: 20px;

float:left;

width:100%;

}

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

Честно, я конечно тоже новичёк сверстал только 20-30 сайтов, но ещё не разу не встречал что бы менюха тянулась по высоте , если менюха веб-фон тогда в основном она тянется то вертикали, ну если чувак захочет поменять отдельный элемент менюхи...

P.S. кстате div перед # не надо... если div без id или class тогда нужно писать div....

olga_4444 · October 27, 2008

Если я правильно поняла Вашу проблему, тогда вам должна помочь эта статья "Примеры резиновых блочных версток"

Удачи!!!

http://www.freeartists.ru/articles/web-mak...b-make-up3.html

DjTarik · November 10, 2008

В общем - проблема, которую я описал в первом посте, та, что про блоки, не решилась в IE6... Если кто знает, как это осуществить - напишите, плиз... Очень срочно нужно...

DjTarik · November 10, 2008

Неужели никто не знает? O_o

Searcher · November 10, 2008

В IE6 вот так все работает. В других не проверял.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<style type="text/css"> 

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	}

#Content {
	position:absolute;
	*margin:-3px 0 0 -3px;	/* регулируем 3-х пиксельный баг IE6 */
	*padding:3px 0 0 3px;	/* регулируем 3-х пиксельный баг IE6 */
	background:#aaa;
	}


div.col {
	float: left; 
	width: 25%; 
	background:#888;
	}

div.collast {
	float: left; 
	width: 25%; 
	background:#888; 
	clear:right;
	}


</style>
</head>
<body>


<div id="Content">

	<div class="col">1<br><br><br><br><br><br><br></div>
	<div class="col">2<br><br><br><br><br></div>
	<div class="col">3<br><br><br></div>
	<div class="collast">4<br><br><br><br><br><br><br><br></div>

</div>


</body>
</html>

DjTarik · November 10, 2008

А без использования позиционирования???

Searcher · November 10, 2008

вместо position:absolute можно float:left и clear:both и ширину установить, но там по 100% ширине в IE6 глюки будут. Периодически начнут полосы прокрутки возникать. Тогда нужно ширину устанавливать < 100% или overflow:hidden.

#Content {
	float:left;
	clear:both;
	width:100%;
	overflow:hidden;
	background:#aaa;
	}

DjTarik · November 10, 2008

вся фишка именно в том, что я и делаю через оверфлоу... Но чёт в IE 6 (имеено в нём) - не получается... Во всех остальных броузерах - норм... ХЗ почему...

Searcher · November 10, 2008

если в коде, который я привел в позапрошлом сообщении, заменить #Content на код из прошлого сообщения, все работает. overflow избавляет от глюка появления полос прокрутки в IE6, а не позиционирует. Позиционирует float:left;

DjTarik · November 10, 2008

если в коде, который я привел в позапрошлом сообщении, заменить #Content на код из прошлого сообщения, все работает. overflow избавляет от глюка появления полос прокрутки в IE6, а не позиционирует. Позиционирует float:left;

Ясно... Пойду разбираться... Если чего не пойдёт или не пойму - напишу... Спасибо за помощь!!!

Azadi · November 10, 2008


<!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" />

<style type="text/css">
* {
	padding:0;
	margin:0;
	border:0;
}
#wrap {
	height:1%;
	border-bottom:#000 1px solid;
}
#wrap:after {
	content:'';
	display:block;
	clear:both;
}
div.col {
	float: left;
	width: 25%;
	background:#eee;
	overflow:hidden;
}
</style>

<title>Title</title>
</head>

<body>

<div id="wrap">
	<div class="col">11111111111111111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111000000000000000000000</div>
	<div class="col">2</div>
	<div class="col">3</div>
	<div class="col">4</div>
</div>

</body>
</html>

То есть для первой проблемы единственное что нужно было - очистить float'ы. Способов много, я привел метод под названием "самоочистка плавающих блоков". Ослика урезонивает простое height:1%;

Теперь вторая проблема. Я бы сделал так: картинку разделительной косой черты сделать в графическом редакторе подлиннее (т.е. увеличить размер изображения), и при увеличении размеров шрифта будет открываться все большая часть картинки. Отступ слева от текста советую задать в em, а картинку спозиционировать в левый нижний угол (left bottom).

Searcher · November 11, 2008

В ослике такая очистка блоков не решает все проблемы:

не переносится текст в блоках,

последний блок все-равно прыгает периодически под предпоследний или дальше.

Sign In

Несколько вопросов по вёрстке...

Question

Link to comment

Share on other sites

21 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information