PC-HELP.CZ

Potřeboval bych popokopnout jak nejjednodušeji nastavit odstavce (viz obrázek)


Potřeboval bych tam ten červený čtvereček před textem a aby ten text byl odsazen "x" pixelů od toho čtverečku. Prostě tak, jak je to na obrázku. Každá rada dobra.

Horní menu

- Formát - odrážky a číslování :)

A už si můžeš hrát :)

ten obrázek před textem můžeš třeba přes seznamy(ol,li,ul,kdovíco eště...) nebo přes :before pseudotřídu
to odražení třeba přes padding/margin ?

Mírně doplním CZechBoYe:
Nejjednodušší (a čisté) řešení je odrážkový seznam s vlastnostmi list-style-type:none (zrušení odrážek) a kostičku vložit jako nerepetovaný obrázek na pozadí:
li {background: url('kosticka.gif') no-repeat left center;}.

Teoreticky správně by sice bylo list-style-type: square, ale problém nastává už při jiné barbvě kostičky. Ne snad, že by nebyl řešitelný, ale je to drbání levou nohou za pravým uchem; krom toho nelze ovlivnit polohu kostičky.

V případě kostičky v podobě obrázku by bylo jistě správné list-style-type: image, ale ani s takovou kostičkou se nedá pohybovat.
Pokud by náhodou seděla na správném místě, je to dobré řešení, ale často je takový obrázek nehezky posunutý a než laborovat s jeho úpravou (přidání neviditelných pixelů na patřičnou stranu), je řešení pomocí background-image to nejjednodušší (a přitom nikterak nesprávné), co lze použít.

Více o pozadí viz http://www.jakpsatweb.cz/css/background.html

Z takovýchto teorií mi jde hlava kolem. Nejlepší by pro mě bylo ukázat příklad, který máte ozkoušený. Sám teď nevím, do jakýho způsobu jít. Tohhle "odstavcování" jsem nikdy nedělal.

Tohle ale taky nejsou odstavce – to je typický nečíslovaný seznam (<ul><li>).
A takhle to funguje: http://mfp.php5.cz/ukazky/odrazky/

při dvouřádkovým textu je ten obdélníček uprostřed obou řádků, neměl by být spíše před prvním řádkem ?
Já bych spíš zkusil ten list-type jako obrázek, ještě jsem to nezkoušel, zkusim doma

Při list-style-type neovlivníš polohu odrážky.
Pokud je jako obrázek na pozadí, její vzdálenost ovlivníš levým paddingem a polohu (dokonce i včetně vzdálenosti) souřadnicemi (background-position).
V předchozí ukázce mi vyšel obrázek na prostředek proto, že měl souřadnice left center. Opravil jsem je na 0 13px a koukni se na to (původní odkaz).