NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Vyjíýdění textu mimo předepsané okno

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
tbartolen
Člen
Avatar
tbartolen:9.8.2015 19:56

Ahoj, jde opět o web www.stansekeltem.cz
Na stránce mám na dvou místech dvě okna vedle sebe,
Kdo jsme - Kde nás najdete
a k tomu
Spravný kelt - Rodič Kelta

Muj problém je v tom, že pokud začnu zmenšovat obraz tak na poměrně ještě hodně velkém formátu začne text ujíždět mimo bílý podklad. Pokud bych chtěl nastavit responzivitu tak aby se tohle nedělo, měl bych nastavit něco jako

#left-col {
        width: auto;
        height: auto;

?

Odpovědět
9.8.2015 19:56
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:9.8.2015 20:17

Tak abych to specifikoval, tak mi jde především o položku - kde nás najdete - , kde mi ujíždí adresa mimo rámec, ostatní jem už nějak vyřešil...ale s tímhle si nevím rady ani proč to dělá

Nahoru Odpovědět
9.8.2015 20:17
Navštiv www.fb.com/skkelticz
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na tbartolen
Neaktivní uživatel:9.8.2015 20:21

Ahoj! Když těm bílým panelům odstraníš výšku (height), tak se jejich výška přizpůsobí podle textu. Pokud to odstraníš, mělo by být vše ok :)

Nahoru Odpovědět
9.8.2015 20:21
Neaktivní uživatelský účet
Avatar
tbartolen
Člen
Avatar
Odpovídá na Neaktivní uživatel
tbartolen:9.8.2015 20:30

To jsem měl nastavené předtím, ale pak ty panely nejsou stejně velké, a vypadá to divně...to je taky průšvih..

Nahoru Odpovědět
9.8.2015 20:30
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:9.8.2015 20:47

Není jiné řešení (jednodužší), než pomocí media queries nastavovat ty výšku zvlášt u každé velikosti kde to vyjede?

Nahoru Odpovědět
9.8.2015 20:47
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:10.8.2015 12:55 
<style>
 #obal {
   width: 90%;
   margin:1em auto;
   border:1px solid black;
   text-align: left;
   max-width: 1024px;
 }
 #leva {
   width: 30%;
   float: left;
   border:1px solid red;
 }
 #prava {
   width: 60%;
   float: left;
   border:1px solid green;
   margin: 0 0 0 30%;
 }
 #leva-obsah {
   margin:0; padding: 0.5em 1em;
   font-size: 100%;
 }
 #prava-obsah {
   margin:0; padding: 0.5em 1em;
   font-size: 100%;
 }
 hr.cleaner {
   clear:both;
   height:1px;
   margin: -1px 0 0 0; padding:0;
   border:none;
   visibility: hidden;
}

 </style>
 <div id="obal">
      <div id="leva"><div id="leva-obsah">
         <h3>Lorem Ipsum</h3>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Morbi scelerisque luctus velit. Etiam dictum tincidunt diam. Nullam eget nisl. Maecenas libero. Integer vulputate sem a nibh rutrum consequat. Donec quis nibh at felis congue commodo. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Mauris dictum facilisis augue. Donec quis nibh at felis congue commodo. Nullam sit amet magna in magna gravida vehicula. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Integer vulputate sem a nibh rutrum consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce consectetuer risus a nunc. </p>
      </div></div>
      <div id="prava"><div id="prava-obsah">
         <h3>Lorem Ipsum</h3>
         <p>Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nunc dapibus tortor vel mi dapibus sollicitudin. Cras elementum. </p>
      </div></div>
         <hr class="cleaner" />
   </div>

tak jsem trošku poguglil, a našel jsem řešení s obrázkem na pozadí a obalovacím divem. Snažím se to rozchodit, ale z nějakého důvodu to pořád nefunguje tak, jak má. Udělal jsem si zvlášť pokusný dokument kde to zkouším. Pokud tomu rozumím dobře, tak to má fungovat tak, že

  1. Oba dva sloupce obalím do nějakého divu
  2. Nastavím jim poměry
  3. Udělám si obrázek na pozadí obalovacího divu ve stejném poměru jako jsou dva sloupce
  4. Mělo by se to posouvat zároveň a sloupce zůstat stejně vysoké

Už si s tím hraju 7 hodin a pořád to nefunguje správně, nevíte někdo kde bych mohl mít chybu? Děkuju

Nahoru Odpovědět
10.8.2015 12:55
Navštiv www.fb.com/skkelticz
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na tbartolen
Neaktivní uživatel:10.8.2015 14:19

Šlo by to třeba takhle, stačí si s tím ještě trochu pohrát:

http://jsfiddle.net/jy5wosjw/

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
10.8.2015 14:19
Neaktivní uživatelský účet
Avatar
tbartolen
Člen
Avatar
Odpovídá na Neaktivní uživatel
tbartolen:10.8.2015 16:56

Mrknu na to, zatím jsem to provizorně vyřešil tak, že jsem pro každou šířku kde to začalo vyskakovat nastavil přes media queries větší výšku...funguje to, i když to asi není idealní...děkuji za radu, mrknuá na to, když to pochopím tak to tam dám místo těch media queries :-)

Nahoru Odpovědět
10.8.2015 16:56
Navštiv www.fb.com/skkelticz
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na tbartolen
Neaktivní uživatel:11.8.2015 11:47

Není to složitý. Máš 3 obalovací elementy. Určitě chápeš, že když obsahují stejný obsah (a sami sebe bez marginu a borderu, tak budou stejně veliké. Nejspodnější (nejspodnější podle vykreslování, ne podle kódu, v kódu to je ten první obalovací) bude mít barvu jako článek. Ten nad ním posuneš doleva pomocí relativní pozice o šířku článku (v tomto případě 470px) a bude mít barvu pozadí (v tomto případě šedou). A ten poslední bude mít zase bílou barvu a posuneš ho o mezeru mezi články (v tomto případě myslím 20px). A poslední container s články odsadíš zase zpátky o to, kolik si odsadil zbytek dohromady (470px + 20px). Tím máš články na místě, kde mají být, barvičky správně a poslední barevný container vylezlý o skoro 500px vlevo, proto se to ořízne pomocí overflow hidden (není to jen na schování posuvníků, ale I oříznutí všeho, co přesahuje nad rámec elementu). No a to je všechno, ne? Možná ještě tomu hlavnímu containeru s overflow dát position relative, je to kvůli nějaký chybě ve starým IE (ne není to vtip, staré IE opravdu mělo chyby :O ). Je to takhle jasné?

Nahoru Odpovědět
11.8.2015 11:47
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na tbartolen
Neaktivní uživatel:11.8.2015 11:49

Přijde mi to lepší, než to prznit přes tabulky nebo javascript. Vidím to jako nejlepší z mě zatím známých variant. Těším se, až to přidají do css nativně a člověk nebude muset dělat takový zběsilosti.

Nahoru Odpovědět
11.8.2015 11:49
Neaktivní uživatelský účet
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 10 zpráv z 10.