CSS - pozycjonowanie

19Radek88
Użytkownik
Użytkownik
Posty: 105
Rejestracja: 2 lis 2007, o 21:01
Płeć: Mężczyzna
Lokalizacja: Łódź
Podziękował: 14 razy
Pomógł: 4 razy

CSS - pozycjonowanie

Post autor: 19Radek88 »

Witam,

Mam problem z wypozycjonowaniem divów. Ponizej znajduje sie kod strony i jej wyglad:

Kod: Zaznacz cały

<html>
<head>
<title> . </title>
</head>

<body>

<div id = "head" style="height: 100px; width: 700px">
		<img src="banner.jpg" style="width: 700px; height: 200px">	
</div>


<div id = "content" style="background-color: white; width: 700px; height: 400px; overflow: visible">	
	
	<!-- TU TKWI PROBLEM -->	
	<div id = "pierwszy" style="border-style: solid; width: 200">
	</div>
	
	<div id = "drugi" style="border-style: solid; width: 200">
	</div>
</div>


<div id = "footer" style="width: 700px; height: 20; background-color: blue; color: white; text-align: right; font-size: 10;">
	Copyright...
</div>

</body>
</html>


Problem: Chce zmodyfikowac strone tak, aby
1) calosc byla wycentrowana w stosunku do przegladarki // mniej istotne
2) bloki o id 'pierwszy' i 'drugi' byly od siebie calowicie niezalezne, tzn., zeby:
- znajdowaly sie na takich pozycjach jak na ponizszym rysunku;
- dodanie tekstu w 'pierwszym' (a co za tym idzie- jego rozszerzenie) nie powodowalo obnizenia sie 'drugiego' (przy czym nie interesuje mnie tu stosowanie overflow: auto) - mam zamiar w przyszlosci dodawac teksty do tych blokow o dlugosci jeszcze mi nieznanej...

Efekt, ktorego oczekuje:



Prosze o jakas wskazowke / pomoc ;)
Pozdrawiam
grzyb3k
Użytkownik
Użytkownik
Posty: 1
Rejestracja: 18 paź 2009, o 19:36
Płeć: Mężczyzna

CSS - pozycjonowanie

Post autor: grzyb3k »

1) Wyśrodkować całość możesz za pomocą:

Kod: Zaznacz cały

<center></center>
...ale nie jest to dobry sposób, ponieważ nie jest zgodny z XHTML, a więc należy znaleźć jakąś alternatywę. Aby wyśrodkować całą stronę należy zmodyfikować <body>.

Kod: Zaznacz cały

<body style="text-align: center;">
IE (jak to zwykle bywa) odbiega od innych wyszukiwarek i trzeba to uwzględnić. Należy zmodyfikować element, który ma zostać wycentrowany:

Kod: Zaznacz cały

<div style="margin: 0 auto 0 auto;"></div>
Czyli w przypadku diva w którym znajduje się banner powinno to wyglądać tak:

Kod: Zaznacz cały

<div id = "head" style="height: 100px; width: 700px; margin: 0 auto 0 auto;">
      <img src="banner.jpg" style="width: 700px; height: 200px">   
</div>
2) Podpowiedź:
Stwórz tabelkę z dwoma kolumnami i jednym wierszem (2x1). W każdym wierszu umieść diva o szerokości 100%.
19Radek88
Użytkownik
Użytkownik
Posty: 105
Rejestracja: 2 lis 2007, o 21:01
Płeć: Mężczyzna
Lokalizacja: Łódź
Podziękował: 14 razy
Pomógł: 4 razy

CSS - pozycjonowanie

Post autor: 19Radek88 »

Dzięki za odpowiedź, ale zdałem sobie sprawę, że nie do końca sprecyzowałem może to o co mi chodzi.

Ad1.: Z właściwością "center" (w stylu body) oczywiście się zgadzam, ale ma to jeden mały defekt - centruje mi wszystkie divy, podczas gdy zależy mi tylko na wycentrowaniu tego, ktory zawiera inne - "kontenera"; reszta (w nim zawarta) powinna zostac (np.) z lewej strony centrowanego diva.

Ad 2.: Metoda z tabelkami oczywiście zawsze się sprawdza, ale jeśli chciałbym umieścić w głównym divie np. 20 różnych sekcji (innych divów), to idąc za Twoją wskazówką (ktora sprawdza sie w opisywanym początkowo przypadku) musiałbym zagnieżdżać w sobie od groma tabelek... Kod stalby się malo czytelny... Pytanie zatem brzmi, czy nie da się "skonfigurować" divów tak, żeby spełniały zarysowane przeze mnie początkowo kryteria, bez stosowania tabel ?
exother
Użytkownik
Użytkownik
Posty: 97
Rejestracja: 28 wrz 2009, o 15:01
Płeć: Mężczyzna
Podziękował: 3 razy
Pomógł: 9 razy

