CSS Float ve Clear kullanımı?

Kodla Büyü

cinefil

Süper Üye
Süper Üye
Seçkin Üye
Mesajlar
1,157
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>
 

Ekli dosyalar

  • 15581973473526636438477238715089.jpg
    15581973473526636438477238715089.jpg
    194.6 KB · Görüntüleme: 76
birinci hatan örnek için yüklediğin resim ters.
ikinci hatan div isimlerinde türkçe karakter kullanmışsın.

kutu html yapın aşağıdaki gibi olmalı. css leri sen yazarsın.

<body>

<div class="kapsayan">

<div class="ust">ÜST</div>

<div class="orta">

<div class="sol">

<div class="solust">SOL ÜST</div>

<div class="solorta">SOL ORTA</div>

<div class="solalt">SOL ALT</div>


</div> <!-- orta sol divi kapama -->

<div class="sag">SAĞ </div>

</div> <!-- orta divi kapama -->


<div class="alt">ALT</div>

</div> <!-- kapsayan divi kapama -->

</body>
 
hocam kodlarını sana zahmet olmazsa https://codepen.io/ sitesine kaydedip burada paylaşır mısın? Codepen üzerinden düzeltme yapar öyle yardımcı oluruz. Bu şekilde kodları anlamak çok zor.
 
birinci hatan örnek için yüklediğin resim ters.
ikinci hatan div isimlerinde türkçe karakter kullanmışsın.

kutu html yapın aşağıdaki gibi olmalı. css leri sen yazarsın.

<body>

<div class="kapsayan">
birinci hatan örnek için yüklediğin resim ters.
ikinci hatan div isimlerinde türkçe karakter kullanmışsın.

kutu html yapın aşağıdaki gibi olmalı. css leri sen yazarsın.

<body>

<div class="kapsayan">

<div class="ust">ÜST</div>

<div class="orta">

<div class="sol">

<div class="solust">SOL ÜST</div>

<div class="solorta">SOL ORTA</div>

<div class="solalt">SOL ALT</div>


</div> <!-- orta sol divi kapama -->

<div class="sag">SAĞ </div>

</div> <!-- orta divi kapama -->


<div class="alt">ALT</div>

</div> <!-- kapsayan divi kapama -->

</body>

<div class="ust">ÜST</div>

<div class="orta">

<div class="sol">

<div class="solust">SOL ÜST</div>

<div class="solorta">SOL ORTA</div>

<div class="solalt">SOL ALT</div>


</div> <!-- orta sol divi kapama -->

<div class="sag">SAĞ </div>

</div> <!-- orta divi kapama -->


<div class="alt">ALT</div>

</div> <!-- kapsayan divi kapama -->

</body>
evet foto ters olmuş. Telden yüklemiştim. Düzelteyim onu.
Türkçe karakter meselesinde bu zamana kadar pek bi sorun yaşamadım ama Türkçe karakter uyarın için teşekkürler.
Bu arada kodlarda ve kutu oluşturmada sıkıntı yok. Sadece kutuları float ve clear ile sıralama işlemini fotodaki gibi yapamıyorum. bunun bir mantığı veya püf noktası var mı onu sormuştum. İlginiz için teşekkürler
 
hocam kodlarını sana zahmet olmazsa https://codepen.io/ sitesine kaydedip burada paylaşır mısın? Codepen üzerinden düzeltme yapar öyle yardımcı oluruz. Bu şekilde kodları anlamak çok zor.

Kodlarda bir sıkıntı yok ama yine de dediğiniz yere yükledim. Users kısmında Cinefil diye aratın. Tek cinefil ben varım zaten.. Profilime girerseniz bir tane örnek olarak bu var. Float ve clear komutlarını fotodaki dizaynı oluşturmak için nasıl kullanmam gerektiğini nasıl bir yol izlemem gerektiğini söylerseniz sevinirim hocam. İlginiz için çok teşekkürler
 
ekteki dosya istediğiniz görüntüyü veriyor. css'i incelersiniz.
 

Ekli dosyalar

  • dene.rar
    524 bayt · Görüntüleme: 14
float kullanımı css'de en sıkıntılı konudur. Kapsayamama sorunu denilen bir sorun nedeniyle çeşitli sıkıntılar çekilir.
https://fatihhayrioglu.com/css-dersleri/adresindeki derslerin her birini mutlaka inceleyiniz. Özellikle float ifadesinin geçtiği ya da kutu modeli ile ilgili olanlara mutlaka bakınız. Ayrıca CSS uygulamalarınızda mutlara reset.css dosyası kullanınız, karşılacağınız bir çok sorunu çözeceği gibi, kontrolün sizde olmasını sağlayacaktır.
 
float kullanımı css'de en sıkıntılı konudur. Kapsayamama sorunu denilen bir sorun nedeniyle çeşitli sıkıntılar çekilir.
https://fatihhayrioglu.com/css-dersleri/adresindeki derslerin her birini mutlaka inceleyiniz. Özellikle float ifadesinin geçtiği ya da kutu modeli ile ilgili olanlara mutlaka bakınız. Ayrıca CSS uygulamalarınızda mutlara reset.css dosyası kullanınız, karşılacağınız bir çok sorunu çözeceği gibi, kontrolün sizde olmasını sağlayacaktır.
Teşekkürler Hocam sağolun
 
Geri
Üst