Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> DIV: automatyczna szerokość
eai
post
Post #1





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

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


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
shpyo
post
Post #2





Grupa: Zarejestrowani
Postów: 574
Pomógł: 2
Dołączył: 13.04.2004
Skąd: Lublin

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

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.


--------------------
jQuery, JavaScript i CSS - porady, tutoriale
highlab.pl - blog o technologiach, nauce i programowaniu
Go to the top of the page
+Quote Post
Vogel
post
Post #3





Grupa: Zarejestrowani
Postów: 402
Pomógł: 0
Dołączył: 20.01.2003

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

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 ;]


--------------------
· vogel.art.pl · Regular Expression Studio · Goniec - Rowerowe Usługi Kurierskie ·
Go to the top of the page
+Quote Post
popo
post
Post #4





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

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

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
Go to the top of the page
+Quote Post
Zajec
post
Post #5





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

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

Walczyłem już z czymś bardzo podobnym wcześniej, ale bezskutecznie.

Zajec się poddaje i ma zamiar zwrócić do wyzszych "guru" biggrin.gif
Go to the top of the page
+Quote Post
popo
post
Post #6





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
« Następny starszy · CSS · 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 Aktualny czas: 19.08.2025 - 04:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn