Margin Sorunu
-
beyler belki çok basittir ama anlayamadım
<div id="header">
<div class="ortadiv">
İNGİLİZCE KELİME KARTI
</div>
</div>
Diyelim böle bir divimiz var
#header{
background-color:red;
width:860px;
height:800px;
}.ortadiv{
width:840px;
height:110px;
background-color:blue;
font-family:Calibri;
font-size:55px;
color:white;
margin-left:auto;
margin-right:auto;
margin-top:55px;
}verdiğimde sadece ortadivin inmesi gerekirken header divi ile beraber iniyor nedeni nedir ?
-
ne amaçla kullanacaksın bilmiyorum ama yinede istemiş olduğun şey şu şekilde sanırım;
<div id="header">
</div>
<div class="ortadiv">
İNGİLİZCE KELİME KARTI
</div>#header{
background-color:red;
width:860px;
height:800px;
}.ortadiv{
width:840px;
height:110px;
background-color:blue;
font-family:Calibri;
font-size:55px;
color:white;
margin-left:auto;
margin-right:auto;
margin-top: -763px;
margin-left: 9px;
} -
http://i.hizliresim.com/663NB3.png
hayır hocam
<div id="header">
<div class="ortadiv">
İNGİLİZCE KELİME KARTI
</div>
</div>
yaptık ya
ortadaki div ile header olan div arasında boşluk vermek istiyorum ortadiv e margin top yazıyorrum ama ikisi birde aşşağı iniyor
-
uzengil bunu yazdı
yaptık ya
ortadaki div ile header olan div arasında boşluk vermek istiyorum ortadiv e margin top yazıyorrum ama ikisi birde aşşağı iniyor
üstad onu anladım ama o şekilde yapamadığım için istediğin görüntüye erişmek için kodları değiştirdim :) sonuç olarak istediğin görüntüye ulaşılmış oldu :)
-
Yok Hocam anladım da - li olmaması iç içe olması gerek :)
http://i.hizliresim.com/1nz6nN.png
uzengil tarafından 21/Kas/14 21:31 tarihinde düzenlenmiştir -
css satırında #header bölümüne position: absolute; eklersen düzeliyor.
#header{
background-color:red;
width:860px;
height:800px;
position: absolute;
}Bu arada body margin i de 0 yaparsan görüntü daha güzel olur..
body {
margin: 0px;
} -
SerYolcu bunu yazdı
css satırında #header bölümüne position: absolute; eklersen düzeliyor.
#header{
background-color:red;
width:860px;
height:800px;
position: absolute;
}Bu arada body margin i de 0 yaparsan görüntü daha güzel olur..
body {
margin: 0px;
}Hocam daha önce böyle header içine logo içine menu onlarda bir sorun çıkmadı şimdi deniyorum yav herşey aynı ama olmuyor
-
float:left; ekle divlere veya header'a padding:bottom:50px ekle.
yalnız böyle her dive piksel vererek site çatısı oluiturmaya çalışırsan az birşey ilerleyip divler çoğalınca işler sarpa sarar, işin içinden çıkamassın. tavsiyem grid sistemi kullanan frameworkleri kullanmaya başla. bootstrap veya foundation gibi, kolay gelsin.
Arlong tarafından 21/Kas/14 21:52 tarihinde düzenlenmiştir -
bende böyle olmuştu şöyle yaptım benide deli etmişti.
önce div class ın üstüne bir div oluştur ne kadar aşağı indirmek istiyorsan o kadar height : 50 px gibi değer ver. ama divi saydam yap.
gözükmediğinden ve o divinde üstüne çıkamadığından orada kalıyor.
birde ben class tanda id kullanmayı tercih ederim çünkü class bu özelliği bütün divlerlerde kullan demektir.
yani ortadiv deki bütün css özellikleri, ortadiv olarak kullandığın diğer divleride etkler. toplu işkem yapmada kullanıyorlar.
sitenin başka bir yerinde .ortadiv varsa kontrol et derim.
absoluete özelliğide tam başa bela hiç kullanamadığım kullandığımda başıma bela olmuştur. relative genelde daha güzel.
aklıma gelmişken sayfayı başka tarayıcıdada aç bakalım.
mozilla choeme, opera..expolere demiyorum bir belada o
-
futurist bunu yazdı
bende böyle olmuştu şöyle yaptım benide deli etmişti.
önce div class ın üstüne bir div oluştur ne kadar aşağı indirmek istiyorsan o kadar height : 50 px gibi değer ver. ama divi saydam yap.
gözükmediğinden ve o divinde üstüne çıkamadığından orada kalıyor.
birde ben class tanda id kullanmayı tercih ederim çünkü class bu özelliği bütün divlerlerde kullan demektir.
yani ortadiv deki bütün css özellikleri, ortadiv olarak kullandığın diğer divleride etkler. toplu işkem yapmada kullanıyorlar.
sitenin başka bir yerinde .ortadiv varsa kontrol et derim.
absoluete özelliğide tam başa bela hiç kullanamadığım kullandığımda başıma bela olmuştur. relative genelde daha güzel.
aklıma gelmişken sayfayı başka tarayıcıdada aç bakalım.
mozilla choeme, opera..expolere demiyorum bir belada o
Hocam dediğinden gram bişi anlamadım da bütün kodlar o düzenle istersen
-
HTML
<div id="header">
<div class="ortadiv">
İNGİLİZCE KELİME KARTI
</div>
</div>
CSS
#header{
background-color:red;
width:860px;
height:800px;
}
.ortadiv{
width:840px;
height:110px;
background-color:blue;
font-family:Calibri;
font-size:55px;
color:white;
margin-left:auto;
margin-right:auto;
position: relative;
top: 55px;
}
GUS tarafından 21/Kas/14 22:47 tarihinde düzenlenmiştir