Forum PHP.pl > [CSS]divy inline

Pomoc - Szukaj - Użytkownicy - Kalendarz

emia

23.06.2008, 10:21:13

Tym razem mam jednak strone w divach a obrazki w background-images w divach,jednak przy koncepcji wyświetlenia 3 kolumn pionowych obok siebie z: menu lewe,text,menu prawe i określeniu szerokosci tekstu-obniża mi się div z kolumną z menu prawym o jeden wiersz mimo że są ustawione display:inline. Co gorsza, w chwili wprowadzenia paddingów do prawego i lewego menu obie kolumny rozszerzają się o wartosć paddinga(!) zasłaniając tym samym część tekstu. Oto czesc kodu:

Kod

div#srodek {
          width: 750px;
          height: 400px;
          padding: 0;
          display: block;
          overflow: hidden;
}         div#text {
              width: 434px;
              height: 400px;
              padding: 20px 10px;
              background-color: #fff;
              display: inline;
}         div#menu_left {
              width: 151px;
              height: 400px;
              float: left;
              background-color: #da1d33;
              color: #fff;
              display: inline;
}         div#menu_right {
              width: 165px;
               height: 400px;
              float: right;
              background-color: #da1d33;
              color: #fff;
              display: inline;
}

(Wiem że ogólnie kod mozna by ciut skrócić, jednak w poszukiwaniu rozwiązań wyżej wymienionych problemów ewaluował on do bardzo długiej wersji.) Dodam ze problem znika w chwili usunięcia diva z polem tekstowym, ale nie o to mi chodzi... Więc już nie wiem...

JoShiMa

23.06.2008, 11:11:12

Cytat(emia @ 23.06.2008, 09:21:13 )

Co gorsza, w chwili wprowadzenia paddingów do prawego i lewego menu obie kolumny rozszerzają się o wartosć paddinga(!) zasłaniając tym samym część tekstu.

Niestety to przypadłość niektórych przeglądarek. Zamiast dawać paddingi divom dawaj margin elementom w środku. Co do obniżania diva dobrze by było zobaczyć jeszcze kod html. Aha. Wszystkim trzem kolumnom daj float left, display: inline; powinien już nie być wtedy potrzebny.

Pilsener

23.06.2008, 11:33:07

Zamiast diva środek użyj body. Ja mam tak:

Kod

#tresc{
text-align: justify;
margin: 5px 0 5px 0;
width: auto;
padding: 3px;
height: 100%;
}
#lewa{
margin: 5px 5px 5px 0;
width: 150px;
padding: 3px;
float: left;
font-size: 90%;
}
#prawa{
margin: 5px 0 5px 5px;
width: 150px;
float: right;
padding: 3px;
font-size: 90%;
}

- a w HTML:

[HTML] pobierz, plaintext 
<div id="prawa">{TRESC_P}</div>
<div id="lewa">{TRESC_L}</div>
<div id="tresc">{TRESC}</div>
[HTML] pobierz, plaintext

- i działa bez problemu. Tylko exploder sprawiał drobne problemy, jednak height 100% nauczyło go pokory

bmL

23.06.2008, 11:41:38

Cytat(emia @ 23.06.2008, 11:21:13 )

Co gorsza, w chwili wprowadzenia paddingów do prawego i lewego menu obie kolumny rozszerzają się o wartosć paddinga(!) zasłaniając tym samym część tekstu.

co do tego może to pomoże: http://forum.php.pl/index.php?showtopic=76743&hl=diva

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.