Только начинают верстать(WIP)

tini.kRyptoNite · November 25, 2011

Всем доброго времени суток.

Я начинаю только верстать и хотел бы слышать от вас подсказки и конструктивную критику. В этой теме буду выкладывать свои наработки и ждать ваших отзывов!

Вот первое что я сверстал _http://zalil.ru/upload/32134352

Хотел бы узнать вообще можно так верстать и может какие есть ошибки которые можно исправить. html, css код валидный.

Задумывалось(плавающий хедер резиновый, основная колонка фиксированной ширины в ней 2 колонки, футер прибит к низу резиновый).

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

Edited November 25, 2011 by tini.kRyptoNite

ShumNo · November 25, 2011

Ну верстку выкладывать на файлообменник не серьезно. Залейте уж лучше на народ

tini.kRyptoNite · November 25, 2011

Ну верстку выкладывать на файлообменник не серьезно. Залейте уж лучше на народ

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

Вот на народе _http://narod.ru/disk/32481846001/test.rar.html

Вот еще такой вопрос интересует. Сколько времени где-то нужно учиться верстать что бы достаточно хорошо уметь верстать?

Edited November 25, 2011 by tini.kRyptoNite

Nanto · November 25, 2011

пол-года

Так вкратце:

1) почему у файла расширение .php? Ваше счастье что там самих php-сущностей нет - браузеры их не понимают

2)

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

ничего лишнего не видите?

3)

font-weight:bold;font-size:18px;

лучше так:

font:bold 18px/normal "Ваш font-family";

, а ещё лучше так:

font:800 18px/normal "Ваш font-family";

4)


#top-menu{padding:5px;float:right;list-style:none;}
#top-menu li{margin-right:10px;float:left;color:#FFF;}

несколько косячная конструкция... почему не display:inline?

Edited November 25, 2011 by Nanto

tini.kRyptoNite · November 25, 2011

пол-года
Так вкратце:
1) почему у файла расширение .php? Ваше счастье что там самих php-сущностей нет - браузеры их не понимают
2)
* {margin:0;padding:0;}html,body{height:100%;margin:0;padding:0;}
ничего лишнего не видите?
3)
font-weight:bold;font-size:18px;
лучше так:
font:bold 18px/normal "Ваш font-family";
, а ещё лучше так:
font:800 18px/normal "Ваш font-family";
4)
#top-menu{padding:5px;float:right;list-style:none;}
#top-menu li{margin-right:10px;float:left;color:#FFF;}
несколько косячная конструкция... почему не display:inline?

Сейчас исправлю. Ответ на 100% спасибо(завтра + к репе дам сегодня нельзя уже). А php то по привычке просто php учил недавно

А на счет этого: (Когда мы браузер сворачиваем в окно и уменьшаем это окно до таких размеров пока не появиться горизонтальная полоса прокрутки то футер почему то не заполняет всю ширину и появляется с права пустое пространство, не знаете как это пофиксить? ) не знаете?

+Просьба к модератором поменять название темы "Только начинают верстать(WIP)" на "Только начинаю верстать(WIP) " случайно "т" вписалось, а изменить название темі не могу.

Edited November 25, 2011 by tini.kRyptoNite

Nanto · November 25, 2011

Знаю. :lol:

Во-первых:

<div id="footer"><p class="footer">©zeR2one</p></div> - зачем? "Не преумножайте сущностей без нужды" (с) Бритва Оккама

Чем плох просто <p>? Или просто <div>, если собрались ещё что-то добавлять?

Во-вторых (футер Ваш):

