Potřebuji, aby se mi elementy zalamovaly pod sebe – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Potřebuji, aby se mi elementy zalamovaly pod sebe – CSS – Fórum – Programujte.comPotřebuji, aby se mi elementy zalamovaly pod sebe – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Marek
~ Anonymní uživatel
474 příspěvků
16. 2. 2013   #1
-
0
-

Ahoj, potřebuji, aby se mi na weby elementy <li>, které mám v <ul> zalamovaly pod sebe a ne aby roztahovaly dále šířku stránky, nebo se sami zmenšovali.

.abc{
    display: table;
    border-spacing: 0.313em;
    width: 100%;
    max-width: 1140px;
}

.abc ul {
   display: table-row;
   float: left;   
}
.abc ul li {
    display: table-cell;
    width: 15.4912%;
    height: 14.938em;
}


HTML 

<div class="abc">
        <ul>
          <li>
            OBSAH
          </li>
          <li>
           OBSAH
          </li>
  ...
   </ul>
</div>

Jednotlivé li mám nastylované jako rámeček, takže když zmenším šířku prohlížeče, tak chci aby se mi hodily pod sebe, zkoušel jsem u .abc ul li nastavit min-width, ale to nepomohlo, pořád se stránka roztahuje.

pomocí media query to zatím řešit nechci, protože vím, že by to mělo jít i bez nich.

Nahlásit jako SPAM
IP: 188.191.59.–
Reklama
Reklama
crazy
~ Moderátor
+10
Grafoman
16. 2. 2013   #2
-
0
-

vyhoď display: table-cell; a display: table-row; a mělo by se to pod sebe zalamovat

Nahlásit jako SPAM
IP: 147.32.31.–
All you need is vision and time.
Marek
~ Anonymní uživatel
474 příspěvků
16. 2. 2013   #3
-
0
-

#2 crazy
Já bych ale chtěl, aby těch bloků bylo třeba 6 vedle sebe a když se stránka zúží, tak aby třeba 3 odskočily. Ne je mít všechny pod sebou jednotlivě.

Nahlásit jako SPAM
IP: 188.191.59.–
null_while
~ Moderátor
+6
Věrný člen
17. 3. 2013   #4
-
0
-

#3 Marek

1. Zabal všechny elementy li do jedné třídy, kterou připiš k ul 

2. Nastav této třídě vlastnost clear a width

<ul class="obal">
.obal {
	max-width: 1200px;
	min-width: 200px;
        clear: both;
}

3. Všem dědicům tagu ul (všechny li) nastav šířku dělitelnou 2 beze zbytku

.abc ul li {
	width: 200px;
        /* float: left; */
}

Můžeš použít i ten float. 

Nahlásit jako SPAM
IP: 84.16.103.–
Webnia.cz - tvorba webových stránek
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 7 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý