Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] jak zrobić taki układ strony
Forum PHP.pl > Forum > Przedszkole
sweter
16.02.2009, 17:41:04
Chciałbym mieć następujący układ strony:

1. Na środku div z treścią o szerokości 750px
2. Po bokach dwa divy, których szerokość będzie ustalana automatycznie.

Próbowałem zrobić coś takiego:
Kod
<div id="tlo_lewe" style="width:auto/2">
</div>

<div id="strona" style="width:750px; background-color:orange;">jhk
</div>

<div id="tlo_prawe" style="width:auto/2">
</div>

ale nie bardzo mi wyszło...
peter13135
16.02.2009, 17:53:48 
[HTML] pobierz, plaintext 
  1. <div style="margin:auto">
  2. <div id="tlo_lewe" >
  3. </div>
  4.  
  5. <div id="strona" style="width:750px; background-color:orange;">jhk
  6. </div>
  7.  
  8. <div id="tlo_prawe">
  9. </div>
  10. </div>
[HTML] pobierz, plaintext


może tak?
sweter
16.02.2009, 20:33:42
Ale, żeby wszystkie divy były w jednej linii daję
Kod
display:inline

ale teraz środkowy div ma szerokość zależną od tekstu, który się w nim znajduje.
sad.gif
peter13135
16.02.2009, 20:49:28
co to znaczy w jednej lini??, daj to wszystkie divy w jednego diva to bedziesz miał na jednej wysokości
TurboPtyś
16.02.2009, 20:53:20
Może coś takiego:

Kod
<div id="tlo_lewe_i_prawe">
  
   <div id="strona" style="width:750px; background-color:orange; margin: 0px auto;">jhk
   </div>
  
   </div>
conmar
16.02.2009, 21:00:44
Kod
<div id="kontener" style="margin: 0 auto;overflow: hidden>
        <div id="tlo_lewe" style="float: left">
        </div>

        <div id="strona" style="width:750px; background-color:orange;float:left">jhk
        </div>

       <div id="tlo_prawe" style="float:left">
       </div>
</div>
likemandrake
16.02.2009, 21:48:36
Nie da się za pomocą divów uzyskać dokładnie takiego efektu jakiego byś chciał (przynajmniej bez problemów). Mógłbyś taki efekt uzyskać stosując jedynie tabele.

Layout na tabelce mógłby wyglądać tak:

Kod
<table style="width: 100%;">
    <tr>
        <td>left</td>
        <td style="width: 750px;">center</td>
        <td>right</td>
    </tr>
</table>


Natomiast używając layoutu na divach mógłbyś jedynie zrobić takie coś:

Kod
<div style="width: 80%; float: left;">
   <div style="width: 75%; float: right;">
      center
   </div>
   <div style="width: 25%; float: left;"> <!-- poniewaz (20% * 100%) / 80% = 25% -->
      left
   </div>
</div>
<div style="width: 20%; float: right;">
   right
</div>


Albo zamiast jednostek względnych użyć tylko i wyłącznie jednostek bezwzględnych (np. px).

Jest w css takie coś jak display: table, table-cell, table-row, ale niestety tego nie obsługuje ta "wspaniała" przeglądarka IE, bo wtedy mógłbyś no problemo użyć divów, a efekt mieć taki jak na layoucie z tabelką.

Owszem, możesz spróbować expressions, aby zasymulować w IE zachowanie elementów display table-*, jak chce Ci się bawić, to proszę, jednak używając expressions, trzeba wiedzieć co się robi, bo szybko można sobie popsuć "wydajność" strony.

Pozdrawiam
zegarek84
16.02.2009, 22:21:46
tu masz na sztywno szerokość środka na 750px, ustaw sobie też na sztywno szerokość lewego diva - domyślnie na 200px

zmienia się szerokość prawego diva
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. div {position: absolute; top: 0; bottom: 0; height:100%;}
  5. #left4 { left: 0px; width: 200px;
  6. background-color: yellow;}
  7. #center { width: 750px; left: 200px;background-color: green;
  8. }
  9. #right{ left:950px;
  10. right: 0;  background-color: grey;}
  11. </style>
  12. </head><body>
  13. <div id="left4">1 Lewa</div>
  14. <div id="center">Ĺšrodek</div>
  15. <div id="right">Prawa kolmna</div>
  16. </body></html>
