Pozycjonowanie dwóch divów, ...poraz kolejny:/ Opcje

[xamil]

Witam.

Chcę osiągnąć taki layout jak na screenie: http://www.kamil.klecza.pl/layout.png

Oczywiście div 1 ok, ale problem zaczyna się przy div 2 i 3. Div 2 to ma być menu które będzie zajmowało powiedzmy 150px. Div 3 ma się rozciągać na pozostałą część ekranu.

No i właśnie... jak to zrobić? Do momentu div'a 3 wszystko ok ale nie wiem jak zmusić div'a 3 do rozciągnięcia się na pozostałą część ekranu a oczywiście stała szerokość nie wchodzi w grę. Dodatkowo nie chcę div'a 2 i div'a 3 obejmować kolejnym div'em. Chciałbym również później wyśrodkować element zawarte w div'ie 3 ale myśle, że to będzie się dało przez margin: auto. Jedyny efekt jaki mi się udało uzyskać to jeden div obok drugiego i oba wraz z body mają ten sam kolor. Efekt jak na obrazku.

Ktoś mógłby pomóc?

[cyphelf]

Najprawdopodobniej w tych przykładach znajdziesz rozwiązanie:

http://glish.com/css/

[gekon]

[HTML] pobierz, plaintext 
<div id="header"><h1>1</h1></div>
 
<div id="content"><p>3</p></div>
 
<div id="sidebar"><p>2</p></div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#content{
 width: 80%;
 float: right;
 height: 100%;
 overflow: hidden;
}
#sidebar{ width: 20%; }
[HTML] pobierz, plaintext 

Pisane z palca

Ten post edytował gekon 5.06.2006, 20:25:36

[xamil]

[quote]Div 2 to ma być menu które będzie zajmowało powiedzmy 150px[quote]A Ty podajesz względny rozmiar czyli 20% i 80% dla content.

cyphelf: Coś tam chyba wypatrzyłem, potestuje jutro. Mimo wszystko czekam na dalsze propozycje;)

[gekon]

A czy wielką trudność sprawi Ci zamienienie wartości szerokości dla tych bloków?

[siemakuba]

@gekon: popraw mnie jeśli się mylę, ale ustawienie szerokości #sidebar na 150px, spowoduje, że #content nie będzie już rozciągał się na pozostałą część ekranu. Będzie się rozciągał na 80% jego szerokości, a te 80% będzie się różniło w zależności od rozdzielczości ekranu, a więc dostępnej szerokości.

pozdr.

[xamil]

No niestety dokładnie tak. Gdyby tak nie było to nie byłoby problemu:/

[Zajec]

[HTML] pobierz, plaintext 
<div id="header"><h1>1</h1></div>
 
<div id="sidebar"><p>2</p></div>
 
<div id="content"><p>3</p></div>
[HTML] pobierz, plaintext 

Kod

#sidebar{ width: 150px; float: left; }

Ewentualnie jeszcze dodaj

Kod

#content { margin-left: 150px; }

Ten post edytował Zajec 6.06.2006, 13:20:06

[filuniu]

jeżeli layout jest jako cała gotowa grafika to mozesz go pociąć np w Photoshopie i tam masz opcje że zapisauje ci w postaci div-ów

[revyag]

Tak zapisuje w postaci divów, ale tła tych divów to obrazki i nie ma szans, żeby wygenerował layout o którym mowa w tym temacie.
Poza tym kod generowany przez programy graficzne, trzeba omijać z daleka.

[xamil]

Kod

#sidebar{ width: 150px; float: left; }

Kod

#content { margin-left: 150px; }

Dziękuje pięknie;) Dokładnie o to chodziło. Jakie to proste;) Mój problem w tym, że mimo iż używam float to tak naprawde nie wiem jak to do końca działa:/ Musze się dokształcić.

Jeszcze raz dzięki... teraz jak czytam rozwiązanie to aż mi głupio że o coś tak prostego pytałem:D

[gekon]

Tak, w moim przykładzie oba bloki muszą mieć podaną szerokość. Ale ma to swoje zalety jak np. to, że u mnie pierwsza wyświetli się treść a dopiero potem menu. Każdemu według potrzeb

[Zajec]

Tak, w moim przykładzie oba bloki muszą mieć podaną szerokość. Ale ma to swoje zalety jak np. to, że u mnie pierwsza wyświetli się treść a dopiero potem menu. Każdemu według potrzeb

Zaleta? Hm, a ile to menu będzie zajmować przy semantycznym kodzie? Pół kilobajta? ;-)

[gekon]

Biorąc po uwagę dostępność (albo przeglądarki tekstowe, choć to margines, ale nie wiadomo jakie przegladarki bedą w lodówkach :-)) ma to znacznie. Jak już pisałem: co kto potrzebuje

[Zajec]

Biorąc po uwagę dostępność (albo przeglądarki tekstowe, choć to margines, ale nie wiadomo jakie przegladarki bedą w lodówkach :-)) ma to znacznie. Jak już pisałem: co kto potrzebuje

OK, już łapię :-)

Ciekawostka:

<a href="#tresc" style="display: none;">skocz do treści działu</a>

I już masz ładne przechodzenie do treści, tylko dla przeglądarek tekstowych.


P.S.
W lodówce to Opera miała być chyba ;-)