[HTML][Pytanie] Wysrodkowanie strony w pionie

hepson · Post autor: **hepson** » śr wrz 14, 2005 6:30 pm

Witam,
http://www.aerograf.superhost.pl/_inne/dunlop/
chcialbym aby ta strona byla wycentrowana w pionie pod kazda rozdzielczoscia, co i gdzie mam dopisac do kodu ?

Stig · Post autor: **Stig** » śr wrz 14, 2005 7:10 pm

IMHO najlepiej do tego celu skorzystać z rozwiązania przytoczonego przez Malina w topicu "jak wycentrowac <div> dla xhtml1.1".

travish · Post autor: **travish** » pt wrz 16, 2005 7:21 pm

Witanko

Niestety w podanym przez Ciebie linku do rozważań na temat wyśrodkowania pionowego nie ma już niestety podanego rozwiązania

Może masz gdzieś na dysku ten kod do wyśrodkowania i mógłbys go udostępnić?

Pozdrawiam travish

Stig · Post autor: **Stig** » pt wrz 16, 2005 10:18 pm

Proszę bardzo

Oto kompletny kod źródłowy strony, która znajdowała się pod adresem http://testy.pless.pl/PablO/CSS/wysrodkowanie.html:

Kod: Zaznacz cały

<?xml version="1.0" encoding="iso-8859-2"?>
<!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>
<title>¶rodek</title>
<meta name="author" content="PablO" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

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

body
{
	display:table;
}

body>#nosnik
{
	display:table-cell;
	vertical-align:middle;
}

/* dla badzIEwia */
* html #nosnik
{
	position:absolute;
	height:auto;
	text-align:center;
	/* ultrapack by Elus */
	top:expression((x=(document.documentElement.offsetHeight-this.offsetHeight)/2)<0?0:x+'px');
}
/*****************/

#glowna
{
	width:500px;
	margin:0 auto;
	text-align:center;
	border:2px dotted blue;
}

/*]]>*/-->
</style>
</head>
<body>
<div id="nosnik">
<div id="glowna">
	napis na ¶rodeczku :]
</div>
</div>
</body>
</html>

travish · Post autor: **travish** » sob wrz 17, 2005 9:49 am

O wielkie dzięki

Pozdrawiam travish

Roberto · Post autor: **Roberto** » wt sty 31, 2006 1:23 pm

Sorry za odgrzebywanie starego tematu ale...

skorzystałem z podanego wyżej rozwiązania i mam problem pod (a jakże by inaczej) Internet Explorerem:

http://skok.pnet.pl/roberto/

dlaczego ta cholera przesuwa mi tekst bardziej na prawo, tak jakby od lewej strony dodawała coś od siebie ? W tej chwili mam możliwość sprawdzić to tylko na IE oraz Nawigatorze Mozilli i pod tym drugim tekst jest ładnie wyśrodkowany.

Strona podzielona jest na 3 divy (top, srodek i dol) przy czym tekst znajduje sie w dodatkowym divie polozonym w #srodek.

Zawartość CSS:

Kod: Zaznacz cały

html, body, #nosnik
{
   height:100%;
   width:100%;
   margin:0;
   border:0;
   padding:0;
background-color: white;
}

body
{
   display:table;
}

body>#nosnik
{
   display:table-cell;
   vertical-align:middle;
}

/* dla badzIEwia */
* html #nosnik
{
   position:absolute;
   height:auto;
   text-align:center;
   /* ultrapack by Elus */
   top:expression((x=(document.documentElement.offsetHeight-this.offsetHeight)/2)<0?0:x+'px');
}
/*****************/

#glowna {
width:640px;
margin: 0 auto;
text-align:center;
background-color: white;
}
#top {
width:640px;
height:100px;
background: url('img/top.jpg');
background-repeat: no-repeat;
}
#srodek {
width:640px;
height:280px;
background: url('img/srodek.jpg');
background-repeat: no-repeat;
}
#srodek_glowna {
position: relative;
top: 20px;
left: 20px;
width: 600px;
height:240px;
font-size: 14px;
font-family: tahoma, serif;
text-align: justify;
}
#dol {
width:640px;
height:100px;
background: url('img/dol.jpg');
background-repeat: no-repeat;
}

I tak przy okazji, to rozwiązanie zmuszające IE do wyśrodkowania diva w pionie powoduje błąd przy walidacji CSS. Tak być "powinno" czy ja coś jeszcze pomieszałem ?

Stig · Post autor: **Stig** » czw lut 02, 2006 8:27 pm

Rozwiązaniem doraźnym może być wyzerowanie wartość atrybutu left dla badzIEwia, czego można dokonać korzystając z tzw. "star-hacka". Przykład:

Kod: Zaznacz cały

#srodek_glowna { 
position: relative; 
top: 20px; 
left: 20px; 
width: 600px; 
height:240px; 
font-size: 14px; 
font-family: tahoma, serif; 
text-align: justify; 
}
* html #srodek_glowna {
left: 0px;
}

Mimo wszystko zastanowiłbym się wogóle nad sensownością stosowania w tym przypadku pozycjonowania relatywnego.

Roberto pisze:I tak przy okazji, to rozwiązanie zmuszające IE do wyśrodkowania diva w pionie powoduje błąd przy walidacji CSS. Tak być "powinno" czy ja coś jeszcze pomieszałem ?

Niestety, większość hack'ów dla IE interpretowanych jest przez validator jako błąd. Rozwiązaniem może być stosowanie osobnego arkuszu stylów dla tej przeglądarki, wczytywanego przy użyciu komentarza warunkowego, interpretowanego wyłącznie przez IE, na tej samej zasadzie jak uczyniono to w serwisie osiołki.net.

Roberto · Post autor: **Roberto** » czw lut 02, 2006 10:36 pm

Co do niesfornego diva zastosowałem inne rozwiązanie: dałem w css margin-right który ma wartość dwa razy większą od tej o którą mi chodziło, czyli pierwotnie było;

left: 20px;

a ja dopisałem;

margin-right: 40px;

IE to zrozumiał, pozostałym przeglądarkom nie przeszkadza, wciąż nie wiem dlaczego ale zadziałało

dzięki za linka do rozwiązania zastosowanego na osiolkach.

[HTML][Pytanie] Wysrodkowanie strony w pionie

[HTML][Pytanie] Wysrodkowanie strony w pionie

Re: [HTML][Pytanie] Wysrodkowanie strony w pionie

Re: [HTML][Pytanie] Wysrodkowanie strony w pionie

Re: [HTML][Pytanie] Wysrodkowanie strony w pionie

Re: [HTML][Pytanie] Wysrodkowanie strony w pionie

Re: [HTML][Pytanie] Wysrodkowanie strony w pionie

Re: [HTML][Pytanie] Wysrodkowanie strony w pionie

Re: [HTML][Pytanie] Wysrodkowanie strony w pionie