[CSS] pozycjonowanie z użyciem DIV

yarpo · Post autor: **yarpo** » pn mar 28, 2005 5:56 pm

Mam mały problem z pozycjonowaniem za pomocą CSS. Otóż wstawiam główną DIV wyśrodkowaną, a reszta ma być względem niej dopasowana. Jednak zamiast brać np. top: 100, od górnej granicy DIV, to bierze od dolenj poprzedniej warstwy. To samo z bocznymi ustaleniami....

Zobaczcie gdzie tu może być błąd:

Kod: Zaznacz cały

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
</HEAD>
<LINK rel="stylesheet" href="style.css" type="text/css" />
</HEAD>
<BODY>
<DIV class="glowna">
 <DIV class="gorna"><IMG src="banner.jpg" alt="banner" /></DIV>
 <DIV class="menu">Tu menu</DIV>
 <DIV class="tresc">Tu jakieś akapity itp.</DIV>
</DIV>
</BODY>
</HTML>

A tu kod CSS:

Kod: Zaznacz cały

DIV{ margin: 0;
     padding: 0; }

.glowna { width       : 780px;
          margin-left : auto;
          margin-right: auto;}

.gorna { position: relative;
         top:0;
         left:0; }

.menu { position : relative;
        top: 150;
        left:0 }

.tresc {position : relative;
        top : 150;
        left: 140; }

Mógłbym oczywiście dać to na pozycjonowanie absolute, ale wtedy mi się będzie na różnych rozdzielczościach rozjeżdżać - pół biedy na większej, ale mniejszej niż 1024x768 to już licho;-)

Dlatego tworzę tą główną warstwę, która jest na środku strony, a wszystkie pozostałe warstwy miałyby być pozycjonowane względem niej [relative].

Czy ktoś wie dlaczego to nie działa:-)?????

TIA

Michał Fikus · Post autor: **Michał Fikus** » pn mar 28, 2005 8:08 pm

Nie analizowałem kodu, bo właśnie wychodzę, ale z opisu to dodaj do divów display: inline;

paszczak · Post autor: **paszczak** » pn mar 28, 2005 10:27 pm

nie jestem pewien czy dobrze cie zrozumialem... jezeli masz position: relative to top i left oznaczaja przesuniecie wzgledem "normalnej" pozycji tego elementu.. jesli chcesz je pozycjonowac wzgledem "pojemnika" (w tym wypadku div.glovna) to musisz zmienic position na absolute dla elementow wewnatrz "pojemnika".

patrz specyfikacja css2.1:
http://www.w3.org/TR/CSS21/visuren.html ... f-position

Michał Fikus · Post autor: **Michał Fikus** » wt mar 29, 2005 7:59 am

Nie no ok, wszystko działa tak jak mówiłem - chodzi o display: inline; To dlatego, że div jest z założenia elementem blokowym i jako blok "rezerwuje" całą szerokość strony (na fragmencie jego wysokości).
Jeśli nie o to Ci chodzi, proszę wykonaj jakiś rysunek (kolorowy najlepiej) jaki jest efekt u Ciebie, bo u mnie wszystko działa ok.

yarpo · Post autor: **yarpo** » wt mar 29, 2005 12:20 pm

Serdeczne dzieki za wszystkie odpowiedzi. Popróbuję.

Co do tego in-line, to mam nadzieję, że będzie działać, ale chyba juz tak próbowałem.... może coś źle robiłem.

Odezwę się, jeśli wyjdzie - i jeśli nie to też:-)

yarpo · Post autor: **yarpo** » wt mar 29, 2005 1:59 pm

No i zrobiłem z

display: inline;

i nie działa

wstawiłem to do wszystkich, prócz głowna i DIV....

Michał [jesli tak moge się zwrócić] mógłbyś skopiowac na forum kod, który ty zrobiłeś z tymi inlinami??

)

Dzięki

paszczak · Post autor: **paszczak** » wt mar 29, 2005 4:20 pm

chodzi o cos takiego?

Kod: Zaznacz cały

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
</HEAD>
<STYLE>
DIV {
	margin: 0;
	padding: 0;
	}

.glowna {
	position: relative;
	width: 780px;
	height: 100%;
	margin: auto;
	background-color: #FFFF00;
	}

.gorna {
	position: absolute;
	top:0px;
	left:0px;
	background-color: red;
	}

.menu {
	position : absolute;
	top: 150px;
	left:0px;
	background-color: green;
	}

.tresc {
	position : absolute;
	top : 150px;
	left: 140px;
	background-color: blue;
	} 
</STYLE>
</HEAD>
<BODY>
 
<DIV class="glowna">
  <DIV class="gorna"><IMG src="banner.jpg" alt="banner" /></DIV>
  <DIV class="menu">Tu menu</DIV>
  <DIV class="tresc">Tu jakieś akapity itp.</DIV>
 </DIV>

</BODY>
</HTML>

yarpo · Post autor: **yarpo** » pt kwie 01, 2005 4:02 pm

No, teraz juz tylko ponadawać odpowiednie szerokosci i wysokości warstwom i wszystko gra:-)

WIELKIE dzięki:-) [będę musiał porownac twóuj kod z moim....]

jeszcze raz dzięki - jakby co, to "jeszcze tu wrócę;-)"

[CSS] pozycjonowanie z użyciem DIV

[CSS] pozycjonowanie z użyciem DIV

Re: [CSS] pozycjonowanie z użyciem DIV

Re: [CSS] pozycjonowanie z użyciem DIV

Re: [CSS] pozycjonowanie z użyciem DIV

Re: [CSS] pozycjonowanie z użyciem DIV

Re: [CSS] pozycjonowanie z użyciem DIV

Re: [CSS] pozycjonowanie z użyciem DIV

Re: [CSS] pozycjonowanie z użyciem DIV