HTML ve CSS websitesi ortada durmuyor

Monsieur Fatih

Centipat
Katılım
27 Mart 2021
Mesajlar
38
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
Arkadaşlar ben böyle kendi halimde web sitesi tasarlamayı öğreniyorum da. Bir liste var, bir türlü ortalayamadım hep sağ tarafta duruyor. Yardım lazım.
 
listenin baş etiketinin CSS koduna "text-align: center;" yaz (not: tırnak işaretleri hariç)

Ek olarak div gibi bir element kullandı isen onun CSS koduna eklemek sureti ile de yaslaya bilirsin.
 
 
Ben elementleri ortalamak için genellikle display: table; margin: 0 auto; kullanıyorum.
Neden table? block olması yeterli. Tablo olmayan bir elemanın display:table; olması semantik değil, bu da SEO'da puan kaybettirecektir.
 
Kodu görmeden bir şey diyemeyiz.
Kod:
<nav class="menu">
             <ul>
              <li><a href="#">Ana Sayfa</a></li>
              <li><a href="#">Kategoriler</a>
             <ul>
              <li><a href="#">Python</a></li>
              <li><a href="#">Dersler</a></li>
             </ul>
              </li>
              <li><a href="#">Web Tasarım</a>
             <ul>
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
             </ul>
              </li>
              <li><a href="#">Sosyal Medya</a>
             <ul>
              <li><a href="#">İnstagram</a></li>
              <li><a href="#">Discord</a></li>
             </ul>
              </li>
              <li><a href="#">Hakkında</a></li>
             </ul>
             </nav>

         </body>

     </html>

 <style type="text/css">

     html {background-color: white;
           text-align: center;}

     .baslik {    width: 510px;
     height: 100px;
     padding: 20px;
     background-color: #28F092;
     position: relative;
     margin: auto;
     border: solid 10px #294159;}

     .icerik {width: 510px;
     height: 150px;
     padding: 20px;
     background-color: gray;
     position: relative;
     margin: auto;
     border: solid 10px #294159}
 
     .menu ul{
     list-style: none;
     margin: left;
     padding: 0;
     }
 
     .menu li{
     float: left;
     position: relative;
     width: 120px;
     }
 
     .menu ul li ul{
     display: none;
     }
 
     .menu ul li:hover ul{
     display: block;
     }
 
     .menu ul li a{
     text-decoration: none;
     background: #294159;
     display: block;
     color: white;
     font-weight: bold;
     font-family: sans-serif;
     text-align: center;
     border-bottom: 2px solid gray;
      border-left: 1px solid #595959;
      padding: 5px;
     }
 
     .menu ul li ul li a{
     background: #294159;
     text-align: center;
     padding: 5px;
     border-bottom: 1px solid #294159;
     font-size: .8em;
     }
 
     .menu li a:hover{
     background: gray;
     transition: .5s;
     }
 
     .menu ul li ul li a:hover{
     padding-left: 15px;
     }

     </style>

Kodlar bunlar. Hep sol tarafta kalıyor.
 
Kod:
<nav class="menu">
             <ul>
              <li><a href="#">Ana Sayfa</a></li>
              <li><a href="#">Kategoriler</a>
             <ul>
              <li><a href="#">Python</a></li>
              <li><a href="#">Dersler</a></li>
             </ul>
              </li>
              <li><a href="#">Web Tasarım</a>
             <ul>
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
             </ul>
              </li>
              <li><a href="#">Sosyal Medya</a>
             <ul>
              <li><a href="#">İnstagram</a></li>
              <li><a href="#">Discord</a></li>
             </ul>
              </li>
              <li><a href="#">Hakkında</a></li>
             </ul>
             </nav>

         </body>

     </html>

 <style type="text/css">

     html {background-color: white;
           text-align: center;}

     .baslik {    width: 510px;
     height: 100px;
     padding: 20px;
     background-color: #28F092;
     position: relative;
     margin: auto;
     border: solid 10px #294159;}

     .icerik {width: 510px;
     height: 150px;
     padding: 20px;
     background-color: gray;
     position: relative;
     margin: auto;
     border: solid 10px #294159}
 
     .menu ul{
     list-style: none;
     margin: left;
     padding: 0;
     }
 
     .menu li{
     float: left;
     position: relative;
     width: 120px;
     }
 
     .menu ul li ul{
     display: none;
     }
 
     .menu ul li:hover ul{
     display: block;
     }
 
     .menu ul li a{
     text-decoration: none;
     background: #294159;
     display: block;
     color: white;
     font-weight: bold;
     font-family: sans-serif;
     text-align: center;
     border-bottom: 2px solid gray;
      border-left: 1px solid #595959;
      padding: 5px;
     }
 
     .menu ul li ul li a{
     background: #294159;
     text-align: center;
     padding: 5px;
     border-bottom: 1px solid #294159;
     font-size: .8em;
     }
 
     .menu li a:hover{
     background: gray;
     transition: .5s;
     }
 
     .menu ul li ul li a:hover{
     padding-left: 15px;
     }

     </style>

Kodlar bunlar. Hep sol tarafta kalıyor.
CSS kısmına şu kodu ekle;

[CODE lang="css" title="CSS"]nav { width: 600px; margin: 0 auto; }[/CODE]
 

Yeni konular

Geri
Yukarı