Autor Zpráva
biker
Profil
#1 · Zasláno: 12. 3. 2005, 03:15:06
Odpovědět Citovat
Mohl byste mi prosím někdo poradit, jak udělat pomocí css pozicování (ne tabulkami) odsazení 3 slov od začátku buňky tabulky. Zkoušel jsem <span> vnořený i za sebou, ale vždy se ten následující odkazoval na šířku toho předcházejícího. Vzhledem k tomu, že nevím dopředu, jak dlouhá ta slova budou, rozháže se mi to postupně.

Potřeboval bych to takhle:
1.slovo odsazené o 10px od začátku buňky
2.slovo odsazené o 200px od začátku buňky
3.slovo odsazené o 450px od začátku buňky

Díky moc za radu.
meca
Profil
#2 · Zasláno: 12. 3. 2005, 09:43:46
Odpovědět Citovat
Neim jesli jsem to dobře pochopil, ale napadá mě jedině...

<span class="slovo1">slovo1</span>
<span class="slovo2">slovo2</span>
<span class="slovo2">slovo2</span>

a pak:

.slovo1 { position:absolute; left:10px}
.slovo2 { position:absolute; left:200px}
.slovo3 { position:absolute; left:450px}

... je to sic trochu zvláštní, ale myslim, že by to mělo fungovat...
Plaváček
Profil
#3 · Zasláno: 12. 3. 2005, 10:13:31
Odpovědět Citovat
Takhle to samozřejme fungovat nebude, jednak absolutně pozicovat můžeš elementy umístěné v relativně nebo absolutně umístěném bloku (což zřejme buňka tabulky nebude), jednak SPAN ja řádkový prvek a nelze mu nastavit šířku, která je nutnou podmínkou pro to, abys mohl blokový element pozicovat absolutně (fuj, to jsem to napsal složitě).

Zkrátka, bez znalosti kódu je to trochu hádání, ale zkus to třeba takhle:

CSS

p {
margin: 0
}

p.o10 {
padding-left: 10px;
}

p.o200 {
padding-left: 200px;
}


p.o450 {
padding-left: 450px;
}


HTML

<p class="o10">slovo o 10px odsazene</p>
<p class="o200">slovo o 200px odsazene</p>
<p class="o450">slovo o 450px odsazene</p>


Nebo můžeš využít vlastnosti text-indent (CSS kod je analogický - p.o10 {text-indent: 10px;} atd.)

A třetí možností je relativní pozicování (Yuhůovo oblíbené), opět analogicky pro jednotlivé odstavce:

p.o10{
position:relative;
left: 10px;
}

atd.
Fred
Profil
#4 · Zasláno: 12. 3. 2005, 10:26:22
Odpovědět Citovat
Plaváček Meca to pochopil, jako že ty tři slova budou na jednom řádku, čtu ten dotaz pořád dokola a přesto že mu dost nerozumím, taky se mi zdá, že to chce na jednom řádku, aspoň dle nadpisu. Možná něco jako tady http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=38 50
Plaváček
Profil
#5 · Zasláno: 12. 3. 2005, 10:29:10
Odpovědět Citovat
Aha, tak to jsem asi špatně pochopil, nejspíše by měl tazatel upřesnit svůj dotaz.
Leo
Profil
#6 · Zasláno: 12. 3. 2005, 13:05:26 · Upravil/a: Leo
Odpovědět Citovat
Rekl bych, ze proste chce simulovat v HTML a CSS prosty tabulator jako ho zna rekneme z Wordu, a to na pozici 10, 200 a 450 pixelu, Leo
biker
Profil
#7 · Zasláno: 12. 3. 2005, 17:13:36
Odpovědět Citovat
Díky za rady. Ano, Leo má pravdu, tak jsem si to představoval. Potřebuji odsadit jednotlivá slova na řádku. Omlouvám se za nepřesný dotaz. Už jsem to vyřešil pomocí <div>. <div> mi předtím vadil kvůli tomu, že zalomí řádek. Ale po přidání vlastnosti display: inline to neudělá, což potřebuji. Nastavil jsem si tedy velikost jednotlivých bloků, jako u tabulky.

Výsledný kód:
CSS
div {
display:inline
}
div.o10 {
width:10px;
}

div.slovo1 {
width:190px;
}

div.slovo2 {
width:250px;
}
div.slovo3 {
width:150px;
}

HTML
<div class="o10">&nbsp;</div>
<div class="slovo1">slovo1</div>
<div class="slovo2">slovo2</div>
<div class="slovo3">slovo3</div>
Leo
Profil
#8 · Zasláno: 12. 3. 2005, 17:18:51
Odpovědět Citovat
To jste tam zrovna mohl nechat span, te je inline jaksi od prirozeni :-) Problem je v tom, ze podle specifikace CSS nemuzete inline elementum nastavit sirku, jak uz psal tusim Plavacek. Ze to v nekterych prohlizecich funguje je vec jina. Takze jedine reseni asi bude nastavit sirku blokovym elementum, treba ten div, plus je nechat radit vedle sebe tim ze jim nastavite float: left, Leo
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0