Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [css] wysokosc div'a
bmL
post 17.08.2007, 20:54:21
Post #1





Grupa: Zarejestrowani
Postów: 301
Pomógł: 25
Dołączył: 15.07.2007
Skąd: Olsztyn

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


Witam,
kolejne głupie pytanko z mojej strony smile.gif
Załóżmy, że mam kod html:
  1. <tr>
  2. <td></td>
  3. <td></td>
  4. <td></td>
  5. </tr>

No i teraz lewa i prawa kolumna zawiera jakieś tło nieważne jakie w zależności od zawartości środkowej kolumny one przyjmują taką samą wysokość jak ta środkowa.
Czy da się uzyskać identyczny efekt stosując kontenery?


--------------------
Tutaj miał być jakiś mądry tekst. Miał być... No ale jest głupi tekst.
Go to the top of the page
+Quote Post
Hazel
post 17.08.2007, 21:00:28
Post #2





Grupa: Zarejestrowani
Postów: 492
Pomógł: 33
Dołączył: 16.08.2007
Skąd: Wrocław

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


  1. div { height: 100px }

Ta właściwość przykładowo określa wysokość wszystkich divów na stronie na 100 pikseli.


--------------------
Go to the top of the page
+Quote Post
bmL
post 17.08.2007, 21:50:20
Post #3





Grupa: Zarejestrowani
Postów: 301
Pomógł: 25
Dołączył: 15.07.2007
Skąd: Olsztyn

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


Źle mnie zrozumiałeś. Nie mogę określić wysokości tych kontenerów i w tym tkwi problem.
Jeżeli treść środkowego kontenera przekroczy przykładowe 100px to środkowy kontener będzie miał większą wysokość niż te po bokach.
A ja nie jestem w stanie określić wysokości tego kontenera ponieważ jego treść jest generowana dynamicznie załóżmy, że znajdują się tam np newsy.
Próbowałem czegoś takiego:
  1. <div id="all">
  2. <div id="lewa" style="height: 100%"></div>
  3. <div id="srodek"></div>
  4. <div id="prawa" style="height: 100%"></div>
  5. </div>

Ale to daje efekt dopiero wtedy kiedy kreślę wysokość kontenera "all".
Znalazłem trochę inne rozwiązanie ale one wcale nie określa wysokości pobocznych divów właściwie je wyklucza.
Chociaż pytanie jest nadal aktualne jestem ciekaw czy da się jakoś wyrównać poboczne divy do wysokości środkowego?
EDIT:
Problem rozwiązany tongue.gif

index.html
  1. <div id="lewa"></div>
  2. <div id="srodek"></div>
  3. <div id="prawa"></div>

style.css
  1. #lewa, #srodek, #prawa {
  2. display: table-cell;
  3. }


EDIT (znów):
Jednak rozwiązanie to działa tylko pod FF jakieś sugestie?

Ten post edytował bmL 18.08.2007, 14:03:09


--------------------
Tutaj miał być jakiś mądry tekst. Miał być... No ale jest głupi tekst.
Go to the top of the page
+Quote Post
Kreton
post 18.08.2007, 20:16:57
Post #4





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

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


Nie wiem czy dobrze rozumiem. Chodzi ci może o Faux Columns ?
Z technicznego punktu widzenia jest to nie do uzyskania. Z graficznego punktu widzenia jest to do uzyskania.

Ten post edytował Kreton 18.08.2007, 20:17:06
Go to the top of the page
+Quote Post
bmL
post 18.08.2007, 21:19:50
Post #5





Grupa: Zarejestrowani
Postów: 301
Pomógł: 25
Dołączył: 15.07.2007
Skąd: Olsztyn

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


To rozwiązanie znalazłem już wcześniej pisząc kilka postów wyżej:
"Znalazłem trochę inne rozwiązanie ale one wcale nie określa wysokości pobocznych divów właściwie je wyklucza."
chodziło mi właśnie o to tongue.gif Szkoda, że wszystko jest tak ograniczone przez ie...

Mam jeszcze jedno pytanko odnośnie css. Mianowicie załóżmy, że mam takie coś:
  1. <div style="width: 100px; display:inline">abc</div>
  2. <div style="width: 100px; display:inline">def</div>

W IE i Opera jest wszystko ok ale w FF i Mozilli ignorowana jest szerokość kontenera...
Zrobiłem to tak, że w zależności wykrytej przeglądarki danym kontenerom przypisany jest atrybut inline albo table-cell.
Ale zastanawiam się czy jest na to jakiś inny sposób.

Ten post edytował bmL 18.08.2007, 21:20:44


--------------------
Tutaj miał być jakiś mądry tekst. Miał być... No ale jest głupi tekst.
Go to the top of the page
+Quote Post
post
post 18.08.2007, 22:19:02
Post #6





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 9.08.2007

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


Ja radze sobie z tym w inny sposob.
Tworze nowego diva (id="all") w ktorym zamykam sobie pozostale dwa (menu,content).
Wycinam przez szerokosc calej strony (tj. menu + content) 10px pasek.
Teraz divowi ALL nadaje w stylu css tlo obrazkowe (ten pasek, ktory wycialem)
do tego repeat:y;.
Go to the top of the page
+Quote Post
Predator446
post 18.08.2007, 22:57:23
Post #7





Grupa: Zarejestrowani
Postów: 63
Pomógł: 0
Dołączył: 16.04.2006

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


Z 2 divami to bez problemu Faux Columns, a gdy miałem wyrównać wysokość 3 divów to już użyłem js i chodzi...
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: 20.07.2025 - 06:24