Diskusijų forumai
Diskusijų forumai     Kompiuterinė grafika, dizainas     Tinklalapių dizainas     Turinys ir sonine juosta


Turinys ir sonine juosta

elsson
Bendruomenės narys

 
Tema paskelbta: 2009-10-26 22:17:22
Koduoju savo dizainą ir niekaip nepavyksta sulygiuoti turinio ir šoninės juostos. Esmė tame, kad panaudojus float: left, fonas sumažėja. Na, viską parodysiu.

css
#content {
 background: #fff url(images/cbg.gif) repeat-x;
 width: 900px;
 padding: 10px 25px 25px 25px;
 margin: 0 auto 0 auto;
}
#irasai {
 width: 70%;
 float: left;
}
#sidebar {
 width: 30%;
 float: left;
}


html
<div id="content">

<div id="irasai">
<h2>Dizainas</h2>
<p>Tekstas</p>
<small><img src="images/data.png" alt="heh"/> Spalis 26th, 2009 <img src="images/parase.png" alt="heh"/> Elvis </small>
<h2>Dizainas</h2>
<p>Tekstas</p>
<small><img src="images/data.png" alt="heh"/> Spalis 26th, 2009 <img src="images/parase.png" alt="heh"/> Elvis </small>
</div>
<div id="sidebar">hhaha</div>

</div>
 


Atsakymai į temą

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2009-10-27 00:09:33 [#388] Atsakymo ID: 388 Ilgalaikė nuoroda į atsakymą #1
Nepamiršk visada išvalyti float reikšmių! 

<div id="content">
	<div id="irasai">
		<h2>Dizainas</h2>
		<p>Tekstas</p>
		<small><img src="images/data.png" alt="heh"/> Spalis 26th, 2009 <img src="images/parase.png" alt="heh"/> Elvis </small>
		
		<h2>Dizainas</h2>
		<p>Tekstas</p>
		<small><img src="images/data.png" alt="heh"/> Spalis 26th, 2009 <img src="images/parase.png" alt="heh"/> Elvis </small>
	</div>
	<div id="sidebar">hhaha</div>
	<div style="clear: both;"></div>
</div>

Be to, nerekomenduoju naudoti <small></small> žymių, geriau sukurk atskirą CSS klasę.

<div class="info"><img src="images/data.png" alt="heh" /> Spalis 26th, 2009</div>
elsson
Bendruomenės narys

 
Atsakymas parašytas: 2009-10-27 18:05:18 [#389] Atsakymo ID: 389 Ilgalaikė nuoroda į atsakymą #2
Ačiū!
O dėl tų žymų, tai jas pagal standartinį WP dizainą panaudojau, nes vėliau dizainą integruosiu į WP.