У Вас потомок (#wrapper) перерос родителя (body), при ширине окна < 890px, 100% ширины у body и футера становятся меньше чем ширина #wrapper (поскольку width:100%; - это ширина ОКНА, а не страницы). Вариант решения: задать дополнительно min-width:900px; (890 + padding у Wrapper) для body или футера

В-третьих:

Вам так сильно нужен вертикальный скролл для любой высоты окна браузера? Если нет, то подумайте над смыслом вот этой конструкции:

margin:40px auto 0;min-height:100%;

100% высоты окна + 40px отступа = футер без скроллирования никогда не виден :lol:

если надо зарезервировать место под хедер, вставьте сверху такой же пустой блок (spacer), как и для футера...

tini.kRyptoNite · November 25, 2011

Знаю.
Во-первых:
<div id="footer"><p class="footer">©zeR2one</p></div> - зачем? "Не преумножайте сущностей без нужды" (с) Бритва Оккама
Чем плох просто <p>? Или просто <div>, если собрались ещё что-то добавлять?
Во-вторых (футер Ваш):
У Вас потомок (#wrapper) перерос родителя (body), при ширине окна < 890px, 100% ширины у body и футера становятся меньше чем ширина #wrapper (поскольку width:100%; - это ширина ОКНА, а не страницы). Вариант решения: задать дополнительно min-width:900px; (890 + padding у Wrapper) для body или футера
В-третьих:
Вам так сильно нужен вертикальный скролл для любой высоты окна браузера? Если нет, то подумайте над смыслом вот этой конструкции:
margin:40px auto 0;min-height:100%;
100% высоты окна + 40px отступа = футер без скроллирования никогда не виден
если надо зарезервировать место под хедер, вставьте сверху такой же пустой блок (spacer), как и для футера...

Ну если убрать

margin:40px auto 0;min-height:100%;

то футер не будет прибит к низу.

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

Nanto · November 25, 2011

Вы 40px уберите.

Меню позиционируйте абсолютно или выносите из хэдера (имеется в виду код).

tini.kRyptoNite · November 26, 2011

Вы 40px уберите.
Меню позиционируйте абсолютно или выносите из хэдера (имеется в виду код).

Убрал сделал всё как требуется всеровно не получилось. По моему нельзя прибить подвал к низу без вертикальной полосы прокрутки. Если я не прав то подскажите пожалуйста какую либо инфу.

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

Edited November 26, 2011 by tini.kRyptoNite

Nanto · November 26, 2011

Ёлки-палки! :facepalmxd:


<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
html, body{
	height:100%;
	width:100%;
}
body{
	min-width:890px; /* чтобы скроллились все элементы на странцие */
}
.line{
	margin:5px;
	outline:1px dashed #666;
}
.clear{
	clear:both;
}
#header{
	height:40px;
	width:100%;
	background:#0000CC;
	font-weight:bold;
	font-size:18px;
	position:relative; /* чтобы хэдер не перекрывался враппером */
}
#top-menu{
	padding:5px;
	float:right;
	list-style:none;
}
#top-menu li{
	margin-right:10px;
	display:inline; /* чтобы меню в одну строку */
}
#top-menu a{
	font-family:verdana, sans;
	padding:2px;
	border:1px dotted #FFF;
	color:#FFF;
	text-decoration:none;
}
#wrapper{
	height:100%; /* чтобы опера не тупила (вместо min-height) */
	background-color:#EEE;
	margin:-40px auto 0; /* Чтобы освобдить место для хэдера */
	width:890px;
	border-left:1px solid #DDD;/* Чтобы бордеры не плюсовались к высоте */
	border-right:1px solid #DDD;
}
#sidebar{
	border:1px dashed #CC0000;
	width:150px;
	float:left;
}
#sidebar a{
	color:#AAA;
	padding:5px;
	text-decoration:none;
	font-size:18px;
}
#sidebar a:hover{
	color:#666;
}
#content{
	padding:7px;
	border:1px dashed #999;
	margin-left:155px;
}
.spacer{
	height:40px;
}
#footer{
	width:100%;
	background-color:#000;
	color:#FFF;
	height:40px;
	margin-top:-40px;
}
.footer{
	text-align:center;
	padding-top:10px;
	font:bold 18px/normal italic, sans;
}

</style>
</head>
<body>
	<div id="header">
		<ul id="top-menu">
			<li><a href="#">Главная</a></li>
			<li><a href="#">Что-то</a></li>
		</ul>
	</div>
	<div id="wrapper">
		<div class="spacer"></div> <!-- вставляем сюда отбивку, чтобы хедер не перекрывал контент (и меняем айди на класс) -->
		<div id="sidebar">
			<p><a href="#">Рубрики</a></p>
			<div class="line"></div>
			<p><a href="#">Архив</a></p>
			<div class="line"></div>
			<p><a href="#">Блог</a></p>
			<div class="line"></div>
		</div>
		<div id="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
		</div>
		<div class="clear"></div>
		<div class="spacer"></div>
	</div>
	<div id="footer"><p class="footer">©zeR2one</p></div>
