Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] jak zrobić taki układ strony
sweter
post 16.02.2009, 17:41:04
Post #1





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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...


--------------------
Dom Dziecka | Siedlecki Klub Strzelniczy Dragon | Mój blog
Go to the top of the page
+Quote Post
peter13135
post 16.02.2009, 17:53:48
Post #2





Grupa: Zarejestrowani
Postów: 1 447
Pomógł: 191
Dołączył: 26.03.2008

Ostrzeżenie: (0%)
----- 

[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?


--------------------
:)
Go to the top of the page
+Quote Post
sweter
post 16.02.2009, 20:33:42
Post #3





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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


--------------------
Dom Dziecka | Siedlecki Klub Strzelniczy Dragon | Mój blog
Go to the top of the page
+Quote Post
peter13135
post 16.02.2009, 20:49:28
Post #4





Grupa: Zarejestrowani
Postów: 1 447
Pomógł: 191
Dołączył: 26.03.2008

Ostrzeżenie: (0%)
-----

co to znaczy w jednej lini??, daj to wszystkie divy w jednego diva to bedziesz miał na jednej wysokości


--------------------
:)
Go to the top of the page
+Quote Post
TurboPtyś
post 16.02.2009, 20:53:20
Post #5





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 9.02.2009

Ostrzeżenie: (0%)
-----

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>
Go to the top of the page
+Quote Post
conmar
post 16.02.2009, 21:00:44
Post #6





Grupa: Zarejestrowani
Postów: 26
Pomógł: 2
Dołączył: 29.12.2008

Ostrzeżenie: (0%)
-----

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>
Go to the top of the page
+Quote Post
likemandrake
post 16.02.2009, 21:48:36
Post #7





Grupa: Zarejestrowani
Postów: 175
Pomógł: 17
Dołączył: 23.06.2006

Ostrzeżenie: (0%)
-----

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


--------------------
serwiswww.pl
Go to the top of the page
+Quote Post
zegarek84
post 16.02.2009, 22:21:46
Post #8





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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


Ten post edytował zegarek84 16.02.2009, 23:47:31


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
likemandrake
post 16.02.2009, 22:34:16
Post #9





Grupa: Zarejestrowani
Postów: 175
Pomógł: 17
Dołączył: 23.06.2006

Ostrzeżenie: (0%)
-----

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.


--------------------
serwiswww.pl
Go to the top of the page
+Quote Post
grzehotnik
post 16.02.2009, 22:58:54
Post #10





Grupa: Zarejestrowani
Postów: 76
Pomógł: 0
Dołączył: 8.01.2009

Ostrzeżenie: (0%)
-----

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>
Go to the top of the page
+Quote Post
zegarek84
post 16.02.2009, 23:24:07
Post #11





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
likemandrake
post 16.02.2009, 23:30:56
Post #12





Grupa: Zarejestrowani
Postów: 175
Pomógł: 17
Dołączył: 23.06.2006

Ostrzeżenie: (0%)
-----

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).

Ten post edytował likemandrake 16.02.2009, 23:32:07


--------------------
serwiswww.pl
Go to the top of the page
+Quote Post
zegarek84
post 16.02.2009, 23:36:00
Post #13





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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

Ten post edytował zegarek84 16.02.2009, 23:49:29


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
likemandrake
post 16.02.2009, 23:57:11
Post #14





Grupa: Zarejestrowani
Postów: 175
Pomógł: 17
Dołączył: 23.06.2006

Ostrzeżenie: (0%)
-----

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


--------------------
serwiswww.pl
Go to the top of the page
+Quote Post
zegarek84
post 17.02.2009, 00:00:05
Post #15





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

zerknij na regułę div{} ^^


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
likemandrake
post 17.02.2009, 00:05:26
Post #16





Grupa: Zarejestrowani
Postów: 175
Pomógł: 17
Dołączył: 23.06.2006

Ostrzeżenie: (0%)
-----

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

Ten post edytował likemandrake 17.02.2009, 00:24:03


--------------------
serwiswww.pl
Go to the top of the page
+Quote Post
zegarek84
post 17.02.2009, 00:10:23
Post #17





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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 ^^


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 5.07.2025 - 04:01
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn