Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Layout a "kochany" ie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
xamil
http://kamil.klecza.pl/php/test.html

Nie mogę dojść do ładu aby stworzyć taki layout. Przegooglowałem już dobre 3h i nie mogę znaleźć co zrobić aby ie 6.0 wyświetlał to tak jak ff.

Generalnie potrzebuje layou w którym określam stałą wysokość dla kilku warstw natomiast a środkowa ma wysokość jaka pozostanie.

W tym wypadku góra ma 80px, dół 40px natomiast część środkowa powinna sie automatycznie dostosować. I działa to pod ff, operą, konquerorem ale pod ie nie. IE mi olewa podane wysokości i roszerza te td.

Generealnie potrzebuje layout w tej postaci najlepiej tak jak w przykładzie na tabelkach ale może być też na divach.

Ktoś pomoże dojść co jest nie tak i jak to poprawić?
Dandelion
  1. <link rel="stylesheet" type="text/css" href="css.css"/>
  2. </head>
  3.  
  4.  
  5. <div id="calosc">
  6.  
  7. <div id="logo">logo</div>
  8. <div id="glowna">glowna</div>
  9. <div id="menu">menu</div>
  10. <div id="stopka">stopka</div>
  11. </div>
  12.  
  13. </body>
  14. </html>


  1. div#logo{
  2.      background-color: blue;
  3.    height: 80px;
  4.    width:700px;
  5. }
  6.  
  7. div#glowna{
  8.      float:left;
  9.    background-color: brown;
  10.    height: 500px;
  11.    width:600px;
  12. }
  13.  
  14. div#menu{
  15.      float:left;
  16.      background-color: green;
  17.      height:500px;
  18.      width:100px;
  19. }
  20.  
  21. div#stopka{
  22.      background-color: yellow;
  23.      width:700px;
  24.      height:50px;
  25. }
xamil
Wyraźnie napisałem, że część środkowa winna się automatycznie dostosować a nie jakieś stałe "height: 500px;"

Cały dzień już siedzę nad tym i nie mogę znaleźć/wymyśleć rozwiązania.

Właśnie z tabelkami jest problem jaki opisałem w pierwszym poście a z divami taki jak kolega przedstawił w drugim (czyli, że środkowa część się nie dostosowuje na wysokość) a wygląda to mniej więcej tak: http://kamil.klecza.pl/php/test2.html
gekon
Bo "środkowa część" nie ma się "dostosowywać" do okna przeglądarki ale do treści która się w niej znajduje. Polecam wycieczkę śladami moich ostatnich postów. Niedawno komuś podpowiadałem jak zrobić stopkę "przyssaną" do dołu strony i równej długości kolumny. Pozdrawiam.
Dandelion
  1. <link rel="stylesheet" type="text/css" href="css.css"/>
  2. </head>
  3.  
  4.  
  5.  
  6.  
  7. <div id="logo">logo</div>
  8.  
  9. <div id="test">
  10. <div id="glowna">glowna</div>
  11. <div id="menu">menu</div>
  12. </div>
  13.  
  14. <div id="stopka">stopka</div>
  15.  
  16. </body>
  17.  
  18. </html>


  1. div#test{
  2. height:85%;
  3. width:700px;
  4. background-color:black;
  5. }
  6.  
  7.  
  8. div#logo{
  9.      background-color: blue;
  10.    height: 10%;
  11.    width:700px;
  12. }
  13.  
  14. div#glowna{
  15.      float:left;
  16.    background-color: brown;
  17.    height: 100%;
  18.    width:600px;
  19. }
  20.  
  21. div#menu{
  22.      float:left;
  23.      background-color: green;
  24.      height:100%;
  25.      width:100px;
  26. }
  27.  
  28. div#stopka{
  29.      background-color: yellow;
  30.      width:700px;
  31.      height:5%;
  32. }
xamil
Cytat(gekon @ 11.07.2007, 00:37:51 ) *
Bo "środkowa część" nie ma się "dostosowywać" do okna przeglądarki ale do treści która się w niej znajduje.
Bo co? Bo Ty tak powiesz? To ja potrzebuję ten layout więc chyba wiem co chcę, prawda? Środkowa część ma się dostosowywać do okna przeglądarki a nie treści w niej zawartej tak jak to przedstawiłem w przykładzie numer jeden który działa we wszystkim prócz ie. Jak się nie ma nic ciekawego do powiedzenia to lepiej się nie odzywać.