</body>
</html>

Насчёт меню - до сих пор не понимаю, что Вы с ним хотите сделать?

P.S. В шестом осле будет по прежнему (футер и хэдер не скроллятся), он не понимает min-width. Для него нужны танцы с бубном. Мне если честно лениво...

Edited November 26, 2011 by Nanto

tini.kRyptoNite · November 26, 2011

Ёлки-палки! :facepalmxd:


<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
html, body{
	height:100%;
	width:100%;
}
body{
	min-width:890px; /* чтобы скроллились все элементы на странцие */
}
.line{
	margin:5px;
	outline:1px dashed #666;
}
.clear{
	clear:both;
}
#header{
	height:40px;
	width:100%;
	background:#0000CC;
	font-weight:bold;
	font-size:18px;
	position:relative; /* чтобы хэдер не перекрывался враппером */
}
#top-menu{
	padding:5px;
	float:right;
	list-style:none;
}
#top-menu li{
	margin-right:10px;
	display:inline; /* чтобы меню в одну строку */
}
#top-menu a{
	font-family:verdana, sans;
	padding:2px;
	border:1px dotted #FFF;
	color:#FFF;
	text-decoration:none;
}
#wrapper{
	height:100%; /* чтобы опера не тупила (вместо min-height) */
	background-color:#EEE;
	margin:-40px auto 0; /* Чтобы освобдить место для хэдера */
	width:890px;
	border-left:1px solid #DDD;/* Чтобы бордеры не плюсовались к высоте */
	border-right:1px solid #DDD;
}
#sidebar{
	border:1px dashed #CC0000;
	width:150px;
	float:left;
}
#sidebar a{
	color:#AAA;
	padding:5px;
	text-decoration:none;
	font-size:18px;
}
#sidebar a:hover{
	color:#666;
}
#content{
	padding:7px;
	border:1px dashed #999;
	margin-left:155px;
}
.spacer{
	height:40px;
}
#footer{
	width:100%;
	background-color:#000;
	color:#FFF;
	height:40px;
	margin-top:-40px;
}
.footer{
	text-align:center;
	padding-top:10px;
	font:bold 18px/normal italic, sans;
}

</style>
</head>
<body>
	<div id="header">
		<ul id="top-menu">
			<li><a href="#">Главная</a></li>
			<li><a href="#">Что-то</a></li>
		</ul>
	</div>
	<div id="wrapper">
		<div class="spacer"></div> <!-- вставляем сюда отбивку, чтобы хедер не перекрывал контент (и меняем айди на класс) -->
		<div id="sidebar">
			<p><a href="#">Рубрики</a></p>
			<div class="line"></div>
			<p><a href="#">Архив</a></p>
			<div class="line"></div>
			<p><a href="#">Блог</a></p>
			<div class="line"></div>
		</div>
		<div id="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
		</div>
		<div class="clear"></div>
		<div class="spacer"></div>
	</div>
	<div id="footer"><p class="footer">©zeR2one</p></div>
</body>
</html>

Насчёт меню - до сих пор не понимаю, что Вы с ним хотите сделать?

P.S. В шестом осле будет по прежнему (футер и хэдер не скроллятся), он не понимает min-width. Для него нужны танцы с бубном. Мне если честно лениво...

Наполните окно контента что бы появилась вертикальная полоса прокрутки и футер станет по центру странице.

А на счет горизонтального меню я хочу что бы кнопки оставались на месте вне зависимости от масштаба окна!

Edited November 26, 2011 by tini.kRyptoNite

Nanto · November 26, 2011

Тогда вставляйте

min-height:100%; /* и пусть опера тупит */

По-хорошему надо перевёрстывать, чтобы было кузяво. Вот зачем Вам height:100% для контента? Вам нужна подсвеченная колонка?

На месте? На каком месте? Относительно чего? Ну уберите float:right и задайте нужный Вам margin-left

Кстати, если бы не недавние обсуждения, я бы и не обратил внимание на глюки Оперы! Как часто Вы думаете, пользователь ресайзит окно?

tini.kRyptoNite · November 26, 2011

Тогда вставляйте
min-height:100%; /* и пусть опера тупит */
По-хорошему надо перевёрстывать, чтобы было кузяво. Вот зачем Вам height:100% для контента? Вам нужна подсвеченная колонка?
На месте? На каком месте? Относительно чего? Ну уберите float:right и задайте нужный Вам margin-left
Кстати, если бы не недавние обсуждения, я бы и не обратил внимание на глюки Оперы! Как часто Вы думаете, пользователь ресайзит окно?

Относительно чего? Ну уберите float:right и задайте нужный Вам margin-left

Пробывал не получается.

Думаю редко. Ну хочется разобраться со ньюансами. Так как учусь только верстать, думаете не стоит обращать внимание на такие мелкий недостатки?

Вы говорите с min-height:100% Опера лагает. НЕ знаю у меня всё норма, а как оно должно лагать?

Edited November 26, 2011 by tini.kRyptoNite

Nanto · November 26, 2011

Ладно, раз уж Вы такой твердолобый упрямый, погнали по пунктам:

1) "Меню на своём месте" - ну убейте меня, не понимаю где его место! ОБЪЯСНИТЕ! Дайте наконец картинку. Относительно чего оно должно позиционироваться (правого или левого края, браузера или страницы)?

2) Лаги в Опере. Сделайте ресайз окна по высоте - Опера затупит с перемещением футера.

3) Почитайте эту тему http://forum.htmlbook.ru/index.php?showtopic=30815 , там в приницпе есть рецепты для Вашего макета.

4) Раз Вы только изучаете, то зачем Вам весь этот гемморой? Почему не так:


<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
        margin:0;
        padding:0;
}
html, body{
        height:100%;
        width:100%;
}
table{
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:top;
	border-spacing:0;
}
.header{
	background:red;
	height:40px;
}
.footer{
	background:green;
	height:40px;
}	
.wrapper{
	height:100%;
	*height:auto;
}
.sidebar{
	width:150px;
	background:blue;
}
.content{
	background:yellow;
	width:700px;
}
.content p{
	width:700px;
}
</style>
</head>
<body>
        <table>
		<tr class="header">
			<td colspan="4">header</td>
		</tr>
		<tr class="wrapper">
			<td> </td>
			<td class="sidebar"></td>
			<td class="content" valign="top"><p>Бла-бла...</p></td>
			<td> </td>
		<tr class="footer">
			<td colspan="4">footer</td>
		</tr>			
	</table>
</body>
</html>

Edited November 26, 2011 by Nanto

Nanto · November 26, 2011

Вот хоть убей не понимаю этих воплей насчёт семантики... w3c призывает отделять оформление от струкутры - ок, но где инструменты для номального офрмления? box-sizing? не смешно! единственную нормальную модель структуры (табличную) и ту хотят похоронить! "Таблицы для таблиц"...

Дайте новые тэги, какой-нибудь <structure>... Хотя все-равно некроссбраузерно выйдет!

Вот типичный пример! Новичок берётся за вёрстку. Полазил в интернете и вывел для себя две вещи:

1) Важен валидный код

2) Таблицы - зло. Нужна блочная вёрстка.

Выбирает себе примитивнейший макет (хэдер, футер -резина, две колонки фикс.). И оп-па! Куча геммороя. ИЕ и Опера тупят. Какие-то хитрые финты нужно вставлять...

А какие-то имбицилы орут про "семантику". Пусть попробуют свертать такой макетик валидно и кроссбраузерно - это возможно, конечно... Но это будет ТАКОЙ кусище кода со всякими хаками-хреняками, что о какой семантике может идти речь? Штаны через голову одевать и называть это "рациональностью"?

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

Если у меня когда-нибудь попросят подобный макет в блочном исполнении и валидно-семантичный - назло отвечу: "В спецификациях html и css подобное не предусмотрено!" И буду прав на все 100%!

