Цялостен дизайн с CSS
и XHTML 1.0

Преди да започнем

Малко пояснение за думите, ползвани в текста по-долу и онова, което трябва да знаете, за да разберете текста.

<div> - аз ще наричам това нещо div или лейър. Div, параграфът <p>, тагът <form> h1, h2..., и други подобни съдържат нови редове в себе си. Всъщност те са БЛОК-ови елементи. Заемат 1 или повече цели редове от екрана. Можете да превърнете и Inline елементи (не съдържащи цял ред) в блокови - като span, a и b с display: block, както и блокови елементи в Inline с display: inline;.

Всеки елемент, който е блоков или със зададен display: block;, заема квадратче на екрана с дефинираната му ширина или 100% по default. Inline елементите също могат да получат бордери, падинги и прочие, те са просто част от реда и не са непременно "квадратче".

За смисъла на нещата

HTML 4 е прекрасен стандарт, който ни е разглезил да правим нещата лесно и с много грешки. В сайтовете ни обаче таговете ни винаги са имали главно дизайнерско предназначение, за да подредим нещата по екрана, но не и смислово. Успоредно с това, чистият HTML имаше нужда от средство, с което множеството еднотипни тагове да съдържат лесно описание на еднотипен външен вид. Сигурно сте виждали генериран код от по-стари DreamWeaver-и, FrontPage и други, от сорта на: <table cellspacing="0" cellpadding="3" border="0">
<tr>
  <td font-face="Arial" font-size="+1">Име</td>
  <td bgcolor="green"><img src="images/foobar.gif" width="1" height="1" border="0"></td>
  <td font-face="Arial" font-size="+1">Презиме</td>
  <td bgcolor="green"><img src="images/foobar.gif" width="1" height="1" border="0"></td>
  <td font-face="Arial" font-size="+1">Фамилия</td>
</tr>
....
</table> Ужасно, нали? Много по-добре е следното: <table class="names">
  <td>Име</td>
  <td>Презиме</td>
  <td>Фамилия</td>
....

в комбинация с един стил .names td {font-family: Arial; font-size: 14px; border-left: 1px solid green;} Разбира се, горният пример е далеч от изчерпателност, но на вас сигурно не ви е и нужен :)

Необходимостта от удобно форматиране ни беше удволетворена с CSS, а възможността да създадем смислови тагове - от XML. За добро или лошо, комбинацията от XML със стил (XSL) не се разпространи особено. Вместо това хората измислиха за нас (отдавна... 1999 година, струва ми се:) XHTML - стандарт, с който с част от старите ни HTML tag-ове можем да създадем приличен документ, с изключително добро форматиране, в който таговете имат смисъл.

И все пак - защо е нужно това?

Честно казано, за себе си все още ги търся. Формални причини има много:

• Можете да постигнете онова, което искате - когато искате. Ха! Ще ме оспорите - винаги нещо мърда... Е, мърда, ама то си има причина:)
• Можете да постигнете много повече, отколкото с HTML, с цената на по-малко тагове. Пак спорно:) Само задължителните кавички могат да увеличат документа в пъти, но тук кавичките са по-рядко нужни.
• Документът има смисъл, дори да няма стил
• Документът се интерпретира по-бързо, когато не съдържа грешки в себе си
• Дизайнерите, научили CSS, могат да правят разни неща с него, без да закачат програмистите:)

Все пак за да разберете този текст е нужно да занете какво е:
<table>, как се поставя стил в HTML и още някои дреболии.

Да се върнем в първи клас

Помните ли първата си уеб страница? Още преди да откриете фреймсета и мърдащите гиф-чета. Сигурен съм, че сте се сблъскали с желанието си да подредите един текст до една картинка. Почти сигурен съм и за режението ви - ТАБЛИЦА - и картинката седи от едната страна, а текстът от другата страна в таблицата. После сигурно сте открили и възможността за <img align=left src=...>, но вероятно сте го изоставили като непродуктивно в името на това: <TABLE>
<TR>
  <TD valign=top><img src=i/blah.gif>
  <TD valign=top>Здрасти, Джипси, <br>как си?
</TABLE> В широк смисъл това би било валидно и ще се интерпретира от всички браузъри. Ще вметна, че в XHTML вече не може да се ползват тагове с главни букви. Всички тагове, които се отварят, трябва и да се затварят (а не както тук да си позволяваме да оставим TD-тата отворени, а line break-a сега би бил валиден самозатварящ се <br />

Е, това е мястото, където бих искал да ви върна. Правилното решение, което ще ви помогне много в CSS базирания дизайн е позиционирането по аналог с align=right.

В XHTML вече нямате align=right и align=left. Вместо тях имате стил float: left; и float: right;.

.foobar { 
	border: 1px dotted black; 
	margin: 10px 10px 10px 10px; 
	width: 500px; 
	padding: 10px; 
} 
.foobar ul {  
	position: relative; 
	margin: 0;  
	padding:0;  
}  
.foobar li {  
	float: right;  
	display: block;  
	width: 120px;  
	height: 30px;  
	background: yellow;  
	padding: 5px;  
	text-align: center;  
	margin: 3px; 
	border: 1px dashed #e0e0e0; 
} 
 
.foobar.foo2 {clear: both;} 

Още по-назад към яслата

Може би сте свикнали да позиционирате лейъри чрез position: absolute;? После се чудите, защо разни неща ви се размазват драматично по екрана. Забравете временно абсолютното позициониране. Убеден съм, че всеки от вас може да позиционира всичко абсолютно по екрана, но това има уловка - създава ви ядове, когато имате неясна ширина и дължина на вашите текстове. По този начин онова, което много ви се иска да е най-отдолу, може да се намърда по средата на екрана, точно върху текстовете ви.

Абсолютното позициониране дава възможност да фиксирате лейър спрямо ъглите на екрана. Релативното позициониране означава да закрепите вашия лейър спрямо парент лейъра, в който се намира (или body таг-а).

Floating позициониране в колони

Интро

Продуктивният уеб сайт изисква да можете да разполагате нещата в колони, не само в редове. С таблица това се постига общо взето лесно, но модерният дизайнер си иска div и се изприщва от ужас. Начинът, по който трябва да се постигат колони с CSS и лейъри е, като се ползва float:

Причината е в това, че когато позиционирате 1 layer абсолютно, може да разположите 1 колона перфектно по хоризонтал, но ако имате 2 колони, позиционирани абсолютно - вече няма да знаете коя свършва първа. Съответно - няма да имате възможност да сложите нещо едновременно под двете, без javascript.

Пример

Кликнете на линковете, за да се увеличи обема текст:

<script type="text/javascript">
	function doubleit(id) {
	document.getElementById('column'+id).innerHTML+=
		document.getElementById('link'+id).innerHTML;
}
</script>

<div id="primer2">
	<div id="column1"><a href="javascript:doubleit('1')" 
	id="link1">петър плет плете по три пръта преплита 
	подпри петре плета, падна петре плета</a></div>
	<div id="column2"><a href="javascript:doubleit('2')" 
	id="link2">петър плет плете, по четири пръта преплита, 
	подпри петре плета, падна петре плета</a></div>
	<div id="footer">Footer - винаги отдолу</div>
</div>

Стил:

#primer2 {width: 590px;}
#column1 {
	float: left; 
	width: 200px; 
	margin: 10px; 
	padding: 10px; 
	background: #90ff90;
}
#column2 {
	float: right; 
	width: 300px;
	margin: 10px; 
	padding: 10px; 
	background: #9090ff;
}
#footer {
	clear: both; 
	background: #ff9090; 
	padding: 10px;
}

Как се правят повече колони?

Дефакто можете да float-нете само в ляво или дясно 10 колони с фиксирана ширина и ще сработи. Проблемът идва, когато нямате фиксирана ширина... Ако не дадете фиксирана ширина на 1 layer и той е с float, той ще бъде със ширина 100% от екрана. Съответно понеже ще имате неща в дясно и ляво, екранът ви ще стане по-широк и със страничен скрол. Този проблем се преодолява с негативен margin на разтягащия се лейър по хоризонтал. Ще разгледам тази техника в отделен артикъл или ще изровя статията, от която я научих.

Основното, което искам да кажа по повод floating relative позиционирането е, че не бива да се притеснявате, ако нещата ви се разместват. Това означава, че не сте дали достатъчно място и се е образувал ... нов ред, както в примера:

<div class="foobar">
	<ul>
		<li>тест 1</li>
		<li>тест 2</li>
		<li>тест 3</li>
		<li>ще се пренесе</li>
		<li>ще се пренесе</li>
	</ul>
	....
</div>

Ето ви и обещания линк: Позициониране чрез float

Таблици

Според мен не бива да се отказвате от таблиците, когато правите CSS дизайн. Напълно възможно е да замените таблица със списък, но това има някои ограничения. Първото - ОСНОВНО за мен - е, че не можете да направите дизайна "разтягащ се", т.е. на 4 ред в 1 от TD-тата да имате "много дълъг текст". Ако все пак искате да направите чиста таблица без <table>, ето ви 2 примера:

Таблица чрез UL/LI

#tablerows, #tablerows ul {margin: 0px; padding: 0px}
.table .singlerow li {
	list-style: none;
	float: left; 
	display: block; 
	width: 110px; 
	margin: 1px; 
	border: 1px solid red;
	background: #e0e0e0;
	height: 21px;
}

.table .singlerow {
	list-style: none;
	width: 570px;
	display: block;
	height: 25px;
	padding: 2px;
	background-color: #FF9090;
	margin-top: 1px;
}

.table2 .singlerow {
	list-style: none;
	display: block; 
	line-height: 151px;
	width: 124px;
	float: left;
	margin: 1px;
	border: 1px solid red;
}

.table2 .singlerow li {
	list-style: none;
	display: block;
	width: 120px;
	line-height: 25px;
	padding: 2px;
	margin-top: 1px;
	background: #e0e0e0;
}

.break-hide {clear: both; list-style: none; }

Ако искате да направите и colspan, ще ви се наложи да избегнете подобни "груби" дефиниции на стила и ще трябва да направите отделен стил за случая без колспан и този с колспан.

Пробвайте това за втората примерна таблица

Някои обяснения:
<p style="clear: left"> - без това, float left може да се запази и да причини размазвания в екрана. clear: both; премахва floating-а едновременно от ляво и дясно.

Наложи се да поставя този таг: <li class="break-hide" />, за да отменя float-а в рамките на самия <ul>, тъй като иначе по-долния текст се качва нагоре. Ако се направи директно, без javascript-а нужен само за примера би станало и с доста по-безпроблемния <span />

Таблица чрез div

#mytable div { 
	width: 100px; 
	line-height:30px; 
	border: 1px solid red; 
	background: #e0e0e0; 
	text-align: center; 
	margin-bottom: 1px;
	float: left;
}
			

Вижте описанието на #mytable в CSS файла.

Този вариант обаче не е особено чист и модифицируем. Така направен се нуждае от много допълнителни тагове, които да позволяват модифициране на броя колони, което противоречи на принципите на XHTML. Не отричам, че направих опит да го направя и с допълинтелни тагове, но се натъкнах на допълнителни проблеми.

Списъци

Прочетете тази статия, ще ви помогне много. Наистина нямам какво да добавя към нея: A list apart

Често допускани грешки и капани

• Всеки float трябва да бъде последван от clear на подходящото място. Обърнете внимание на този код.
• ul, h1, h2, h3 ... и много други такове съдържат margin-и и padding-и. Сетнете ги на 0.
• @import предизвиква специфичен проблем, който може да бъде избегнат. Прочетете тук.
• в inline елементи не може да поставяте блокови елементи.
• XHTML изисква всички тагове да са lowercase.
• Когато имате float и недостатъчна ширина на контейнера, 2 елемента могат да преминат на различни редове и да се разместят МНОГО. Увеличете width и тествайте.
• :hover псевдо класът работи само за "a" таг в MSIE. <a> може да се дефинира като блок и ако вътре има <span> да се получи доволно завързан дизайнерски фрагмент.
• Не допускайте едно и също id да се повтори 2 пъти в 1 страница.
• Внимавайте как центрирате! margin: 0px auto; за div, заедно с text-align: center; ще ви гарантира, че layer-ът е центриран.

Ресурси и връзки

• Малко информация за пренасянето на нов ред
• csszengarden
• alistapart

Този документ се валидира успешно, с уговорката за character coding windows-1251:

Този текст е (c) dzver 2004, ако имате въпроси - пишете ми на адрес dzver@abv.bg