@Dandelion: Dzięki za zainteresowanie ale to jeszcze nie to:/ Tym razem ułatwiłeś sobie życie zmieniając wysokość #logo i #stopka na wysokość procentową. Niestety one muszą mieć stałą wysokość tak jak podałem w przykładzie. Tylko środek ma się zmieniać.
gekon
Chłopcze czytaj uważnie. Dwa posty, o których mówię pomogą Ci osiągnąć cel. I nie denerwuj się. Złość piękności szkodzi.
Cytat
Bo co? Bo Ty tak powiesz?

Bo inaczej nie miałbyś z tym problemów. Widocznie ludzie, którzy tworzyli specyfikację tak uznali.
xamil
Cytat(gekon @ 11.07.2007, 11:01:33 ) *
Chłopcze czytaj uważnie. Dwa posty, o których mówię pomogą Ci osiągnąć cel. I nie denerwuj się. Złość piękności szkodzi.
Dziewczynko, nie pomogą. Nie pisałbym tutaj gdybym znalazł na tym forum rozwiązanie. Twoje posty to już chyba ze 4 razy widziałem. Nie ma tam rozwiązania mojego problemu a przynajmniej ja go tam nie widzę. Skoro twierdzisz, że wiesz jak to zrobić to może się wkońcu podzielisz tym. Dalej nie widzę abyś cokolwiek wniósł do tej dyskusji. Nie denerwuje się ale męczą mnie ludzie którzy trują "przecież to proste" ale jak przyjdzie co do czego to nie potrafią dać rozwiązania.

Cytat
Bo inaczej nie miałbyś z tym problemów. Widocznie ludzie, którzy tworzyli specyfikację tak uznali.
Nie miałbym gdyby ie6 dobrze interpretowało to co mu się napisze. Niestety jest jak jest i tworzenie layoutów opiera się niestety na "trikach" a nie na specyfikacji.
Dandelion
tak swoja droga na co na sile rozciagac strone ?
xamil
Bo tak ma być.
Dandelion
Cytat
Bo tak ma być.


Przez takie odzywki nikt nie bedzie chcial ci pomoc


http://forum.php.pl/index.php?s=&showt...st&p=371439
xamil
Cytat(Dandelion @ 11.07.2007, 20:30:05 ) *
Przez takie odzywki nikt nie bedzie chcial ci pomoc
Ale to nie jest żadna odzywka tylko fakt:D No tak ma być i co ja na to poradzę?biggrin.gif Przypuszczam, że ze względów estetycznych (i w sumie się z tym zgadzam)... i jeszcze parę innych drobnych rzeczy. No po prostu jest potrzebny taki layout.


Tak jak wspomniałem widziałem posty kolegi gekon'a ale ja nie widzę tam rozwiązania/nie umiem tego dostosować do swoich potrzeb. Teraz spróbowałem jeszcze raz ale naprawdę nie potrafię włożyć tam dwóch kolumn zamiast jednej i żeby się rozciągały na całą pozostałą wysokość.

W każdym bądź razie dzięki za pomoc. W tej chwili niestety poszedłem na ławiznę i wersja dla ie liczy wysokość środkowych warstw przy pomocy js. Ale byłoby miło jakby ktoś podał rozwiązanie "na tacy". Naprawdę próbuję i próbuję ale nie potrafię tego zrobić:/ Dwa dni szukałem i mam już po prostu dość:D
gekon
Uważaj chłopcze podaję algorytm:
1. Robisz layout taki jak w poście ze stopką, z tą różnicą ze zostawiasz tylko 'wrapper' i 'footer' i style, które im odpowiadają (z layout.css).
2. Traktujesz 'wrapper' jako nowe body i układasz w nim kolumny
3. Stosujesz Faux columns dla swoich kolumn.
4. Cieszysz się, że Ci się udało/Czytasz ponownie wszystko od początku (z pokorą w sercu) i próbujesz zrozumieć.
5. Walczysz z lenistwem.
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.