Çözüldü CSS İle Menü Ortalama

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Durum
Mesaj gönderimine kapalı.
EmreEfe

EmreEfe

Hectopat
Katılım
14 Kasım 2015
Mesajlar
222
Daha fazla  
Cinsiyet
Erkek
Görselde görülen menüleri tam ortalamak istiyorum. Aşağıda da deneyip sonuç alamadığım kodlar var.

Kod: 
text-align:center;
text-align:justify;
margin-left: 20%;

Ekran Alıntısı.PNG
 
Bağlantıları ihtiva eden ebeveyne ortalama özelliğini vermelisiniz. Tüm bağlantılara ortalama özelliği verirseniz sadece onların içerisindeki yazıları ortalar, bağlantılara genişlik vererek bunu görebilirsiniz.

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <div id="Menu" style="text-align:center">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
        <a href="#">Item 4</a>
    </div>
</body>
</html>
 
Silinen üye dedi:
Bağlantıları ihtiva eden ebeveyne ortalama özelliğini vermelisiniz. Tüm bağlantılara ortalama özelliği verirseniz sadece onların içerisindeki yazıları ortalar, bağlantılara genişlik vererek bunu görebilirsiniz.

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <div id="Menu" style="text-align:center">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
        <a href="#">Item 4</a>
    </div>
</body>
</html>
Genişletmek için tıkla...
Olmadı hocam yapamadım sanırım, ortalanmadı yine.
1.PNG



HTML Kodları
HTML: 
<div class="header-bottom-wrapper">

                <nav>   
                             <div class="row preview-html" ng-show="screen == 'preview'" ng-hide="loading"     style="text-align:center">
                                    <div class="col-md-12">
                                    <div id="cssmenu">
                                    <div id="menu-button">Menü</div>
    <ul>
                <li>
                    <a href="#" target="_blank">
                        <i class="fa fa-fw fa-home"></i> Anasayfa</a>
                </li>
                    <li class="has-sub"><span class="submenu-button"></span>
                    <a href="#"><i class="fa fa-fw fa-bars"></i> Çalışmalar </a>
        <ul>
                    <li><a href="#">Çalışma 1 </a></li>
           <br>
                    <li><a href="#">Çalışma 2 </a></li>
        </ul>
                    </li>
    
     <li>
        <a href="#" target="_blank">
            <i class="fa fa-fw fa-floppy-o""></i> Ödevler</a>
        </li>
        <li>
            <a href="#" target="_blank">
            <i class="fa fa-fw fa-try"></i> Para Kazanma</a>
        </li>
        
        <li>
     <a href="#"><i class="fa fa-fw fa-cog"></i> Hakkımda</a>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> İletişim</a>
     </li>
    
    </ul>
        </div>
    </div>
</div>
  
                </nav>   
                
         </div>

CSS Kodları
Kod: 
.header-bottom-wrapper
{
    height:40px;
    background-color:#fff;
    margin-bottom:10px;
    
}
.header-bottom-wrapper nav ul
{
    
    display:block;
    margin:5px;
    padding:5px;
    list-style-type:none;
    
}   
   .header-bottom-wrapper nav ul li
   {   
       float:left;
       padding:5px;       
   }

<--! Biçimlendirmeler -->

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #fff;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #333;
  font-weight: 700;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #cf4d35;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #333;
  font-weight: 400;
  background: #fff;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #cf4d35;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}
#cssmenu.small-screen.align-center > ul {
  text-align: left;
}
#cssmenu.small-screen ul li {
  width: 100%;
  border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
  height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
  border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
  float: none;
}
#cssmenu.small-screen ul ul li a {
  padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
  padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
  color: #dddddd;
  background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
  color: #ffffff;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
  position: relative;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 17px;
  color: #dddddd;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
  position: absolute;
  top: 22px;
  right: 17px;
  display: block;
  height: 4px;
  width: 20px;
  border-top: 2px solid #dddddd;
  border-bottom: 2px solid #dddddd;
  content: '';
  box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
  position: absolute;
  top: 16px;
  right: 17px;
  display: block;
  height: 2px;
  width: 20px;
  background: #dddddd;
  content: '';
  box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  top: 23px;
  border: 0;
  height: 2px;
  width: 15px;
  background: #ffffff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  top: 23px;
  background: #ffffff;
  width: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  height: 46px;
  width: 46px;
  cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
  background: #262626;
}
#cssmenu.small-screen ul ul .submenu-button {
  height: 34px;
  width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
  position: absolute;
  top: 22px;
  right: 19px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
  top: 15px;
  right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
  background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
  position: absolute;
  top: 19px;
  right: 22px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
  top: 12px;
  right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
  display: none;
}
#cssmenu.small-screen.select-list {
  padding: 5px;
}
 
İki sınıftaki özellikleri aşağıdaki gibi düzenleyin.

HTML: 
.header-bottom-wrapper nav ul li {
    /*float: left;*/
    padding: 5px;
}

