Forum PHP.pl > [css] Jak wycentrować taką stronę?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css] Jak wycentrować taką stronę?

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

mess_alex

26.01.2007, 14:16:03

Witam,

Chcę zrobić stronę w css nadając width'om (

) wartości z jednostką em co robiłem już wcześniej, ale teraz mam większy problem.

Oto obrazek pomocniczy. Menu (z brązowym tłem) obrysowane na niebiesko będzie miało position: absolute.
Moje pytanie brzmi: jak wycentrować taką stronę? (oczywiście zrobię jakiś div mieszczący w sobie całą stronę)
Wstawienie text-align: center w body nic nie daje. Nie mogę zrobić margin: 0 auto bo nie mogę ustawić szerokości dla div'a w którym mieścić się będzie cała strona. Z tego samego powodu (nieokreślonej szerokości) nie mogę skorzystać z left: 50%; margin-left: -cośtam;

Z góry dziękuję za pomoc i pozdrawiam

php programmer

26.01.2007, 14:42:55

Cytat

Z tego samego powodu (nieokreślonej szerokości) nie mogę skorzystać z left: 50%; margin-left: -cośtam;

no to moze tą szerokośc pobrać w JS ?

Kod

var szer = document.getElementById('element_ktorego_szerokowsci_nie_znamy').style.width;

mess_alex

26.01.2007, 15:13:14

W ostateczności można by, jednak wolałbym nie używać JS do budowy (wyglądu) strony.
A przy okazji: chciałem sprawdzić czy to działa - wyświetla mi pusty komunikat, czemu?

[HTML] pobierz, plaintext 
<!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" lang="pl">
<head>
	<style type="text/css">
		div#container {background: yellow; float: left;}
		div#piksele {width: 250px; background: grey; display: block; float: left}
		div#punkty {width: 60em; background: red; display: block; float: right;}
	</style>
	<script type="text/javascript">
	function bum()
	{
		var szer = document.getElementById('container').style.width;
		alert(szer);
	}
	</script>
</head>
<body onload="bum()">
	<div id="container">
		<div id="piksele">Tu sa piksele</div>
		<div id="punkty">Tu sa punkty</div>
	</div>
</body>
</html>
[HTML] pobierz, plaintext

revyag

26.01.2007, 15:15:07

@php programmer, tak można pobrać wartość która jest zdefiniowana w stylach, a tutaj nie jest znana.

@mess_alex, jakoś ciężko jest mi sobie wyobrazić serwis o zmiennych rozmiarach

Dlaczego nie możesz ustawić szerokości diva ?
Jeśli tylko menu masz pozycjonowane absolutnie to je wycentruj osobno, resztę strony osobno.

mess_alex

26.01.2007, 16:30:27

@revyag, ponieważ gośćmi strony mają być również osoby starsze i niepełnosprawne, tak więc po powiększeniu rozmiaru czcionki strona nadal musi wyglądać przynajmniej dobrze i oczywiście być w pełni funkcjonalna (a czytanie po 5 lub mniej wyrazów w rzędzie nie jest zbyt wygodne)

// EDIT

@revyag, dzięki

. Dzięki Twojej wypowiedzi zastanowiłem się jeszcze raz i uznałem (z bólem serca), żeby zrobić stronę normalnie w px. Tu jest przykład strony o zmiennych rozmiarach, ale w przypadku mojej strony nigdy bym takiego efektu nie osiągnął, gdyż jestem ograniczony szerokością zdjęć.

@php programmer, nie rozumiem o co Ci chodzi

Pozdrawiam

php programmer

26.01.2007, 16:41:45

ale co to ma do stałej szerokości środkowej części,
jak zmienisz czcionkę na większą i masz ustawioną
stałą szerokość to ona się nie zmieni

yaotzin

14.02.2007, 20:53:49

[HTML] pobierz, plaintext 
.strona{
    margin-left: auto;
    margin-right: auto; 
}
[HTML] pobierz, plaintext

Powinno działać

Chyba

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.