Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> DIV: automatyczna szerokość
eai
post
Post #1





Grupa: Zarejestrowani
Postów: 367
Pomógł: 10
Dołączył: 20.05.2005

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

(IMG:http://eai.pl/sample.gif)
1: width: 100%;
3: width: 100px;
4: width: 80px;
5: width: 50px;

I teraz pytanie jaką podać wartość dla 2A i 2B tak żeby zajmowały po połowie pozostałego miejsca w Divie 1??

Div 1 będzie miał szerokość całego okienka przeglądarki, Divy czerwone będą zajmowały określoną szerokość w px i będą na środku. A jak zrobić żęby Div 2AB wypełniały pozostałe miejsce w DIV jeden po równo.

Help!!
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
popo
post
Post #2





Grupa: Zarejestrowani
Postów: 85
Pomógł: 0
Dołączył: 15.07.2005

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

ok podlubalem troche i wyszlo mi cos takiego (wysokosc poszczegolnych kolumn nie jest poprawna ale uklad ogolem jest ok - wyskokosc mozna sobie jakas minimalna na sztywno ustawic)

oto kod html i css
wysokosc poszczegolnych kolumn sama sie dopasowuje do tekstu
jezeli chcemy miec tlo od gory do dolu poprawne wstawiamy je odpowiednio dla:
kolumn srodkwych do diva kontener
bokow do diva d1
divy te rozciagaja sie w pionie do wysokosci tresci najdluzszej kolumny, a tlo z kontenera zakrywa tlo z d1 nie wiem czy to na 100% to o co walczyliscie, ale zawsze to jakis postep chyba

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="d1">
  3.   <div id="d2a">Content for  id "d2a" Goes Here fgfdhg fhfghhg fhfgh </div>
  4.   <div id="d2b">Content for  id "d2b" Goes Here</div>
  5.   <div id="kontener">  
  6.     <div id="d3">Content for  id "d3" Goes Here</div>
  7.     <div id="d4">Content for  id "d4" Goes Here</div>
  8.     <div id="d5">Content for  id "d5" Goes Here</div>
  9.     <div id="dol"></div>
  10.   </div>  
  11.   <div id="dol2"></div>
  12. </div>
  13. </body>
[HTML] pobierz, plaintext


Kod
div {
    border: 0;
    min-height: 100%;
}
#d1 {
    min-height: 100%;
    border-width:1;
    border-color:#0033CC;
    background-color:#3399FF;
}
#kontener {
    margin-right: auto;
    margin-left: auto;
    width: 230px;
    clear: none;
    z-index: 10;
}
#d3 {
    width: 100px;
    float: left;
    background-color: #FF0000;
    z-index: 10;
    clear: none;
}
#d4 {
    width: 80px;
    background-color: #FF00FF;
    float: left;
    z-index: 10;
    clear: none;
}
#d5 {
    width: 50px;
    background-color: #FF0000;
    float: left;
    z-index: 10;
    clear: none;
}
#d2b {
    background-color: #000099;
}
#dol {
    clear: both;
    height: 0px;
}
#d2a {
    background-color: #993333;
    float: left;
    width: 50%;
    margin-right: -115px;
    padding-right: -115px;
    z-index: 0;
}
#d2b {
    float: right;
    width: 50%;
    padding-left: -115px;
    margin-left: -115px;
    z-index: 20;
}
#dol2 {
    clear: both;
    height: 0px;
}

----- edit -----
testowalem pod foxem 1.5.0.4 i opera 8 i 9 i wygladalo ok z ie jak zwykle sa problemy przy na sztywno ustawianej szerokosci divow i trzeba albo specjalna wersje albo odpowiedni hack
----- edit 2 -----
A teraz najlepsze Udalo mi sie przy pomocy samego CSS rozciagnac kolumny w pionie na wysokosc calego okna przegladarki (znajomy z IE 5 stwierdzil ze u niego w przeciwienstwie do poprzedniego rozwiazania to nie trybi, wiec jak ktos to pod IE przetestuje niech da znac)

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="d1">
  11.   <div id="d2a">Content for  id "d2a" Goes Here fgfdhg fhfghhg fhfgh </div>
  12.   <div id="d2b">Content for  id "d2b" Goes Here</div>
  13.   <div id="kontener">  
  14.     <div id="d3">Content for  id "d3" Goes Here</div>
  15.     <div id="d4">Content for  id "d4" Goes Here</div>
  16.     <div id="d5">Content for  id "d5" Goes Here</div>
  17.   </div>  
  18. </div>
  19. </body>
  20. </html>
[HTML] pobierz, plaintext

Doctype w dokumencie zdaje sie miec znaczenie dla coniektorych przegladarek
Kod
html,body {
    height: 100%;
    width: 100%;
    border: none;
    margin: 0px;
    padding: 0px;
}

#d1 {
    border-color:#0033CC;
    background-color:#3399FF;
    height: 100%;
}

#kontener {
    margin-right: auto;
    margin-left: auto;
    width: 230px;
    clear: none;
    z-index: 10;
    height: 100%;
}

#d3 {
    width: 100px;
    float: left;
    background-color: #FF0000;
    z-index: 10;
    clear: none;
    height: 100%;
}

#d4 {
    width: 80px;
    background-color: #FF00FF;
    float: left;
    z-index: 10;
    clear: none;
    height: 100%;
}

#d5 {
    width: 50px;
    background-color: #FF0000;
    float: left;
    z-index: 10;
    clear: none;
    height: 100%;
}

#d2a {
    background-color: #993333;
    float: left;
    width: 50%;
    margin-right: -120px;
    padding-right: -120px;
    z-index: 0;
    height: 100%;
}

#d2b {
    background-color: #0066FF;
    float: right;
    width: 50%;
    padding-left: -120px;
    margin-left: -120px;
    z-index: 0;
    height: 100%;
}


Uwaga do tego rozwiazania (wszystkie elementy nadrzedne dla elementu ktory ma sie rozciagac na 100% wysokosci okna musza miec zadeklarowana wysokosc inaczej toto nie zatrybi)

Ten post edytował popo 25.06.2006, 21:24:13
Go to the top of the page
+Quote Post

Posty w temacie
- eai   DIV: automatyczna szerokość   5.06.2006, 14:49:59
- - shpyo   CytatI teraz pytanie jaką podać wartość dla 2A i 2...   15.06.2006, 08:00:38
- - Vogel   Cytat(shpyo @ 15.06.2006, 09:00 ) Hmm poł...   15.06.2006, 09:28:40
- - popo   umiescic 3,4,5 w pomocniczym divie i dac mu margin...   15.06.2006, 13:23:23
- - Zajec   Walczyłem już z czymś bardzo podobnym wcześniej, a...   21.06.2006, 09:06:39
- - popo   ok podlubalem troche i wyszlo mi cos takiego (wyso...   23.06.2006, 19:24:34

« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 26.12.2025 - 21:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn