Forum
Aktif konular
Üyeler
Kurallar
Arama
Css De Kelimeler Arası Boşluk Ayarlamak Css De Kelimeler Arası Boşluk Ayarlamak
-
bir menü var diyelim menü deki kelimeler şu şekil sıralı örneğin:
" serdar serdar serdar serdar " bu serdarlar arasındaki boşluğu azaltmak istiyorum çünkü bunların hemen yanında bir menü var bunların arasındaki boşluk fazla olduğu için yanındaki menüler alt satıra kaymış durumda eğer bunların arasındaki boşluğu biraz daha düzeltirsem şayet o yan menüde normal satırında olacak bunun için hangi kodu kullanmalılıyım css kodları bunlar
/*---------------------header dropdown menu 20090803---------------------------------------*/
div#main_navi ul.left li ul{
display: none;
position: absolute;
left: 0;
width: 125px;
margin-top: 33px;
padding: 0 3px;
height: auto;
background-color: #111;
border: 1px solid #2d2c2c;
border-top: 0;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
div#main_navi ul.left li ul li{
width: 125px;
overflow: hidden;
}
div#main_navi ul.left li ul li a{
font-size: 12px;
padding: 3px 6px;
margin: 0 2px;
}
/*---------------------header dropdown menu 20090803---------------------------------------*/
div#main_navi ul.right{
float: right;
list-style-type: none;
padding: 9px 10px 0 0;
}
div#main_navi ul.right li a{
float: left;
overflow: hidden;
color: #fff;
font-size: 12px;
line-height: 20px;
margin: 0 0 0 10px;
text-transform: capitalize;
}
div#main_navi ul.right li.twitter a{
background: url(images/twitter.gif) no-repeat 0 3px;
padding-left: 20px;
}
div#main_navi ul.right li.twitter a:hover{
color: #0af;
}
div#main_navi ul.right li.feed a{
background: url(images/feed.gif) no-repeat 0 5px;
padding-left: 15px;
}
div#main_navi ul.right li.feed a:hover{
color: #ff5a00;
}
div#main_navi ul.right li.delicious a{
background: url(images/delicious_med.gif) no-repeat 0 3px;
padding-left: 20px;
}
div#main_navi ul.right li.delicious a:hover{
color: #0af;
} -
Puntolu olan yeri Ben sonradan ekledim ekleyincede menüye sığmadı alt satıra geçti px ini ofilan nasıl ayarlamam gerekli aslında yer var fazla fazla aa olmadı işte alta kaydı ekran görüntüsü:
script Wordpress scriptteki header dosyası orada düzenleme yok tamamen css ile ayarlanmış mesafeler falan filan
-
header phpyle bağlantı kurman gerekecek ama benim önerim cssden sil yada php kodları içinde bu kodu ara sadece cssde değildir bu kod
-
header.php deki kodu bu şekil
----------------------------------------------------------------------------------<div id="main_navi">
<ul class="left">
<li<?php if(is_home()&&!is_paged()) echo ' class="current_page_item"'; ?>><a href="<?php bloginfo('url'); ?>"><?php _e('ANASAYFA', 'pyrmont_v2'); ?><!--end--></a></li>
<?php wp_list_pages('include=4,11,9,41&title_li=&depth=2'); ?>
</ul>
<ul class="right">
<li class="delicious"><a href="http://feeds.delicious.com/v2/rss/xxx" title="<?php _e('Delicious Feed', 'pyrmont_v2'); ?>">Delicious</a></li>
<li class="twitter"><a href="http://twitter.com/xxx" title="<?php _e('Beni Takip Edin', 'pyrmont_v2'); ?>">Twitter</a></li>
<li class="feed"><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Subscribe', 'pyrmont_v2'); ?> <?php bloginfo('name'); ?>"> <?php _e('rss feed','pyrmont_v2');?></a></li>
</ul>
</div><!-- end main_navi -->
----------------------------------------------------------------------------------------------------------------
burada da puntolu kısmı ben ekledim sonradan -
Paddinglerde bi deneme yanılma yaparmısın.. mavi olan yukarıdan aşağı mesafe, kırmızıda soldan mesafeyi ayarlaması lazım.
padding: 3px 6px;
-
<div id="main_navi">
<ul class="left">
<li<?php if(is_home()&&!is_paged()) echo ' class="current_page_item"'; ?>><a href="<?php bloginfo('url'); ?>"><?php _e('ANASAYFA', 'pyrmont_v2'); ?><!--end--></a></li>
<li class="delicious"><a href="http://feeds.delicious.com/v2/rss/xxx" title="<?php _e('Delicious Feed', 'pyrmont_v2'); ?>">Delicious</a></li>
<li class="twitter"><a href="http://twitter.com/xxx" title="<?php _e('Beni Takip Edin', 'pyrmont_v2'); ?>">Twitter</a></li>
<li class="feed"><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Subscribe', 'pyrmont_v2'); ?> <?php bloginfo('name'); ?>"> <?php _e('rss feed','pyrmont_v2');?></a></li><?php wp_list_pages('include=4,11,9,41&title_li=&depth=2'); ?>
</ul>
</div><!-- end main_navi -->---
böyle denermisi olmadı bi tanesini kaldır dene
-
oynadımda ne kadar değiştirisem değiştireyim onlar etkisis eleman rolu oynadı hiç bir şekilde bir değişiklik yapmadı sitede
-
hackworm bunu yazdı:
-----------------------------
-
@SeRDaR bi yere atabilirsen online inceleyelim yada Firebug la inceledinmi mı ? Öyle daha net bulursun gibi
-
SeRDaR bunu yazdı:
-----------------------------bir menü var diyelim menü deki kelimeler şu şekil sıralı örneğin:
" serdar serdar serdar serdar " bu serdarlar arasındaki boşluğu azaltmak istiyorum çünkü bunların hemen yanında bir menü var bunların arasındaki boşluk fazla olduğu için yanındaki menüler alt satıra kaymış durumda eğer bunların arasındaki boşluğu biraz daha düzeltirsem şayet o yan menüde normal satırında olacak bunun için hangi kodu kullanmalılıyım css kodları bunlar
Bunu yapmak için
- tag'ında herbir
- tagı float'la yan yana dizmiş. Kodun tamamı yok ama;
width: 125px; herbir -li-
- genişliğiyse bunu biraz daraltıp yazılarıda biraz küçültmeyi deneyebilirsin.
bu
- ul 'nin içinde olduğu div'in genişliği kaç piksel? (width: ?) Örneğin main_nav 900 px 'se herbir 125px'e margin ve padding değerlerini ekleyip toplam ne kadar piksel genişliğe ihtiyacın olduğunu hesaplayabilirsin:
- 125px + 3px (sol) + 3px (sağ) =131px olur. 6 tane li koyarsak 6x 131px = 786px eder. 7.
- tagı 131px x 7 =917px bir satır aşağıya atar.
- bir de ;
- div#main_navi ul.right li.twitter a{
background: url(images/twitter.gif) no-repeat 0 3px;
padding-left: 20px;
}
div#main_navi ul.right li.twitter a:hover{
color: #0af;
}
div#main_navi ul.right li.feed a{
background: url(images/feed.gif) no-repeat 0 5px;
padding-left: 15px;
} - Burda padding-left'leri de hesaplayabilirsin.
Kolay gelsin.
#main_nav {
width:900px;
}
#main_nav ul {
margin:0;
padding:0;
}
#main_nav li {
width:125px;
padding:3px;
float:left;
list-style:none;
}
Burada herbir li
- tagı float'la yan yana dizmiş. Kodun tamamı yok ama;
-
temanı bı yere upload et yada tema adını soyle halledeyım.
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla