Forum PHP.pl > Wycentrowanie ramki w css

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wycentrowanie ramki w css

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

em1X

30.06.2007, 17:23:29

Potrafi ktos wycentrowac taka strone?

Poki co wyrownanie jest do lewej strony, a nigdzie nie idzie znalezc jak ustawic całą stronę na środku

(uciąłem kod)

Fsh

30.06.2007, 17:46:37

Spróbuj dać dla body : margin: 0px auto;

em1X

30.06.2007, 18:25:23

ta, szczegolnie gdy ramka dziala na position absolute..
moze ma ktos inne przyklady ramek w css

revyag

1.07.2007, 14:59:41

Moja rada jest taka, żebyś przepisał ten kod, bo teraz to jest jakaś porażka. Hack na hacku i hackiem pogania

O conditional comments słyszałeś ?

Centrowanie elementu pozycjonowanego absolutnie, przykładowa szerokość i wysokość.

Kod

#elem {
    position:absolute;
    width:700px;
    height:600px
    left:50%;
    top:50%;
    margin-left:-350px;   /*połowa szerokości*/
    margin-top:-300px;  /*połowa wysokości*/
}

Zajec

1.07.2007, 15:51:38

Cytat(em1X @ 30.06.2007, 19:25:23 )

ta, szczegolnie gdy ramka dziala na position absolute..
moze ma ktos inne przyklady ramek w css

Szczególnie gdy strona (na szczęście) nie wykorzystuje ani jednej ramki

em1X

6.07.2007, 18:18:29

Cytat(Zajec @ 1.07.2007, 16:51:38 )

Szczególnie gdy strona (na szczęście) nie wykorzystuje ani jednej ramki

bo to są ramki w css, jakbyś nie zauważył

Cytat("revyag")

Centrowanie elementu pozycjonowanego absolutnie, przykładowa szerokość i wysokość.

ramka jednak nie może polegać na position absolute, bo strona musi się skalować w zależności od rozdzielczosci ekranu uzytkownika. Dlatego potrzebne mi skalowanie + umiejscowienie w centrum. Zeby strona wygladala dobrze w 800x600, a w miare rosnacej rozdzielczosci trzymala sie srodka.

Sam sobie w końcu poradziłem

i nawet śmiga w xhtml strict

[HTML] pobierz, plaintext 
<html>
<head>
<title>test</title>
<style>
html, body {margin:0; padding:0; height:100%; width:100%; overflow: hidden}
#content {height:100%; width:100%}
 
#frame1, #frame2 {margin:0; padding:0; height: 100%; float: left; overflow: auto}
#frame1-content, #frame2-content {margin: 0; padding: 0; height: 100%}
#frame1 ul {float: right; list-style-type: none}
 
#frame1 {width: 32%}
#frame2 {width: 68%}
</style>
</head>
<body>
 
<div id="content">
	<div id="frame1">
		<div id="frame1-content">
		<ul>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
		</ul>
		</div>
	</div>
	<div id="frame2">
		<div id="frame2-content">
		<ul>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
			<li>asdasda</li>
		</ul>
		</div>
	</div>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

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.