[Çözüldü] HTML'de center Etiketinin Etki Alanını Kısıtlamak

[Timur]

Bir div'in ekranın ortasında görünmesi için center etiketini kullandım. sonrasında içerisindeki <hr /> elementinin sola hizalanmasını istiyorum fakat div'in içerisinde ortaya hizalanmış bir biçimde duruyor. Bunu nasıl düzeltebilirim?

[raskolnikov]

Bu şekilde pek anlaşılmıyor. Yazdığınız kodları burada paylaşabilirseniz daha iyi yardımcı olabilirim. Ama yine de tavsiye div veya herhangi bir şey kullanırken class ya da id vermeniz. Bu şekilde css dosyasından daha kolay düzenleme yapabilirsiniz.

[alquirel]

Öncelikle, <center> etiketini kullanmayın. Çünkü;

The <center> tag is supported in all major browsers. However, it is deprecated and should be avoided!

Şimdilik tarayıcılar hâlâ desteklese de, ilerde bu desteği sunmak zorunda olmadıklarından bırakabilirler.
Onun yerine CSS biçimi olan "text-align:center" özelliğini kullanın.

Sorunuzun cevabına gelince, <hr> etiketini koyacağınız zaman, <div> etiketini kapatıp <hr> etiketini koyup sonra ayrı bir <div> etiketi açın. İki div için de bir CSS class özelliği tanımlarsanız biçimini ayrı ayrı yazmak zorunda kalmazsınız.

[Timur]

Öncelikle, <center> etiketini kullanmayın. Çünkü;

The <center> tag is supported in all major browsers. However, it is deprecated and should be avoided!

Şimdilik tarayıcılar hâlâ desteklese de, ilerde bu desteği sunmak zorunda olmadıklarından bırakabilirler.
Onun yerine CSS biçimi olan "text-align:center" özelliğini kullanın.

Sorunuzun cevabına gelince, <hr> etiketini koyacağınız zaman, <div> etiketini kapatıp <hr> etiketini koyup sonra ayrı bir <div> etiketi açın. İki div için de bir CSS class özelliği tanımlarsanız biçimini ayrı ayrı yazmak zorunda kalmazsınız.

Tam olarak ne demek istediğini anlamadım hocam. ama iki ayrı div olursa resimdeki gibi bir görüntü sağlayamam sanırım. bir de ben div'in ekranın ortasında olmasını istiyorum, ama içindeki yazıları sola doğru hizalamak istiyorum.

http://www.seyvet.com/foto/39104/


Mesaj tekrarı yüzünden mesajınız birleştirildi. Bu mesajın gönderim tarihi : 11 Mayıs 2012 - 17:35:35

Bu şekilde pek anlaşılmıyor. Yazdığınız kodları burada paylaşabilirseniz daha iyi yardımcı olabilirim. Ama yine de tavsiye div veya herhangi bir şey kullanırken class ya da id vermeniz. Bu şekilde css dosyasından daha kolay düzenleme yapabilirsiniz.

özetle resimdeki gibi bir görüntüye sahip olan div elementini (gri ve yuvarlak köşeli alan) nasıl oluşturacağımı soruyorum hocam.
div ekranın ortasında olacak ama içindeki elementleri nasıl hizalayacağıma ben karar vermek istiyorum

http://www.seyvet.com/foto/39104/

[raskolnikov]

Eğer kullandığınız div'in üzerinde başka bir div varsa, ona align=center dedikten sonra içerdeki div'e align=left diyerek halledebilirsiniz.

Daha basit bir yöntem olarak,

Kod Seç Genişlet

<hr style="margin-left:-15px" /> olarak yapabilirsiniz ama bu yöntem her tarayıcıda farklı gözükebilir.

Benim tavsiyem sayfayı ilk olarak oluştururken bir body oluşturmanız ve bu body'e margin:0 auto; yazarak varsayılan olarak bütün elementleri ortaya alırsınız ve daha sonra istediğiniz olursa sol veya ağ tarafa yaslarsınız.
Örnek Kullanım Css için:

Kod Seç Genişlet

body {
background:repeat top center #f6f6f6;
margin:0px;
font-family: Verdana, Geneva, Verdana, sans-serif;
font-size: 12px;
color: #4f4f4f;
}

Biraz karışık oldu galiba

[Timur]

hocam kodun son hali bu ama bu seferde ortada olmasını istediğim alanı solda gösteriyor.

