Jak udělat podobný elastický obsah..

Viz stránka: http://www.upandonward.com/#259825/Illustrations

Myslím ty bloky s obrázkem a uprostřed. Po minimalizování okna prohlížeče se bloky elasticky pohybují a přemístují.

Jak tohoto "efektu" docílit jednodušše? Za radu děkuji.

<HTML>Jednoduše se dají použít plaváčci - CSS pozicování float.</HTML>

A to jak konkrétně? Asi dva dny se na to snažím přijít, pročetl jsem hromadu textu a vyzkoušel vše možné, ale nic se mi nedaří.

Aspon nějaký jednoduchý příklad..

Jak konkrétně? Jednoduše.

Zkus si vytvořit prázndnou stránku, vytvoř si několik stejných divů s pevnou šířkou a různými barvami a floatováním doleva a vlastností clear na none. Vlož do stránky a hraj si :)

příklad html:
<div class="ramecek" style="background:red">Text 1</div>
<div class="ramecek" style="background:green">Text 2</div>
<div class="ramecek" style="background:blue">Text 3</div>
<div class="ramecek" style="background:brown">Text 4</div>
<div class="ramecek" style="background:yellow">Text 5</div>
<div class="ramecek" style="background:violet">Text 6</div>

příklad css:
.ramecek{float:left;clear:none;width:200px;height:150px;padding:20px;color:black;}

Dodatečné zarovnání/odsazení/obarvení/dokreslení je čistě na tobě. Toto je jen základní příklad.

Ok, ok, ok, všechno chápu, ale ted tu mám jiný problém..

Můj zápis vypadá asi takto:

V EXTERNÍM STYLU: "xxx.css" mám kořenovej div:
#b {position: absolute; width: 96%; top: 200px; left: 40px; }
a #box1 {position: float: left; width: 0px; top: 20px; left: 20px; }

VE STRÁNCE: "xxx.html" mám mezi <style> </style> určenou třídu:
.ramecek{float:left;clear:none;width:230px;height:200px;padding:0px;color:black;}

a mezi <body> </body> to mám udělané takto:

<div id="b">

<div class="ramecek" style="background:ececec"><div id="box1">
<div style="background-color: white; width: 210px; height: 180px"></div>
</div></div>

<div class="ramecek" style="background:ececec"><div id="box1">
<div style="background-color: white; width: 210px; height: 180px"></div>
</div></div>

</div>
-------------------------------------------------------------------------------------------------

A bílé rámce fungují přesně tak, jak na stránce http://www.upandonward.com/#249862/Mill-City-Press ... jenže je problém v tom, že ted nevím, jak přidat do divu "box1" onen obrázek a odkaz, aby to fungovalo..

Zkoušel jsem vytvořit div s <img src="xxx.jpg" width="120" height="100" >, který jsem vložil do toho divu "box1" .. ale nefungovalo to, ikdyž podle mojí logiky by sakra mělo..

.......... kde dělám chybu?

Takže.. z letmého pohledu to stačí jako:
<div class="ramecek" style="background:ececec"><div id="box1">
<div style="background-color: white; width: 210px; height: 180px">
Vhodný text a <img src="image.png" alt="asd" />
</div>
</div></div>

Na druhou stranu jsem vůbec nepochopil, proč používáš dva floatované objekty uvnitř sebe a ještě více vevnitř máš další div. Dalo by se to sjednotit minimálně do dvou divů, případně možná i do jednoho. Děláš si to sám pro sebe zbytečně nepřehledným..

___
A mimochodem, id by mělo být ve stránce unikátní. Použítí #box1 na více místech je tedy nevhodné (přestože to většina prohlížečů dneska sežere). Od toho existují classy.

← Zpět na všechna témata

Nové příspěvky

Smazani stranek index.html ) HTML Tabulky Zalamování textu pomocí CSS Přesměrování Arduino - 400 Bad Request Nastavení českých písmen POMOC! po druhé! Pozicování (obrázek na střed). Jak vycentrovat obrazek, ktery je v prikazu absolute ? Použití tvůrce webu katalog async functions' is only available in es8 (use 'esversion: 8') Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Problém s načítáním Div pro reklamu překrývá prvky webové stránky Nezobrazuje se mi lišta s reklamou ako nahrám na môj web favicon? JavaScript - nečitelný soubor *.js - jak prohlížet/editovat Problém s textem videostream index.html GB///refresh///JS Total Commander - server nenalezen Mobilní verze webu

Další témata

Webzdarma zvládnete to sami

Jak udělat podobný elastický obsah..

Nové příspěvky