cssview · November 26, 2011

Что вы так взвинтились. То есть, вы хотите сказать, что этот макет не стоит верстать блоками? Что он сложен? И какие проблемы будут в IE.

Nanto · November 26, 2011

Ну покажите мне валидный "кросс" (IE6) на блоках!

tini.kRyptoNite · November 27, 2011

Вот хоть убей не понимаю этих воплей насчёт семантики... w3c призывает отделять оформление от струкутры - ок, но где инструменты для номального офрмления? box-sizing? не смешно! единственную нормальную модель структуры (табличную) и ту хотят похоронить! "Таблицы для таблиц"...
Дайте новые тэги, какой-нибудь <structure>... Хотя все-равно некроссбраузерно выйдет!
Вот типичный пример! Новичок берётся за вёрстку. Полазил в интернете и вывел для себя две вещи:
1) Важен валидный код
2) Таблицы - зло. Нужна блочная вёрстка.
Выбирает себе примитивнейший макет (хэдер, футер -резина, две колонки фикс.). И оп-па! Куча геммороя. ИЕ и Опера тупят. Какие-то хитрые финты нужно вставлять...
А какие-то имбицилы орут про "семантику". Пусть попробуют свертать такой макетик валидно и кроссбраузерно - это возможно, конечно... Но это будет ТАКОЙ кусище кода со всякими хаками-хреняками, что о какой семантике может идти речь? Штаны через голову одевать и называть это "рациональностью"?
И потихоньку эти вопли доходят до заказчиков (толком ничерта не понимающих) - многие уже особо прописывают в требованиях блочную вёрстку (не догдываясь о противоречии с кроссбраузерностью и валидностью!). Такое ощущение, что эти визги специально подняли старые мастера, с целью выдавить из профессии неопытный молодняк, хотя сами начинали с таблиц!..
Если у меня когда-нибудь попросят подобный макет в блочном исполнении и валидно-семантичный - назло отвечу: "В спецификациях html и css подобное не предусмотрено!" И буду прав на все 100%!

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

Edited November 27, 2011 by tini.kRyptoNite

tini.kRyptoNite · November 27, 2011

Я походу уже разобрался как это сделано. Короче само меню имеет фиксированный размер, а на его же место выводиться слой с таким же фоновым цветом и резиновый, правильно я мыслью ?

Edited November 27, 2011 by tini.kRyptoNite

tini.kRyptoNite · November 30, 2011

Можно ли сделать ячейки таблицы фиксированной ширины? Или в любом случае они будут зависит от контента?

Пробывал задавать width не помогает. То есть увеличиваю padding и всеровно таблица расширяется хоть и задн max-width!

Nanto · December 1, 2011

http://htmlbook.ru/content/osobennosti-tablits

Если так же лень читиать, вкратце: можно, но не всегда.

tini.kRyptoNite · December 2, 2011

Помогите пожалуйста. Что-то ничего не понимаю что формирует мою высоту в данной верстке. Помогите избавиться от вертикальной полосы прокрутки.

tini.kRyptoNite · December 3, 2011

Почему при заданной ширине блока div текст выходит за его размер? Так же у блока задано свойство float: left;

Вот ссылка на исходник!

Edited December 3, 2011 by tini.kRyptoNite

Kosmos · December 3, 2011

Почему при заданной ширине блока div текст выходит за его размер? Так же у блока задано свойство float: left;

а какая связь между float:left и выходом текста ?

tini.kRyptoNite · December 3, 2011

Kosmos, не знаю никакой наверное Посмотрите пожалуйста исходник.

Kosmos · December 3, 2011

Kosmos, не знаю никакой наверное Посмотрите пожалуйста исходник.

Тут и без исходника можно) по теории :

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

2.Если тест выходит за пределы блока значит блоку заданы размеры

3.На выход текста за пределы блока влияет свойство overflow

4.Если это таблица то почитай еще про тег col и свойство table-layout

5.Ну и пробелы между слов тоже важны)

Вроде других вариантов нет

Edited December 3, 2011 by Kosmos

Sign In

Только начинают верстать(WIP)

Question

Link to comment

Share on other sites

33 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

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