Buradaki Yazıyı Nasıl Ortalarım ?


TheLastRevolution

TheLastRevolution

Üye
    Konu Sahibi
Arkadaşlar merhaba aşşağıdaki menü de yazıları tam olarak ikonların ortasına gelmesini istiyorum CSS ve HTML kodlarını aşşağıda verdim şimdiden teşekkürler


HTML

HTML:
<html>
<head>

<title>5G Bilişim</title>

<link href="slider.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:900' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body>

<ul>
  <li><a class="anasayfa" href="#anasayfa"> <i class="material-icons">home</i> Ana Sayfa </a></div></li>
  <li><a class="ceptel" href="#ceptel"> <i class="material-icons">stay_current_portrait</i> Cep Telefonları </a></li>
  <li><a class="pc" href="#bilgisayar"> <i class="material-icons">desktop_windows</i> Bilgisayarlar </a></li>
  <li><a class="about" href="#hakkimizda"> <i class="material-icons">info_outline</i> Hakkımızda </a></li>
  <li><a class="contact" href="#contact"> <i class="material-icons">phone</i> İletişim </a></li>
</ul>

<iframe name="icerik" width="20%" height="100%"></iframe>

</body>
</html>

CSS
HTML:
body {

    margin-top: 5%;
    height: 100%;
    width: 15%;
    border-right:1px;
    border-color:#212121;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 20%;
    background-color: #fff;
    position: fixed;
    height: 100%;
    font-weight:bold;
    font-family: 'Roboto';
    border-right:1px;
    border-color:#212121;
}

li a {

    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;

}

li a.anasayfa {

color: #666666;
text-align:center;
margin-top: 2%;
}

li a.anasayfa:hover {

color:#fff;
background-color: #303f9f;
}

li a.ceptel {

color:#666666;
text-align:center;
margin-top: 2%;
}

li a.ceptel:hover {

color:#fff;
background-color: #FFA000;
}

li a.pc {

color:#666666;
text-align:center;
margin-top: 2%;
}

li a.pc:hover {

color:#fff;
background-color: #03a9f4;
}

li a.about {

color:#666666;
text-align:center;
margin-top: 2%;

}

li a.about:hover {

color:#fff;
background-color:#388e3c;
}

li a.contact {

color:#666666;
text-align:center;
margin-top: 2%;
margin-bottom: 2%;
}

li a.contact:hover {

color:#fff;
background-color:#d32f2f;
}


 
DarkredBlue61

DarkredBlue61

Üye
Center Filan Yazsan Olmuyormu Yazının Sonuna Başına Filan ?
Medyaları görüntülemek için kayıt olmalısınız
Gibi
"
"
Medyaları görüntülemek için kayıt olmalısınız
"/center]" Böyle Pardon​
Oto Düzeltiyorda :D XXX
XXXX​
XXX
 
TheLastRevolution

TheLastRevolution

Üye
    Konu Sahibi
Hocam gece gece neler yaptınız konuya :ehe

Hayır hocam orası CSS olduğu için olmuyor ne yazık ki center
 
0MG90

0MG90

Üye
Ozan abiye soruver :)
 
BLasTeaR

BLasTeaR

Üye
Arkadaşın dediği gibi, oradaki tüm kodu bu kodun arasına yapıştır da dene bakalım:hmmm
Kod:
[CENTER]maxicep[/CENTER]
 
TheLastRevolution

TheLastRevolution

Üye
    Konu Sahibi
Arkadaşın dediği gibi, oradaki tüm kodu bu kodun arasına yapıştır da dene bakalım:hmmm
Kod:
[CENTER]maxicep[/CENTER]

dediğim gibi CSS olduğu için olmuyor center etiketi

@Ozan abi bir fikrin var mı acaba ?
 
Ozan

Ozan

Admin
.li a {

css tanımlamalarına;

Kod:
display: -webkit-box;

eklersen muhtemelen düzelecek.
 
TheLastRevolution

TheLastRevolution

Üye
    Konu Sahibi
.li a {

css tanımlamalarına;

Kod:
display: -webkit-box;

eklersen muhtemelen düzelecek.

teşekkürler hocam hemen deniyorum
hocam yazı ve iconlar komple sola kaydı ancak yazılar yinede iconların altında

edit : icon dediklerim google web fontu ile yaptığım ikonlar kodalra bakarsanız hocam anlarsınız bir nevi yazı yani onlarda

 
Ozan

Ozan

Admin
Ben aynı hizaya gelsin istediniz sandım.
Altında ortalı gelmesi için;

.material-icons {

css tanımlaması yapacaksınız slider.css de ve şunu ekleyeceksiniz.

Kod:
display:block !important;

olarak düzenlediğinde, alt alta ortalı olacaktır.

Yani slider.css son hali şu sekilde :
PHP:
body {

    margin-top: 5%;
    height: 100%;
    width: 15%;
    border-right:1px;
    border-color:#212121;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 20%;
    background-color: #fff;
    position: fixed;
    height: 100%;
    font-weight:bold;
    font-family: 'Roboto';
    border-right:1px;
    border-color:#212121;
}

li a {

    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;

}

li a.anasayfa {

color: #666666;
text-align:center;
margin-top: 2%;
}

li a.anasayfa:hover {

color:#fff;
background-color: #303f9f;
}

li a.ceptel {

color:#666666;
text-align:center;
margin-top: 2%;
}

li a.ceptel:hover {

color:#fff;
background-color: #FFA000;
}

li a.pc {

color:#666666;
text-align:center;
margin-top: 2%;
}

li a.pc:hover {

color:#fff;
background-color: #03a9f4;
}

li a.about {

color:#666666;
text-align:center;
margin-top: 2%;

}

li a.about:hover {

color:#fff;
background-color:#388e3c;
}

li a.contact {

color:#666666;
text-align:center;
margin-top: 2%;
margin-bottom: 2%;
}

li a.contact:hover {

color:#fff;
background-color:#d32f2f;
}

.material-icons {
    display:block !important;
    }
 
TheLastRevolution

TheLastRevolution

Üye
    Konu Sahibi
hocam cevap için teşekkürler ancak o ikonları ben google ın sitesinden çekiyorum yani yerel tanımlama değil bu şekilde yine de çalışır mı ?
hocam bunu da denedim ancak bu sefer de ikonların en tepesine çıktı yazılar ve ikonlara yapıştılar :hmmm :bilmem:
hocam amacım yan menü gibi bir menü yapmak
 




MaxiCep.com internet sitesi 5651 Sayılı Kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında BTK kurumu tarafından onaylı Yer Sağlayıcı olarak faaliyet göstermektedir. İçerikler, ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır.

MaxiCep.com; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir.

MaxiCep.com’un yer sağladığı içeriğin 5651 Sayılı Kanun’un 8 ila 9. maddelerine aykırı şekilde; kişilik haklarınızı ihlal ettiğini ya da hukuka aykırı olduğunu düşünüyorsanız Buradan yada [email protected] mail adresine e-mail göndererek iletişime geçerek bildirebilirsiniz.

Bildirimleriniz dikkatle ve özenle incelenmekte olup kişilik haklarınızın ihlali ya da hukuka aykırılığın tespiti halinde mevzuat kapsamında en kısa sürede işlem yaparak bilgi vereceğiz.
Üst Alt