ugrás a tartalomhoz

CSS overflow?

perretz · 2010. Okt. 21. (Cs), 10.00
Adott egy DIV (magassaga min. 20px de valtozo), van benne negy masik DIV, amibol haromnak a tartalma egy 80px magassagu kep, a negyedik tartalma szoveges, nem lehet tudni hany pixel magass. Hogyan lehet azt megoldani, hogy a kiindulo DIV es a kepeket tartalmazo DIV is olyan magass legyen mint a szoveges DIV.

A legtisztabb az lenne, hogy a kepeket tartalmazo DIV-eknek azt lehetne mondani, hogy ti ha tollogtok, akkor titeket le lehet vagni, de azt a kiindulo DIV-ben kell megadni es vonatkozni fog a szoveges DIV-re is.

A valaszokat elore is koszonom.
Istvan
‹ Nem frissülő iframe window.onload ›
 ■
1

gonosz leszek

ironwill · 2010. Okt. 21. (Cs), 12.52
Kötelező olvasmány:
WL Fórum Biblia: http://weblabor.hu/blog/20100921/forum-tippek

Légyszíves html, css kódot mutass, különben nem tudunk segíteni.
2

Az az igazsag, ha kodot

perretz · 2010. Okt. 21. (Cs), 13.08
Az az igazsag, ha kodot tudnek mutatni, nem kerdeznek. Amit eddig probaltam:
1.pelda - mindent vag 20px magassan
2.pelda - jo a magassagkezeles, de a kepeket tartalmazo DIV mivel nincs tartalma, magassaga nem jelenik meg rendesen
  1. <style>  
  2.     div.tree{  
  3.         float: left;  
  4.         display: inline;  
  5.         width: 14px;  
  6.     }  
  7. </style>  
  8.   
  9. <div style="border: 1px solid red; height: 20px; width: 250px; overflow: hidden">  
  10.     <div class="tree"><img src="images/mfirst.gif" width="14" height="80" border="0" alt=""></div>  
  11.     <div class="tree"><img src="images/fopen.gif" width="14" height="80" border="0" alt=""></div>  
  12.     <div class="tree"><img src="images/cb1.gif" width="14" height="80" border="0" alt=""></div>  
  13.       
  14.     <img style="top: 1px;float: right; position: relative" src="images/info.gif" width="16" height="16" border="0" alt="">  
  15.       
  16.     <div style="border: 0px solid blue; float: left; padding-left: 5px;">Szoveg ami tulnyulhat tobb sorba is.</div>  
  17. </div>  
  18. <br><br>  
  19. <div style="border: 1px solid red; width: 250px; overflow: hidden">  
  20.     <div class="tree" style="background-image: url('images/mfirst.gif')"></div>  
  21.     <div class="tree" style="background-image: url('images/fopen.gif')"></div>  
  22.     <div class="tree" style="background-image: url('images/cb1.gif')"></div>  
  23.       
  24.     <img style="top: 1px;float: right; position: relative" src="images/info.gif" width="16" height="16" border="0" alt="">  
  25.       
  26.     <div style="border: 0px solid blue; float: left; padding-left: 5px;">Szoveg ami tulnyulhat tobb sorba is.</div>  
  27. </div>  
4

float vs inline

ironwill · 2010. Okt. 21. (Cs), 14.37
display: inline = megjelenítés "típus" - pl. "egy soros" elemek: span, a, b, img
float = igazítás "típus"

Ha egy div-re beállítod az inline tulajdonságot, akkor elveszíti a blokk tulajdonságát
(magasság, szélesség, ?margin, ?padding).

Az overflow abban az esetben érvényesül, hogy ha beállítod az elem magasságát, különben nő a tartalommal együtt. (a magasság állítással kapcsolatban lásd fentebb az elemek tulajdonságainál)
5

br clear

SamY · 2010. Okt. 22. (P), 11.52
float-olt elemek eseten, ha nem szeretned, hogy a parent-bol kilogjanak tegyel egy sortorest vagy akar egy span-t a parent blokk vegere amely nincs float-olva.

pelda:
  1. <style type="text/css">  
  2.   .left {float: left}  
  3.   .clear {float: none; clear: both;}  
  4. </style>  
  5.   
  6. <div style="border: 1px solid black">  
  7.   <div class="left">oszlop #1</div>  
  8.   <div class="left">oszlop #2<br/>sor #2<br/>sor #3</div>  
  9.   <div class="left" style="height: 100px">magas oszlop #3</div>  
  10.   <br class="clear" />  
  11. </div>  
A fenti pelda eseten a parent div borderen latszik, hogy nyulik a tobbi div-el egyutt.

Erre lattam mar CSS "haxot" is, hogy automatikusan megoldja ezt, de meg nem tudnam mar mondani, hogy hol es hogyan volt kivitelezve.

A kodot rogtonoztem csak, nem probaltam ki
6

talán ez..?

ironwill · 2010. Okt. 22. (P), 12.02
http://css-tricks.com/snippets/css/clear-fix/
7

azaz

SamY · 2010. Okt. 22. (P), 13.00
azaz:) Kossz h belinkelted, igazsag szerint lusta voltam rakeresni, de gondoltam akit konkretabban megmozgat a dolog, az ugyis rakeres:)
3

Fluid Width Equal Height

Poetro · 2010. Okt. 21. (Cs), 14.09
Fluid Width Equal Height Columns