jak wysrodkowac stronke oparta na divach

kolazero · Post autor: **kolazero** » pn lut 25, 2008 9:21 pm

oto moj kod:

[xml]#apDiv1 {
position:absolute;
width:352px;
height:253px;
z-index:1;
left: -13px;
top: -11px;
}
#apDiv2 {
position:absolute;
width:394px;
height:67px;
z-index:2;
left: 254px;
top: 87px;
}
#apDiv3 {
position:absolute;
width:200px;
height:140px;
z-index:3;
left: 459px;
top: 178px;
}
#apDiv4 {
position:absolute;
width:200px;
height:133px;
z-index:4;
left: 457px;
top: 348px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 0px;
top: 338px;
}
#apDiv6 {
position:absolute;
width:397px;
height:188px;
z-index:2;
left: -420px;
top: 50px;
}
#apDiv7 {
position:absolute;
width:394px;
height:192px;
z-index:3;
left: -420px;
top: 263px;
}
#apDiv8 {
position:absolute;
width:87px;
height:30px;
z-index:5;
left: 334px;
top: 18px;
}
#apDiv9 {
position:absolute;
width:79px;
height:32px;
z-index:6;
left: 453px;
top: 63px;
}
#apDiv10 {
position:absolute;
width:87px;
height:32px;
z-index:7;
left: 543px;
top: 63px;
}
#apDiv11 {
position:absolute;
width:98px;
height:39px;
z-index:5;
left: 326px;
top: 48px;
}
#apDiv12 {
position:absolute;
width:125px;
height:59px;
z-index:6;
left: 432px;
top: 48px;
}
#apDiv13 {
position:absolute;
width:108px;
height:38px;
z-index:7;
left: 542px;
top: 48px;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
}
a:active {
color: #FFFFFF;
}
#apDiv14 {
position:absolute;
width:237px;
height:62px;
z-index:8;
left: 219px;
top: 691px;
}
-->
</style>
</head>
<body>

<div align="center"></div>
<div id="apDiv1"><img src="images/logo.gif" alt="logo" width="300" height="294" /></div>
<div id="apDiv2"><img src="images/index_16.gif" alt="booking" width="383" height="70" /></div>
<div id="apDiv3"><img src="images/index_20.gif" width="180" height="120" />
<div id="apDiv5"><img src="images/index_31.gif" width="179" height="120" /></div>
<div id="apDiv6"><img src="images/index_23.gif" width="384" height="172" /></div>
<div id="apDiv7"><img src="images/index_28.gif" width="384" height="172" /></div>
</div>
<div id="apDiv4"><img src="images/index_26.gif" width="180" height="120" /></div>
<div id="apDiv11"><a href="javascript:okienko('contact.html', 'test' )"><img src="images/index_05.gif" width="97" height="37"></a></div>
<div id="apDiv12"><a href="javascript:okienko('contact.html', 'test' )"><img src="images/index_06.gif" width="110" height="37"></a></div>
<div id="apDiv13"><a href="javascript:okienko('contact.html', 'test' )"><img src="images/index_07.gif" width="103" height="37"></a></div>
<div id="apDiv14"><img src="images/index_38.gif" width="205" height="19" /></div>
</body>
</html>[/xml]

stronka działa poprawnie ale wyświetla sie z lewej strony ekranu, chcę ją wyśrodkować i nie rozumiem dlaczego nie działa polecenie <div align="center"></div>

pozdrawiam i dziękuje za wszelka pomoc

!ans · Post autor: **!ans** » pn lut 25, 2008 9:33 pm

Całość wsadzasz w div'a np. <div id="container"> zawartość strony </div> w CSS przypisujesz mu szerokość i margin: 0 auto;

kolazero · Post autor: **kolazero** » pn lut 25, 2008 10:18 pm

dzięki za odpowiedz ale chyba coś źle robi bo rezultatów nie ma

#srodek {
width:400px;
margin: 0 auto
}

oraz w body
<div id="srodek">
moja strona
</div>

Marek_bf · Post autor: **Marek_bf** » wt lut 26, 2008 11:24 am

Do umieszczania kodu na forum używaj BBCode http://forum.webinside.pl/faq.php#21

!ans · Post autor: **!ans** » wt lut 26, 2008 11:47 am

Kod:
[xml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>???</title>
<style type="text/css">
div#container {
width: 500px;
height: 400px;
margin: 0 auto;
padding: 5px;
border: 1px solid #000;
background: #ff6;
}
</style>
</head>
<body class="text">
<div id="container">


</div>
</body>
</html>
[/xml]
Wygląda to tak.
Tło, obramowanie i wielkość ustawiłem żebyś mógł zobaczyć efekt.

MobyDick · Post autor: **MobyDick** » wt lut 26, 2008 2:27 pm

Mam troche podobny problem i moje pytanie jest takie: jak pozycjonowac inne elementy div w ramach bloku container bo mi sie dziwne rzeczy dzieją. Czy jak wybiore opcje absolute to bedzie pozycjonowane wedlug okna czy wedlug elementu container?

Taki kod: CSS

Kod: Zaznacz cały

#div_kontener {
	margin: 0 auto;
	width:1004px;
}
#div_naglowek_logo {
	position:absolute;
	top:9px;
	width:300px;
	height:43px;
	z-index:1;
}

#div_naglowek_napis {
	position:absolute;
	left:300px;
top:9px;
	width:704px;
	height:43px;
	z-index:2;
	}
#div_tresc {
	position:absolute;
	top:50px;
	width:1004px;
	height:450px;
	z-index:3;
}

i HTML

Kod: Zaznacz cały

<div id="div_kontener">
<div id="div_naglowek_logo"></div>
<div id="div_naglowek_napis"></div>
<div id="div_tresc"></div>
</div>

I co jest w tym wszystkim źle, że naglowek_napis sie pozycjonuje wg okna a nie wedlug kontenera[/code]

!ans · Post autor: **!ans** » wt lut 26, 2008 3:09 pm

Jeśli dodasz tylko position: absolute; to nic się nie zmieni ,ale pozwala ci to wypozycjonować względem ram strony ale za pomocą top, bottom, left i right.

MobyDick · Post autor: **MobyDick** » wt lut 26, 2008 3:19 pm

dodalem kawalek kodu przed chwilą

kolazero · Post autor: **kolazero** » wt lut 26, 2008 10:28 pm

!ans pisze:Kod:
[xml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>???</title>
<style type="text/css">
div#container {
width: 500px;
height: 400px;
margin: 0 auto;
padding: 5px;
border: 1px solid #000;
background: #ff6;
}
</style>
</head>
<body class="text">
<div id="container">


</div>
</body>
</html>
[/xml]
Wygląda to tak.
Tło, obramowanie i wielkość ustawiłem żebyś mógł zobaczyć efekt.

dzięki za pomoc ale wydaje mi sie ze to ma zastosowanie tylko do tekstu moja strona oparta jest tylko na grafice rozplanowanej za pomocą div, po prostu nie potrafię scalić tego co mi podałeś z moimi divami, oczywiście z samym tekstem nie ma problemu.

!ans · Post autor: **!ans** » śr lut 27, 2008 10:46 am

kolazero pisze:
!ans pisze:Kod:
[xml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>???</title>
<style type="text/css">
div#container {
width: 500px;
height: 400px;
margin: 0 auto;
padding: 5px;
border: 1px solid #000;
background: #ff6;
}
</style>
</head>
<body class="text">
<div id="container">


</div>
</body>
</html>
[/xml]
Wygląda to tak.
Tło, obramowanie i wielkość ustawiłem żebyś mógł zobaczyć efekt.
dzięki za pomoc ale wydaje mi sie ze to ma zastosowanie tylko do tekstu moja strona oparta jest tylko na grafice rozplanowanej za pomocą div, po prostu nie potrafię scalić tego co mi podałeś z moimi divami, oczywiście z samym tekstem nie ma problemu.

Nie ma znaczenia co umieścisz w tym div'ie. On zawsze będzie na środku ,ale wszystko co się w nim znajduje tylko w wypadku pozycjonowania relatywnego.

