Подреждане на колони ?

confiscate

Registered
Здравейте ,

Може ли да ми кажете начина по който си подреждам колоните е правилен ?

HTML:
<div id="mainCol">
<div class="firstCol">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="secondCol">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="thirdCol">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

[css]#mainCol {width:1000px; height:100%; overflow:hidden;}
.firstCol {width:300px; margin-right:45px; float:left; border:1px solid #ccc;}
.secondCol {width:300px; float:left; border:1px solid #ccc;}
.thirdCol {width:300px; float:right; border: 1px solid #ccc;}[/css]

Благодаря предварително :)
 
Дай им и на трите float left, а на последната clear both, или си сложи един елемент след нея, с clear:both и си готов :)

Можеш и да им увеличиш малко width-a защото в момента 3те са 900 пх а главния ти е 1000 и ще имаш 100 пх от дясно и ще изглежда леко на криво. Увеличавайки с 30 пх ще се центрират и 3те в главия див. Ако пък не искаш да ги правиш по - широки дай им margin-left 30пх и пак ще се центрират
 
Щом и трите имат еднакъв стил, използвай еднакъв class. Така ще намалиш излишния код и няма да се повтаряш многократно. Трябва да мислиш гъвкаво и да знаеш кога можеш да комбинираш нещата. CSS можеш да го направиш така:

[css]
#mainCol {width:1000px; height:100%; overflow:hidden;}
.column {width:300px; float:left; border:1px solid #ccc;}
.firstCol {margin-right:45px;}
}
[/css]

HTML кода в този случай трябва да бъде така:

HTML:
<div id="mainCol">
<div class="column firstCol">Съдържание</div>
<div class="column">Съдържание</div>
<div class="column">Съдържание</div>
</div>

Ако си заинтересован, имам урок, в който подробно съм описал как се кодира 2-колонен сайт с фиксирани размери. Принципа е един и същ. Можеш да вземея някоя идея. Успех!
 

Back
Горе