#cssmenu > ul > li {
    /*float: left;*/
    display: inline-block
}
 
Yanlış Bilgi
ul'ye : margin : 0px auto ekleyin.
 
Silinen üye dedi:
İki sınıftaki özellikleri aşağıdaki gibi düzenleyin.

HTML: 
.header-bottom-wrapper nav ul li {
    /*float: left;*/
    padding: 5px;
}

#cssmenu > ul > li {
    /*float: left;*/
    display: inline-block
}
Genişletmek için tıkla...
Hocam çok teşekkür ederim menüyü ortaladım, fakat şöyle bir sorunum var;
Ekran Alıntısı.PNG

Açılır menüdeki "Çalışma 1" ve "Çalışma 2" arasındaki boşluğu, verdiğiniz koddaki iç boşluğu sıfırlamama rağmen düzeltemedim.
 
<br> etiketinden dolayı boşluk oluşuyor, aşağıdaki gibi düzenleyin veya etiketi tamamen silin.
HTML: 
<li class="has-sub">
    <span class="submenu-button"></span>
    <a href="#"><i class="fa fa-fw fa-bars"></i> Çalışmalar </a>
    <ul>
        <li><a href="#">Çalışma 1 </a></li>
        <!--<br>-->
        <li><a href="#">Çalışma 2 </a></li>
    </ul>
</li>
 
Silinen üye dedi:
<br> etiketinden dolayı boşluk oluşuyor, aşağıdaki gibi düzenleyin veya etiketi tamamen silin.
HTML: 
<li class="has-sub">
    <span class="submenu-button"></span>
    <a href="#"><i class="fa fa-fw fa-bars"></i> Çalışmalar </a>
    <ul>
        <li><a href="#">Çalışma 1 </a></li>
        <!--<br>-->
        <li><a href="#">Çalışma 2 </a></li>
    </ul>
</li>
Genişletmek için tıkla...
Kendinizi nasıl geliştirdiniz? Beni çeşitli kaynaklara yöneltebilir misiniz? Son olarak tasarım hakkındaki görüşlerinizi öğrenmek istiyorum. :LOL:
 
Kolay beğenen birisi olmadığımdan aynı şeyi sürekli yaparak ve buna her defasında yeni şeyler ekleyerek kendimi geliştirdim. HTML ve CSS çok basit bir dildir ancak kodları sadeleştirme işi mantıklı düşünmekte bitiyor.

Tasarımı görebildiğim kadarıyla çok eskide kaldığını söyleyebilirim, elinize kareli bir defter ve kalem alıp çok ilgi çekebilecek tasarımlar düşünüp çizin veya internetteki örneklere bakıp bunları karıştırıp bir şeyler yapabilirsiniz. Ayrıca kodlarınız çok fazla ve karışık, bunları kısaltmalısınız.

Birden çok kaynaklara bakıyorum ancak şu anda isimlerini hatırlamıyorum, size en çok yardımcı olabilecek site W3Schools olabilir. Bu bağlantıdan CSS derslerine bakabilirsiniz: CSS Tutorial
 
Silinen üye dedi:
Kolay beğenen birisi olmadığımdan aynı şeyi sürekli yaparak ve buna her defasında yeni şeyler ekleyerek kendimi geliştirdim. HTML ve CSS çok basit bir dildir ancak kodları sadeleştirme işi mantıklı düşünmekte bitiyor.

Tasarımı görebildiğim kadarıyla çok eskide kaldığını söyleyebilirim, elinize kareli bir defter ve kalem alıp çok ilgi çekebilecek tasarımlar düşünüp çizin veya internetteki örneklere bakıp bunları karıştırıp bir şeyler yapabilirsiniz. Ayrıca kodlarınız çok fazla ve karışık, bunları kısaltmalısınız.

Birden çok kaynaklara bakıyorum ancak şu anda isimlerini hatırlamıyorum, size en çok yardımcı olabilecek site W3Schools olabilir. Bu bağlantıdan CSS derslerine bakabilirsiniz: CSS Tutorial
Genişletmek için tıkla...
Hocam çok teşekkür ederim. Önerilerinizi dinleyeceğim ve yardımlarınızı hayatım boyunca unutmayacağım. İsminiz her zaman aklımın bir köşesinde olacak iyi forumlar.
 
Durum
Mesaj gönderimine kapalı.

Benzer konular

M
CSS ile menü ortalama
Mesaj
4
Görüntüleme
1B
ulas serin
ulas serin
ejderya
CSS3 Açılır Menü - Flat Tasarım
Mesaj
2
Görüntüleme
1B
ejderya
ejderya
RawShed
CSS Card ortalama
Mesaj
2
Görüntüleme
3B
RawShed
RawShed
Halil1905
CSS Resim ortalama
2
Mesaj
12
Görüntüleme
7B
Halil1905
Halil1905
OGAX
  • Soru
CSS menü ortalanmıyor
Mesaj
6
Görüntüleme
980
OGAX
OGAX

Yeni konular

Yeni mesajlar

Geri
Yukarı