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

TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Trvalé přihlášení

Zapomněl jsi heslo?

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

Rozšířené hledání ›

Nejnovější témata ve fóru

16:26, Assembler šachový program

22:06, Startupy Megastroj.cz – Vše na jednom místě: půjčovna, bazar a inze…

21:17, Inzerce FPGA vývojová deska XILINX VIRTEX 5 ML507

20:59, OS - GNU / Linux Ubuntu a OpenSuse

21:47, Offtopic Digitalizace v Česku

10:10, Cinema 4D Export USDC do DaVinci Resolve

Stavba Laser Arény
Laser Game Brno

Fórum › CSS

Horizontální menu pomocí seznamu

tom*p0

Stálý člen

6. 10. 2007 #1

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

Boss

Kultivátor příspěvků ve starém fóru – 2.02 % z celku

6. 10. 2007 #2

koukni na toto:
http://solardreamstudios.com/learn/css/cssmenus/

Nahlásit jako SPAM

IP: 193.179.169.–

http://jan.skrasek.com – @hrachcz – webdeveloper

tom*p0

Stálý člen

7. 10. 2007 #3

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

Boss

7. 10. 2007 #4

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

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

Boss

7. 10. 2007 #6

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

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

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

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

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: ...–

← Zpět na seznam vláken ← Zpět do Fóra