Forum'da ara:
Ara


Yazar Mesaj
Mesaj10.05.2012, 20:02 (UTC)    
Mesaj konusu: kodlama

arkadaşlar allah için yardım edin ya kafayı yicem

div ile tasarım yapmaya çalışıyorum.

kodlarım ve sorunumu anlatan resim aşagıda.

Tasarım üstü
Kod:
<div id="govde">
<div id="sol">1.</div>
<div id="orta">2.</div>
<div id="sag">3.</div>
</div>
</div>
</div>
</div>



Css
Kod:
#govde {
   
   height: 100%;
   width: 100%;
        border: solid 1px red;
       
}



#sol {
   
   height: 332px;
   width: 30px;
        float: left;
        border: solid 1px orange;
        background-image: url(http://img513.imageshack.us/img513/3963/54706963.jpg); 
}



#orta {
   
   height: 332px;
   width: 100px;
        border: solid 1px blue;
        background-image: url(http://img341.imageshack.us/img341/5268/80164156.jpg); 
}



#sag {
   
   height: 332px;
   width: 161px;
        float: right;
        border: solid 1px green;
        background-image: url(http://img205.imageshack.us/img205/8776/97064110.jpg); 
}






Şimdi birde yazılı olarak anlatıyorum

4 katman oluşyurdum
Birincisi ''govde'' kırmızı kenar çizgili
İkincisi ''sol'' turuncu kenar çizgili
Üçüncüsü ''orta'' mavi kenar çizgili
Dördüncüsü ''sag'' yeşil kenar çizgili

Ben ''sol'' , ''orta'' ve ''sag'' katmanlarını ''govde'' div inin içine almak istiyorum yanlız ''sag'' katmanı resimdede görüldügü gibi dışarda kalıyor bunun sebebi ne ?


Kodlamadan anlayan zaten resme baktıgında ne demek istedigimi anlar. Şimdide yardım etmeye çalışan herkese tşkler.
Mesaj11.05.2012, 11:12 (UTC)    
Mesaj konusu:

ortadaki dive ve sağdaki dive de float left vermelisin..
float left komutu bir sonraki divin bu divin soluna yerleşeceğini gösteriyor, bu divi sola yerleştir anlamında değil.. Wink yani:
Kod:
#govde {
   
   height: 100%;
   width: 100%;
        border: solid 1px red;
       
}



#sol {
   
   height: 332px;
   width: 30px;
        float: left;
        border: solid 1px orange;
        background-image: url(http://img513.imageshack.us/img513/3963/54706963.jpg); 
}



#orta {
   
   height: 332px;
   width: 100px;
   float:left;
        border: solid 1px blue;
        background-image: url(http://img341.imageshack.us/img341/5268/80164156.jpg); 
}



#sag {
   
   height: 332px;
   width: 161px;
        float: left;
        border: solid 1px green;
        background-image: url(http://img205.imageshack.us/img205/8776/97064110.jpg); 
}


ayrıca divleride ikişer kere kapatmışın her div için bir <div> birde </div> kullanmalısın.. Wink
Kod:
<div id="govde">
<div id="sol">1.</div>
<div id="orta">2.</div>
<div id="sag">3.</div>
</div>

______________
facebook.com/emre.sazak.50twitter.com/metalistan
Mesaj11.05.2012, 14:52 (UTC)    
Mesaj konusu:

hocam ben yapmak istedigimi şöyle anlatim. Senin dedigin gibide yaptım ama asıl yapmak istedigim bu degil.


Şimdi

resimde 1 yazan divi yani ''sol'' divini sayfanın soluna dayamak istiyorum.

resimde 3 yazan divi yani ''sag'' divini sayfanın sağına dayamak istiyorum.

ortada kalan boşluguda resimde 2 yazan yani ''orta'' divin 100% degerle doldurmasını istiyorum

1 ve 3 divleri istedigim gibi saga sola dayıyorum ancak 3 e 100% deger verdigim zaman bozuluyor. 100% deger vermesemde bu sefer resim bütün gibi durmuyor

örnek




Kodlar


Css

Kod:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

#govde {
   
   height: 100%;
   width: 100%;
       
       
}



#sol {
   
   height: 332px;
   width: 30px;
        float: left;
       
        background-image: url(http://img513.imageshack.us/img513/3963/54706963.jpg);
}



#orta {
   
   height: 332px;
   width: 500px;
   float:left;
       
        background-image: url(http://img341.imageshack.us/img341/5268/80164156.jpg);
}



#sag {
   
   height: 332px;
   width: 161px;
        float: right;
       
        background-image: url(http://img205.imageshack.us/img205/8776/97064110.jpg);
}



T.üstü

Kod:
<div id="govde">
<div id="sol">1.</div>
<div id="orta">2.</div>
<div id="sag">3.</div>
</div>
Mesaj12.05.2012, 05:11 (UTC)    
Mesaj konusu:

güncel
Mesaj12.05.2012, 06:59 (UTC)    
Mesaj konusu:

1 kutu
position:absolute;left:20px;top100px;}
2 kutu ıcın left degerin 20 artı 1 kutu en olarak gir
Mesaj12.05.2012, 10:01 (UTC)    
Mesaj konusu:

sanırım aradığın şu:
Kod:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

#govde {
   
   height: 100%;
   width: 100%;
       
       
}



#sol {
   
   height: 332px;
   width: 30px;
        float: left;
       
        background-image: url(http://img513.imageshack.us/img513/3963/54706963.jpg);
}


#o1 {
position:absolute;
left:30px;
right:161px;
}

#orta {
   
   height: 332px;
   width: 100%;
   float:left;
       
        background-image: url(http://img341.imageshack.us/img341/5268/80164156.jpg);
}



#sag {
   
   height: 332px;
   width: 161px;
        float: right;
       
        background-image: url(http://img205.imageshack.us/img205/8776/97064110.jpg);
}
Kod:
<div id="govde">
<div id="sol">1.</div>
<div id="o1"><div id="orta">2.</div></div>
<div id="sag">3.</div>
</div>

______________
facebook.com/emre.sazak.50twitter.com/metalistan
Mesaj12.05.2012, 12:43 (UTC)    
Mesaj konusu:

emresazak beni anlamışsın verdigin kod işime yaradı tamda bunu yapmak istiyordum çok saol yanlız küçük bi sorun daha var Smile
biliyorsun ''orta'' div içerik bölümü. ve içerik yazısının genişligi div in genişligine gelince satır atlamıyoru divin dışına taşıyor Smile

Görüntü:

Mesaj12.05.2012, 13:58 (UTC)    
Mesaj konusu:

Kod:
word-wrap: break-word;

______________
facebook.com/emre.sazak.50twitter.com/metalistan
Mesaj13.05.2012, 06:31 (UTC)    
Mesaj konusu:

tşk emresazak. sorunum çözülmüştür konu kilit olabilir.
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu