Autor Zpráva
TomasJ
Profil
#1 · Zasláno: 27. 10. 2010, 20:31:14 · Upravil/a: TomasJ
Odpovědět Citovat
Dobrý den, nebo spíše večer.
Je možné, že popisek tématu nevystihuje podstatu problému, ale netuším jak jinak tento problém pojmenovat.
Jdu hned k problému: 
<div id="menu">
    <a id="menu_opt" href="#lorem">Lorem</a>
    <a id="menu_opt" href="#ipsum">Ipsum</a>
    <a id="menu_opt" href="#dolor">Dolor</a>
    <a id="menu_opt" href="#sit_amet">Sit amet</a>
    <a id="menu_opt" href="#consectetuer">Consectetuer</a>
</div>

No a problém mám asi takový, že každý nový řádek dělá za odkazem (v podstatě položkou menu) mezeru a já nechci, aby tam ta mezera byla. Vím, že když dám všechny odkazy do jednoho řádku (ve zdroj. kódu), mezery tam nebudou, ale taky se v tom nevyznám. Můj problém vypadá takto:
Lorem(!)Ipsum(!)Dolor(!)Sit amet(!)Consectetuer

Místo ! je mezera kterou nechci mít mezi odkazy. Mezery si styluji pomocí paddingu v CSS. No a když mám takto nastavený padding:5px 10px 5px 10px; (zleva a zprava 10px), tak mám ještě mezi odkazy tu mezeru kterou vytvoří nový řádek udělaný ve zdrojovém kódu (nikoliv ve výsledném zobrazení)
tiso
Profil
#2 · Zasláno: 27. 10. 2010, 20:54:36 · Upravil/a: tiso
Odpovědět Citovat
TomasJ: buď: 
#menu a{display: block;float: left;}
alebo: 
<div id="menu"><!-- (pripadne aj sem)
    --><a id="menu_opt" href="#lorem">Lorem</a><!--
    --><a id="menu_opt" href="#ipsum">Ipsum</a><!--
    --><a id="menu_opt" href="#dolor">Dolor</a><!--
    --><a id="menu_opt" href="#sit_amet">Sit amet</a><!--
    --><a id="menu_opt" href="#consectetuer">Consectetuer</a>
</div>
btw. nemôžeš mať na stránke 5 rovnakých id (menu_opt)
panther
Profil
#3 · Zasláno: 27. 10. 2010, 20:57:02
Odpovědět Citovat
tiso:
„#menu a{display: block;float: left;}“
display: block; je v tomto případě zbytečné.

TomasJ:
třetí možnost je zapsat odkazy do jednoho řádku, osobně bych volil tisem navrhovaný float.
Petr ZZZ
Profil
#4 · Zasláno: 27. 10. 2010, 20:59:08 · Upravil/a: Petr ZZZ
Odpovědět Citovat
Zalomení řádku ve zdrojovém kódu je v HTML interpretováno jako bílá mezera. Vyřešit to lze tím, že zalomíš řádek někde jinde než mezi odkazy, např.: 

<a class="menu-opt" href="#lorem">Lorem</a><a 
class="menu-opt" href="#ipsum">Ipsum</a><a 
class="menu-opt" href="#dolor">Dolor</a><a 
class="menu-opt" href="#sit_amet">Sit amet</a><a 
class="menu-opt" href="#consectetuer">Consectetuer</a>

Dodatek 1: Ta vícenásobná totožná id mi unikla, Tiso má samozřejmě pravdu, jedno id smí být na stránce jen jednou. Je-li třeba přiřadit stejné styly víckrát, používá se class. Opravil jsem to, aby tu ta id nestrašila.
Dodatek 2: Podtržítkům v názvech tříd a identifikátorů je všeobecně lepší se vyhnout (v příkladu jsem to změnil na minus).
panther
Profil
#5 · Zasláno: 27. 10. 2010, 21:01:29
Odpovědět Citovat
Petr ZZZ:
tobě tenhle zápis přijde přehledný? Mě tedy ani v nejmenším :-)
TomasJ
Profil
#6 · Zasláno: 27. 10. 2010, 21:05:08 · Upravil/a: TomasJ
Odpovědět Citovat
Reaguji na tisa, panthera, Petra ZZZ
float:left; je v mém případě nemožné použití, jelikož #menu zarovnávám na střed a float:left; posune nalevo.
Navrhovaný příklad Petra ZZZ je opravdu nepřehledný.
Správná možnost je tahle: 
<div id="menu"><!--
    --><a href="#lorem">Lorem</a><!--
    --><a href="#ipsum">Ipsum</a><!--
    --><a href="#dolor">Dolor</a><!--
    --><a href="#sit_amet">Sit amet</a><!--
    --><a href="#consectetuer">Consectetuer</a>
</div>

jak psal tiso. Díky, mezera už není.

