• 05-05-2013, 20:01:18
    #1
    Üyeliği durduruldu
    dikey şekilde sıralanıyor.bunu nasıl düzeltebilirm.ayrıntılı acıklama yapmanıza gerekyok.
    bir tane menü adında div im var. ve bunun css i var
    dreamwever kullanmıyorum.
    ben yinede kodları vereyim
    İNDEX.HTML
    <!--
    To change this template, choose Tools | Templates
    and open the template in the editor.
    -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
        <title>Html ve Css Tema Yapımı</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <style type="text/css">
            @import url("index.css");
    </style>
    
        
    
    </head>
    <body>
    
    <div id="kapsayici">
    
        
        <div id="ust">
            <div class="logo">Logo</div>
            <div class="menu">
    		<ul>
    		
    <b><ul><a href="index.php">Anasayfa</a></ul></b>
    <b><ul><a href="hakkimizda.php">Hakkımızda</a></ul></b>
    <b><ul><a href="iletisim.php">İletişim</a></ul></b>
    
    </ul>
    		
    		</div>
    
    		
    		
        </div>
    
        <div id="orta">
            <div class="icerik">İçerik</div>
            <div class="yan-menu">Yan menü</div>
            <div class="temizle"></div>
        </div>
    
        <div id="alt">Alt ısım</div>
    
    </div>
    
    </body>
    </html>
    İNDEX.CSS
    body
    
    
    
            #kapsayici{
                margin: 0 auto;
                width: 940px;
            }
    
            #ust{
                background: #E6E5E3;
                margin: 0 0 10px 0;
                padding: 10px 10px 10px 10px;
                height: 150px;
            }
            #ust .logo {
                padding: 10px;
                font-size: 24px;
                font-weight: bold;
                height: 70px;
            }
            #ust .menu{
    			
    			text-align:left;text-align:top;
    			list-style-type:none;
                background: #D2D0D1;
                padding: 10px;
    			height: 40px;
    		
            }
    		
    
            #orta{
                background: #E6E5E3;
                padding: 10px;
                margin: 0 0 10px 0;
            }
            #orta .icerik{
                background: #D2D0D1;
                float: left;
                width: 650px;
                padding: 10px;
                margin: 0 10px 0 0;
                position: relative;
                height: 500px;
            }
            #orta .yan-menu{
                background: #D2D0D1;
                float: right;
                width: 220px;
                padding: 10px;
                position: relative;
                height: 500px;
            }
    
            #alt{
                background: #E6E5E3;
                padding: 10px;
                height: 150px;
            }
            .temizle{clear: both;}
  • 05-05-2013, 22:44:01
    #2
    text-decoration: none;

    yazın css'e birde böyle deneyin
  • 05-05-2013, 23:56:36
    #4
    Üyeliği durduruldu
    ul.menu li {
    display: inline; olmassa float: left; deneyin.
    }
  • 06-05-2013, 00:10:10
    #5
    Yan yana gelen bir menü css bilgisi.
    Bilgin olduğuna göre kolay düzenlersin.

    nav ul {
    padding:0;
    margin:0;
    }
    nav li {
    position:relative;
    float:left;
    list-style-type:none;
    }
    nav ul:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    nav li a {
    display:block;
    padding:10px 20px;
    border-left:1px solid #999;
    border-right:1px solid #222;
    color:#eee;
    text-decoration:none;
    }
    nav li a:focus {
    outline:none;
    text-decoration:underline;
    }
    nav li:first-child a {
    border-left:none;
    }
    nav li.last a {
    border-right:none;
    }
    nav a span {
    display:block;
    float:right;
    margin-left:5px;
    }
    nav ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0; background:#6a6a6a;
    }
    nav ul ul li {
    float:none;
    }
    nav ul ul a {
    padding:5px 10px;
    border-left:none;
    border-right:none;
    font-size:14px;
    }
    nav ul ul a:hover {
    background-color:#555;
    }
  • 06-05-2013, 11:13:22
    #6
    .menu ul ul{
    float: left;
    }

    Bu kodu css dosyanıza ekleyıp deneyin bi hocam
  • 06-05-2013, 14:10:04
    #7
    Üyeliği durduruldu
    foreverseo adlı üyeden alıntı: mesajı görüntüle
    .menu ul ul{
    float: left;
    }

    Bu kodu css dosyanıza ekleyıp deneyin bi hocam
    teşekkürler oldu.
    fakat css in yapısını öğrenebilmem için size sormam lazım.
    .menu ul ul dediniz. burdaki ul ,htmlde menü kısmı içinde ul gördüğü yere uygulayacak demektir değilmi?
    peki ikinci ul ne anlamda
  • 06-05-2013, 15:07:58
    #8
    TaKKoZ adlı üyeden alıntı: mesajı görüntüle
    teşekkürler oldu.
    fakat css in yapısını öğrenebilmem için size sormam lazım.
    .menu ul ul dediniz. burdaki ul ,htmlde menü kısmı içinde ul gördüğü yere uygulayacak demektir değilmi?
    peki ikinci ul ne anlamda
    aslında senin menunun html kodlaması yanlıs. ul taglarının icine menu ogelerını li olarak atman gerekir.

    Menu ul diyince menunun ıcındekı ul a mudahale eder.

    Fakat siz <ul> <ul></ul> </ul> olarak yapmışsınız.

    Bizde menu ul ul diyerek menunun ıcındekı ul un ıcındekı ul a mudahale ettık.

    Yani ulun içindeki ula mudahale ettik.
  • 06-05-2013, 17:07:32
    #9
    Üyeliği durduruldu
    şimdi şöyle sen ul diye css de tanımlama yaparsan bütün ul'lar için geçerli olacaktır. o yüzden reset.css dosyan olsun yahoonunkini kullan derim. en önce html dosyanda css çağırırken en üstte onu çağır. ondan sonra menünün ul'u için kullanacaksan her zaman:

    ul.menu diye kullan devamı için şöyledir:

    ul.menu li
    ul.menu li a gibi.. eğer alt menu kullanıyorsan menü içinde

    ul.menu li ul diye kolay gelsin