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

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny

Předmět	Autor	Datum
<div style="width: 500px;"> <div style="float: left; width: 100px; height: 100px; border: 1px solid… nový 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… nový 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… nový 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… nový 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… nový 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… nový msx. 12.10.2011 16:46	msx.	12.10.2011 16:46

<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