Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Środkowy div - automatyczna szerokość.
Forum PHP.pl > Forum > Przedszkole
potreb
Witam.
O ile w tabelkach była to banalna sprawa na divach mam problem.
Mam layout 3 kolumnowy, lewy,prawy: 200px; środkowy 400px, razem daje 800px

Czasami dla niektórych pluginów będę musiał wywalić prawą lub lewą kolumne albo i nawet obie. Nie wiem w jaki sposób zmusić środkowy div aby się rozciągał w przypadku braku, jakiejś kolumny.
michal_robak
zależy jaka to ma być stronka. Zawsze można się pobawić parametrami $_GET... jeżeli

if(!isset($_GET['typ'])) --> 3 kolumny i takie szerokosci jako podałeś

if($_GET['typ']==1) --> 2 kolumny lewa i srodkowa

if($_GET['typ']==2) --> 2 kolumny prawa i srodkowa

if($_GET['typ']==3) --> tylko srodkowa

no ale to wtedy w kazdym linku tam gdzie jest zmienna liczba divów musiałbyś przekazywać ten parametr wiec to troche lipa.

A nie moglbys zawrzeć tych divów do jednej tableki z szerokością 800px. i potem dla środkowego diva dać width="100%" questionmark.gif
potreb
Wrzucę kod dla jasności:

  1. <div id="wrapper">
  2.  
  3. <div id="menuleft">Jakis tekst</div>
  4. <div id="content">text text ext</div>
  5. <div id="menuright">Jakis text</div>
  6.  
  7. </div>


I css
Kod
#wrapper {
background: url('Obrazki/intranet_14.gif') top left repeat-x #fff;
display: block;
width: 1000px;
overflow: auto;
margin: 0px auto;
}

#menuleft {
width:230px;
display: block;
float: left;
background-color: transparent;
}

#content {
width: 520px;
display: block;
margin: 0;
padding: 0;
float: left;
margin: 0 3px 0 3px;
padding: 0 5px 0 5px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

#menuright {
width:230px;
display: block;
margin: 0;
padding: 0;
float: right;
text-align: center;
}


Jak widzisz te 3 divy mam w divie wrapper i nadaną stałą szerokość w px. W przypadku gdy dla content dma 100% wywali mi prawa kolumnę.
kazag
Rozumiem, że w jakiś sposób skrypt będzie musiał się dowiedzieć, że np. potrzebne są 3 kolumny, albo zbedna jest np. prawa? Jeśli tak, to wtedy skrypt ten może dodawać css inline dla divów nadając im określoną szerokość. Np jeśli wie, że ma być środkowa i prawa, to nadaje im odpowiednio 600 i 200 px? Rozwiązanie mało estetyczne, ale jest...

A czy width:auto dla środkowego nie powoduje, ze zajmuje on całą DOSTĘPNĄ mu szerokość? Wtedy np. nie mając lewej kolumny on rozciągnie się w jej miejsce?
edit: jednak nie powoduje rozciągniecia, rozciaga tylko na tyle, na ile masz tresci... więc jesli bedziesz miał jedno słowo, to brzydko to wyglada.
potreb
Na pewno będę przekazywał jakiś parametr, że jedna lub dwie kolumny będą wyłączone. Mi chodzi o sam html i css. Wywalam lewa kolumną reszta trzyma się kupy i tyle. Wywalam prawa i też ma być lux. Poszukam jeszcze coś w necie, ale jak dla mnie trochę badziewny ten system. Wiem, że min-width i max-width załatwiają sprawę, ale pod IE wywala błędy.
erix
Cytat
Na pewno będę przekazywał jakiś parametr, że jedna lub dwie kolumny będą wyłączone. Mi chodzi o sam html i css.

Może utwórz sobie klasę dla wrapper np. one, two, three i w ramach selektora dziedziczenia (#wrapper.one #kolumna) zmieniaj rozmiary? Tak bym widział to bez kombinowania. winksmiley.jpg
kazag
ale nie rozumiem - przecież jak będziesz wiedział, która kolumna ma być a która nie, to nie mozesz css inline zaaplikować?
zulus
Stwórz sobie dodatkowe 3 (brak lewej kolumny, brak prawej, brak obu) i przy użyciu PHP dodaj do kodu (znacznik może mieć więcej niż jedną klasę tongue.gif)
TAMLYN
Dla IE min-width i max-width masz expressions winksmiley.jpg Poszukaj sobie tego ;P Ew. próbowałeś z position zamiast float?
Pilsener
Obejrzyj sobie mojego bloga - masz tam 3 lub 2 kolumny rozciągające się
Cytat
Nie wiem w jaki sposób zmusić środkowy div aby się rozciągał w przypadku braku, jakiejś kolumny
- style, style i jeszcze raz style. Możesz generować style dynamicznie lub statycznie, ale ZAWSZE przypisujesz określone style określonej kategorii/podkategorii/stronie - możesz też wykorzystać dziedziczenie i kaskadowość:

1. Strona główna, 3 kolumny: glowny.css
2. Strona jakaś inna, 2 kolumny: glowny.css potem dodatkowy.css - w którym nadpisujesz style główne - w Twoim wypadku ustawienia dla div'a środkowego - myślę, że w Twojej sytuacji to będzie najprostszy sposób.
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.