CSS - pozycjonowanie

Post autor: exother »

Kod: Zaznacz cały

<html>
<head>
<title> . </title>
</head>

<body>

<div id="ain" style="width:700px; height:auto; margin:0px auto;">

<div id = "head" style="height: 200px; width: 700px">
      <img src="banner.jpg" style="width: 700px; height: 200px">   
</div>


<div id = "content" style="background-color: white; width: 700px; height: 400px; overflow: visible; margin:0px auto;">   
   
   <!-- TU TKWI PROBLEM -->   
   <div id = "pierwszy" style="border-style: solid; width: 200px; float:left;">
   
   </div>
   <div id = "drugi" style="border-style: solid; width: 200px; float:right; margin-top:200px;">
   
   </div>
</div>


<div id = "footer" style="clear:both; width: 700px; height: 20; background-color: blue; color: white; text-align: right; font-size: 10;">
   Copyright...
</div>

</div>

</body>
</html>
Choć to wszystko jest niezgodne ze standardami, nieczytelne i w ogóle takie blee... , to myślę, że udało się uzyskać satysfakcjonujący efekt
abc666

CSS - pozycjonowanie

Post autor: abc666 »

Proszę, wgraj jeszcze raz obrazek to ci to napiszę, tak jak powinno być.

1. Po co style jeśli się je wrzuca in-line?
grzyb3k pisze:Aby wyśrodkować całą stronę należy zmodyfikować <body>.
grzyb3k pisze:IE (jak to zwykle bywa) odbiega od innych wyszukiwarek
grzyb3k pisze:Stwórz tabelkę z dwoma kolumnami i jednym wierszem (2x1). W każdym wierszu umieść diva o szerokości 100%.
grzyb3k, z całym szacunkiem, ale nie za bardzo wiesz jak to się robi. Twoje rady przyniosą tylko więcej szkody niż pożytku. Właśnie przez takie rozwiązywanie problemów sieć dzisiaj wygląda tak jak wygląda.
fala19
Użytkownik
Użytkownik
Posty: 41
Rejestracja: 27 sty 2008, o 10:56
Płeć: Mężczyzna
Lokalizacja: Miasto
Pomógł: 1 raz

CSS - pozycjonowanie

Post autor: fala19 »

jakbys uzyl "position: absolute;"?
exother
Użytkownik
Użytkownik
Posty: 97
Rejestracja: 28 wrz 2009, o 15:01
Płeć: Mężczyzna
Podziękował: 3 razy
Pomógł: 9 razy

CSS - pozycjonowanie

Post autor: exother »

fala19 pisze:jakbys uzyl "position: absolute;"?
A po co nadawać pozycje absolutne tam, gdzie potrzeba tylko ustalenia odpowiednich "relacji" pomiędzy kilkoma div'ami? Pozycje absolutne przydają się, gdy musisz gdzieś ustawić konkretne położenie względem "rodzica". A chyba łatwiej dać float:left;, float:right; aniżeli bawić się w ręczne ustawianie odległości od lewej, górnej, prawej, dolnej krawędzi. Chodzi o to, żeby styl był łatwy w edycji, a nie od groma wartości liczbowych, określających to, co może być ustawione lepiej i automatycznie.
abc666

CSS - pozycjonowanie

Post autor: abc666 »

Wszystko pod warunkiem, że w treści oprócz tych dwóch bloków nie ma być nic innego.
exother pisze:A chyba łatwiej dać float:left;, float:right; aniżeli bawić się w ręczne ustawianie odległości od lewej, górnej, prawej, dolnej krawędzi. Chodzi o to, żeby styl był łatwy w edycji, a nie od groma wartości liczbowych, określających to, co może być ustawione lepiej i automatycznie.
Akurat w tym przypadku nie, bo wystarczy wpisać dwa zera i 200 .
Dlaczego baner tytuły jest obrazkiem w kontenerze? Tam powinien być H1 z obrazkiem w tle i tekstem w niewyświetlanym SPANie.
Aha, jeszcze jedna uwaga. Wrzucanie całego body w jeszcze jeden kontener jest bez sensu. Można go spokojnie usunąć.
ODPOWIEDZ