Diskuze: Button - zmena pozície

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

valgard

Člen

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

Kit

Tvůrce

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ů.

valgard

Člen

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

David Hartinger

Vlastník

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

Kit

Tvůrce

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ů.

David Hartinger

Vlastník

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

valgard

Člen

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

Kit

Tvůrce

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ů.

valgard

Člen

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 12.12.2012 14:49

Nahoru Odpovědět

12.12.2012 14:48

Kit

Tvůrce

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ů.

valgard

Člen

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

David Hartinger

Vlastník

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.