jak wysrodkowac stronke oparta na divach

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
MobyDick
Nowy
Nowy
Posty: 55
Rejestracja: czw sty 24, 2008 7:49 pm
Lokalizacja: Jarocin
Kontakt:

Re: jak wysrodkowac stronke oparta na divach

Post autor: MobyDick »

Nic nie pomogło niestety, nadal jest suwak po prawej, zauważyłem ze na stronie na której jest tylko jedna kolumna właściwej treści przesunąć stronę można o ok 1/3 ekranu, na stronie gdzie sa dwie kolumny ta wartość już wynosi ok 1/2 natomiast jedna strona ma 3 kolumny i wtedy to już jest ponad 2/3 ekranu. Kolumny zrealizowałem za pomocą bloków div umieszczonych obok siebie.
!ans
Nowy
Nowy
Posty: 131
Rejestracja: wt gru 11, 2007 9:59 pm
Lokalizacja: zza rogu

Re: jak wysrodkowac stronke oparta na divach

Post autor: !ans »

Jeśli możesz to wstaw kod to może coś wykombinujemy.
MobyDick
Nowy
Nowy
Posty: 55
Rejestracja: czw sty 24, 2008 7:49 pm
Lokalizacja: Jarocin
Kontakt:

Re: jak wysrodkowac stronke oparta na divach

Post autor: MobyDick »

Oto kod:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grupa zapalonych fotografów oferuje</title>

<style>
body {
	background-color: #000000;
}

#pudelko {
	margin:0 auto;
	width:900px;
	height:500px;
	background-color: #99FFFF;
}

#wstep {
	position:relative;
	left: 0px;
	top: 0px;
	width:450px;
	height:250px;
	z-index:1;
	background-color: #0099FF;
}

#kontakt {
	position:relative;
	left: 450px;
	top:-250px;
	width:450px;
	height:250px;
	z-index:2;
	background-color: #FF0000;
}

#portfolio {
position:relative;
	left: 0px;
	top: -250px;
	width:450px;
	height:250px;
	z-index:3;
	background-color: #33FF00;
}

#oferta {
	position:relative;
	left: 450px;
	top: -500px;
	width:450px;
	height:250px;
	z-index:4;
	background-color: #FF9900;
}
</style>
</head>

<body>
<div id="pudelko">
	<div id="wstep">wstepniak</div>
	<div id="kontakt">kontakt</div>
    <div id="portfolio">portfolio</div>
    <div id="oferta">oferta</div>
</div>
</body>
</html>
ulozenie jest ok, ale nie bardzo kumam skad sie takie wartosci top musialy wziasc no i ten pasek, moze jakas inna propozycja
!ans
Nowy
Nowy
Posty: 131
Rejestracja: wt gru 11, 2007 9:59 pm
Lokalizacja: zza rogu

Re: jak wysrodkowac stronke oparta na divach

Post autor: !ans »

Tak jest dobrze zarówno w IE jak i FF:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grupa zapalonych fotografów oferuje</title>

<style>
body {
   background-color: #000000;
}

#pudelko {
   margin:0 auto;
   width:900px;
   height:500px;
   background-color: #99FFFF;
}

#wstep {
   float: left;
   width:450px;
   height:250px;
   background-color: #0099FF;
}

#kontakt {
   float: left;
   width:450px;
   height:250px;
   background-color: #FF0000;
}

#portfolio {
   float: left;
   width:450px;
   height:250px;
   background-color: #33FF00;
}

#oferta {
   float: left;
   width:450px;
   height:250px;
   background-color: #FF9900;
}
</style>
</head>

<body>
<div id="pudelko">
   <div id="wstep">wstepniak</div>
   <div id="kontakt">kontakt</div>
    <div id="portfolio">portfolio</div>
    <div id="oferta">oferta</div>
</div>
</body>
</html> 
Nie wiem dokładnie co było źle(???) ,ale strona wydłużała się tylko w IE w FF wszystko ok. Co do kodu z-index jest zbędne ,ponieważ elementy się nie pokrywają. Z tego co wiem to top bottom right i left stosuje się tylko w wypadku pozycjonowania absolutnego. Pozatym tak kod jest krótszy :lol:
MobyDick
Nowy
Nowy
Posty: 55
Rejestracja: czw sty 24, 2008 7:49 pm
Lokalizacja: Jarocin
Kontakt:

Re: jak wysrodkowac stronke oparta na divach

Post autor: MobyDick »

Dzieki, ale co zrobic jak bym chcial zeby ktores elementy sie pokrywaly?
!ans
Nowy
Nowy
Posty: 131
Rejestracja: wt gru 11, 2007 9:59 pm
Lokalizacja: zza rogu

Re: jak wysrodkowac stronke oparta na divach

Post autor: !ans »

Jeśli chcesz żeby jakiś element pokrywał inny dajesz mu z-index i pozycjonujesz absolutnie.
MobyDick
Nowy
Nowy
Posty: 55
Rejestracja: czw sty 24, 2008 7:49 pm
Lokalizacja: Jarocin
Kontakt:

Re: jak wysrodkowac stronke oparta na divach

Post autor: MobyDick »

No to wiem, tylko ze pozycjonowanie absolutne jest w stosunku do okna całego, wiec jak będzie inny rozmiar okna (rozdzielczość) to sie będzie przesuwał w poziomie
!ans
Nowy
Nowy
Posty: 131
Rejestracja: wt gru 11, 2007 9:59 pm
Lokalizacja: zza rogu

Re: jak wysrodkowac stronke oparta na divach

Post autor: !ans »

!ans pisze: Z tego co wiem to top bottom right i left stosuje się tylko w wypadku pozycjonowania absolutnego.
Wcześniej napisałem ,że top bottom itd. stosuje się tylko dla pozycjonowania absolutnego ,ale myliłem się. :oops: Można stosować zawsze tylko element przesuwany jest o podane wartości względem ram dokumentu (absolute) i względem elementu nadrzędnego (relative).Czyli nakładasz za pomocą top bottom... Przepraszam za wprowadzenie w błąd.
MobyDick
Nowy
Nowy
Posty: 55
Rejestracja: czw sty 24, 2008 7:49 pm
Lokalizacja: Jarocin
Kontakt:

Re: jak wysrodkowac stronke oparta na divach

Post autor: MobyDick »

spoko, pokombinuje, tylko dlaczego w IE ten cholerny pasek przewijania sie pojawia :roll:
ODPOWIEDZ