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>