Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

Zdravím narazil jsem na problém dělám webové stránky a když se do tagu <section> snažím rozdělit 2 věci vedle sebe pomocí Divu tak tag section to bere jak bych do něho nic nevložil a neroztahuje se podle rozložení obsahu a rozhazuje celé formátování stránky a to hlavně na mobilu. Děkuji za jakoukoliv radu.

article section.clanek{
  position: relative;
    width: 100%;
    height: 50%;
    background: #ccc;
    margin-top: 7%;
 }

 div.pr1{
  position: relative;
  width: 45%;
  float: left;
  margin: 1%;
 }
 div.pr2{
  position: relative;
  width: 45%;
  float: right;
  margin: 1%;
 }
<article>
<section class="clanek">
    <h2>Cena a další design na vyžádání </h2>  <br>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek.jpg"></a></div>
        <div class="pr2"><a href="css/obraz/produkty/vnitrek2.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek2.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek3.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek3.jpg"></a></div>
        <div class="pr2"><a href="css/produkty/vnitrek4.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek4.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek5.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek5.jpg"></a></div>
        <div class="pr2"><a href="css/obraz/produkty/vnitrek6.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek6.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek7.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek7.jpg"></a></div>
        <div class="pr2"><a href="css/obraz/produkty/vnitrek8.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek8.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek9.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek9.jpg"></a></div>
        <div class="pr2"><a href="css/obraz/produkty/vnitrek10.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek10.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek11.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek11.jpg"></a></div>

</section>
</article>
 
Odpovědět 4. května 22:07
Avatar
Tomáš123
Člen
Avatar
Odpovídá na wolfsharp666
Tomáš123:

Obtekané prvky sú vyňaté z toku dokumentu. Zabrániť sa tomu dá clearovaním. Viď http://www.jakpsatweb.cz/css/clear.html.

Nahoru Odpovědět 5. května 13:25
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na wolfsharp666
Libor Šimo (libcosenior):

Máš dobre nalinkovaný css súbor?
Mne to myslím kreslí dobre.

Nahoru Odpovědět 5. května 14:02
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

Rodič sa nerozťahuje aj kvôli obmedzeniu výšky. Prečnievajúci obsah sa správa podľa nastavenej hodnoty vlastnosti overflow (predvolene visible - obsah je viditeľný, vytečie z rodiča).

Bude teda potrebné odstrániť nastavenie výšky a pridať nejaký čistič (spomínaná vlastnosť clear).

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 5. května 14:47
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

Děkuji za pomoc :)

 
Nahoru Odpovědět 10. května 12:25
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 5 zpráv z 5.