Kod Seç Genişlet


            <div id="cover">
                <div id="recoveryField" >
                <br />
                    <p id="p1" >Parolanızı Yenileyin</p>
                    <hr id="hrLine" />
                    <p id="p1">E-Mail Adresinizi Girin</p>
                    <div id="div1">
                        <input id="Text3" type="text" />&nbsp;&nbsp;&nbsp; <input id="Button2" type="button"
                            value="button" /></div>
                </div>
            </div>


stiller de şöyle:

Kod Seç Genişlet



       
        #cover
        {
            align : center;
        }
       
        #recoveryField
        {
            align : center;
            border-radius: 15px;
            background-color: Silver;
            width: 500px;
            height: 300px;
        }

        #p1{ text-align:left; margin: 20px; margin-top:20px; }
       
        #hrLine{  width: 80%; }
       
        #Button2
        {
            width: 110px;
            height: 30px;
        }
       
        #Text3
        {
            width: 190px;
        }


[alquirel]

Aynı ID değerini birden fazla eleman için kullanmayın. Tarayıcılar sonucu doğru verse de doğru kullanım değildir.
Bir CSS biçimini birden fazla eleman için kullanacaksanız class özelliği olarak tanımlayın o biçimi.

Herhangi bir elemanın (genelde div elemanının) bir kapsayıcı içerisindeyken "margin" biçimini "auto" olarak ayarlarsanız, o eleman kapsayıcısı içerisinde en ortaya yerleşecektir.

Yani; body elemanının içerisine yerleştireceğiniz ilk div (sizdeki #cover) için bir genişlik belirleyin. Mesela 500px. Daha sonra "margin:auto" dediğinizde  o div elemanı sayfanın ortasına yerleşmiş olur. Ayrıca "center" kullanmanıza gerek kalmaz.

Çizgi elemanı için de, dediğim gibi, kapsayıcısının dışına taşırmaya uğraşmak yerine iki ayrı div elemanının arasına yerleştirin.
Veya, burada #p1 için border-bottom kullanabilirsiniz. hr olması şart değil yani

[Timur]

Aynı ID değerini birden fazla eleman için kullanmayın. Tarayıcılar sonucu doğru verse de doğru kullanım değildir.
Bir CSS biçimini birden fazla eleman için kullanacaksanız class özelliği olarak tanımlayın o biçimi.

Herhangi bir elemanın (genelde div elemanının) bir kapsayıcı içerisindeyken "margin" biçimini "auto" olarak ayarlarsanız, o eleman kapsayıcısı içerisinde en ortaya yerleşecektir.

Yani; body elemanının içerisine yerleştireceğiniz ilk div (sizdeki #cover) için bir genişlik belirleyin. Mesela 500px. Daha sonra "margin:auto" dediğinizde  o div elemanı sayfanın ortasına yerleşmiş olur. Ayrıca "center" kullanmanıza gerek kalmaz.

Çizgi elemanı için de, dediğim gibi, kapsayıcısının dışına taşırmaya uğraşmak yerine iki ayrı div elemanının arasına yerleştirin.
Veya, burada #p1 için border-bottom kullanabilirsiniz. hr olması şart değil yani

Tamamdır hocam, sorun çözüldü. teşekkürler 


Mesaj tekrarı yüzünden mesajınız birleştirildi. Bu mesajın gönderim tarihi : 12 Mayıs 2012 - 11:58:15

Eğer kullandığınız div'in üzerinde başka bir div varsa, ona align=center dedikten sonra içerdeki div'e align=left diyerek halledebilirsiniz.

Daha basit bir yöntem olarak,

Kod Seç Genişlet

<hr style="margin-left:-15px" /> olarak yapabilirsiniz ama bu yöntem her tarayıcıda farklı gözükebilir.

Benim tavsiyem sayfayı ilk olarak oluştururken bir body oluşturmanız ve bu body'e margin:0 auto; yazarak varsayılan olarak bütün elementleri ortaya alırsınız ve daha sonra istediğiniz olursa sol veya ağ tarafa yaslarsınız.
Örnek Kullanım Css için:

Kod Seç Genişlet

body {
background:repeat top center #f6f6f6;
margin:0px;
font-family: Verdana, Geneva, Verdana, sans-serif;
font-size: 12px;
color: #4f4f4f;
}

Biraz karışık oldu galiba

Yok hocam anladım ne demek istediğini, sorunu da çözdüm. Aslında senin mantığında güzel.

Kod Seç Genişlet

margin: auto
sorunu çözdü