2011-01-05 33 views
1

晚上好球員,圍繞一個特定的DIV - 已經嘗試了很多 - 未能不斷

這是我第一次這個網站上,所以我很抱歉,如果我這樣做實在太差了。

首先,我有一個專門用於wordpress的網站,我遇到的問題是我希望我的水平導航位於頂部以某種方式查看,但如果我將它保留爲正確的方式現在它似乎下降到第二排...這讓我難過。

因此,我決定讓個別按鈕變小,然後居中它們,這樣即使觀衆沒有使用的是(這是IMPACT),那麼它就會調整他們如何集中,而不是下降。

我試圖找到一種方法來爲DAYS做到這一點,我一再失敗。我使用firefox中的「firebug」來測試代碼更改,而我只是找不到一種方法來完成這項工作。

該網頁是http://www.crapcast.com,代碼僅位於頁面頂部,位於徽標下方。我將包括當前的CSS,它是以滿足當前頁面使用情況的方式進行格式化的(但是,對於一些較舊的瀏覽器和電話瀏覽器,它們往往顯示爲雙排)。

#navigation { 
float:left; 
position:relative; 
z-index:9999; 
} 
#navigation ul { 
font-family:Impact,Charcoal,Times New Roman; 
font-size:22px; 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
} 
#navigation li { 
float:left; 
position:relative; 
} 
#navigation li a { 
float:left; 
letter-spacing:2.45px; 
padding:15px; 
text-decoration:none; 
} 
#navigation .main_category { 
background-position:center top; 
background-repeat:no-repeat; 
} 
#navigation .active { 
background-position:0 10px; 
background-repeat:no-repeat; 
} 
#navigation li.current-menu-item, #navigation li.current-menu-ancestor, #navigation li.current-post-parent, #navigation li.current-menu-parent { 
background-position:0 10px; 
background-repeat:no-repeat; 
} 
#navigation ul li ul { 
display:none; 
left:0; 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
position:absolute; 
top:50px; 
width:230px; 
} 
#navigation ul li ul li a { 
padding:15px 0 15px 36px; 
width:194px; 
} 
#navigation li a.odd { 
background-position:18px 23px; 
background-repeat:no-repeat; 
text-transform:uppercase; 
} 
#navigation li a.even { 
-moz-background-clip:border; 
-moz-background-inline-policy:continuous; 
-moz-background-origin:padding; 
background:#212121 url(../images/navigation_dot.gif) no-repeat scroll 18px 23px; 
} 
#navigation li a.odd:hover, #navigation li a.even:hover { 
background-position:18px 23px; 
background-repeat:no-repeat; 

回答

0

我認爲你的問題是關係到你的字體:

#navigation ul { 
    font-family:Impact,Charcoal,Times New Roman; 
    ... 
} 
... 
... 
#navigation li a { 
    ... 
    letter-spacing:2.45px; 
    ... 
} 

您正在使用的字體的寬度來設置你的項目的寬度在您的菜單。 因此,當系統中沒有Impact字體時,這些項目的寬度會增加很多。 Impact字體的每個字符的寬度與放置在其中的其他字體的寬度相比要窄。

如果您嘗試使用等效寬度字體我相信您會解決您的問題。

在iPhone中,我猜Android,你找不到Impact字體。

嘗試黑體宋體,而不是影響和改變你的字母間距2.0px或類似的東西。

0

在任何瀏覽器,甚至IE6中,我都看不到「兩排」問題。

如果你想確保你的訪問者能夠查看你正在使用的確切字體..可能是影響或任何形式的花哨字體。嘗試使用http://www.fontsquirrel.com/fontface/generator

只需上傳您所需的字體,下載套件&遵循超級簡單的說明(^_^)