Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Autorozciąganie DIV'a
Forum PHP.pl > Forum > Po stronie przeglądarki
shimano
16.04.2010, 18:35:40
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; // ?
}

erix
16.04.2010, 18:43:08
display: table-cell?
Kshyhoo
16.04.2010, 18:44:18 
[CSS] pobierz, plaintext 
  1. width: auto;
[CSS] pobierz, plaintext

lub:
[CSS] pobierz, plaintext 
  1. width: 100%;
[CSS] pobierz, plaintext
shimano
16.04.2010, 19:30:17
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?
erix
16.04.2010, 22:53:54
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?

[CSS] pobierz, plaintext 
  1. width: expression(parseInt(this.parentNode.runtimeStyle.width));
[CSS] pobierz, plaintext


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.
shimano
17.04.2010, 09:46:29
Cytat(erix @ 16.04.2010, 22:53:54 ) *
[CSS] pobierz, plaintext 
  1. width: expression(parseInt(this.parentNode.runtimeStyle.width));
[CSS] pobierz, plaintext


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.
zegarek84
17.04.2010, 10:10:00
może poczytaj o pozycjonowaniu?? - nie koniecznie z absolute - też relative itd...:
[HTML] pobierz, plaintext 
  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.                 position: absolute;
  16.                 height: 200px;
  17.                 padding: 0px;
  18.                 margin: 0px;}
  19.             #a, #b {
  20.                 width: 100px}
  21.             #a {
  22.                 left:0px;}
  23.             #b {
  24.                 left:100px;}
  25.             #c {
  26.                 left: 200px;
  27.                 right: 0px;}
  28.             </style>
  29.         </head>
  30.         <body>
  31.             <div id="a"></div><div id="b"></div><div id="c"></div>
  32.     </body>
  33. </html>
[HTML] pobierz, plaintext
shimano
17.04.2010, 11:11:16
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?
koboos
17.04.2010, 15:51:58
Moze cos takiego:
[CSS] pobierz, plaintext 
  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>
[CSS] pobierz, plaintext
shimano
18.04.2010, 09:00:08
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.
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.