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.
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><html class="no-js" lang="en"><![endif]-->
<head>
    <title>Title Here</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="width=980" />
    <link rel="stylesheet" href="styles/main-app2.css" />
</head>
    <body> 	
		<div id="navigation-items">
			<ul>
				<li><a title="Lorem" href="/">
					a Lorem</a> </li>
				<li class="separator" >|</li>
				<li><a title="Lorem" href="/">
					a Lorem</a> </li>
				<li class="separator" >|</li>
				<li><a title="Lorem" href="/">
					a Lorem</a> </li>
				<li class="separator" >|</li>
				<li><a title="Lorem" href="/">
					a Lorem</a> </li>
				<li class="separator" >|</li>
				<li><a title="Lorem" href="/">
					a Lorem</a> </li>
				<li class="separator" >|</li>
				<li><a title="Lorem" href="/">
					a Lorem</a> </li>
				<li class="separator" >|</li>
				<li><a title="Lorem" href="/">
					a Lorem</a> </li>
				<li class="separator hide" >
					|</li>
				<li class="hide"><a title="Lorem" href="/">
					a Lorem</a> </li>
			</ul>
			<div class="clear">
			</div>
		</div>
    </body>
</html>
ul, li {
    list-style: none outside none;
    margin: 0;
}
a, a:hover {
    cursor: pointer;
    text-decoration: none;
}
#navigation-items {
    background-color: #EEEEEE;
    border-bottom: 1px solid #D7D7D7;
}
#navigation-items ul {
    padding: 5px 4px 0;
}
#navigation-items li {
    float: left;
    margin: 2px 0;
}
#navigation-items li a {
    color: #272727;
    display: block;
    padding: 4px;
}
.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
.separator {
  display: none;
}
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
#navigation-items li.separator {
  padding: 4px 0;
}