Arkadaşlar şu css işini yeni yeni öğreniyorum. Fakat bir sorunla karşılaştım ve bir türlü üstesinden gelemedim. Yapmak istediğim sağdaki yeşil alanı 4 eşit parçaya bölüp her birine padding değeri atamak. Fakat ilk div'e üstten padding 0, son div'e ise alttan padding 0 vermek istiyorum. Hatta aralarına Border ekleyeceğim fakat daha o aşamaya gelemedim. Kısaca
http://www.ulusalkanal.com.tr adresinde ki sağ bölüm gibi yapacağım.
Kısaca sorun:
Internet Explorer 8 görüntüsü -
Firefox görüntüsü
Firefox'ta sorun yokken Explorer'da bozuk görünüyor.
Düzenleme: Explorer 8 galiba last-child kodunu tanımıyor.
Kullandığım kodlar:
İndex.html
<!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>Fatih İlçe Rehberi</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="cerceve">
<div class="tepe">
<div class="logo"></div>
<div class="banner"></div>
</div>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Reklam & Sponsorluk</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<div class="menu2">
<ul>
<li><a href="#">Rehber</a></li>
<li><a href="#">Duyurular</a></li>
<li><a href="#">Etkinlikler</a></li>
<li><a href="#">Haberler</a></li>
<li><a href="#">Eminönü</a></li>
<li><a href="#">Sultanahmet</a></li>
<li><a href="#">Beyazıd</a></li>
<li><a href="#">Genel</a></li>
</ul>
</div>
<div class="manet">
<div class="manset">
<div class="manresim">
<img src="resimler/ayasofya.jpg" alt="" />
</div>
<div class="mansayi">
</div>
</div>
<div class="etkinlikler">
<div class="etkinlik">
</div>
<div class="etkinlik">
</div>
<div class="etkinlik">
</div>
<div class="etkinlik">
</div>
</div>
</div>
</div>
</body>
</html>Css
body {
background: #e9e9e9;
font-family: Arial, Helvetica, sans-serif;
}
.cerceve {
width: 970px;
margin: 5px auto 5px auto;
overflow: auto;
}
.tepe {
width: 970px;
margin-bottom: 15px;
height: 90px;
}
.logo {
width: 230px;
height: 90px;
margin-right: 12px;
float: left;
background: #4412aa;
}
.tepe .banner {
width: 728px;
height: 90px;
float: left;
background: #123daa;
}
.menu {
width: 960px;
height: 40px;
border: 5px solid #404040;
background: #404040;
}
.menu ul {
margin: 0;
padding: 0;
}
.menu li {
display: block;
float: left;
padding: 0 10px 0 10px;
line-height: 39px
}
.menu li a {
font-size: 20px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
.menu li:hover {
background: #10967e;
}
.menu2 {
width: 970px;
height: 40px;
background: #10967e;
}
.menu2 ul {
margin: 0;
padding: 0;
}
.menu2 li {
display: block;
float: left;
padding: 0 10px 0 10px;
line-height: 39px
}
.menu2 li a {
font-size: 20px;
color: #404040;
text-decoration: none;
}
.menu2 li a:hover {
color: #ffffff;
}
.manet {
width: 970px;
margin-top: 10px;
overflow: auto;
}
.manset {
float: left;
width: 560px;
height: 350px;
margin-right: 10px;
}
.manresim {
width: 560px;
height: 320px;
}
.mansayi {
width: 560px;
height: 30px;
background: #ef1223;
}
.etkinlikler {
float: left;
width: 400px;
height: 350px;
background: #cca321;
}
.etkinlik {
width: 400px;
height: 80px;
padding: 5px 0 5px 0;
background: #cad221;
}
.etkinlik:first-child {
padding: 0 0 5px 0;
}
.etkinlik:last-child {
padding: 5px 0 0 0;
}Yardımcı olursanız sevinirim. Ayrıca düzeltmem gereken başka yerler varsa onlarıda belirtirseniz sevinirim.