Zaloguj się

Lucaszz · 08-05-2011, 18:58

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ł?

Ancik · (Ten post był ostatnio modyfikowany: 08-05-2011, 20:03 przez Ancik.)

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ść Smile

hieroshima · 08-05-2011, 20:10

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 Wink

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;

Lucaszz · 08-05-2011, 23:00

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 Sad

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

hieroshima · 08-05-2011, 23:15

podeślij jeszcze html

Lucaszz · 08-05-2011, 23:16

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>

hieroshima · (Ten post był ostatnio modyfikowany: 08-05-2011, 23:40 przez hieroshima.)

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

Lucaszz · (Ten post był ostatnio modyfikowany: 08-05-2011, 23:54 przez Lucaszz.)

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>

<td></td>

<td style="width:1000px;background-color:blue;">Div2</td>


<td></td>
</tr>
</table>

(Wkleiłem te tabelkę żeby było lepiej widać jaki efekt chciałem uzyskać na divach)

hieroshima · (Ten post był ostatnio modyfikowany: 09-05-2011, 00:01 przez hieroshima.)

aaa to wystarczy tak Smile

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;

}

**Kartofelek** · 09-05-2011, 00:48

http://www.wickham43.net/threecolumnsfixedmiddle7.html

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie