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

<style>
	div.tree{
		float: left;
		display: inline;
		width: 14px;
	}
</style>

<div style="border: 1px solid red; height: 20px; width: 250px; overflow: hidden">
	<div class="tree"><img src="images/mfirst.gif" width="14" height="80" border="0" alt=""></div>
	<div class="tree"><img src="images/fopen.gif" width="14" height="80" border="0" alt=""></div>
	<div class="tree"><img src="images/cb1.gif" width="14" height="80" border="0" alt=""></div>
	
	<img style="top: 1px;float: right; position: relative" src="images/info.gif" width="16" height="16" border="0" alt="">
	
	<div style="border: 0px solid blue; float: left; padding-left: 5px;">Szoveg ami tulnyulhat tobb sorba is.</div>
</div>
<br><br>
<div style="border: 1px solid red; width: 250px; overflow: hidden">
	<div class="tree" style="background-image: url('images/mfirst.gif')"></div>
	<div class="tree" style="background-image: url('images/fopen.gif')"></div>
	<div class="tree" style="background-image: url('images/cb1.gif')"></div>
	
	<img style="top: 1px;float: right; position: relative" src="images/info.gif" width="16" height="16" border="0" alt="">
	
	<div style="border: 0px solid blue; float: left; padding-left: 5px;">Szoveg ami tulnyulhat tobb sorba is.</div>
</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:

<style type="text/css">
  .left {float: left}
  .clear {float: none; clear: both;}
</style>

<div style="border: 1px solid black">
  <div class="left">oszlop #1</div>
  <div class="left">oszlop #2<br/>sor #2<br/>sor #3</div>
  <div class="left" style="height: 100px">magas oszlop #3</div>
  <br class="clear" />
</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