Jak vyřešit umístění prvků: Float nebo Table?

Zdravím, řeším umístění prvků, žádaná úprava viz obrázek (tabulku přirazit nahoru). Současný stav je nakodovaný přes CSS Float, zkusil jsem několik uprav, ale už se v tom ztrácím. Kód postnu zítra, pokud budete chtít. Můžete někdo prosím nastínit řešení? Jedno jakým způsobem.

float-nebo-table.jpg 18.78 KiB

Předmět	Autor	Datum
Ide to šikovne aj cez float. Keď použiješ float, kód je prehľadnejší. Tabuľka má plno vnorených elem… msx. 12.10.2011 00:29	msx.	12.10.2011 00:29
<div style="width: 500px;"> <div style="float: left; width: 100px; height: 100px; border: 1px solid… msx. 12.10.2011 00:38	msx.	12.10.2011 00:38
Pravdepodobne si chcel tabuľku priraziť hore, čo som si všimol neskôr. Tu je jednoduché riešenie, kt… msx. 12.10.2011 00:44	msx.	12.10.2011 00:44
Ahoj, díky za rychlou odpověď :-) ,inspiroval tebou a internetem a tady je výsledek. Použiju 4. přík… poslední dzutango 12.10.2011 22:12	dzutango	12.10.2011 22:12
A nemáš mezi tím tlačítkem třeba nějaká <br>, nebo prázdné odstavce etc.? Pokud ne, možná by stačilo… Kráťa 12.10.2011 01:23	Kráťa	12.10.2011 01:23
To netreba, stačí tú tabuľku dať NAD(!) CSS štýl "clear: both" a dať mu štýl "float: right". Samozre… msx. 12.10.2011 15:37	msx.	12.10.2011 15:37
Já nevím, jestli a kde má "clear: both". S marginem do mínusu jsem to napsal "naslepo", jelikož by n… Kráťa 12.10.2011 15:45	Kráťa	12.10.2011 15:45
lenže ak tam náhodou bude mať v jednom riadku NOVINKA a v druhom AKCIA, tak bude musieť byť nie -54… msx. 12.10.2011 16:46	msx.	12.10.2011 16:46

Ide to šikovne aj cez float. Keď použiješ float, kód je prehľadnejší. Tabuľka má plno vnorených elementov. Pri klasických DIVoch lepšie nastavíš aj vzhľad. Ak si zvykneš na floaty, bude sa ti s nimi robiť tak dobre ako s tabuľkami.

<div style="width: 500px;">
  <div style="float: left; width: 100px; height: 100px; border: 1px solid black;">
    Tu je obrazok
  </div>
  <span>Text o iPod nano</span>
  <div style="float: right;">
    <div>
      Vypredaj
    </div>
    <button style="float: right;">
      tlacitko
    </button>
  </div>
  <br style="clear: both;" />
  <div style="float: right; width: 200px; border: 1px solid black;">
    tu je ta tabulka    
  </div>
  <br style="clear: both;" />
</div>

Toto je príklad ako sa to dá. S tabuľkou by to bolo oveľa dlhšie. No a v reále by boli CSS samozrejme v samostatnom súbore.

Pravdepodobne si chcel tabuľku priraziť hore, čo som si všimol neskôr. Tu je jednoduché riešenie, ktoré si bude vyžadovať ešte úpravy, ale použiteľné to je:

<div style="width: 500px;">
  <div style="float: left; width: 100px; height: 100px; border: 1px solid black;">
    Tu je obrazok
  </div>
  <span>Text o iPod nano</span>
  <div style="float: right;">
    <div style="text-align: right;">
      Vypredaj
    </div>
    <button style="float: right;">
      tlacitko
    </button>
    <br style="clear: both;" />
    <div style="width: 200px; border: 1px solid black;">
      tu je ta tabulka    
    </div>
  </div>
  <br style="clear: both;" />
</div>

Ahoj, díky za rychlou odpověď ,inspiroval tebou a internetem a tady je výsledek. Použiju 4. příklad , ikdyž je tam použito tabulky. Je nutná, protože chci tu spodní tabulku vložit na pevné místo bez ohledu na výšku právého sloupce (cena, vložit do košíku, jen přes net) , jelikož se bude často měnit (viz obr). Uvědomil jsem si to až dnes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  
<p>1.</p>
<!-- PRvni navrch -->  
  <div style="width: 500px;">
  <div style="float: left; width: 130px; height: 130px; border: 1px solid black;">
    <img src="cs-default-home.jpg" >
  </div>  
  <span>Text o i fg . ...jkdgkdf gk d ddddd gfff fffff fffff f fdd dd ddd  f..  ...   ......</span>  <!--ZALAMOVANI nefunguje bez mezer mezi slovy , zalamuje se az o okraj 1. divu!-->
  <div style="float: right;">
    <div style="text-align: right;">
      Vypredaj
    </div>
    <div style="text-align: right;">
      Jen online
    </div>
    <button style="float: right;">
      tlacitko
    </button>
    <br style="clear: both;" /> 
    <div style="width: 200px; border: 1px solid black;">
      tu je ta tabulka    
    </div>
  </div>
  <br style="clear: both;" />
</div>


<p></p>
 <br><br><br><br>
 
<p>2.</p>
<!--Muje uprava s Float-->
<div style="width: 500px;">
  
  <div style="float: left; width: 130px; height: 130px; border: 3px solid black;">
    <img src="cs-default-home.jpg" >
  </div>
  
  <div style="float: left; width: 270px; ">Text o i fg .hggk d dd ddd gfff fffffff ffff fdddd ddd...   ...... llskf   dfs jak kde kam kdy </div><!-- zalamuje se celkem spravne-->
  
  <div style="float: right; width: 80px; text-align: right;">
  
      Vypredaj<br> <!--nebýt tohoto řádku, nebo krátkého textu  tak je zobrazení správné-->
      Jen přes net
    <button >
      tlacitko
    </button>
  </div>
   <br><br>
  <div style="width: 200px; border: 1px solid black; float: right;">
      tu je ta tabulka    
    </div>
    <br style="clear: both;" />  <!-- tak tady nevim jak se uplatni-->
    
</div>
 <p>MOI</p>


 <br><br><br><br>



 <!--3. Muje uprava s Float, všude LEFT !! a vypadá to dobře-->
<p>3.</p> 
<div style="width: 500px;"><!--Pokud pvni tři elementy nenaplni šířku bude tabulka opticky vyčnívat z uspořádání, pokud ji přesáhnou,uspořádání se zhroutí (bacha na šířku rámečků )--> 
  
  <div style="float: left; width: 130px; height: 130px; border: 3px solid black;">
    <img src="cs-default-home.jpg" >
  </div>
  
  <div style="float: left; width: 283px; ">Text o i fg .hggk d dd ddd gfff fffffff ffff fdddd ddd...   ...... llskf   dfs jak kde kam kdy </div><!-- zalamuje se  spravne-->
  
  <div style="float: left; width: 80px; text-align: right;">
  
      Vypredaj<br> 
      Jen přes net
    <button >
      tlacitko
    </button>
  </div>
   <br><br>
  <div style="width: 200px; border: 1px solid black; float: right;">
      tu je ta tabulka    
    </div>
    <br style="clear: both;" />  <!-- tak tady nevim jak se uplatni-->
    
</div>
 <p>MOI</p>

 <br><br><br><br>





<!-- 4. Muje uprava s table-->
<p>4.</p> 
<div style="width: 500px; border: 1px solid red;">
  <div style="float: left; width: 130px; height: 130px; border: 1px solid black;">
    <img src="cs-default-home.jpg" >
  </div>  
  
  <div style="float: left; width: 285px; ">Text o i fg .hggk d dd ddd gfff fffffff ffff fdddd ddd...   ...... llskf   dfs jak kde kam kdy </div><!-- zalamuje se  spravne--> 
  
  
  
   <table style="text-align: right; float: left; width: 80px; height: 105"><tr><td> <!-- původně div--> 
      Vypredaj<br> <!--nebýt tohoto řádku, nebo krátkého textu  tak je zobrazení správné-->
      Jen přes net
    <button >
      tlacitko
    </button>
    
  </td></tr></table>  

    
  <div style="width: 200px; border: 1px solid black; float: right; margin: 3px;">
      tu je ta tabulka    
  </div>
  
  
  <br style="clear: both;" />
  
</div>

 <br><br><br><br>



  </body>
</html>

float-nebo-table.jpg 34.07 KiB

A nemáš mezi tím tlačítkem třeba nějaká <br>, nebo prázdné odstavce etc.?
Pokud ne, možná by stačilo dát jen horní margin do mínusu.

To netreba, stačí tú tabuľku dať NAD(!) CSS štýl "clear: both" a dať mu štýl "float: right". Samozrejme bude musieť zariadiť, aby sa tie tlačítka a ceny atď. zobrazovali pod sebou a nie vedľa seba. To porieši tak, že ich dá, napr., každý ten element do DIVu s nastavením "text-align: right", prípadne ich oddelí obyčajnými <br>.

Doplnené: Mínusový margin by som ani neskúšal, lebo staršia Opera s ním mala problém (znulovala ho), neviem či aj nová, ale celkovo s mínusmi sú často problémy ako som vypozoroval. Takže mínusy len v nutných prípadoch a otestovať vo všetkých prehliadačoch.

Já nevím, jestli a kde má "clear: both". S marginem do mínusu jsem to napsal "naslepo", jelikož by nebylo třeba žádných úprav, pouze to margin-top: -54px, či tak něco, přičemž by to mohlo fungovat, ať tam má cokoli. Jen by se přidalo "slovo" ke stávajícímu.

lenže ak tam náhodou bude mať v jednom riadku NOVINKA a v druhom AKCIA, tak bude musieť byť nie -54 ale napr. -48 a načo to odhadovať, keď to ide jednoduchšie.

Samozrejme, je možné, že to nie je riešené tak jednoducho ako som to popísal. Teoreticky to nemusí to byť pod "clear: both", ale nejako inak a potom by asi riešenie bolo inakšie, ale skôr sa prikláňam k riešeniu, ktoré nie je závislé na množštve (myslím počet riadkov) textu nad tým.

Doplnené: Alebo tam nebude ten text "pouze online" a vtedy by tam bolo nie -54, ale dokonca (odhad) -62.

Zpět do poradny Odpovědět na původní otázku Nahoru