Autor Zpráva
xxMartinxx
Profil *
#1 · Zasláno: 9. 2. 2015, 21:34:29 · Upravil/a: Moderátor (editace znemožněna) o 15 minut později
Odpovědět Citovat
Ahoj,

už delší dobu řeším problém, jak zobrazit text vedle tabulky. Našel jsem na internetu tento web, a vypadá to, že tomu skvěle rozumíte, tak bych se na vás chtěl obrátit se svým problémem.

Takto vypadá nyní můj popisek, já bych však potřeboval nacpat popis, který se nyní nachází pod tabulkou, vedle té velikostní tabulky Níže pak posílám přepis html, a kdyby jste našli nějaký elegantní a co možná nejsnadnější způsob jak tohoto docílit, byl bych vám moc zavázán.


Červené lordsy s květinovým vzorem

Velikost Délka stélky
35 22,5 cm
36 23,5 cm
37 24 cm
38 24,5 cm
39 25 cm
40 25,5 cm
41 26 cm
*Tato tabulka ukazuje přibližnou hodnotu

Jak zjistit správnou velikost?

Nechte se zlákat tímto jedinečným, stylovým modelem, který zaujme na první pohled! Tyto dámské lordsy v červené barvě z jarní kolekce jsou kvalitně vyrobeny z lakované, ekologické kůže. Lordsy jsou charakteristické svými výřezy na bocích. Stélka z přírodní kůže pohlcuje vlhkost a zvyšuje komfort.

Celý povrch zdobí květinový vzor, díky kterému je model velmi veselý, dívčí a dodává modelu kouzlo. Zesílená podrážka z gumy chrání nohu před povrchem. Lordsy jsou ideální na každodenní nošení, do práce, do školy nebo na rande.

Html přepis: 

<h2 style="text-align: left;"><span style="color: #f90523;">&nbsp;Červen&eacute; lordsy s květinov&yacute;m vzorem</span></h2>
<!-- TABELA 1 -->
<table style="width: 140px; height: 161px;">
  <tbody>
    <tr style="background-color: #050404;">
      <td style="height: 25px; text-align: center;"><strong><span style="color: #ffffff; font-size: 9pt;">Velikost</span></strong></td>
      <td style="height: 25px; text-align: center;"><span style="color: #ffffff; font-size: 9pt;"><strong>D&eacute;lka st&eacute;lky</strong><br /></span></td>
    </tr>
    <tr style="background-color: #f4f4f4;">
      <td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>35</strong></span></td>
      <td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">22,5 cm</span></td>
    </tr>
    <tr style="background-color: #f4f4f4;">
      <td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>36</strong></span></td>
      <td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">23,5 cm</span></td>
    </tr>
    <tr style="background-color: #f4f4f4;">
      <td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>37</strong></span></td>
      <td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">24 cm</span></td>
    </tr>
    <tr style="background-color: #f4f4f4;">
      <td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>38</strong></span></td>
      <td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">24,5 cm</span></td>
    </tr>
    <tr style="background-color: #f4f4f4;">
      <td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>39</strong></span></td>
      <td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">25 cm</span></td>
    </tr>
    <tr style="background-color: #f4f4f4;">
      <td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>40</strong></span></td>
      <td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">25,5 cm</span></td>
    </tr>
    <tr style="background-color: #f4f4f4;">
      <td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>41</strong></span></td>
      <td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">26 cm</span></td>
    </tr>
  </tbody>
</table>
<p style="text-align: left;"><span style="color: #000000;"><strong><strong><span style="font-size: 14px;"><strong><span style="font-size: 12px;"><span style="font-size: 9pt;">*<strong>Tato tabulka ukazuje přibližnou hodnotu</strong></span></span></strong></span></strong></strong></span></p>
<p><strong><strong><span style="font-size: 14px;"><strong><span style="color: #0000ff; font-size: 12px;"><a href="xx"><span style="color: #0000ff;">Jak zjistit spr&aacute;vnou velikost?</span></a></span></strong></span></strong></strong></p>
<p>Nechte se zl&aacute;kat t&iacute;mto jedinečn&yacute;m, stylov&yacute;m modelem, kter&yacute; zaujme na prvn&iacute; pohled! Tyto d&aacute;msk&eacute; lordsy v červen&eacute; barvě z jarn&iacute; kolekce jsou kvalitně vyrobeny z lakovan&eacute;, ekologick&eacute; kůže. Lordsy jsou charakteristick&eacute; sv&yacute;mi v&yacute;řezy na boc&iacute;ch. St&eacute;lka z př&iacute;rodn&iacute; kůže pohlcuje vlhkost a zvy&scaron;uje komfort.</p>
<p>Cel&yacute; povrch zdob&iacute; květinov&yacute; vzor, d&iacute;ky kter&eacute;mu je model velmi vesel&yacute;, d&iacute;vč&iacute; a dod&aacute;v&aacute; modelu kouzlo. Zes&iacute;len&aacute; podr&aacute;žka z gumy chr&aacute;n&iacute; nohu před povrchem. Lordsy jsou ide&aacute;ln&iacute; na každodenn&iacute; no&scaron;en&iacute;, do pr&aacute;ce, do &scaron;koly nebo na rande.</p>
<table>
  <tbody>
    <tr>
      <td>Materi&aacute;l:</td>
      <td>Lakovan&aacute; eko kůže</td>
    </tr>
  </tbody>
