Autor Zpráva
kolmen
Profil *
Zdravim,
vytvoril jsem si cenik formou tabulky (viz. nize) ale prijde mi zdlouhave vsude dodelavat ty tecky a ono to pak nevyjde, tak po jedne umazavat atd.
Nelze to udelat nejak jednoduseji a presneji? Diky!

 <table style="width:100%">
            <ul>
            
            <tr><td style="padding-left:28px"><li>čištění od zbytků hmyzu ............................................................</li></td><td>cena od  <b>99,- Kč</b></td>  </tr>                
            <tr><td style="padding-left:28px"><li>čištění náletové rzi a dehtu .............................................. </li></td><td>cena od  <b>99,- Kč</b></td> </tr>  
            <tr><td style="padding-left:28px"><li>čištění disků ..........................................................................</li></td><td>cena od  <b>99,- Kč</b></td> </tr>  
            <tr><td style="padding-left:28px"><li>odstranění zápachu ve vozidle...................................................................</td><td>cena od  <b>50,- Kč</b></li></td> </tr> 
            </ul>
            </table>

Moderátor Davex: Titulek „tabulka - dotaz na zjednoušení“ nevystihuje podstatu dotazu. Příště zkus prosím vymyslet lepší.
Borius
Profil
kolmen:
jednoduseji a presneji“ – pokud myslíš jednodušeji a přesněji, tak určitě.
Upozornění: mezi tagy <table> a <tr> nesmí být <ul>, jakožto ani mezi <ul> a <li> nesmí být <tr><td>.
Není dobré takto mísit navzájem tabulkové a seznamové prvky. Takto rozhodně ne.
Buďto se rozhodnout pro tabulku <table><tr><td>… nebo pro seznam <ul><li>…
Vytečkování řádků se nechá udělat tak, že vytečkuješ dolní rámeček, nejlépe ve stylopisu <style>:
   border-bottom: 1px dotted #000000;
kolmen
Profil *
Tím ale vytečuji celý řádek a ne jen tu prázdnou část kde končí text a pak začíná cena.
Borius
Profil
kolmen:
Nemyslel jsem použít ten spodní rámeček na úplně celý řádek.
Naopak, udělej to, aby vytečkovaná oblast byla onou částí, „kde končí text a pak začíná cena“.
Zkus třeba mezi tyto prvky vložit „vycpávku“, která bude vytečkovaná.
kolmen
Profil *
Zkousim to takto, ale nevim co delam spatne, ze ta mezera neni vyteckovana.

 <ul>
     <li><span>čištění od zbytků hmyzu</span><span style="width:100%;border-bottom: 1px dotted #000000;"></span><span style="float:right">cena od  <b>99,- Kč</b></span></li>        
</ul>
margin
Profil *
kolmen:
nevim co delam spatne
Dáváš rozměr řádkovému elementu, to "umí" jenom IE ve quirk režimu. Ale i kdybys span "přetypoval" třeba na inline-block, tak zjistíš, že width:100%; není šířka, kterou potřebuješ.

Přiznám se, že nevím, jak tvůj problém „nejak jednoduseji a presneji“ vyřešit, a to podotýkám, že rady, které ti napsal Borius, jsem četl. Nějaké prasácké řešení mě napadají, ale je možné, že někdo zkušený přijde na nějaké elegantní řešení.

Já osobně bych na ceník použil tabulku buď s klasickým orámováním buněk, nebo tabulku s barevným odlišením lichých a sudých řádků, případně decentní kombinaci orámování s barevným odlišením lichých a sudých řádků.
kolmen
Profil *
margin:
V krájním případě to tak udělám, ale bych byl radší, kdybych proto mé řešení. No uvidíme, jestli někoho něco napadne
Borius
Profil
kolmen:
Další možnost řešení. Tady nepoužívá žádnou vycpávku, naopak podtečkovává celý řádek, ale skrývá část tu část tečkování, kde jsou texty.

margin:
Nějaké prasácké řešení mě napadají …
Žádné řešení nemůže být „prasáčtější“ než to původní. (Nic ve zlém, Kolmene.)
Kcko
Profil
kolmen:
http://praha9.cinestar.cz/index.php

Vpravo dole se podívej jak je to udělané ...
margin
Profil *
Borius:
Další možnost řešení.
Šikovné, akorát bych kolmenovi doporučil pro tabulková data použít tabulku, tak, jako to má níže odkázaný Cinestar.
kolmen
Profil *
Borius:
To mi příjde nejlepší, ale konkrétně u toho je to řešené tak, že tečky jsou po celém řádku a jsou jen zakryté tím, že pod textem je pozadí, které to zakryje. Tedy ve finéle to působí jako kdyby tečky byly jen v tý mezeře. Ale má otázka zní:
Co když mám na pozadí již nějaký vzorek? V tom případě nemůžu nadefinovat tomu textu nějaké pozadí (bylo by to úplně odlišné).
Napadá někoho další řešení?


Kcko:
Tady je to řešené zrovna tak právě.
kolmen
Profil *
Ale možná to tak nechám s tím pozadím.

Tedy:
<ul class="cenik">
    <li><strong>čištění od zbytků hmyzu </strong> <em>cena od  <b>99,- Kč</b></em></li>
    <li><strong>čištění náletové rzi a dehtu</strong> <em>cena od  <b>99,- Kč</b></em></li>
    <li><strong>čištění disků</strong> <em>cena od  <b>99,- Kč</b></em></li>
  <li><strong>odstranění zápachu ve vozidle</strong> <em>cena od  <b>50,- Kč</b></em></li>
</ul>



.cenik {
    width: 100%;
    list-style: none;
    margin: 0 0 2em;
    padding: 0;
}
.cenik li {
    clear: both;
    margin: 0;
    padding: 0 0 1.8em 0;
    position: relative;
    border-bottom: dotted 2px #999;
}
.cenik strong {
    background: #ececec;
    padding: 0 10px 0 0;
    font-weight: normal;
    position: absolute;
    bottom: -.3em;
    left: 0;
}
.cenik em {
    background: #ececec;
    padding: 0 0 0 5px;
    position: absolute;
    bottom: -.2em;
    right: 0;
}
.cenik sup {
    color: #666;
    margin-left: 3px;
}

čím můžu nahradit tag </em> kdž nechci mít písmo kurzívou? Když povolím list-style, tak mi to celé rozhodí,nelze to tak, aby to zůstalo stejné a jen před text přibyla ta tečka?
Borius
Profil
kolmen:
Čím můžu nahradit tag </em> kdž nechci mít písmo kurzívou?
Takovým řádkovým prvkem, který nemá tučné písmo – neutrálním <span>. Nebo definovat pro <em> netučné písmo – <style>.cenik em {font-weight:normal;}</style>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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