NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
valgard
Člen
Avatar
valgard:11.12.2012 15:58

Zdravím. Potrebujem zmeniť pozíciu tlačítiek v elemente. Napr. mám v article vložený text a pod textom 2 tlačítka. Chcem ale zmeniť ich pozíciu -posunúť ich, a to aj nezávisle na sebe. Momentálne som to vyriešil cez tabuľku. Vytvoril som si tabuľku a tlačítka som si umiestnil do buniek tam, kde som potreboval.

Napadlo ma to ešte skúsiť cez position: absolute. Problém je ale v tom, že na stránke mám 5x article s textom a ku každému sú 2 tlačítka. Teda by bolo asi potreba nastavovať pozíciu pre všetkých 10 tlačítok. To už to radšej urobím cez tabuľku a raz nastylujem cez css.

Ide to urobiť nejako inak (jednoduchšie) ?

 
Odpovědět
11.12.2012 15:58
Avatar
Kit
Tvůrce
Avatar
Odpovídá na valgard
Kit:11.12.2012 16:10

float.

Nahoru Odpovědět
11.12.2012 16:10
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
valgard
Člen
Avatar
Odpovídá na Kit
valgard:12.12.2012 11:53

Hmm, float ma napadol tiež, akurát neviem ako to pomocou toho urobiť ...

Mám:
<section>
<article>
<p>Nejaký text</p>
<table>
Tu mám urobený pomocou tabuľky zoznam vlastností
</table>
<button>Prvé tlačítko</button>
<button>Druhé tlačítko</button>
</article>

V <section> mám ešte 4x <article> s rovnakou štruktúrou.

</section>

Neviem ale teraz, ako pomocou float posunúť tie tlačítka na nejakú pozíciu, ako chcem. Poradíš prosím ?

 
Nahoru Odpovědět
12.12.2012 11:53
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na valgard
David Hartinger:12.12.2012 12:56

K vložení zdrojových kódu prosím používej tlačítko "Vložení zdrojových kódu", jinak se to nedá číst. Tlačítku dáš jednoduše nějakou třídu, třeba tlacitko:

<button class="tlacitko">Prvé</button>
<button class="tlacitko">Druhé</button>

A do CSS přidáš:

.tlacitko
{
   float: left;
}
Nahoru Odpovědět
12.12.2012 12:56
New kid back on the block with a R.I.P
Avatar
Kit
Tvůrce
Avatar
Odpovídá na David Hartinger
Kit:12.12.2012 13:42

Nebo nebude zbytečně vytvářet další třídu, ale nastyluje přímo button.

Nahoru Odpovědět
12.12.2012 13:42
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Kit
David Hartinger:12.12.2012 13:45

Jasně, ideálně v kontejneru, ve kterém je má :) A ten button nevím jak funguje, možná je lepší nastylovat <a>.

Nahoru Odpovědět
12.12.2012 13:45
New kid back on the block with a R.I.P
Avatar
valgard
Člen
Avatar
valgard:12.12.2012 13:48

Sorry za ten kód, skúšal som to vložiť tak ako sa má, ale nešlo mi to ...

Skúšam to cez ten float, ale robím to nejako blbo, pretože sa nič moc nedeje ... V html mám:

<article>
            <header>
                  <h1>Rasa1</h1>
            </header>
            <br />
            <p>Popis rasy</p>
            <br />
                  <h3>Startovní vlastnosti rasy:</h3>
            <table border="0">
                  <tr>
                      <td>vlastnost1:</td>
                      <td>hodnota1</td>
                  </tr>
                  <tr>
                      <td>vlastnost2:</td>
                      <td>hodnota2</td>
                  </tr>
                  <tr>
                      <td>vlastnost3:</td>
                      <td>hodnota3</td>
                  </tr>
            </table>
            <br />
            <button class="tlacitko">Prve</button>
            <button class="tlacitko">Druhe</button>
            </article>

Tlačítka sú zobrazené pod vlastnosťami na ľavej strane stránky (vedľa seba).

Keď urobím float:left, tak sa mi akurát tlačítka ako keby zrazia k sebe a posunú sa asi o pol centimetra nižšie na stránke.
Ak zadám float: top; tak sú v pozícii, ako bez stylovania.

Ja ale potrebujem tie tlačítka posunúť napr na bok toho textu, čo je v article, ale niekde inde. A aj do presnej pozície, nie len na vľavo, pravo, hore, alebo dole.

 
Nahoru Odpovědět
12.12.2012 13:48
Avatar
Kit
Tvůrce
Avatar
Odpovídá na valgard
Kit:12.12.2012 14:29

A ten <br /> tam máš kvůli čemu?

Nahoru Odpovědět
12.12.2012 14:29
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
valgard
Člen
Avatar
Odpovídá na Kit
valgard:12.12.2012 14:48

No mám to kvoli "odskoku" medzi jednotlivými časťami, ale hneď ako som uvidel tvoju otázku, tak ma napadlo, že asi sa to dá riešiť cez margin že ?

Inak s float som to už nejako vyriešil. Nahodil som float aj na <table> a už sami tlačítka posúvaju po <article>. Ich pozíciu upresním cez margin ? Aspoň tak to teraz skúšam ...

Editováno
 
Nahoru Odpovědět
12.12.2012 14:48
Avatar
Kit
Tvůrce
Avatar
Odpovídá na valgard
Kit:12.12.2012 15:29

Značka br totiž likviduje float.

Nahoru Odpovědět
12.12.2012 15:29
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
valgard
Člen
Avatar
Odpovídá na Kit
valgard:12.12.2012 15:42

Jo díky za rady. Nejako som si to neuvedomil, keď som to čítal v html manuáli. Myslel som, že je to len v spojení s clear.

 
Nahoru Odpovědět
12.12.2012 15:42
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na valgard
David Hartinger:12.12.2012 15:48

Nějaké věci v CSS jsou velmi neintuitivní a špatně navržené, chce to chvíli cviku, než si na to člověk zvykne. Určitě si na mě vzpomeneš, až budeš třeba něco vertikálně centrovat :)

Nahoru Odpovědět
12.12.2012 15:48
New kid back on the block with a R.I.P
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.