Sorun Neden Kaynaklanıyor? (Css)

04-08-2012, 00:01:08

Üyeliği durduruldu

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.

04-08-2012, 00:07:14

#2

BuRaKM

.sagkutu
{
float:right;
}
.solkutu
{
float:left;
}
.clear
{
clear:both;
}

Yukarıdakiler css kodların sag sütunda istediklerini <div class="sagkutu"></div> solda istediklerinide <div class="solkutu"></div> içine alacaksın.

Sağ div kapandıktan sonra <div class="clear"></div> yaparak temizleyeceksin bu kadar işlem
04-08-2012, 00:11:13

#3

Mirzakul

IE 9'da normal gözüküyor
04-08-2012, 00:23:00

#4

~~S e r s e r i~~

Üyeliği durduruldu

Kutuları yerleştirmede sorun yok. Görüntüde sağdaki yeşil 4'e bölünmüş. Yine bir sorun yoktu ta ki padding değerlerini atayana dek. Mesela şuanki kodlarda "Etkinlik" etiketinden "padding: 5px 0 5px 0;" kodlarını kaldırdığımda kutu yerine geliyor. first-child ve last-child kısmında bir sıkıntı var galiba.

kolpacino adlı üyeden alıntı: mesajı görüntüle

IE 9'da normal gözüküyor

Düzenleme: Explorer 8 galiba last-child kodunu tanımıyor.

En azından first-child kodunu tanıyor. Onunla idare ettim
05-08-2012, 13:33:14

#5

~~Delibey09~~

Üyeliği durduruldu

960 Grid kullan