</table>

Moderátor juriad: Provedl jsem já.

Moderátor juriad: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
lionel messi
Profil
#2 · Zasláno: 9. 2. 2015, 21:41:14 · Upravil/a: Moderátor (editace znemožněna) o 8 minut později
Odpovědět Citovat
xxMartinxx:
Sformátuj kód alebo dodaj odkaz na živú ukážku.
Moderátor juriad: Vyřízeno
Tomáš123
Profil
#3 · Zasláno: 9. 2. 2015, 21:44:55 · Upravil/a: Tomáš123 o 26 minut později
Odpovědět Citovat
xxMartinxx:
Celý príspevok som nečítal, ale myslím, že ti pomôže CSS vlastnosť float. Tabuľke, ktorú chceš mať zarovnanú vľavo nastavíš: 
.tabulka {
  float: left;
  width: npx;
}
a prvku, ktorý má byť zarovnaný napravo zas: 
.prvok-vpravo {
  float: right;
  width: npx;
}
Doporučujem prečítať si odkázané materiály. Ak sem do diskusie lepíš kód, obaľ ho značkami [pre].
xxMartinxx
Profil *
#4 · Zasláno: 9. 2. 2015, 21:51:09
Odpovědět Citovat
Ahoj, posílám zformátovaný kód, děkuji rovnou za odkaz 
<h2 style="text-align: left;"><span style="color: #f90523;">&nbsp;Červen&eacute; lordsy s květinov&yacute;m vzorem</span></h2>
<!-- TABELA 1 -->
<table style="width: 140px; height: 161px;">
<tbody>
<tr style="background-color: #050404;">
<td style="height: 25px; text-align: center;"><strong><span style="color: #ffffff; font-size: 9pt;">Velikost</span></strong></td>
<td style="height: 25px; text-align: center;"><span style="color: #ffffff; font-size: 9pt;"><strong>D&eacute;lka st&eacute;lky</strong><br /></span></td>
</tr>
<tr style="background-color: #f4f4f4;">
<td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>35</strong></span></td>
<td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">22,5 cm</span></td>
</tr>
<tr style="background-color: #f4f4f4;">
<td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>36</strong></span></td>
<td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">23,5 cm</span></td>
</tr>
<tr style="background-color: #f4f4f4;">
<td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>37</strong></span></td>
<td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">24 cm</span></td>
</tr>
<tr style="background-color: #f4f4f4;">
<td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>38</strong></span></td>
<td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">24,5 cm</span></td>
</tr>
<tr style="background-color: #f4f4f4;">
<td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>39</strong></span></td>
<td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">25 cm</span></td>
</tr>
<tr style="background-color: #f4f4f4;">
<td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>40</strong></span></td>
<td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">25,5 cm</span></td>
</tr>
<tr style="background-color: #f4f4f4;">
<td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>41</strong></span></td>
<td style="background-color: #f9f9f9; text-align: left;"><span style="font-size: 9pt;">26 cm</span></td>
</tr>
</tbody>
</table>
<p style="text-align: left;"><span style="color: #000000;"><strong><strong><span style="font-size: 14px;"><strong><span style="font-size: 12px;"><span style="font-size: 9pt;">*<strong>Tato tabulka ukazuje přibližnou hodnotu</strong></span></span></strong></span></strong></strong></span></p>
<p><strong><strong><span style="font-size: 14px;"><strong><span style="color: #0000ff; font-size: 12px;"><a href="http://www.botino.cz/cz-clanek-355.html"><span style="color: #0000ff;">Jak zjistit spr&aacute;vnou velikost?</span></a></span></strong></span></strong></strong></p>
<p>Nechte se zl&aacute;kat t&iacute;mto jedinečn&yacute;m, stylov&yacute;m modelem, kter&yacute; zaujme na prvn&iacute; pohled! Tyto d&aacute;msk&eacute; lordsy v červen&eacute; barvě z jarn&iacute; kolekce jsou kvalitně vyrobeny z lakovan&eacute;, ekologick&eacute; kůže. Lordsy jsou charakteristick&eacute; sv&yacute;mi v&yacute;řezy na boc&iacute;ch. St&eacute;lka z př&iacute;rodn&iacute; kůže pohlcuje vlhkost a zvy&scaron;uje komfort.</p>
<p>Cel&yacute; povrch zdob&iacute; květinov&yacute; vzor, d&iacute;ky kter&eacute;mu je model velmi vesel&yacute;, d&iacute;vč&iacute; a dod&aacute;v&aacute; modelu kouzlo. Zes&iacute;len&aacute; podr&aacute;žka z gumy chr&aacute;n&iacute; nohu před povrchem. Lordsy jsou ide&aacute;ln&iacute; na každodenn&iacute; no&scaron;en&iacute;, do pr&aacute;ce, do &scaron;koly nebo na rande.</p>
<table>
<tbody>
<tr>
<td>Materi&aacute;l:</td>
<td>Lakovan&aacute; eko kůže</td>
</tr>
</tbody>
</table>
Tomáš123
Profil
#5 · Zasláno: 9. 2. 2015, 21:54:54
Odpovědět Citovat
xxMartinxx:
Očakával som, že sa vrátiš s výsledkom... Vyskúšaj, to čo som ti písal vyššie [#3]. Ak tak sa vráť s tým čo ti nefunguje.

Pre zhrnutie: Potrebuješ dostať dva prvky na stránke vedľa seba, však.
lionel messi
Profil
#6 · Zasláno: 9. 2. 2015, 21:56:15
Odpovědět Citovat
xxMartinxx:
Ako už písal Tomáš123, bude stačiť použiť float (nezabudni potom na vhodnom mieste ukončiť obtekanie pomocou clear).

Vyhovuje toto riešenie: jsfiddle.net/t5k6w2eh?

Na záver ešte dodám odkaz na ďalší materiál o obtekaní: Obtékání v CSS
xxMartinxx
Profil *
#7 · Zasláno: 9. 2. 2015, 21:59:06
Odpovědět Citovat
Tak tak, akorát vůbec nevím, kde to mám vložit to co si mi posílal, tak teď studuju ten odkaz a povyzkouším si to.
Tomáš123
Profil
#8 · Zasláno: 9. 2. 2015, 22:02:24
Odpovědět Citovat
xxMartinxx:
„Tak tak, akorát vůbec nevím, kde to mám vložit to co si mi posílal“
Stačí nahradiť pôvodný kód.

Mimo témy: Nikde v kóde nevidím hlavičku stránky, ktorou by mal HTML dokument rozhodne disponovať. Mohol by si v nej tiež uviesť kódovanie stránky a nemusel všetky znaky, ktoré obsahujú diakritiku prepisovať entitami.
xxMartinxx
Profil *
#9 · Zasláno: 9. 2. 2015, 22:07:24
Odpovědět Citovat
Jo mám to kluci, děkuji moc, jsem ani nečekal že to půjde tak snadno, fakt moc děkuji. Snad ještě, jde docílit toho aby ten text, co teď mám vedle tabulky nebyl tak moc na ní nalepený? Tzv. aby vedle tabulky a obtékajícího textu bylo nějaké volné místo.

Jinak tomáši, ten kód je jenom část stránky, proto tam není hlavička.
juriad
Profil
#10 · Zasláno: 9. 2. 2015, 22:08:29
Odpovědět Citovat
xxMartinxx:
Použij vlastnost margin - tou určuješ požadavky na volné místo kolem.
xxMartinxx
Profil *
#11 · Zasláno: 9. 2. 2015, 22:13:29
Odpovědět Citovat
Super, mám to teď podle svých představ, děkuji ještě jednou moc kluci, opravdu mi to pomohlo
mimochodec
Profil
#12 · Zasláno: 10. 2. 2015, 09:48:48
Odpovědět Citovat
xxMartinxx:
Nauč se používat css. Toto vyloženě volá po použití tříd: 
<td style="height: 23px; text-align: center; background-color: #f4f4f4;"><span style="font-size: 9pt;"><strong>35</strong></span></td>
Časová prodleva: 9 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0