0
Kayıt Ol

css detayı ?

2

●

1.026

  • 20-12-2012, 01:22:57
    #1
    alonzo
    alonzo
    bu css kodda
    header da ki position relative ne işe yarıyor olmasa ne olur?
    display:inline-block; nkodu ne işe yarıyor.

    bunu yine forumdan bir arkdaş yaptı. kodda en önemli olan yanyana giden kuruların sayfa genişliğine kadar gitip kendini aşağıya atması ve height auto verilmiş content div inin ne kadar çok li varsa o kadar aşağıya inmesi
    .
    li kodlarına display inline block kodu verilerek yanyana yapılmıs bir tasarım çıkıyor.

    aynı şeyi float left komutu vererek content divinin ona göre elastic olmasını nasıl sağlayabiliriz? ben float left yapınca kutular content den dışarı fırlıyor footer header ın sağına gddiyor sayfa bozuluyor.





    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Efe ÖZYER - Örnek</title>
    <style type="text/css">
    body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;
    }

    h1, h2 {
    font-weight:normal;
    margin-left:10px;
    }

    #site {
    width:1100px;
    border:1px solid #666;
    margin:0px auto;
    padding:5px;
    }

    #header {
    width:1100px; height:200px;
    position:relative;
    border:1px solid #666;
    }

    #content {
    width:1100px;
    height:auto;
    border:1px solid #666;
    }

    #content ul {
    list-style:none;
    }

    #content ul li {
    width:100px; height:150px;
    border:1px solid #900;
    display:inline-block;
    margin:20px;
    }

    #footer {
    width:1100px;
    height:100px;
    border:1px solid #666;
    }
    </style>
    </head>
    <body>
    <div id="site">
    <div id="header">
    <h1>Header</h1>
    <h2>Sabit Yükseklik</h2>
    </div>

    <div id="content">
    <h1>Content</h1>
    <h2>Buraya sınırsız içerik yerleştirebilirsin, yükseklik içerğine göre değişecektir</h2>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>

    <div id="footer">
    <h1>Footer</h1>
    <h2>Sabit Yükseklik</h2>
    </div>
    </div>
    </body>
    </html>
  • 20-12-2012, 15:38:32
    #2
    bulutto
    bulutto
    Position etiketi bu html dosyasında bir işe yaramıyor. Position'u ben katmanlama yapmak için ve bağımsız margin vermek için kullanıyorum: Örnek: r10 logosunun altında h1 etiketi ike r10 yazacağım yazı ile ve zemin rengi ile aynı yapıp gözle görünmesini engelleicem ki arama motoru açısından iyi birşeydir h1 ile başlığı yazmak.

    Bir div'in içine h1 ile r10 ve img olarak logoyu koyalım ve logoyu h1'in üstüne getirelim.

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Bulutto - Örnek</title>
<style type="text/css">
body {font-family:arial, tahoma, verdana, sans-serif;font-size:12px; }
#header {width:1100px; height:200px; position: relative; border:1px solid #666; background:#fff; color:#fff; position:relative; } 
#header h1 { font-weight:normal; font-size:12px; }
#header img { position:absolute; left:0; top:0; }

</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
<img src="r10.png">
</div>
</body>
</html>
    Yukardaki örnekte logo h1 etiketini kapatmış oluyor; ama hala neden header'a position:relative; verdiğimi tama anlatamamış olabilirim: position relative vermeseydim eğer logomuz body etiketini baz alıcaktı, yani atıyorum biz header'a relative tanımı yapmasaydık ve header'a margin-top:100px; deseydik logo en üstte kalacaktı aşağı kaymıcaktı, ama bu şekilde margin verirsek logo da kayacak.
  • 20-12-2012, 22:15:57
    #3
    biomooj
    biomooj
    position:relative , verilen katman içindeki diğer katmanlara verilen değerler açısından bu katmanın sınırlarının esas alınması gerektiğini belirtir. display:block özelliği olmadan position:relative çalışmaz. genel kullanım şekli şöyledir. bir katmana position:absolute vereceksindir. fakat left, top vs değerlerini body veya uzak katmanlardan biri üzerinden algılar. bunun önüne geçmek için bir üst katmana position:relative verirsin ve içindeki katmandaki position:absolute bu katmanın konumu esas alınarak konumlandırılır.