.

.

Zapewne jakiś header z logiem/bannerem, choć div#prawy zawiera ten sam obrazek, więc bez kodu i obrazków cińżko wróżyć

div#prawy stworzylem, poniewaz chcialem zrobic po bokach grafiki cos jak to logo div#top tyle ze w pionie. Za chiny ludowe nie moge dojsc jak to zaczepic z prawej

Masz zdecydowanie za duzo ID, do tego nie potrzebnie robisz div#nazwa, zamiast samo #nazwa.

Daj link do strony, lub chociaz zdjecie. Daj zdjecie co chcesz uzytskac tez, pogladowy szkic.

Zeby dzialalo right:50%, czy cokolwiek z right:, left:, top:, bottom:, to trzeba im ustawic position:relative; lub position:absolute; lub position:fixed. Normalnie elementy maja position:static, i nie reaguja na przeniesienia za pomoca right/left.

Pamietaj ze id moze byc tylko jeden w dokumencie. I to raczej tylko po to by oddzielac sekcje przeznaczeniowo, a nie stylowo.

Zalozmy header, footer i main. Ale juz przesuwanie w mainie kolumn w lewo i prawo i na srodek, za pomoca klas. Bo mozesz sobie je skopiowac i zrobic kilka wierszy po kilka kolumn. ID-ow nie mozesz tak kopiowac :)

Chcialbym w miejscu tych czerwonych prostokatow zrobic po bokach takie pionowe grafiki aby wygladalo to jak zaczepione do tego glownego zbiornika z tekstem.



Załącznik 311689

Wtedy robisz sobie taka strukture:

http://screenshu.com/static/uploads/.../t5/z3kahr.jpg

Klasa clearfix jest potrzebna, zeby #main sie rozciagnelo na wysokosc menu lub contentu, bo jak jej nie bedzie. To jakby sam main zniknie, i tresc bedzie nachodzic na stopke.

Aha a w html to tak:

Kod PHP:

---

... <div id="main" class="clearfix"> <aside class="side-banner left-banner"> Twoja tresc </aside> <aside class="side-banner right-banner"> Twoja tresc </aside> <div class="right-column clearfix"> <article> twoja tresc </article> </div> <div class="left-column clearfix"> Twoja tresc menu </div> </div> ...

---

Poczytaj o zaleznosciach miedzy position:fixed/absolute/relative.

Kurde dzieki stary. Troche materialu do po studiowania.

@
Czyli mam wywalic te divy

Kod:

---

#body {
width:886px;
height:auto;
overflow:hidden;
}

#left {
width:239px;
height:auto;
float:left;
border-bottom: 1px solid #bbbbb;
}

#right {
width:643px;
height:auto;
float:right;
margin:50px 0;}

---

I na ich miejsce wstawic te twoje?

Osobiście jestem zwolennikiem używania display: inline-block. Wtedy nie trzeba clearfixować i działa to z każdą w miarę nową przeglądarkąNIEDOZWOLONY_CIAG_ZNAKOW(nawet IE od 8 wzwyż bodajże)...

Kod HTML:

---

<section class="logo">
    <!-- LOGO -->
</section>
<section class="page">
    <nav class="side-menu">

    </nav>
    <article class="content">
          <!-- treść strony -->
    </article>
    <aside class="footer">
          <!-- footer -->
    </aside>
</section>

---

Kod:

---

.logo {
  width: ...;
}

.page {
  font-size: 0px;
}

.side-menu {
  font-size: 12px;
  display: inline-block;
  width: ...;

  vertical-align: top;
}

.content {
  font-size: 12px;
  width: ...;

  display: inline-block;
  vertical-align: top;
}

---

Wadą jest ten font-size na 0 w page - trzeba to zrobić, inaczej będą spacje pomiędzy elementami (których nie chcemy) - wynika to z tego, że inline-block pozycjonuje elementy jak inline (czyli jeżeli dwa się mieszczą obok siebie to umieści je obok siebie), ale pozwala go stylować jak block (czyli ustawiać 'z palca' szerokość, wysokość itp.)... dlatego też jest kiepsko, kiedy tworzymy szablon typu elastic (wielkość zależna od wbudowanej w przeglądarkę domyślnej wielkości czcionki).

Pozdrawiam
Killavus

Cytuj:

---

Killavus napisał

Wadą jest ten font-size na 0 w page - trzeba to zrobić, inaczej będą spacje pomiędzy elementami (których nie chcemy) - wynika to z tego, że inline-block pozycjonuje elementy jak inline (czyli jeżeli dwa się mieszczą obok siebie to umieści je obok siebie), ale pozwala go stylować jak block (czyli ustawiać 'z palca' szerokość, wysokość itp.)... dlatego też jest kiepsko, kiedy tworzymy szablon typu elastic (wielkość zależna od wbudowanej w przeglądarkę domyślnej wielkości czcionki).
s

---

OMFG, a nigdy nie wiedzialem skad sie bierze ten cholerny margines nieusuwalny. Pracuje z html juz dlugi czas, i myslalem ze to jest jakis bug we wszystkich przegladarkach xD Stary ile to mi nerwow oszczedzi xD

Aczkolwiek ja i tak bede preferowal float, imo wlasnie do tego one sa. A zastosowanie clearfixa jest powszechne, i spoko, i tez dziala wszedzie.

Wedle standardu W3C raczej "moja" opcja jest preferowana - oczywiście, obie są poprawne. W zamierzeniach float powstał, aby specyfikować jak mają być opływane elementy tekstem - weź dowolną gazetę i zobacz jak jest wstawiony obrazek w środek tekstu i jak tekst "opływa" wokół niego - to jest float.

Największy zarzut do floata jaki mam, to ten, że "wyrzuca" floatowany element z document flow - nie jest on pozycjonowany przez standardowy algorytm przeglądarki, tylko "specjalnie". To może powodować problemy z wydajnością i niezdefiniowane zachowanie (np. jak ma się zachować floatowany element bez ustalonego height? W standardzie jest powiedziane, że jest to "implementation dependent" - czyli innymi słowy może wyglądać inaczej na każdej przeglądarce i nie będzie to błędem ;P).

Pozdrawiam
Killavus