+- 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: [css] problem z grafiką w divach i layoutem (/thread-css-problem-z-grafika-w-divach-i-layoutem)
[css] problem z grafiką w divach i layoutem - ukaef - 14-03-2008
RE: [css] problem z grafiką w divach i layoutem - ppawel4 - 14-03-2008
Mógłbyś to jakoś bardziej wyjaśnić i pokazać ten kod?
Jeżeli chcesz umieścić 3 divy obok siebie to spróbój tak
Kod:
<div id="paka">
<div id="left'></div>
<div id="right"></div>
<div id="center"><div/>
</div>A w css daj
Kod:
#paka { width: 900px;}
#left { width: 200px;
float: left; }
#right {width: 200px;
float: right; }
#center { width: 500px;
float: left; }Oczywiście szerokość ustawiasz według potrzeb.
RE: [css] problem z grafiką w divach i layoutem - ukaef - 15-03-2008
ppawel4 napisał(a):Mógłbyś to jakoś bardziej wyjaśnić i pokazać ten kod?
Jeżeli chcesz umieścić 3 divy obok siebie to spróbój tak
Kod:<div id="paka">
<div id="left'></div>
<div id="right"></div>
<div id="center"><div/>
</div>
A w css daj
Kod:#paka { width: 900px;}
#left { width: 200px;
float: left; }
#right {width: 200px;
float: right; }
#center { width: 500px;
float: left; }
Oczywiście szerokość ustawiasz według potrzeb.
Kod:
body {
font: 12px Arial, Helvetica;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-image:url(dol_bgd.jpg);
background-position: bottom;
background-repeat:repeat-x;
}
#calosc {
width: 1018px;
background: #1D1D1D;
margin: 0 auto;
border: none;
text-align: left;
background-image:url(dol_bgd.jpg);
background-position: bottom;
background-repeat:repeat-x;
}
#pudelko {
width: 918px;
background: #1D1D1D;
margin: 0 auto;
border: none;
text-align: left;
}
#gora {
width: 918px;
height: 78px;
background: #999999;
margin: 0 auto;
border: none;
background-image:url(gora.jpg);
}
#menu {
width: 918px;
height: 211px;
background: #999999;
margin: 0 auto;
border: none;
background-image:url(menu.jpg);
}
#handler {
width: 918px;
height: auto;
background: #1D1D1D;
margin: 0;
border: none;
clear: none;
display: block;
}
#left {
width: 261px;
height:auto;
background: #1D1D1D;
margin: 0;
margin-left: 0px;
border: none;
float: left; /*display: inline;
clear: none;*/
padding-left: 20px;
}
#kontent {
height:auto;
width: 594px;
background: #1D1D1D;
margin: 0;
margin-bottom: 20px;
padding-left: 20px;
border: none;
float: left;
display: block;
/*clear: none;*/
}
#stopka {
width: 918px;
height: 203px;
background: #999999;
background-image:url(stopka.jpg);
/*position: absolute;
bottom: 0px; */
clear: both;
display: block;
}
#gora_lewo {
width: auto;
height: 285px;
padding: 0;
margin: 0;
background: #FFFFFF;
background-image:url(gora_bgd.jpg);
/*position: absolute;
bottom: 0px; */
clear: both;
float: left;
display: inline;
}
#gora_prawo {
width: auto;
height: 285px;
padding: 0;
margin: 0;
background: #FFFFFF;
background-image:url(gora_bgd.jpg);
/*position: absolute;
bottom: 0px; */
clear: none;
float: right;
display: inline;
}
Kod:
<body>
<div id="calosc">
<div id="gora_lewo">
<img src="gora_l.jpg" />
</div>
<div id="gora_prawo">
<img src="gora_p.jpg" />
</div>
<div id="pudelko">
<div id="gora"></div>
<div id="menu"></div>
<div id="handler">
<div id="left">
<img src="m_dolacz.jpg" />
<img src="m_nprod.jpg" />
</div>
<div id="kontent">
<img src="k_aktual.jpg" />
<img src="n_nowew.jpg" style="margin-left:25px; margin-right:auto" />
<img src="k_licencja.jpg" />
</div>
</div>
<div id="stopka">
</div>
</div>
</div>
</body>jest zrobione mniej więcej tak jak mówisz i IE przesuwa "pojemnik" poniżej tych dwóch boków...
RE: [css] problem z grafiką w divach i layoutem - Marcin - 15-03-2008
Spakuj całość z obrazkami w zipa i wrzuć jako załącznik w odpowiedzi, bo bez grafiki ciężko zobaczyć ten błąd.
RE: [css] problem z grafiką w divach i layoutem - ppawel4 - 16-03-2008
Dla "pudelko" daj jeszcze
Kod:
float: right;a dla tych po bokach ustal szerokosć zamiast auto tak aby suma wszystkich trzech szerokości była równa szerokosci "calosc"