EDIT:
„btw. nemôžeš mať na stránke 5 rovnakých id (menu_opt)“
To jsem měl na efekt :hover, ale už neblbne ani v IE, takže id je tam zbytečné (nepoužívám ho) jinak díky za upozornění, že tam vůbec je. Já si to ani neuvědomil :D
panther
Profil
#7 · Zasláno: 27. 10. 2010, 21:06:49
Odpovědět Citovat
TomasJ:
„jelikož #menu zarovnávám na střed a float:left; posune nalevo.“
nemusí.
Petr ZZZ
Profil
#8 · Zasláno: 27. 10. 2010, 21:11:56
Odpovědět Citovat
panther, TomasJ:
Dobře, tisův zápis je přehlednější, můj je kratší. Ale jinak tedy kompliment tisovi – uzavřít nechtěnou mezeru do komentáře – dobrá finta!
TomasJ
Profil
#9 · Zasláno: 27. 10. 2010, 21:13:04
Odpovědět Citovat
panther:
> „jelikož #menu zarovnávám na střed a float:left; posune nalevo.“
> nemusí.
Zkoušel jsem to ;-)
panther
Profil
#10 · Zasláno: 27. 10. 2010, 21:14:30
Odpovědět Citovat
TomasJ:
„Zkoušel jsem to ;-)“
a řešení jsi vymyslel, nebo vzdal? :-)
TomasJ
Profil
#11 · Zasláno: 27. 10. 2010, 21:15:35
Odpovědět Citovat
panther:
[#6] - neboli uzavření oné mezery do komentu ;-)
panther
Profil
#12 · Zasláno: 27. 10. 2010, 21:16:33
Odpovědět Citovat
TomasJ:
zkus se podívat ještě sem, i to je hezké (imho nejčistčí) řešení.
tiso
Profil
#13 · Zasláno: 27. 10. 2010, 21:18:26
Odpovědět Citovat
TomasJ: problém s tým druhým riešením je ten, že tá medzera do HTML patrí.
TomasJ
Profil
#14 · Zasláno: 27. 10. 2010, 21:49:50 · Upravil/a: TomasJ
Odpovědět Citovat
panther:
Je to opravdu čisté, pomocí CSS, ale zůstanu u komentářového uzavření, jelikož nechci přidělávat, mně nelíbící se <ul><li> :D

tiso:
„problém s tým druhým riešením je ten, že tá medzera do HTML patrí.“
A to mě štve...
panther
Profil
#15 · Zasláno: 27. 10. 2010, 22:12:34
Odpovědět Citovat
TomasJ:
„jelikož nechci přidělávat, mně nelíbící se <ul><li>“
ono ale menu v seznamu (ať je to <menu> nebo <ul>) je ze sémantického hlediska jediná správná varianta. Ale jak myslíš :-)
TomasJ
Profil
#16 · Zasláno: 27. 10. 2010, 22:27:09
Odpovědět Citovat
panther:
No to nejspíš je ale koukni sem a uvidíš, že to jde i bez <ul><li> ... zatím tam není defacto vůbec nic, jen hlava a menu (web jsem onehdá začal a času jsem na něj moc neměl)
Petr ZZZ
Profil
#17 · Zasláno: 27. 10. 2010, 23:15:19 · Upravil/a: Petr ZZZ
Odpovědět Citovat
tiso:
„problém s tým druhým riešením je ten, že tá medzera do HTML patrí“

Prosím o nakopnutí – které je to druhé řešení a která mezera kam patří?
tiso
Profil
#18 · Zasláno: 27. 10. 2010, 23:58:52
Odpovědět Citovat
Petr ZZZ: [#2], medzera medzi odkazmi, inak je z toho text LoremIpsumDolor…
Petr ZZZ
Profil
#19 · Zasláno: 28. 10. 2010, 00:28:07
Odpovědět Citovat
tiso:
Jo tak to jo, tyto mezery ale nemají nic do činění s HTML, ale prostě s češtinou/slovenštinou/latinou, zkrátka s tím, že slova je zvykem oddělovat mezerou. Pokud tam ale má TomasJ mezery definované paddingem, tak to je jedno, když v "psaném textu" mezery chybí, ne? Přičemž mi to teda stejně přijde jako drbání se levou nohou za pravým uchem – proč definovat mezery paddingem, když je stačí prostě napsat?
panther
Profil
#20 · Zasláno: 28. 10. 2010, 00:31:14 · Upravil/a: panther
Odpovědět Citovat
Petr ZZZ:
„Pokud tam ale má TomasJ mezery definované paddingem, tak to je jedno, když v "psaném textu" mezery chybí, ne?“
jedno to není, stránka zobrazená bez stylů nebude čtitelná. Rozuměj tím i hlasové čtečky.

Vůbec teď neber v úvahu, že jde „jen“ o menu, kde je sada odkazů. Stačí, když pochopíš, co je na tom řešení „bez mezer“ v HTML, principiálně špatně.
Keeehi
Profil
#21 · Zasláno: 28. 10. 2010, 00:31:23
Odpovědět Citovat
Petr ZZZ:
Protože se jedná o menu.
Petr ZZZ
Profil
#22 · Zasláno: 28. 10. 2010, 01:21:15
Odpovědět Citovat
panther:
No jo, na vypnuté styly jsem nepomyslel. :)

Keeehi:
Díky, pravda – když mají být položky menu takříkajíc vzdušnější, je padding dobrá volba.
TomasJ
Profil
#23 · Zasláno: 28. 10. 2010, 14:05:42 · Upravil/a: TomasJ
Odpovědět Citovat
Jojo to určitě je. Bez CSS je stránka takzvaně v pr**** ale aspoň že jsou odkazy s prvním písmenem velkým, takže myslím že ten kdo se nebude na mé stránce učit češtinu a zrovna mu naskočí stránka bez stylů, pochopí začátek odkazu :D

EDIT:
Zvláštní, že kódeři chodí spát až kolem 2. hodiny ráno :D
Časová prodleva: 13 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0