Ponieważ przypisałeś div'om pozycjonowanie absolutne są one ustawiane względem ram dokumentu i tak poszczególne odległości deklarowane są przez top: bottom: left: i right:. Znaczy to ,że aby wyśrodkować element o szerokości np. 800px w rozdzielczości 1024x768 wartość left: musi wynosić 112px ,ponieważ 1024 - 800 = 224px 224 : 2 = 112. Tyle że w innej rozdzielczości ekranu element nie będzi już wyśrodkowany. Wartości można określać w proc. Wtedy strona będzie wyśrodkowana w każdej rozdzielczości ,ale szerokość div'ów będzie się zmieniać w zależności od rozdzielczości przez co obrazki będą się rozjeżdżać.

Wniosek: musisz zmienić na pozycjonowanie relatywne i będzie ok.

kolazero:
Jak ten div z identyfikatorem naglowek_napis ma pozycjonować się względem kontenera skoro ustawiłeś pozycjonowanie absolutne czyli względem ram dokumentu.

kolazero · Post autor: **kolazero** » śr lut 27, 2008 8:56 pm

[xml]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>???</title>
<style type="text/css">
div#container {
width: 800px;
height: 600px;
margin: 0 auto;
padding: 5px;
border: 1px solid #000;
background: #ff6;
}
#apDiv1 {
position:relative;
width:165px;
height:140px;
z-index:1;
left: 100px;
top: 10px;
}
#apDiv2 {
position:relative;
width:200px;
height:140px;
z-index:1;
left: 400px;
top: 10px;
}
</style>
</head>
<body class="text">
<div id="container">
<div id="apDiv1"><img src="05.gif" width="97" height="37" alt="1" /></div>
<div id="apDiv2"><img src="07.gif" width="103" height="37" alt="2" /></div>
</div>
</body>
</html> [/xml]

kolejny raz dzięki za odzew!
juz jest lepiej obrazki są na środku ale nie potrafię ich umieści na jednej wysokość, pomimo ze w obu obrazkach ustawiam top:10px to i tak ostawiają sie jeden pod drugim :/
wkleiłem krotki kod żebyś zrozumiał z czym mam problem

pozdrawiam

MobyDick · Post autor: **MobyDick** » czw lut 28, 2008 10:14 am

!ans pisze: Jak ten div z identyfikatorem naglowek_napis ma pozycjonować się względem kontenera skoro ustawiłeś pozycjonowanie absolutne czyli względem ram dokumentu.

No a ja myślałem, ze pozycjonowanie absolutne odnosi jest w stosunku do div-a nadrzędnego, ale spoko, dzięki, już kumam o co biega

!ans · Post autor: **!ans** » czw lut 28, 2008 3:17 pm

Divom w których są obrazki w css przypisz float:left; ,a kolejnemu elementowi ,który będzie na stronie clear:both;

MobyDick · Post autor: **MobyDick** » wt mar 04, 2008 3:22 pm

dzięki wszystkim, ładnie sie wszystko wypozycjonowalo, ale mam pytanko jeszcze jedno, czy rozmiar kontenera w pionie należy określić? czy nic nie robić.
Dlaczego pytam, bo dzieje sie tak ze jak nie określę rozmiarów kontenera, to w mimo iz cala strona mieści sie na jednym ekranie to i tak pojawia sie pasek przewijania i można zjechać strona w dol (firefox, opera i IE tak maja), natomiast jak określę rozmiar kontenera tak zeby sie zmieścił na stronie, to w firefoxie jest ok, nie pojawia sie pasek przewijania a w pozostałych przeglądarkach nic sie nie zmienia, nadal jest pasek i można stronę skrolowac, mimo ze na dole nic nie ma jest puste tło.

!ans · Post autor: **!ans** » wt mar 04, 2008 3:33 pm

Margin i padding w body ustaw na zero. Powinno pomóc ,a jak nie to pisz.

jak wysrodkowac stronke oparta na divach

jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach

Re: jak wysrodkowac stronke oparta na divach