Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: uklad divow (px + %)
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
GrayHat
mam taki uklad:

| div1 = 200px | | div2 | | div3 = 200px |

i teraz moj problem:
jak rozciagnac div2 na maxymalna szerokosc??
Kill3R
hmm moze tak??

  1. div#div2 {
  2. width: 100%;
  3. margin: 0 200px;
  4. }
GrayHat
niestety to nie to :/
moze spojz w kod:

http://h4x.pl/funworld/template.html
mike
Cytat(GrayHat @ 11.06.2006, 23:56 ) *
niestety to nie to :/

Śmiem się kłócić tongue.gif
  1. <style type="text/css">
  2. div#container {
  3. margin: auto;
  4. width: 600px;
  5. }
  6.  
  7. div#left, div#right {
  8. float: left;
  9. width: 200px;
  10. height: 200px;
  11. background-color: #f00;
  12. }
  13.  
  14. div#right {
  15. float: right;
  16. }
  17.  
  18. div#middle {
  19. margin: 0px 200px;
  20. height: 300px;
  21. background-color: #00f;
  22. }
  23.  
  24. <div id="container">
  25. <div id="left"></div>
  26. <div id="right"></div>
  27. <div id="middle"></div>
  28. </div>


P.S.
Zainwestuj w max-width (niestety bez IE) bo strona bedzie śmiesznie wyglądać przy dużych rozdzielczościach.
Na 1152x864 juz wygląda jakby się niechcący rozlazła.
dr_bonzo
http://www.alistapart.com/articles/holygrail
mike
---added---

Przeglądalem Twój kod i widzę, że nadużywasz bloków.
Szczególnie w nagłówkach w sekcji.

... lub w głównej belce masz:
  1. <div class="middleBar">
  2. <div class="middleBarStart"></div>
  3. <div class="middleBarTitle">
  4. <div style="padding: 6px; color: rgb(255, 255, 255);">
  5. Witamy w <b>FunWorld</b>
  6. </div>
  7. </div>
  8. <div class="middleBarEnd"></div>
  9. </div>


A wystarczyłoby tak:
  1. <div class="middleBar">
  2. <img src="img/bluebarleft.gif" class="left" alt="left_corner" />
  3. <img src="img/bluebarright.gif" class="right" alt="right_corner" />
  4. Witamy w <strong>FunWorld</strong>
  5. </div>


Teraz dla belki dajesz tło powtarzane w poziomie bluebarmiddle.gif
Obrazki wyświetlasz jako bloki i pozycjonujesz absolutnie w belce.
Jeden idzie na maksa w lewo drugi w prawo.

Na calości strony zaoszczędzisz bardzo dużo kodu.
Tym bardziej ze odpowiednio stworzone klasy left i right dla obrazków zadzialają dla wszystkich belek. Kolejny bonus, plik CSS mniejszy.
GrayHat
ok niby dziala ale nie do konca.
w ie cala srodkowa czesc jest obsunieta w dol :/

http://h4x.pl/funworld/template.html

co jest jeszcze nie tak?? :/
mike
#contentMiddle posiada w tej chwili width: 100%;
Moim zdaniem w ogóle nie powienieneś definiować długości dla tego bloku. Wyrzuć to i będzie OK.
GrayHat
EOT.

thx mike
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.