Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Autorozciąganie DIV'a
shimano
post
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
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
display: table-cell?
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #3





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




 
[CSS] pobierz, plaintext 
  1. width: auto;
[CSS] pobierz, plaintext

lub:
[CSS] pobierz, plaintext 
  1. width: 100%;
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
shimano
post
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
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?

[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ć (IMG:style_emoticons/default/winksmiley.jpg) ).

Poza tym, z table-cell problem ma chyba tylko IE6; w IE7 - z tego co pamiętam - jest już ok.
Go to the top of the page
+Quote Post
shimano
post
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 ) *
[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.
Go to the top of the page
+Quote Post
zegarek84
post
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...:
[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


Ten post edytował zegarek84 17.04.2010, 10:11:22
Go to the top of the page
+Quote Post
shimano
post
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
Post #9





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

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

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
Go to the top of the page
+Quote Post
shimano
post
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
« Następny starszy · Po stronie przeglądarki · 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: 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: 22.08.2025 - 23:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn