Jak udělat podobný elastický obsah..

1. Návštěvník BAF5598A 4. 8. 2010 16:55

   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.

2. Návštěvník 27854355 4. 8. 2010 18:22

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

3. Návštěvník BAF5598A 4. 8. 2010 20:55

   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..

4. Návštěvník 9FCEC34D 4. 8. 2010 23:37

   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.

5. Návštěvník BAF5598A 5. 8. 2010 01:50

   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?

6. Návštěvník 9FCEC34D 5. 8. 2010 18:46

   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