Horizontální menu pomocí seznamu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Horizontální menu pomocí seznamu – CSS – Fórum – Programujte.comHorizontální menu pomocí seznamu – CSS – Fórum – Programujte.com

 

tom*p0
Stálý člen
6. 10. 2007   #1
-
0
-

Potřeboval bych poradit. Chci vytvořit horizontální menu pomocí seznamu. To se mi povedlo jenoduše udělat takto:

<html>

<head>
<style>
li {display:inline; float:left;}
</style>
</head>
<body>
<ul>
<li>Položka1
<li>Položka2
<li>Položka3
<li>Položka4
<li>Položka5
<li>Položka6
<li>Položka7
</ul>
</body>
</html>


Přímo stránka:
http://uloz.to/52858/index2.html

Je tady ale problém, pokud zmenším okno, jednotlivé položky seznamu se začnou skládat pod sebe a pokud bych to použil v layoutu, může mi jej celý rozházet.

Jak tedy mám kód upravit, aby při zmenšení okna zůstaly položky seznamu pořád v řadě za sebou a pouze se objevil horizontální posuvník v prohlížeči?

Nahlásit jako SPAM
IP: ...–
Don't waste your time, or time will waste you.
hrach
~ Redaktor
+1
Boss
6. 10. 2007   #2
-
0
-
Nahlásit jako SPAM
IP: 193.179.169.–
http://jan.skrasek.com@hrachcz – webdeveloper
tom*p0
Stálý člen
7. 10. 2007   #3
-
0
-

Takže řešením je přidat do css:



ul {width: 500px}


Ale co když položek v menu bude různý počet?

Nahlásit jako SPAM
IP: ...–
Don't waste your time, or time will waste you.
hrach
~ Redaktor
+1
Boss
7. 10. 2007   #4
-
0
-

byt tebou tak opravdu neresim ten vlastni pokus, ale na adrese kterou jsem psal si to vsechno zjitim...

Nahlásit jako SPAM
IP: 193.179.169.–
http://jan.skrasek.com@hrachcz – webdeveloper
tom*p0
Stálý člen
7. 10. 2007   #5
-
0
-

No jo, však právě díky té adrese jsem zjistil, že je potřeba udat pevnou šířku seznamu a proto to funguje a položky v menu se nezalamují. Ale problém je když je ta šířka různá, např. když tam přes redakční systém pár položek přidám a potom to nebude sedět k šířce nastavené v CSS stylu.

Nahlásit jako SPAM
IP: ...–
Don't waste your time, or time will waste you.
hrach
~ Redaktor
+1
Boss
7. 10. 2007   #6
-
0
-

skript jsem nestudoval ale ze samotne podstaty to asi nepujde. bud to bdue float, nebo to muze zkusit na display:inline-block; ktery se ale musi ve FF aktovovat mysqlim display: -moz-inline-box; ale nevim, jestli je to dobre reseni...

Nahlásit jako SPAM
IP: 193.179.169.–
http://jan.skrasek.com@hrachcz – webdeveloper
Petroff0
Věrný člen
9. 10. 2007   #7
-
0
-

V podstatě máš 3 možnosti:
1. ul/set constant width/ ; li se rovnoměrně roztáhnou
2. li/set constant width/ ; ul např. vycentrovat či vl.zarovnat
3. li/set width eq. content ; -||-
Vyber si pro svůj layout tu nejvhodnější

Nahlásit jako SPAM
IP: ...–
tom*p0
Stálý člen
9. 10. 2007   #8
-
0
-

díky

Nahlásit jako SPAM
IP: ...–
Don't waste your time, or time will waste you.
Petroff0
Věrný člen
9. 10. 2007   #9
-
0
-

http://css.maxdesign.com.au/listamatic/index.htm ....najdeš zde výběr řešení, odkazy na stránky řešící stylování listů
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/ ....a zde je interaktivní generátor stylů (nezkoušel jsem)
http://www.cssplay.co.uk/menus/ - spousta hotových řešení

Hlavní je inspirace pro výrobu čistě CSS menu (mně z autorů nejlíp pomohl E.Meyer: tu knihu na webu nenajdeš, ale zdrojové kódy ve kterých jsou jednotlivá stádia - okomentovaná - ano: http://more.ericmeyeroncss.com/projects/06/ . Je tam výroba jak H tak V menu)

Nahlásit jako SPAM
IP: ...–
Petroff0
Věrný člen
9. 10. 2007   #10
-
0
-

Co se obav ze zalamování týče, nejlepší je dát UL do obalového bloku = lišty s width:100%, lištu do obalu celé stránky který má nastaven min-width.
A pokud vyřešíš javascriptem problém s chyb. min-width u IE6, tak jsi za vodou (ie67,opera,ff - další nemám vyzkoušené).
UL samotný šířkovat nemužeš (ikdyby měly konstantní šířku tak quli proměnnému počtu položek; z hlediska využití místa jsou samozřejmě lepší položky na míru)

Nahlásit jako SPAM
IP: ...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 2 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý