CSS ile site ile browser arasındaki boşluğu gidermek

Site ile browser arasındaki mesafeyi yok etmek.

Bu derste sizlere siteyi en üstte aralık olmadan tasarlamanıza yarayan kodu vereceğim arkadaşlar. Çok basit olmasına ramen şahçen çoğu zaman unutuyorum bu kodu. Sizlerle paylaşayim dedim.


<html>

<head>Çalışma</head>

<body id="body">



<div id="menur">Menü</div>



</body>

</html>



Margin değerini vermediğimiz zaman bu şekilde yukarıda boşluk olacaktır.



Bu şekilde bir htmlimiz olsun diyelim. Bunun menu değerini istediğiniz gibi veriyorsunuz. Tarayıcı ile arasında boşlık bırakmaması için de "body" id'sine aşağıdaki margin değerlerini veriyorsunuz. Bu kadar basit.


#body {

    margin-top: 0px;

    margin-bottom: 0px;

    margin-left: 0px;

    margin-right: 0px;

}

#menu {

    height: auto;

    width: 1024px;

    background-color: #333;

    color: #FFF;

    text-align: center;

}



Margin değerlerini girdikten sonra da bu şekilde sıfırlanacaktır. Aynı şekilde 0 px yerine isteğiniz doğrultusunda farklı değerler de girebilirsiniz.



Kolay gelsin.
  • Etiketler;
Eray Karayel
Bilgileri en kısa sürede eklenecektir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Güzel tüyo, ben bunu öğrenmeden önceleri (bir yıl önce) facebook ve mozilladaki gibi menüsü yukarı yapışan tasarımlar yapamıyordum, bunu öğrenince tarzımda büyük değişiklikler oldu. Ve sinir eden bir konu daha vardı: ekran 1024 ben de container'i 100px yapıyorum ama yine de yatay scroolbar çıkıyordu, sen ol da çatlama. Birilerine css öğretmem gerektiğinde ya da tüyo vermem gerektiğinde ik bunu veriyorum. Çok sağ ol hocam. Css'i pek bilmeyenler içinse şöyle yapmalarını önerebiliriz. <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" >
Eyvallah hocam sen de sağolasın. Verdiğiniz detaylar için de teşekkürler. Ama css'i pek bilmeyenler için "Css mutlaka öğrenin" desek çok daha yararlı olmuş olmaz mıyız? Sonuçta 100 kodluk html ile nereye kadar değil mi? Css artık olmazsa olmazlardan biri hâline geldi. Css öğrenmeden önce (çok önce :D ) "Aman ya, Html bana yeter" diyordum. Ama gerçekten büyük salaklıkmış yaptığım. Css çok basit ve çok işe yarayan bir dil diyebiliriz. Tek bir mantığı var, o da id, class vs verme. Başka bir şeyi yok. Kesinlikle css'i çok seviyorum... :D
body { margin: 0px; } #menu { height: 100%; background-color: #333; color: #FFF; text-align: center; } bu şekilde sadeleştirilebilir sanırım divler için genişliği 1024px gibi fix bi değer verilirse daha ufak bir çözünürlükte scrollbar aşşağıda belirecektir. body tagına direk body olarak özellik atnabilir daha da özelleştirmek gerekiyorsa margin özelliği 4 parametreli olarak ta kullanılabilir şöyle ki; margin: üst sağ alt sol; yani margin: 0 10px 0 10px; şeklinde de kullanılabilir yukarıdaki 2. örnekte sağ ve sol marginleri 10 px olarak tek satırda parametre yardımı ile tanımlayabiliriz.. kolay gelsin..
tenx dostum...
direk margin:0px; densene yahu sag sol alt ust hepsine ayri ayri deger veriyosun.
Merhaba arkadaşlar arkadaşı tebrik ediyorum emeğinden dolayı fakat çözümünüz şöyle olacak: [b]html kısmı:[/b][u][/u] <html> <head> </head> <div id="body"> </div> <title>css margin denemesi</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="stil.css" type="text/css" media="all"> <div id="menu">menü </div> </body> </html> [b]Css kısmı ise :[/b][u][/u] body { margin: 0px; } #menu { height: 100%; background-color: #333; color: #FFF; text-align: center; } benim çalışıyor umarım sizinde çalışır ;)
eksik yapıştırmışım k.bakmayın width:100% height:250px; ( bu kısım ne boyutta header istediğinize bağlı değiştirebilirsiniz şeklinde olacak

Yukarı Git