Autor Zpráva
TomasJ
Profil
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
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
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
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
Petr ZZZ:
tobě tenhle zápis přijde přehledný? Mě tedy ani v nejmenším :-)
TomasJ
Profil
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
TomasJ:
jelikož #menu zarovnávám na střed a float:left; posune nalevo.
nemusí.
Petr ZZZ
Profil
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
panther:
„jelikož #menu zarovnávám na střed a float:left; posune nalevo.“
nemusí.
Zkoušel jsem to ;-)
panther
Profil
TomasJ:
Zkoušel jsem to ;-)
a řešení jsi vymyslel, nebo vzdal? :-)
TomasJ
Profil
panther:
[#6] - neboli uzavření oné mezery do komentu ;-)
panther
Profil
TomasJ:
zkus se podívat ještě sem, i to je hezké (imho nejčistčí) řešení.
tiso
Profil
TomasJ: problém s tým druhým riešením je ten, že tá medzera do HTML patrí.
TomasJ
Profil
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
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
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
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
Petr ZZZ: [#2], medzera medzi odkazmi, inak je z toho text LoremIpsumDolor…
Petr ZZZ
Profil
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
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
Petr ZZZ:
Protože se jedná o menu.
Petr ZZZ
Profil
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
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

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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