Autor Zpráva
quatzael
Profil
Ahoj,
potřeboval bych vytvořit něco takového jak je dole v ukázce (bez těch teček). Mělo by se jednat o seznam, kde se šířka seznamu bude odvíjet od velikosti názvu položky a taky od ceny . Cena pak má být zarovnaná napravo. Nejlépe pomocí divů, případně spanů..
Zásadní je, aby se oba název položky i cena daly dát do jednoho divu a dohromady pro ně nastylovat jednotný border a pozadí.
A taky tak, aby šlo hodit před název položky radio input a za cenu obrázek.
Logicky by to šlo udělat tabulkama, ale bohužel mi tam nejdou nastylovat bordery a pozadí pro dvě buňky vedle sebe tak, aby potom vypadaly jako jedna..

díky.

Ukázka:

Název položky................................... Cena
Krátký název..................................... 600 Kč
Dlouhýýýýýýýýýýýýýýýýýýý název..... 7 800 Kč

Název položky................................................. Cena
Krátký název................................................... 600 Kč
Ještě delšíííííííííííííííííííííííííííííííííííííííííííííííííííí název..... 7 800 Kč
Keeehi
Profil
Název zarovnán vlevo, cena vpravo, bohužel fixní šířka celku
<div style="width:500px;">
    <div style="float:left">Název položky<br>Krátký název<br>Dlouhýýýýýýýýýýýýýýýýýýý název</div>
    <div style="float:right">Cena<br>600Kč<br>7 800Kč</div>
</div>
A pozadí nastavovat obalovému divu.



A takhle by to tabulkou nešlo?
<style type="text/css">
<!--
    table {border-collapse: collapse;}
    td {border: 1px solid Black;}
    .left {border-right: none;background-color:red;}
    .right {border-left: none;background-color:red;}
//-->
</style>
<table>
    <tr>
        <td><input type="radio" name="inpt"></td>
        <td class="left">Název položky</td>
        <td class="right">Cena</td>
        <td><img src="obrazek.jpg" border="0" height="20" width="20"></td>
    </tr>
    <tr>
        <td><input type="radio" name="inpt"></td>
        <td class="left">Krátký název</td>
        <td class="right">600 Kč</td>
        <td><img src="obrazek.jpg" border="0" height="20" width="20"></td>
    </tr>
</table>
margin
Profil *
quatzael:
Logicky by to šlo udělat tabulkama
Že by bylo správné použít tabulku mě napadlo hned, protože očividně jde o tabulková data.

ale bohužel mi tam nejdou nastylovat bordery a pozadí pro dvě buňky vedle sebe tak, aby potom vypadaly jako jedna..
Takže neumíš nastylovat tabulky, tak sis usmyslel, že to půjde nějakým obskurním způsobem.

Pokud ti náhodou nebude stačit rada, kterou ti dal Keeehi, tak dej odkaz na živou ukázku svého tabulkového řešení a dej popis, nebo přidej obrázek, ze kterého bude jasné, kde to orámování dělá problém.
quatzael
Profil
Keeehi:
tohle právě ne.. já potřebuju, aby právě šířka toho divu byla proměnlivá v závislosti na tom obsahu včetně toho obalovýho!!!
Možná jsem se nevýjadřil úplně přesně dal jsem tam v ukázce dva seznamy a každej je jinak širokej v závislosti na tom obsahu.. To přesně potřebuju..
proto ten obalovej div nemůže mít width: 500px;

já to zkusím ještě jednou s těma tabulkama, ale myslím, že jsem to dělal přesně jak píšeš a nefungovalo to.. Na pozadí těch dvou buněk vedle sebe potřebuju i obrázek repeat-x a zaoblený rohy.. To všechno umím vyřešit, jenom mi to prostě nefungovalo.. tak to teda zkusím ještě jednou..

dík.
jenikkozak
Profil
quatzael:
tohle právě ne.. já potřebuju, aby právě šířka toho divu byla proměnlivá v závislosti na tom obsahu včetně toho obalovýho!!!
Pokud bys použil (méně vhodné) řešení pomocí plavání, můžeš oběma divům nastavit float:left a ten obalový vyhodit. Potom nastavit oběma divům obrázek s opakováním po ose x a nějak zařídit kulaté rohy (třeba tím, že do nich vložíš další prvky a těm pak obrázky na pozadí).

To všechno umím vyřešit, jenom mi to prostě nefungovalo.. tak to teda zkusím ještě jednou..
Pokud narazíš na problém, můžeš sem přidat živou ukázku.
quatzael
Profil
jenikkozak:
no už jsem to vyřešil tou tabulkou.. teď ale zas řeším jak se k jednotlivým elementům mám dostat pomocí selektorů z jQuery, takže jsem vedle v diskuzi Javascript založil nový vlákno: Jak na selektor prvku v sousední buňce tabulky v jQuery??

ty problémy nekončí, ach jo.. každopádně všem díky za radu..

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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