導航欄在翻譯時延伸到第二行

我正在構建一個將以英語或西班牙語動態顯示的網站。用西班牙語時，單詞較長，導致導航欄重疊在第二行上。導航欄在翻譯時延伸到第二行

http://bit.ly/ZZ5Waq

我需要什麼樣的代碼改變？

謝謝！ -Cullen

編輯：我寧願不讓字體變小。重要的是，它的英文大小保持不變。

但是我願意在西班牙語版本中將它縮小/減少填充。

有沒有人知道如何添加CSS樣式如果頁面的URL有/ es /在裏面？最好用PHP。

來源

2013-05-14 Cullen Webb

你想做些什麼？您可以更改文字大小，更改寬度，縮短文字並添加省略號。 – Ian

這不僅僅是一種造型問題嗎？嘗試更改字體樣式，字體大小等...有可能沒有'特殊代碼'，可以幫助你 –

你可以做'.menu-item {letter-spacing：0px}'當它是西班牙語。順便說一句，當我點擊「痛苦的性交」時沒有任何反應：P –

你可以做很多事情來製作導航欄1行。

1）製作較小的font-size或使用較短字符間距的不同字體樣式。

2）同時，你可以儘量讓padding每個菜單列表中的小，因此，它會格格不入。

3）雖然你可能難道不」要做到這一點，你甚至可以使西班牙版本的網站有不同的佈局寬度（使容器的寬度更大）。

有很多不同的方法，你只需要改變你的代碼，看看它的外觀。也許最好的情況是，你最終只用2行，或者你可能會找到一種縮短菜單列表的方法。

沒有發佈任何代碼，它將很難幫助你進一步。

來源

2013-05-14 22:27:22

只有當URL有/ es /時，是否有PHP命令才能應用CSS？ –

if語句將執行此操作。我相當肯定你會知道如何學習php的基礎知識。如果你沒有，那麼學習基礎知識將需要一段時間，以便你可以繞過它。無論如何，祝你好運=） –

您可以修復菜單項的寬度，然後讓文本在每個鏈接中換行。所以導航欄保持一行，但按鈕變得更深。

兩個可能的缺點和他們的解決方案：

問題：根據您的CSS，很長的話要麼跳出固定寬度，或將被迫在中字包。

解決方法：接受中間單詞中斷，或讓您的翻譯員使用不同的較短的單詞。只要你不用兩種語言使用完全相同的措辭，就可以用任何語言來做到這一點。

問題：單線導航鏈接不會自動調整到雙線按鈕的深度，因此如果您的鏈接具有邊框或以其他方式顯示其高度，則導航可能看起來不均勻。

解決方案：多個。

讓所有的鏈接一個固定的高度，可容納兩行，無論是垂直居中類型（可以使用「顯示：表細胞;」做到這一點），還是讓它留頂端對齊。
使用jQuery來測量最高鏈接（或包含div的的高度），並使所有鏈接高度相同。

在構建多語言網站時，我通常會盡量避免設計中出現的問題 - 在導航欄中留出大量空白空間以增加字數，並讓翻譯員使用較短的單詞。

編輯：

要獲取URL在PHP中，使用$ _ SERVER [ 'REQUEST_URI']

<?php $url = $_SERVER['REQUEST_URI']; 
if(strpos($url,'/es/')) { ?> 
    <style type="text/css"> 
     .menu a { letter-spacing: 0; } 
    </style> 
<?php } ?>

來源

2013-05-14 23:51:14

這看起來像一個完美的解決方案！你可以添加這個CSS到上面嗎？我自己嘗試過，但沒有任何改變。 .menu a {letter-spacing：0; } –

更新了添加CSS的答案。 –

導航欄在翻譯時延伸到第二行

回答

相關問題