Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Środkowy div - automatyczna szerokość.
potreb
post
Post #1





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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


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.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 9)
michal_robak
post
Post #2





Grupa: Zarejestrowani
Postów: 115
Pomógł: 12
Dołączył: 13.05.2006

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


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%" (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
potreb
post
Post #3





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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


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ę.

Ten post edytował potreb 7.01.2009, 15:22:03
Go to the top of the page
+Quote Post
kazag
post
Post #4





Grupa: Zarejestrowani
Postów: 180
Pomógł: 12
Dołączył: 30.04.2007

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


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.

Ten post edytował kazag 7.01.2009, 16:05:40
Go to the top of the page
+Quote Post
potreb
post
Post #5





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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


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.
Go to the top of the page
+Quote Post
erix
post
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




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. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował erix 9.01.2009, 20:46:09
Go to the top of the page
+Quote Post
kazag
post
Post #7





Grupa: Zarejestrowani
Postów: 180
Pomógł: 12
Dołączył: 30.04.2007

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


ale nie rozumiem - przecież jak będziesz wiedział, która kolumna ma być a która nie, to nie mozesz css inline zaaplikować?
Go to the top of the page
+Quote Post
zulus
post
Post #8





Grupa: Zarejestrowani
Postów: 225
Pomógł: 18
Dołączył: 30.06.2003
Skąd: Wrocław

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


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ę (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) )
Go to the top of the page
+Quote Post
TAMLYN
post
Post #9





Grupa: Zarejestrowani
Postów: 49
Pomógł: 1
Dołączył: 6.01.2007
Skąd: Wrocław

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


Dla IE min-width i max-width masz expressions (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Poszukaj sobie tego ;P Ew. próbowałeś z position zamiast float?
Go to the top of the page
+Quote Post
Pilsener
post
Post #10





Grupa: Zarejestrowani
Postów: 1 590
Pomógł: 185
Dołączył: 19.04.2006
Skąd: Gdańsk

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


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.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 23.08.2025 - 06:07