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

Sponsorlu Bağlantılar

TheLastRevolution

TheLastRevolution

Üye
    Konu Sahibi
Buradaki Yazıyı Nasıl Ortalarım ?
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
 


Üst Alt