0
Kayıt Ol

Div ile Kontrol edilemeyen Tablo Problemi!

5

●

653

  • 01-10-2010, 02:06:49
    #1
    farkyerim
    farkyerim
    Arkadaşlar çalıştığm projede gövdede (#Middle) kullandığım tablo FIREFOX'da taşıyor. İE' de normal gözükyor. herikisi ekte

    sanırım tablonun esnemesiyle div'in de ötelenmesi gerekiyor.

    örnek yükledim eke yardım için şimdiden teşekkürler


    FİREFOX:     http://www.alokatalog.com/tasma.jpg

    İE:     http://www.alokatalog.com/ie.jpg


    Alıntı

    body {
    background-image: url(../images/background1.gif);
    background-repeat: repeat;
    margin:0 auto;
    padding: 0px;
    text-align:center;
    }

    #wrapper {
    width:920px;
    margin:0 auto;
    background-color: #00CCFF;
    }
    #Header {
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 920px;
    height: 100px;
    background-color: #FFFFFF;
    white-space: 100;
    line-height: 100px;
    }
    #Header #HeaderLogo {
    display: block;
    float: left;
    width: 920px;
    margin: 0px;
    padding: 0px;
    height: 69px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: 0;
    border-right-style: 0;
    border-bottom-style: 0;
    border-left-style: 0;
    }

    #Header .logo {
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 226px;
    height: 69px;
    }
    #Header .banner {
    display: inline;
    padding: 0px;
    float: left;
    height: 64px;
    width: 470px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: center;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: 0;
    border-right-style: 0;
    border-bottom-style: 0;
    border-left-style: 0;
    }#Header .iletisim {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 69px;
    width: 216px;
    float: left;
    }

    #Header #HeadarMenu {
    display: block;
    float: left;
    width: 870px;
    color: #FFFFFF;
    vertical-align: bottom;
    height: 31px;
    margin: 0px;
    line-height: 31px;
    background-image: url(../images/band.gif);
    background-repeat: repeat-x;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 50px;
    text-decoration: none;
    }
    #HeadarMenu .MenuSag {
    display: inline;
    margin: 0px;
    padding: 0px;
    float: left;
    height: 31px;
    width: 600px;
    line-height: 30px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: 0;
    border-right-style: 0;
    border-bottom-style: 0;
    border-left-style: 0;
    }

    #Header #HeadarMenu a {
    display: block;
    float: left;
    color: #333333;
    height: 30px;
    margin: 0px;
    line-height: 30px;
    background-image: url(../images/band.gif);
    background-repeat: repeat-x;
    padding-top: 0px;
    padding-right: 7px;
    padding-bottom: 0px;
    padding-left: 7px;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: none;
    border-right-color: #FFBF80;
    }
    #Header #HeadarMenu a:hover {
    display: block;
    float: left;
    color: #FFFFFF;
    height: 30px;
    margin: 0px;
    line-height: 30px;
    background-image: url(../images/over.gif);
    background-repeat: repeat-x;
    padding-top: 0px;
    padding-right: 7px;
    padding-bottom: 0px;
    padding-left: 7px;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: none;
    border-right-color: #FFBF80;
    background-color: #FFFFFF;
    }

    #HeadarMenu .input{
    display: block;
    float: left;
    height: 27px;
    line-height: 31px;
    margin: 0px;
    padding-top: 4px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 6px;
    }
    #HeadarMenu .Arama{
    display: block;
    float: left;
    height: 23px;
    line-height: 30px;
    padding-top: 7px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 3px;
    margin: 0px;

    }
    #Header #SonDakika {
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    height: 23px;
    width: 920px;
    border: 1px dotted #666666;
    }
    #SonDakika .SonDakika_img {
    line-height: 24px;
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    height: 24px;
    width: 131px;
    }
    #Middle {
    float: left;
    width: 920px;
    display: block;
    margin: 0px;
    background-color: #FFFFFF;
    padding-top: 0px;

    }

    #Middle #Sol {
    float: left;
    width: 170px;
    display: block;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    padding: 0px;

    background-color: #33FFFF;
    }
    #Middle #Orta {
    float: left;
    width: 547px;
    display: block;
    background-color: #CCCCCC;
    padding: 0px;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 0px;
    margin-left: 5px;
    }
    #Middle #Sag {
    float: left;
    width: 170px;
    display: block;
    margin: 0px;
    padding: 0px;
    background-color: #00FFFF;
    }

    #wrapper #Footer {
    background-image: url(../images/footer.gif);
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    height: 70px;
    width: 920px;
    background-repeat: repeat;
    }

    #MiddleYonetim {
    float: left;
    width: 918px;
    display: block;
    margin: 0px;
    padding-top: 3px;

    border: 1px dashed #FF0000;
    background-color: #FFFFFF;
    background-position: center center;
    }
    #MiddleYonetim ." {
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 184px;
    }
    #MiddleYonetim .MiddleBaslik {
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 184px;
    background-color: #CCCCCC;
    border: 1px solid #00CCFF;
    }
    #BlokAc {
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 140px;
    border: 2px solid #00FF00;
    }
    #BlokAc .BlokBaslik {
    background-color: #CC0033;
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 140px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
    font-style: normal;
    line-height: 25px;
    font-weight: normal;
    font-variant: normal;
    }
    #BlokAc .BlokIcerik {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 920px;
    }



    #TabloAc {
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 140px;
    border: 2px solid #00FF00;
    }
    #TabloAc .TabloBaslik {
    background-color: #CC0033;
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 920px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
    font-style: normal;
    line-height: 25px;
    font-weight: normal;
    font-variant: normal;
    }
    #TabloAc .TabloIcerik {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 920px;
    }

  • 01-10-2010, 11:22:27
    #2
    cocainer
    cocainer
    o alttaki div kapanmadan önce <div style="clear:both"></div> bunu ekleyip denermisin.
  • 01-10-2010, 13:45:53
    #3
    farkyerim
    farkyerim
    hocam hangi div olduğunu karıştırdım. #Middle nin içindeki#Sol #Orta#Sağ taşıyor. 

    <div id="wrapper"> 
	
	<div id="Middle">
		<div id="Sol"> Sol Taraf</div>
		<div id="Orta"> Orta Taraf</div>
		<div id="Sag"> SAG Taraf</div>
		
	</div>
	
	
	<div id="Footer">
	</div>
</div>
    cocainer adlı üyeden alıntı: mesajı görüntüle
    o alttaki div kapanmadan önce <div style="clear:both"></div> bunu ekleyip denermisin.
  • 01-10-2010, 15:32:55
    #4
    cocainer
    cocainer 
    <div id="wrapper"> 
	
	<div id="Middle">
		<div id="Sol"> Sol Taraf</div>
		<div id="Orta"> Orta Taraf</div>
		<div id="Sag"> SAG Taraf</div>
	<div style="clear:both"></div> 
	</div>
	
	
	<div id="Footer">
	</div>
</div>
    Bu şekilde denedin mi?

    tabi eğer middle kayıyorsa..
  • 01-10-2010, 22:37:35
    #5
    sadeeq
    sadeeq
    sorununu yanlış anlamadıysam:

    margin ve padding değerlerini yeniden gözden geçir. içtekilerin margin+padding+width değerleri toplamı kapsayan katmanın genişlik ve padding değerini aşıyorsa bu problemi yaşarız.
  • 01-10-2010, 23:01:01
    #6
    farkyerim
    farkyerim
    Deniyim hocam

    Arkadaşlar tablonun divleri aşması. konuyu internettede aradım. fakat karşılığını bulamadım. sanırım ciddi bir ayrıntı.

    http://www.alokatalog/tasma_.jpg

    hocam geneli paddin ve margnleri topladım. 902 px kapsayan #Middle nin weith: 918px

    sadeeq adlı üyeden alıntı: mesajı görüntüle
    sorununu yanlış anlamadıysam:

    margin ve padding değerlerini yeniden gözden geçir. içtekilerin margin+padding+width değerleri toplamı kapsayan katmanın genişlik ve padding değerini aşıyorsa bu problemi yaşarız.
    OH BEE #Middle'ye kırmızı olan bölümü verdim FF'de sorunsuz çalışıyor. Referans: http://www.fatihhayrioglu.com/100-ge...eti-hazirlama/

    #wrapper #Middle {
    display: block;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px;
    padding: 0px;
    float: left;width: 920px;
    background-color: #FFFFCC;
    }