ре дизайн с CSS and XHTML

значи, преди време бях пуснал тук един сайт за мнение - не бяха особено отзивчиви, и може би с право, ама все пак тогва не знаех абсолютно нищо (както и сега де) ама важното е да се бориш. В крайна сметка попрочетох това онова, следях тук дискусиите и реших, че искам да си направя редизайн с CSS and XHTML strict.

момента сайта изглежда ето така: [линк]

искам да направя същият дизайн с CSS разположения и вчера цял ден се мъчих, но така и не успях да сваля най-долният див на дъното. (става да го свлая ако задам височини в пикелси на маргин, ама не ме урежда, защото искам да изглежда горе долу еднакво в браузърите, а не в един да е ОК, а в друг да скроилираш надолу, защото са зададени много писели, а в трети долния див да не е на дъното...абе демек, като товорите горният линк, да е нещо подобно разположението.

освен това и линоовете и логото не мога да центрирам като хората:(((

в момента кода, който съм написал изглежда ето така:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"[линк]">



<html lang="bg" xml:lang="bg" xmlns="[линк]">

<head>
<title>Noe Gallery</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />


<style type="text/css" media="all">
/*<![CDATA[*/


body {background: #B5B263;}
#top {background: #000 url(gallerynoe2.jpg) no-repeat center; margin: 0; margin-top: 0; height: 85px;}
#enter {margin: auto;}
#bottom {background: #000 url(gallerynoe2.jpg) no-repeat center; height: 85px;}
img.wc {margin: 75px 30px;}




/*]]>*/
</style>
</head>

<body>

<div id="top"></div>

<div id="enter">
<img src="welcome_bg.jpg" title="dobre doshli" alt="enter to the bulgarian version of the web site" class="wc" />
<img src="logo.gif" title="logo" alt="this is Noe Gallery Logo, which is the face of Noe" />
<img src="welcome_en.jpg" title="welcome" alt="enter to the english version of the web site" class="wc" />
</div>
<div id="bottom"></div>


</body>

</html>

За това как да разположиш footer-а, прочети тук:

[линк]

Сега за центрирането, имаш няколко начина, като най-лесен и работещ в повече случаи е:

text-align:center; на #enter.

Друг вариант е да зададеш на #enter атрибут width колкото е ширината на трите картинки + разстоянието между тях и съдържанието ще се центрира благодарение на margin:auto; - този начин НЕ РАБОТИ под IE5.

Ако зададеш хем width, хем text-align:center на #enter, пак не става под IE5.

Имаш и още една възможност - text-align:center на body, тогава ще се центрира всичко под всички браузъри, само ще трябва да сложиш dopylnitelno text-align:left; там, където не искаш това да е така - например основният текст във вътрешните страници.

[линк] - блог, уеб дизайн, лекции, интернет сигурност

мерси много,

бтв ти ме запли да действам по стандартите, четох сума ти и теми тук, накрая си купих и книгата на джефри зелдман и накрая разбрах що така трябва:))))

п.с. искам да попитам и още нещо:

за най-горния див - топ - съм задал маргин: 0;, но все пак си оставя малко поле отгоре, отляво и отдясно в което се вижда бекграунд цвета - мисля че мога да го оправя с отрицателни стойности, но не мисля, че това е най-удачният вариант.

ти ме запали да действам по стандартите

Еееееееее, наистина ли, много се радвам! Значи все пак от караниците тука има някакъв ефект

А за горния div - сложи margin:0 или padding:0 на body

[линк] - блог, уеб дизайн, лекции, интернет сигурност

Димоди, ако може още малко помощ.

Прочетох темата за футъри в а лист апарт и го направих. в опера и мозила е ОК, но в ИЕ ми прави някъв гаден проблем - т.е. знам от какво е -от бокс модела, но специално в този случай, нещо не мога да схвана за кой браузър каква стойност да му дам. в момента кода е сленият:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"[линк]">



<html lang="bg" xml:lang="bg" xmlns="[линк]">

<head>
<title>Noe Gallery</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />


<style type="text/css" media="all">
/*<![CDATA[*/


html, body {height: 100%;}
body {background: #B5B263; margin: 0; padding: 0; text-align: center;}
#container {position: relative; min-height: 100%; height: 100%; voice-family: "\"}\""; voice-family: inherit; height: auto;}
html>body #container {height: auto;}
#top {background: #000 url(gallerynoe2.jpg) no-repeat center; margin: 0; padding-bottom: 10px; height: 85px;}
#enter {margin: auto; margin-top: 30px;}
#bottom {background: #000 url(gallerynoe2.jpg) no-repeat center; margin: 0; padding-bottom: 10px; height: 85px; position: absolute; bottom: 0; width: 100%;}
img.wc {margin: 95px 30px;}




/*]]>*/
</style>
</head>

<body>
<div id="container">
<div id="top"></div>

<div id="enter">
<img src="welcome_bg.jpg" title="dobre doshli" alt="enter to the bulgarian version of the web site" class="wc" />
<img src="logo.jpg" title="logo" alt="this is Noe Gallery Logo, which is the face of Noe" />
<img src="welcome_en.jpg" title="welcome" alt="enter to the english version of the web site" class="wc" />
</div>
<div id="bottom"></div>
</div>

</body>

</html>

#bottom{
background:url(gallerynoe2.jpg) no-repeat center #000;
margin:0;
padding-bottom:10px;
height:85px;
position:absolute;
bottom:0;
left:0; - без това IE започва да рендърва този div от средата на екрана и надясно.
width:100%;

[линк] - блог, уеб дизайн, лекции, интернет сигурност

мерси,

сега вече почти всичко е наред.

има няколко неща за допозициониране, ама с тях ще се справя и сам, важното е, че направих първата крачка.

Всъщност мисля че можеш да центрираш див:

margin: 0 auto 0 auto;

не сам сигурен дали работи вав всички браузери ама за опера 7,8 Файерфокс, ИЕ6 работи перфектно.
бтв искам да питам има ли някъде онлин тестване на рендаринг. т.е. да си видиш страницата как изглейда примерно в ИЕ5 ИЕ4 и т.н.

'In this life we cannot do great things. We can only do small things with great love'

margin: 0 auto 0 auto; = margin: 0 auto; и това не работи под IE5.

За рендъринга - виж темата за полезни линкове и често задавани въпроси.

[линк] - блог, уеб дизайн, лекции, интернет сигурност

аз имах в предвид да го ползваш с align-text и мисля че рендърва навсякъде.

'In this life we cannot do great things. We can only do small things with great love'