[HTML] pobierz, plaintext
likemandrake
16.02.2009, 22:34:16
Cytat(zegarek84 @ 16.02.2009, 22:21:46 ) *
tu masz na sztywno szerokość środka na 750px, ustaw sobie też na sztywno szerokość lewego diva - domyślnie na 200px

zmienia się szerokość prawego diva
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. div {position: absolute; top: 0; bottom: 0;}
  5. #left4 { left: 0px; width: 200px;
  6. background-color: yellow;}
  7. #center { width: 750px; left: 200px;background-color: green;
  8. }
  9. #right{ left:950px;
  10. right: 0;  background-color: grey;}
  11. </style>
  12. </head><body>
  13. <div id="left4">1 Lewa</div>
  14. <div id="center">Ĺšrodek</div>
  15. <div id="right">Prawa kolmna</div>
  16. </body></html>
[HTML] pobierz, plaintext



Twój przykład napewno nie będzie działał pod IE6, nie wiem czy również pod IE7. Nie muszę nawet sprawdzać...

Cytat(sweter @ 16.02.2009, 20:33:42 ) *
Ale, żeby wszystkie divy były w jednej linii daję
Kod
display:inline

ale teraz środkowy div ma szerokość zależną od tekstu, który się w nim znajduje.
sad.gif


Gdy elementowi zewnętrznemu nadasz display: inline, każdy element blokowy, który będzie wewnątrz tego elementu, będzie sprawiał bardzo wiele problemów.
grzehotnik
16.02.2009, 22:58:54
Zrób jednego diva z szerokością całej tabelki nadaj mu position- absolute i display:table
póżniej zrób diva lewego, prawego i środkowego z display: table-cell(możesz określić szerokość wszystkich albo tylko którego chcesz) i wywołaj:
Kod
<div głowny>
<div lewy></div>
<div srodek></div>
<diw prawy></div>
</div>
zegarek84
16.02.2009, 23:24:07
Cytat(likemandrake @ 16.02.2009, 22:34:16 ) *
Twój przykład napewno nie będzie działał pod IE6, nie wiem czy również pod IE7. Nie muszę nawet sprawdzać...

teraz jak siedzę na linuxie to nie sprawdzę ;p - ale jak robiłem symulację fixed pod IE na CSS to robiłem to na divach w absolute ;p
likemandrake
16.02.2009, 23:30:56
Symulację position: fixed na IE6 nie zrobi się inaczej niż przez użycie właśnie position: absolute + JS (lub jest też druga metoda, bez użycia JS), tu miałem raczej na myśli, że elementom nadawałeś jednocześnie top, right, bottom i left, co wg specyfikacji powinno odpowiednio rozciągnąć element, a to właśnie nie działa pod IE6 napewno (i jak wspomniałem, nie wiem czy też na IE7 ruszy).
zegarek84
16.02.2009, 23:36:00
wystarczyło dodać tylko height:100% winksmiley.jpg

EDIT - ale sprawdź teraz ;p - rozciągnięte jest całe winksmiley.jpg - bez symulacji ^^ - bo jak nie kijem to zawsze da się patykiem biggrin.gif
likemandrake
16.02.2009, 23:57:11
No przecież napisałem w nawiasie, że symulację fixed można również napisać bez JS, czyli przy użyciu samego CSS...

Cytat(zegarek84 @ 16.02.2009, 23:36:00 ) *
wystarczyło dodać tylko height:100% winksmiley.jpg


Długo będziemy działać w trybie quirks mode? Włącz tryb zgodny ze standardami, to nie będzie to już tylko height: 100% tongue.gif

Kod
#right {
   left: 950px;
   right: 0;
   background-color: grey;
}


Ta reguła nie może działać dobrze w IE6, m.in. o nią mi chodzi smile.gif
zegarek84
17.02.2009, 00:00:05
zerknij na regułę div{} ^^
likemandrake
17.02.2009, 00:05:26
No reguła o której mówisz, dla przeglądarek zgodnych ze standardami rozciągnie element na całą wysokość przy użyciu właściwości top i bottom, a dla pozostałych rozwiąże to właściwość height, ale nadal pozostaje problem left i right winksmiley.jpg

Przy okazji polecam stronę http://kurs.browsehappy.pl/Bugi/HomePage smile.gif Napewno Wam się przyda Hakerzy winksmiley.jpg
zegarek84
17.02.2009, 00:10:23
musiałbym się pobawić na stricte pod IE - a na swoim laptopie nie mam IE ;p - w każdym bądź razie bez rygorów działa to też na IE ^^
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.