Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: DIV: automatyczna szerokość
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
eai
5.06.2006, 14:49:59

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!!
shpyo
15.06.2006, 08:00:38
Cytat
I teraz pytanie jaką podać wartość dla 2A i 2B tak żeby zajmowały po połowie pozostałego miejsca w Divie 1??

Hmm połowa 100% to 50% - więc chyba powinny mieć po 25% (bo jest ich dwa co nie) - trywialna matma.

Twój pomysł jest złym rozwiązaniem (bez względu do czego to ma służyć). Łaczenie px i % będzie źle wyglądało na różnych rozdzielczościach.
Vogel
15.06.2006, 09:28:40
Cytat(shpyo @ 15.06.2006, 09:00 ) *
Hmm połowa 100% to 50% - więc chyba powinny mieć po 25% (bo jest ich dwa co nie) - trywialna matma.


lol aaevil.gif nie chce wiedziec co masz zmatmy. naprawde...



Cytat(shpyo @ 15.06.2006, 09:00 ) *
Twój pomysł jest złym rozwiązaniem (bez względu do czego to ma służyć). Łaczenie px i % będzie źle wyglądało na różnych rozdzielczościach.


a skąd możesz wiedzieć do czego ma to służyć? hm? moze bedzie tam np. tło? inne po prawej inne po lewej stronie. i co, nadal bedzie zle wygladalo w roznych rozdzielczosciach?



@eai : ze stworzeniem moze byc problemik. mozna zaprzac do pomocy JS, ale na razie na czystym CSS mam problem i nie wiem jak go obejsc. Chyba trzeba poczekac na Zajeca albo innego CSSowego guru ;]
popo
15.06.2006, 13:23:23
umiescic 3,4,5 w pomocniczym divie i dac mu margin-left i margin-right na auto to napewno wyposrodkuje pozostaje kwestia 2A i 2B jesli maja to byc 2 osobne divy to proponuje dla 2A dac float left i widtth 50% i padding-right = (szerokosc 3+4+5)/2 analogicznie dla 2b

rozwiazania tego nie testowalem, ale mysle ze warto je wyprobowac.
problemy moze stwarzac przeslanianie sie divow
Zajec
21.06.2006, 09:06:39
Walczyłem już z czymś bardzo podobnym wcześniej, ale bezskutecznie.

Zajec się poddaje i ma zamiar zwrócić do wyzszych "guru" biggrin.gif
popo
23.06.2006, 19:24:34
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)
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.