Може ли един темплейт в css

Emperator

Registered
dada.png


Обаче ако може д ае в css а не смао таблици :)
 
еми може да се направи ама от дивчета мога да ти направя само да се прибера у дома ся съм в 1 приятел :)
 
Ффф..Верно.Аз забравих да го видя чрез мозила.После ще се опитам да го оправя
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Заглавие</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
div.site {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: 900px;
}
div.left {
border-right: 1px solid black;
width: 200px;
float: left;
height: 100px;
}
div.right {
float: left;
width: 698px;
height: 100px;
}
div.menu {
border-top: 1px solid black;
clear: both;
width: 900px;
height: 20px;
}
div.sud {
border-top: 1px solid black;
clear: both;
width: 900px;
height: 500px;
}
div.bottom {
border-top: 1px solid black;
clear: both;
width: 900px;
height: 100px;
}
</style>
</head>
<body>
<div class="site">
<div class="left">Лого
</div>
<div class="right">Тук да е празна колона за текст
</div>
<div class="menu">Меню
</div>
<div class="sud">Тук да е за текст
</div>
<div class="bottom">Тук да е голямо и ще бъде за всички права запазени
</div>
</div>
</body>
</html>


Сложил съм ти височина, за да видиш как се получава, но по-натам най-вероятно ще искаш да ти се променя в зависимост от съдържанието на сайта и тогава height: auto; ще трябва да го направиш.
Широчината съм я направил горе-долу както искаш, защото ме мързи да меря със screen ruler да е точно както е по снимката. Можеш да си променяш всичко както искаш, това е основното :)

ДЕМО
Valid XHTML 1.0 Strict
Valid CSS
 
Ето и з точните размери:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Заглавие</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
div.site {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: 656px;
}
div.left {
border-right: 1px solid black;
width: 221px;
float: left;
height: 156px;
}
div.right {
float: left;
width: 386px;
height: 156px;
}
div.menu {
border-top: 1px solid black;
clear: both;
width: 656px;
height: 23px;
}
div.sud {
border-top: 1px solid black;
clear: both;
width: 656px;
height: 341px;
}
div.bottom {
border-top: 1px solid black;
clear: both;
width: 656px;
height: 66px;
}
</style>
</head>
<body>
<div class="site">
<div class="left">Лого
</div>
<div class="right">Тук да е празна колона за текст
</div>
<div class="menu">Меню
</div>
<div class="sud">Тук да е за текст
</div>
<div class="bottom">Тук да е голямо и ще бъде за всички права запазени
</div>
</div>
</body>
</html>


ДЕМО
И този код е валиден, но нямам време да давам линкове :)
 
adrian каза:
Ето и з точните размери:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Заглавие</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
div.site {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: 656px;
}
div.left {
border-right: 1px solid black;
width: 221px;
float: left;
height: 156px;
}
div.right {
float: left;
width: 386px;
height: 156px;
}
div.menu {
border-top: 1px solid black;
clear: both;
width: 656px;
height: 23px;
}
div.sud {
border-top: 1px solid black;
clear: both;
width: 656px;
height: 341px;
}
div.bottom {
border-top: 1px solid black;
clear: both;
width: 656px;
height: 66px;
}
</style>
</head>
<body>
<div class="site">
<div class="left">Лого
</div>
<div class="right">Тук да е празна колона за текст
</div>
<div class="menu">Меню
</div>
<div class="sud">Тук да е за текст
</div>
<div class="bottom">Тук да е голямо и ще бъде за всички права запазени
</div>
</div>
</body>
</html>


ДЕМО
И този код е валиден, но нямам време да давам линкове :)


+1
 

Back
Горе