ugrás a tartalomhoz

CSS menü törése érdekes

Creative · 2013. Feb. 19. (K), 13.21
Sziasztok

Lehet hasonló téma már volt... így kövezzetek nyugodtan meg.
Problémám a következő: Adott egy teljesen mezei, horizontális menüsáv, melyben a szeparátor elemek is külön li-t alkotnak, nem pedig borderezés vagy képi megoldás van - főleg, mert mobilra készült.
A gond azzal van, ha elkezdem összenyomni a böngészőablakomat, egy-egy menüpont nem úgy törik, hogy alámegy az előtet lévőknek (ugye a felhasználó ezt várná), hanem nemes egyszerűséggel a két sorba tört linkek közé mintegy haradik sor betöri magát. Ez lassú kicsinyítésnél jön elő, illetve mobil eszközöknél windows phone-on.
Segítségképp a kód, semmi extra mizéria.
  1. <!doctype html>  
  2. <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->  
  3. <!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->  
  4. <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->  
  5. <!--[if gt IE 8]><html class="no-js" lang="en"><![endif]-->  
  6. <head>  
  7.     <title>Title Here</title>  
  8.     <meta charset="utf-8" />  
  9.     <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />  
  10.     <meta name="HandheldFriendly" content="True" />  
  11.     <meta name="MobileOptimized" content="320" />  
  12.     <meta name="viewport" content="width=980" />  
  13.     <link rel="stylesheet" href="styles/main-app2.css" />  
  14. </head>  
  15.     <body>      
  16.         <div id="navigation-items">  
  17.             <ul>  
  18.                 <li><a title="Lorem" href="/">  
  19.                     a Lorem</a> </li>  
  20.                 <li class="separator" >|</li>  
  21.                 <li><a title="Lorem" href="/">  
  22.                     a Lorem</a> </li>  
  23.                 <li class="separator" >|</li>  
  24.                 <li><a title="Lorem" href="/">  
  25.                     a Lorem</a> </li>  
  26.                 <li class="separator" >|</li>  
  27.                 <li><a title="Lorem" href="/">  
  28.                     a Lorem</a> </li>  
  29.                 <li class="separator" >|</li>  
  30.                 <li><a title="Lorem" href="/">  
  31.                     a Lorem</a> </li>  
  32.                 <li class="separator" >|</li>  
  33.                 <li><a title="Lorem" href="/">  
  34.                     a Lorem</a> </li>  
  35.                 <li class="separator" >|</li>  
  36.                 <li><a title="Lorem" href="/">  
  37.                     a Lorem</a> </li>  
  38.                 <li class="separator hide" >  
  39.                     |</li>  
  40.                 <li class="hide"><a title="Lorem" href="/">  
  41.                     a Lorem</a> </li>  
  42.             </ul>  
  43.             <div class="clear">  
  44.             </div>  
  45.         </div>  
  46.     </body>  
  47. </html>  
  1. ul, li {  
  2.     list-style: none outside none;  
  3.     margin: 0;  
  4. }  
  5. a, a:hover {  
  6.     cursor: pointer;  
  7.     text-decoration: none;  
  8. }  
  9. #navigation-items {  
  10.     background-color: #EEEEEE;  
  11.     border-bottom: 1px solid #D7D7D7;  
  12. }  
  13. #navigation-items ul {  
  14.     padding: 5px 4px 0;  
  15. }  
  16. #navigation-items li {  
  17.     float: left;  
  18.     margin: 2px 0;  
  19. }  
  20. #navigation-items li a {  
  21.     color: #272727;  
  22.     display: block;  
  23.     padding: 4px;  
  24. }  
  25. .clear { clear: both; }  
Bárkinek bármi tippje van, örömmel fogadom ^^

C.
‹ CSS zoom és a középre helyezés Google szolgáltatások - maps api key hol van? ›
 ■
1

nem egészen értem, de

szabo.b.gabor · 2013. Feb. 19. (K), 13.50
nem egészen értem, de white-space:nowrap nem lehet megoldás a problémádra?
2

mutatom

Creative · 2013. Feb. 19. (K), 14.15
Íme a screenshot, így érthetőbb :)
http://oi46.tinypic.com/vdmtmc.jpg
3

az elválasztód magassága

szabo.b.gabor · 2013. Feb. 19. (K), 14.26
az elválasztód magassága kisebb, mint a menüelemek magassága, ez okozza a problémát
4

Hm

Creative · 2013. Feb. 19. (K), 14.37
Az a gond, ott a különbség 4px padding lenne csak, amit már próbáltam. Azt is próbáltam, hogy fix height mértéket kapjon. Sajnos egyik sem oldotta meg :S
5

separator?

Poetro · 2013. Feb. 19. (K), 14.39
Miért van egyáltalán szükség a separator li-re? Miért nem border, vagy :before illetve :after, ha nem szereted a border-t? Eleve nem hordoz tartalmat, felesleges külön elemnek lennie.
6

Egyetértek

Creative · 2013. Feb. 19. (K), 14.44
Egyetértek, de sajnos nem én készítettem el a hibát okozó dolgot, pusztán "hozzámvágták, hogy nesze csináld meg" :) Így abból kell gazdálkodnom, amim van
7

.separator { display:

Poetro · 2013. Feb. 19. (K), 15.48
  1. .separator {  
  2.   display: none;  
  3. }  
8

Félreértések elkerülésére

Creative · 2013. Feb. 19. (K), 15.59
Szóval igen, ezt énis ismerem, köszönöm :) De hogy tisztázzuk: maradjon minden, ahogy eddig, mert szent írás és ne kérdezzek mert semmi közöm hozzá. Hát így van megkötve kezem, így kell mozognom...
9

#navigation-items

Poetro · 2013. Feb. 19. (K), 16.17
  1. #navigation-items li.separator {  
  2.   padding: 4px 0;  
  3. }