| Autor | Zpráva | ||
|---|---|---|---|
| l0ading Profil |
#1 · Zasláno: 22. 1. 2014, 17:37:07
Zdravím, jsem relativne začátečník v tvorbě webů a chtěl bych se zeptat, jak udělat, když mám menu, tak když to mám vedle sebe, tak aby zatím byl barevnej čtvereček, na který bych mohl kliknout stejně jako na ten odkaz v menu. jako například tady: http://www.lolking.net/ (jen příklad, jak tam je menu Home, Live stats, Charts atd.)
Díky |
||
| juriad Profil |
Tam to mají udělané pomocí:
#nav-bar li {
float: left;
}
#nav-bar li a {
display: block; /* toto zajistí, že lze kliknout po celé ploše */
line-height: 42px;
padding: 0 14px;
} |
||
| l0ading Profil |
#3 · Zasláno: 22. 1. 2014, 18:31:08
nejede mi to, nejspíš to bude tím, že mám stránku rozvrhnutou pomocí tabulky.. Jde to nějak, když to mám tabulkou? Každý prvek menu mám v jedné buňce.
|
||
| juriad Profil |
#4 · Zasláno: 22. 1. 2014, 18:59:10
l0ading:
Dej odkaz na svou stránku, nebo sestroj omezenou ukázku třeba na http://kod.djpw.cz. V dnešní době se tabulky na rozvržení stránek nepoužívají, ale principiálně by to mělo jít. |
||
| l0ading Profil |
http://kod.djpw.cz/ukbb
předem upozorňuju, že je to dost amatérská stránka, začal jsem s tím dneska asi před 3ma hodinama a zkouším svoje omezené znalosti v tvorbě webu :D jinak ty obrázky a pozadí tam nejdou vidět, mám to u sebe v pc, takže tam je k ničemu ta cesta ke mě do souboru. Edit: pozadí mám udělané v PS a je to docela hezký a společně s obrázkama zabírá většinu prostoru, takže takhle ta stránka bez toho vypadá dost suše. |
||
| juriad Profil |
V tvém případě stačí přidat odkazu styl:
display: block;
line-height: 60px;Mimochodem, id="menu" může být na stránce jen jeden; použij třídy. Nemáš ukončený <strong> (ten je mimochodem zbytečný; můžeš dát styl font-weight: bold přímo odkazu.
<link> stylů patří do hlavičky. Středníky se oddělují definice v CSS, nikoli atributy v HTML. Není úplně štastné nastavovat obsahu výšku (uživatel si zvětší písmo a text začne přetékat). Nenastavuj velikost písma v procentech; v Internet Exploreru nepůjde zvětšit. Jinde ano. Není mi jasné, proč používáš box-shadow. Tu samou barvu můžeš nastavit přímo. Zkus si prohlédnout tuto stránku (včetně zdrojáku); je to zhruba princip, jak se dnes tvoří rozložení stránky. http://qu.wu.cz/webtest/jednoduche-schema-stranky.htm |
||
| Bubák Profil |
#7 · Zasláno: 22. 1. 2014, 20:48:22
juriad:
„Mimochodem, id="menu" může být na stránce jen jeden; použij třídy.“ To je sice lepší, ale zbytečné, vznikne něco, co je v jednom starém článku popsáno jako "přemnožené třídy", Nedopusťte, aby se vám přemnožily třídy. Já bych doporučil tomto případě dát třídu řádku tabulky a všechny styly bych deklaroval pro buňky a odkazy. Máš zbytečné chyby v HTML, sice prohlížeče se s nimi vypořádají, ale doporučuji je opravit. - HTML atributy se neoddělují středníkem - v menu nemáš ukončovací značky elementu STRONG, já osobně bych v tomto případě doporučil strong nepoužít a tučnost deklarovat v CSS. Odkazy do STRONG elementu dávají akorát SEO šamani.
- doporučil bych ti používat doctype pro standardní režim, odpadne ti spousta problémů s kompatibilitou IE. |
||
| l0ading Profil |
Dekuju oboum za rady. Jenom k tomu ID, tak jaktoze teda, kdyz muze byt jen jeden tak to funguje u vsech? A jeste, co myslis Bubaku tim doctype pro standardni rezim? Pouzivam PSPad a tam se to generuje samo..
Mimochodem, to box-shadow pouzivam, protoze to udela takovej hezkej stin do tech boxu v menu. Nevim o jinem zpusobu jak na to |
||
| juriad Profil |
Místo toho doctype, co tam máš teď použij raději prostý:
<!doctype html> To ID funguje, ale specifikace to zakazuje. Hlavním důvodem je kompatibilita s JavaScriptem, v něm existuje funkce getElementById(), která vrátí element s daným ID. Ta předpokládá, že existuje právě jeden. A toho stínu jsem si fakt nevšiml. Považoval jsem to za jednu barvu. |
||
| l0ading Profil |
#10 · Zasláno: 22. 1. 2014, 21:42:41
Dobre diky, upravim to jak mi radite.
|
||
| Bubák Profil |
#11 · Zasláno: 22. 1. 2014, 21:59:08
Zda použít class nebo id se probírá na mnoha místech této diskuse a třeba v tomto článku: http://jecas.cz/id-class
|
||
|
Časová prodleva: 10 let
|
|||
0