| Autor | Zpráva | ||
|---|---|---|---|
| gary Profil |
#1 · Zasláno: 17. 7. 2011, 20:22:42
Dobrý den,
mám jeden (pro mě hodně velký) problém. Zkoušel jsem vytvořit jednoduché menu umístěné v obyčejné podlouhlé liště. Lišta měla délku 1000px a byla umístěna v tagu div a obsahovala pět položek, které byly každá umístěna v jednom tagu span a každý span měl délku 200px, aby se dohromady jeden vedle druhého vešly do té lišti. Všechny tyto tagy span pak byly umístěny v té liště, tedy v tagu div. Problém je v tom, že se (pro mě z nepochopitelných důvodů) ty tagy span pořád nějak nechtěly do toho divu vejít a poslední span se vždy posunul na nový řádek. Když jsem pak každému spanu dal černou barvu na pozadí a tomu jednomu divu jsem dal pozadí červené, všiml jsem si, že mezi všemi těmi spany je malá mezera, kvůly které se tam nechtěj vejít. To samé dělá i z obrázkama. Nevěděl by někdo, jak tu mezeru odstranit? Podívejte se třeba na tuhle stránku: http://www.splashdamage.com Maj tam podobné menu a žádné mezery jim to nedělá. |
||
| pavuk Profil |
#2 · Zasláno: 17. 7. 2011, 20:27:38
Myslím že pokus řešit nějakej problém odkazem na stránku, na který se popisovanej problém nevyskytuje, je "dosť akože na pi.."
|
||
| Bubák Profil |
#3 · Zasláno: 17. 7. 2011, 20:54:47 · Upravil/a: Bubák
Jedinou podobnost tebou popsaného a tebou odkázaného menu vidím v tom, že jsou horizontální.
Ty ses pokoušel o menu se stejně širokými odkazy, odkázané menu má každou položku jinak širokou, podle obsahu. Ty ses pokoušet o textové a obrázkové menu, tebou odkázané menu používá obrázky na pozadí. Menu se dělí pomocí <menu> nebo <ul> a položky jsou v <li>, menu je menu nebo seznam odkazů, nikoliv odkazy jen tak poházené. Koukni na hotová menu: http://interval.cz/hotova-reseni/pro-css/ http://teststranek.kvalitne.cz/#menu |
||
| gary Profil |
#4 · Zasláno: 18. 7. 2011, 13:45:41
Dobrý den, uvědomuju si, že jsem otázku neformuloval přesně a možná jsem měl připojit i nějakou referenci na daný problém.
Děkuji vám za ty odkazy. Z jednoho jsem si zkopíroval zdrojový kód a chtěl bych se zeptat, jak je to udělané s tím menu, které je jako jeden celý obrázek vloženo na stránku, ale je "rozkouskováno" na jednotlivé sekce jako Home, Tutorials, Gallery... Nemám na mysli ten efekt, když na jednu z těch položek najedete myší a vám se ten obrázek přepne podle nastaveného stylu, mám na mysli tu věc, jak je možné, že je tam ten obrázek vložený jako jeden celek, ale přesto jsou jeho jednotlivé sekce od sebe rozděleny, jako by každá byla jeden samostatný obrázek? Odkaz na tu stránku s oním příkladem můžete nalézt zde: http://teststranek.kvalitne.cz/menu3/ Zdrojový kód zkopíruji do tohoto přízpěvku. Prosí vás o nějaké jednoduché vysvětlení. <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com">; <style> body {color: black; background: white; font-family: sans-serif} .menu a {height: 25px; float: left;} .info {clear: both; } .doprostred { text-align: center;} .menu { background: #f90; width: 600px; margin: auto} .menu span {display: none; } /* ZAČÁTEK POLOŽEK MENU */ a#home {width: 72px; background: #bbb url(menu.png) } a#home:hover, a#home:hover, a#home:focus {background-position: 0px 25px; } a#tutorials {width: 91px; background: #ddd url(menu.png) 528px 0px} a#tutorials:hover, a#tutorials:active, a#tutorials:focus {background-position: 528px 25px; } a#gallery {width: 86px; background: #bbb url(menu.png) 437px 0px} a#gallery:hover, a#gallery:active, a#gallery:focus {background-position: 437px 25px; } a#downloads {width: 110px; background: #ddd url(menu.png) 351px 0px} a#downloads:hover, a#downloads:active, a#downloads:focus {background-position: 351px 25px; } a#support {width: 93px; background: #bbb url(menu.png) 241px 0px} a#support:hover, a#support:active, a#support:focus {background-position: 241px 25px; } a#others {width: 82px; background: #ddd url(menu.png) 148px 0px} a#others:hover, a#others:active, a#others:focus {background-position: 148px 25px; } a#links {width: 66px; background: #bbb url(menu.png) 66px 0px} a#links:hover, a#links:active, a#links:focus {background-position: 66px 25px; } /* KONEC POLOŽEK MENU */ </style> <title>Menu - 3</title> </head> <body> <h1>Příklad CSS menu s jedním obrázkem</h1> <h2 class="info">Takto vypadá použitý obrázek:</h2> <p><img src="menu.png"></p> <h2 class="info">Příklad menu (centrovaného)</h2> <div class="doprostred"> <div class="menu"> <a id="home" href="#"><span>home</span></a> <a id="tutorials" href="#"><span>tutorials</span></a> <a id="gallery" href="#"><span>gallery</span></a> <a id="downloads" href="#"><span>downloads</span></a> <a id="support" href="#"><span>support</span></a> <a id="others" href="#"><span>others</span></a> <a id="links" href="#"><span>links</span></a> </div> </div> <p class="info" links>Nechte si zobrazit zdrojový kód</p> </body> </html> |
||
|
Časová prodleva: 14 let
|
|||
0