Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Autorozciąganie DIV'a
shimano
post 16.04.2010, 18:35:40
Post #1





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 6.06.2009

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


Witam,

Czy da się zrobić, aby DIV znajdujący się w tej samej linii co inne DIV'y o określonych rozmiarach miał szerokość dobieraną do obiektu nadrzędnego lub krawędzi przeglądarki?
Kod
+---------------------------------------------------------------+
|+---------+---------+-----------------------------------------+|
||    A    |    B    |                   C                     ||
|+---------+---------+-----------------------------------------+|
+---------------------------------------------------------------+

#A, #B {
  width: 100px;
}
#C {
  width: auto_rozciaganie_do_maximum; // ?
}

Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 9)
erix
post 16.04.2010, 18:43:08
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




display: table-cell?


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Kshyhoo
post 16.04.2010, 18:44:18
Post #3





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że




  1. width: auto;

lub:
  1. width: 100%;


--------------------
Go to the top of the page
+Quote Post
shimano
post 16.04.2010, 19:30:17
Post #4





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 6.06.2009

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


erix: moze IE nie jest fajne, ale jego uzytkownicy nierzadka bywaja calkiem spoko goscmi na stronie. Nie bede rezygnowal z gosci, ktorzy uzywaja IE tylko po to, zeby cos ladniej wygladalo. Tak wiec table odpada.

Kshyhoo, ekhmn... Bez komentarza, poczekam na inne sugestie?
Go to the top of the page
+Quote Post
erix
post 16.04.2010, 22:53:54
Post #5





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Cytat
Nie bede rezygnowal z gosci, ktorzy uzywaja IE tylko po to, zeby cos ladniej wygladalo. Tak wiec table odpada.

A kto Ci broni użyć CSS-a w komentarzu warunkowym, który dostosuje szerokość poprzez expression?

  1. width: expression(parseInt(this.parentNode.runtimeStyle.width));


Pisane z palca, więc może nie działać.

Nie można iść w skrajność i śmiecić kodu tylko dlatego, że komuś się nie chce zmienić przeglądarki. Osobiście wychodzę z założenia, żeby wyglądało jak najbardziej zbliżone do oryginału. I - na szczęście - jest expression w CSS dla badzIEwia, więc można nawet oklepać wszystko przez :before i :after, a resztę elementów utworzyć przez expression (sprawdzone w praktyce, można sporo JS w tym upchać winksmiley.jpg).

Poza tym, z table-cell problem ma chyba tylko IE6; w IE7 - z tego co pamiętam - jest już ok.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
shimano
post 17.04.2010, 09:46:29
Post #6





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 6.06.2009

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


Cytat(erix @ 16.04.2010, 22:53:54 ) *
  1. width: expression(parseInt(this.parentNode.runtimeStyle.width));


Pisane z palca, więc może nie działać.


No i nie dziala. I osobiscie nie wiem, jak zrobic, by dzialalo to co masz na mysli.

Poza tym, nawet gdybym mial uzyc display table, to problem ciagle pozostaje ten sam. Trzeci blok nie rozciaga sie do maximum.
Go to the top of the page
+Quote Post
zegarek84
post 17.04.2010, 10:10:00
Post #7





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

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


może poczytaj o pozycjonowaniu?? - nie koniecznie z absolute - też relative itd...:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <style type="text/css">
  5. #a {
  6. background-color: red;
  7. }
  8. #b{
  9. background-color: yellow}
  10. #c {
  11. background-color: green}
  12. #a, #b, #c {
  13. position: absolute;
  14. height: 200px;
  15. padding: 0px;
  16. margin: 0px;}
  17. #a, #b {
  18. width: 100px}
  19. #a {
  20. left:0px;}
  21. #b {
  22. left:100px;}
  23. #c {
  24. left: 200px;
  25. right: 0px;}
  26. </style>
  27. </head>
  28. <body>
  29. <div id="a"></div><div id="b"></div><div id="c"></div>
  30. </body>
  31. </html>


Ten post edytował zegarek84 17.04.2010, 10:11:22


--------------------
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
shimano
post 17.04.2010, 11:11:16
Post #8





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 6.06.2009

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


No brawo Panie zegarku! O to chodzilo! Czyli u mnie problem lezal w pozycjonowaniu. Niepotrzebnie pozycjonowalem pod float, a nawet probowalem z relative, a wystarczylo wszystko pozycjonowac absolutnie i tylko wrzucic wszystko w jeden obiekt pozycjonowany relatywnie (ot tak, dla mojej wygody i estetyki, co by ladnie wygladalo w okienku).

Piwo dla tego Pana!

P.S.
Co do czytania o pozycjonowaniu to uwierz mi, ze w swoim dosc juz dlugim zyciu nie przeczytalem tylu ksiazek/gazet/czasopism, co wlasnie o pozycjonowaniu DIVow... Problem polegal tylko na tym, ze w 90% wszystkie artykuly byly takie same i nie wnosily mi nic nowego.

Update:
Kurde, pare etapow dalej mysle, ze moge miec problem z absolutnym pozycjonowaniem. Czy jest jakas opcja, aby uzyskac taki sam efekt, ale nie przez pozycjonowanie absolutne?


Ten post edytował shimano 17.04.2010, 12:09:33
Go to the top of the page
+Quote Post
koboos
post 17.04.2010, 15:51:58
Post #9





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 30.03.2010

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


Moze cos takiego:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <style type="text/css">
  7. #a {
  8. background-color: red;
  9. }
  10. #b{
  11. background-color: yellow}
  12. #c {
  13. background-color: green}
  14. #a, #b, #c {
  15. height: 200px;
  16. padding: 0px;
  17. margin: 0px;}
  18. #a, #b {
  19. float:left; position:relative; width: 100px}
  20. </style>
  21. </head>
  22. <body>
  23. <div id="c">
  24. <div id="a"></div><div id="b"></div>
  25. </div>
  26. </body>
  27. </html>
Go to the top of the page
+Quote Post
shimano
post 18.04.2010, 09:00:08
Post #10





Grupa: Zarejestrowani
Postów: 29
Pomógł: 0
Dołączył: 6.06.2009

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


koboos, no niestety ciagle nie to, bo C rozciaga sie na cala szerokosc, wiec nachodzi (podchodzi) na (pod) A, B. Przy wlaczonym border to widac ;/

P.S.
Ale jesli nie znajdzie sie lepsze rozwiazanie to wybiore to i dodam tylko overflow hidden. Nie wiem na ile to rozsadne, ale raczej powinno dzialac.


Ten post edytował shimano 18.04.2010, 09:16:48
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 07:39