- Mesajlar
- 1,177
Css'de kutu modeli oluşturma konusuna yoğunlaştım. Kutu modellerini sıkıntısız oluşturuyorum ama o kutuları sıralarken yerleştirirken sıkıntı yaşıyorum. 4 veya 5 tane kutuyu sıkıntısız sıraladım yerleştirdim ama fotoğraftaki gibi bir tasarımı bir türlü yapamadım. Default ve Clear kodlarının her versiyonunu bütün kutularda right left both vb. denedim ama olmadı. Ne yapmam lazım, nasıl bir yol izlemem lazım? Yardımcı olursanız sevinirim. İllallah ettirdi çünkü bu örnek 
Eklediğim fotoğraftaki örneğin Default ve Clear eklenmemiş yazdığım kodlar:
<html>
<head>
<style>
.üst
{
width:980px;
height:130px;
text-align:center;
line-height:130px;
background-color:#0099FF;
}
.solüst
{
width:250px;
height:200px;
text-align:center;
line-height:200px;
background-color:#CCFF66;
}
.solalt
{
width:250px;
height:200px;
text-align:center;
line-height:200px;
background-color:#00FF00;
}
.orta
{
width:480px;
height:400px
text-align:center;
line-height:400px;
background-color:#FF3333;
}
.alt
{
height:50px;
text-align:center;
line-height:50px;
background-color:#00FF99;
}
.sağüst
{
width:250px;
height:200px;
text-align:center;
line-height:200px;
background-color:#CCFF66;
}
.sağorta
{
height:100px;
text-align:center;
line-height:100px;
background-color:#00FF00;
}
.sağalt
{
height:100px;
text-align:center;
line-height:100px;
background-color:#66FF99;
}
</style>
</head>
<body>
<div class="üst">ÜST</div>
<div class="solüst">SOL ÜST</div>
<div class="orta">ORTA</div>
<div class="solalt">SOL ALT</div>
<div class="alt">ALT</div>
<div class="sağüst">SAĞ ÜST</div>
<div class="sağorta">SAĞ ORTA</div>
<div class="sağalt">SAĞ ALT</div>
</body>
</html>
Eklediğim fotoğraftaki örneğin Default ve Clear eklenmemiş yazdığım kodlar:
<html>
<head>
<style>
.üst
{
width:980px;
height:130px;
text-align:center;
line-height:130px;
background-color:#0099FF;
}
.solüst
{
width:250px;
height:200px;
text-align:center;
line-height:200px;
background-color:#CCFF66;
}
.solalt
{
width:250px;
height:200px;
text-align:center;
line-height:200px;
background-color:#00FF00;
}
.orta
{
width:480px;
height:400px
text-align:center;
line-height:400px;
background-color:#FF3333;
}
.alt
{
height:50px;
text-align:center;
line-height:50px;
background-color:#00FF99;
}
.sağüst
{
width:250px;
height:200px;
text-align:center;
line-height:200px;
background-color:#CCFF66;
}
.sağorta
{
height:100px;
text-align:center;
line-height:100px;
background-color:#00FF00;
}
.sağalt
{
height:100px;
text-align:center;
line-height:100px;
background-color:#66FF99;
}
</style>
</head>
<body>
<div class="üst">ÜST</div>
<div class="solüst">SOL ÜST</div>
<div class="orta">ORTA</div>
<div class="solalt">SOL ALT</div>
<div class="alt">ALT</div>
<div class="sağüst">SAĞ ÜST</div>
<div class="sağorta">SAĞ ORTA</div>
<div class="sağalt">SAĞ ALT</div>
</body>
</html>
