Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [XHTML/CSS] 2 Divy w lini - problem
kris-ldz
post
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 6.08.2008
Skąd: Łódź

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


Witam,
piszę sobię właśnie stronke i mam problem - mianowicie mam 2 div'y w jednej linii,
chciałbym, żeby ich wysokości zmieniały się automatycznie - tj. W przypadku gdy
jeden się wydłuża, drugi robi to samo (chodzi tutaj o zachowanie tła - żeby nie znikało).


Poniżej fragment kodu XHTML i CSS:



XHTML:
CODE

<div id="main">
 
 <div id="LeftColumn" style="height: 200px">
 </div>
 
 
 <div id="MainColumn">  
 </div>
 
</div>

CSS:
CODE
/* GŁÓWNA CZĘŚĆ */

#main {

width: 770px;

position: relative;

background: #fff;

padding: 0;

margin-top: 1px;

margin-left: auto;

margin-right: auto;

vertical-align: top;

}



/* LEWA KOLUMNA */

#LeftColumn {

width: 183px;

overflow: hidden;

background: #e60000 url(../images/lc_shadow.gif) top right no-repeat;

height: 100%;

float: left;

}



/* GŁÓWNA KOLUMNA */

#MainColumn {

width: 587px;

height: 100%;

overflow: hidden;

background: #fff url(../images/main_bg.png) top repeat-x;

float: left;

}

W tym momencie, w przypadku gdy w lewej kolumnie jest tekst lub grafika na wysokość 500px,
prawa kolumna obcina się równo z tekstem który zawiera... Jak to rozwiązać?
Zazwyczaj nie mam takich problemów, ale w tym momencie mam chyba jakieś zaćmienie i czuję
się bezsilny sad.gif Proszę o pomoc.


PS. Ustawiałem display: table-cell; dla tych warstw - efekt taki jak chciałem uzyskać, poza IE...

Link do strony: http://www.reczna-chks.na14.pl

Ten post edytował kris-ldz 24.08.2008, 04:34:04


--------------------
Pozdro
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 2)
luck
post
Post #2





Grupa: Zarejestrowani
Postów: 317
Pomógł: 58
Dołączył: 6.11.2005

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


Przygotuj sobie obrazek, który będzie jakby "sklejonym" tłem obu sąsiadujących warstw. Chodzi o to, żebyś nie rozdzielał tła na 2 divy, tylko miał je całe w postaci pojedynczej grafiki. Wpakuj obie warstwy do jeszcze jednego diva (kontenera) i dla niego ustaw tło z takiego obrazka. Efekt będzie taki, że tło zawsze będzie się dostosowywać do wysokości dłuższej warstwy, co wygląda jakby oba divy powiększały się jednocześnie. Ot, kolejny trik którego trzeba używać rezygnując z tabelek na rzecz CSS winksmiley.jpg Sprawdzone, działa w każdej przeglądarce.


--------------------
Go to the top of the page
+Quote Post
kris-ldz
post
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 6.08.2008
Skąd: Łódź

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


no patrz kurcze biggrin.gif Nie wpadłem na takie rozwiązanie... Dzięki za pomoc :] 


--------------------
Pozdro
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 Aktualny czas: 22.08.2025 - 09:32