+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? (/thread-uklad-3-kolumnowy-bez-tabeli-jak-to-rozgryzc)
Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - Lucaszz - 08-05-2011
Witam serdecznie wszystkich.
Od około tygodnia morduje następujący problem:
chciałbym mieć taki oto układ strony:
|div1-----|------------------------div2,width:1000px|----div3|
div1 i div3 mają być tłem "bocznym" rozciągającym się w zależności od szerokości ekranu (szerokość div1 i div3 ma sie mieścić w zakresie od 0 do 100%-1000px/2), natomiast główny "kontener" ma mieć 1000px niezmiennie. Tło boczne ma byc koniecznie na divach, body, html sie do tego nie nada.
Wiem że można to chyba łatwo zrobić tabelką, natomiast słyszałem że tabelek do takich rzeczy sie nie używa... i dążę do tego by to zrobić jednak bez tabelek (a może dla świętego spokoju zrobić to na tabelkach?)
Udało mi sie uzyskać przestawiony efekt za pomocą polecenia display:table-cell;
Niestety nie działa na IE niektórych i na google chrome, wiec odpada.
Ma ktoś jakiś pomysł?
RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - Ancik - 08-05-2011
Na tabelach nie.
Na divach tak.
Div#1 i div#2 float left, margin-left i right: 0px, dla diva po prawej tak samo. Dla tego po środku tak samo float:left i określona szerokość
RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - hieroshima - 08-05-2011
a jak chcesz, żeby kolumny miały taką samą wysokość, albo dopasowywały się do wysokości środkowej to albo robisz kolumne srodkową jako div a kolumna lewa i prawa to border tej środkowej
albo dajesz każdej kolumnie margin-bottom: -4000px; padding-bottom: 4000px; i całemu divowi, ktory ma te 3 kolumny w sobie dajesz overflow: hidden;
RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - Lucaszz - 08-05-2011
Dziękuje za odpowiedzi niestety nie pomogły :/
Oto moj css:
Cytat:body{
text-align:center;
}
/* Div nr 1 */
.d1{
background-color:red;
float:left;
margin-left:0px;
margin-right:0px;
}
/* Div nr 2 */
.d1.d2{
background-color:blue;
width:1000px;
}
/* Div nr 3 */
.d1.d3{
}
Efekt działania można zobaczyć tu: http://lkonigtemp.ugu.pl/testy/
Niestety, całość nie rozciąga sie do szerokości ekranu
Div1 i Div3 mają stałą minimalną szerokość,a w moim zamierzeniu powinny mieć taką szerokość by dopasować sie do szerokości ekranu.
Próbowałem z width:auto i z floatami, nie pomogło....
RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - hieroshima - 08-05-2011
podeślij jeszcze html
RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - Lucaszz - 08-05-2011
Cytat:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<link rel="Stylesheet" type="text/css" href="styl.css" />
</head>
<body>
<div class="d1">Div1</div>
<div class="d1 d2">Div2</div>
<div class="d1 d3">Div3</div>
</body>
</html>
RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - hieroshima - 08-05-2011
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<link rel="Stylesheet" type="text/css" href="styl.css" />
</head>
<body>
<div class="d1">Div1</div>
<div class="d2">Div2</div>
<div class="d3">Div3</div>
</body>
</html>poprawiony css: są 2 wyjścia albo takie jak tu dałem, albo dasz body width: 100%, tej środkowej dasz 90% a prawej i lewej po 5%. A jak chcesz zeby środek miał zawsze 1000px to tak jak ja mam:
Kod:
body{
text-align:center;
width:1100px;
}
/* Div nr 1 */
.d1, .d3{
background-color:red;
float:left;
width: 5%;
}
/* Div nr 2 */
.d2{
background-color:blue;
float: left;
width: 90%; /* 90% = 1000px */
}Jedyne sensowne zastosowanie czegoś takiego, że środek ma stałą szerokość to strona wyśrodkowana, jak chcesz zająć cały ekran % to wszystko musi być w procentach
Wpisz tam więcej treści to zobaczysz ze się będzie w bok rozciągać. Jak dasz tam tło to przecież to będzie miało dwój rozmiar, a potem możesz zrobić powielanie w bok nie musisz ustalać szerokości tego. tzn. ustaw szerokość min-width i taką jaką będzie mial obrazek i powielanie w bok i bedzie ok mysle
RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - Lucaszz - 08-05-2011
Ok to niestety dalej nie to:/
Ok chyba nie da sie tego zrobić na divach :/
Pozostaje mi chyba tylko taka oto tabela:
Cytat:<table style="width:100%;background-color:red;" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- Div1 -->
<td></td>
<td style="width:1000px;background-color:blue;">Div2</td>
<!-- Div3 -->
<td></td>
</tr>
</table>
(Wkleiłem te tabelkę żeby było lepiej widać jaki efekt chciałem uzyskać na divach)
RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - hieroshima - 08-05-2011
aaa to wystarczy tak
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<link rel="Stylesheet" type="text/css" href="styl.css" />
</head>
<body>
<div id="d1"><div id="d2">sdasd adasd adads ads</div></div>
</body>
</html>css:
Kod:
/* Div nr 1 */
#d1{
background-color:red;
width: 100%;
}
/* Div nr 2 */
#d2{
background-color:blue;
width: 1000px;
margin: 0px auto;
}RE: Układ 3 kolumnowy bez tabeli, jak to rozgryźć? - Kartofelek - 09-05-2011
http://www.wickham43.net/threecolumnsfixedmiddle7.html