ugrás a tartalomhoz

DIV - tartalom és kép illesztése

nexuspolaris · 2006. Dec. 13. (Sze), 23.14
Div.-es szerkezettel és stíluslapokkal szeretnék elkészíteni egy oldalt.

Az oldal layout-jának a terve itt látható :


a probléma:
- a "tartalom" rész körül a bal és jobb oldalon egy-egy kép van (a sraffozott rész helyén). A képeket szétvágtam, és befoglaltam egy #balkep és egy #jobbkep div-be, mivel a képek szürke területtel jelölt mintázata az y tengelyen soronként ismétlődik. Azt szeretném megvalósítani,hogy ha a #tartalom div-ben a tartalmi rész nem fér el a box-ban, ne görgetősáv jelenjen meg, hanem a tartalommal együtt növekedjen a box mérete, a #balkép és a #jobbkép" mérete pedig a #tartalommal együtt növekedjen, mintha össze lennének ragasztva ,felhasználva a képek textúráinak ismételhetőségét.
Na, ez egy kicsit nyakatekertre sikeredett, de a lényeg, hogy próbálkoztam sokféleképpen, stíluslapok használatával,de eddig nem sikerült rájönnöm a megoldásra, pedig biztosan pofon egyszerű...
Szóval, ha valakinek ötlete van, kérném megosztani...
‹ CSS: IE csak fél margót vesz, a Firefox pedig nem ismétli a hátteret HTML oldalra beléptető kódot keresek ›
 ■
1

.....

nexuspolaris · 2006. Dec. 13. (Sze), 23.19
Még annyi, hogy az első kép a layout, a második pedig, amikor a tartalom túlcsordul. A pirossal bekeretezett területnek kellene illeszkednie egymáshoz.
2

alapelv

Őry Máté · 2006. Dec. 13. (Sze), 23.25
két dolgot érdemes figyelembe venni:
1) a láblécnek adjál clear: both; tulajdonságot, így a három floatolt div alá kerül
2) a három divnek a tartalmuknál vége lesz, ezért a befoglaló elemnek kell hátteret adni. ha leképezhető a wl dizájnjához hasonlóan egy képből, akkor szerencséd van, ez lehet a container függőlegesen ismételt háttere. (figyelj arra, hogy kellően magas legyen a kép, ugyanis pngben nem nő jelentősen a mérete, de a processzorhasználat fölszökhet, ha 1000-szer kell egy 2px magas képet kitenni.) ha nem, akkor valamilyen trükkös megoldással a containerbe föl kell venni további két beágyazott containert, aminek más hátteret adhatsz, megfelelően pozicionálva.

a jobb alsó blockot negatív felső margóval érdemes odarakni.
3

....????

nexuspolaris · 2006. Dec. 16. (Szo), 02.36
Beraktam a bal és jobb div-be egy-egy ujabb div-et, amelyeknek a hátterének kellene ismétlődnie, ha a tartalom rész túlcsordul. De nem ismétlődnek.
Ez van a tartalomban :
<!-- tartalom-->
	
	<div id="content">
		
		<div id="felso">
			<div><img src="../img/content/contenttop.jpg" alt="contenttop" /></div>
			<div><img src="../img/content/helyszin.jpg" alt="helyszin" /></div>
		</div>
		
		<div id="also">
			<div id="bal">
				<div id="balfelso"></div>
				<div id="balkozep"></div>
				<div id="balalso"><img src="../img/content/bal_03.jpg" alt="balalso" /></div>
			</div>
			
			<div id="tartalom">
				<p></p>
				<p>hello</p>
			</div>
	
			<div id="jobb">
				<div id="jobbfelso"></div>
				<div id="jobbkozep"></div>
				<div id="jobbalso"><img src="../img/content/jobb_03.jpg" alt="jobbalso" width="180" height="100" /></div>
			</div>
		</div>
		
		<div id="alul"></div>
	</div>
Ez pedig a CSS -kód:
/*tartalom*/
#felso{
	border:0;
	width: 750px;
	height:80px;
}
#also{
	border:0;
	width: 750px;
	height: 420px;
	display:block;
	margin: 0 0 0 0;
	background-image: url(../img/content/contentback.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	}
#bal, #tartalom, #jobb {float:left;}
#bal{
	height: 420px;
}
#balfelso{
	height:300px;
}
#balkozep{
	background-image: url(../img/content/bal_02.jpg);
	background-repeat: repeat-y;
	height: auto;
}
#balalso{
	height:100px;
}
#bal,#balfelso,#balalso, #balkozep {
	width:80px;
	border: 0;
	margin: 0 0 0 0;
}
#tartalom{
	width:490px;
	height: 420px;
	float: left;
	}
#jobb{
	height: 420px;
	}
#jobbfelso{
	height: 300px;
}
#jobbkozep{
	height: auto;
	background-image: url(../img/content/jobb_02.jpg);
	background-repeat: repeat-y;
}
#jobbalso{
	height: 100px;
}
#jobb, #jobbalso, #jobbkozep, #jobbfelso{
	border:0;
	width: 180px;
	margin: 0 0 0 0;
}
#alul{
	height:50px;
	clear:both;
	margin: 0 0 0 0;
	background-image: url(../img/content/alul.jpg);
}
4

kepek?

noocx · 2006. Dec. 16. (Szo), 08.14
Szia!

Mik ezek az img elemek, miert nem hatterkepkent teszed be oket miutan prezentacios celt szolgalnak ?

En itt neznek korul:
http://css-discuss.incutio.com/?page=CssLayouts
http://webhost.bridgew.edu/etribou/layouts/skidoo/

Ami igy elsore szembetuno:
1. Az #also diven mi a szerepe a 'display: block'-nak hisz eleve block elem nem ?
2. Az #alul div siman mehetne az #also-n belulre, alulra.

De ha kepeket is adnal a teljes designrol, hogy mit kellene pontosan megvalositani, talan tudnek segiteni (a belinkelt layout terven nem latom pl miert van szukseg az oldalso savok 3 fele osztasara stb..).

</noocx>
5

egyszerűbben...

nexuspolaris · 2006. Dec. 17. (V), 03.29
Na akkor egyszerűbben vázolom a helyzetet.
Így néz ki boxom:
<body>
<div id="container">
	  <div id="bal"></div>
	  <div id="tartalom"></div>
	  <div id="jobb"></div>
	  <div id="also"></div>
</div>
</body>
És ez lenne hozzá a kód:
#container{
	width:750px;
	height: 520px;
	background-image: url(../../img/content/contentback.jpg);
	}
#bal {
	float: left;
	height: 470px;
	width: 80px;
}
#tartalom {
	float: left;
	height: 470px;
	width: 490px;
}
#jobb {
	height: 470px;
	width: 180px;
	float: left;
}
#also {
	clear: both;
	height: 50px;
	width: 750px;
	background-image: url(../../img/content/alul.jpg);
	margin: 0 0 0 0;
}
Azt szeretném megoldani, hogy ha a tartalom túlcsordul a #tartalom box-ban (aminek jelenleg a magassága 470 px), akkor az #also div a #container aljára kerüljön (azaz a #tartalom tolja le), a háttér pedig a bal és jobb oldalon ismétlődjőn (a háttér-kép bal és jobb alsó részében a minta ismételhető lenne
az y-tengely mentén.)
6

aha

noocx · 2006. Dec. 17. (V), 08.59
Hat erre eleg sokfele megoldas letezik. Amugy minek a fix magassag?
Legegyszerubb lehet ha beteszel egy hatterkepet a fo kontenerbe (ami vertikalis ismetlessel adja a hatteret mindegyik oszlopnak) ha egyszeru
designrol van szo.

Vagy ott van az a skidoo-s link ami a leheto legbonyolultabb megoldas erre a problemara, de vegulis tokeletesen mukodik minden bongeszo alatt, meg van meg sokfele megoldas majd utananezek es belinkelem, addig peldaul ez is egy jo kiindulo pont lehet:

http://www.alistapart.com/articles/fauxcolumns/

</noocx>
7

kérdés

nexuspolaris · 2006. Dec. 20. (Sze), 19.15
A háttérkép ismétlést megoldottam két egymásba ágyazott div-vel. Már csak az kellene, hogy a beágyazott div jobb és bal felső sarkába varázsolni egy-egy div-et, aminek kép hátteret adnék. A lényeg, hogy a div-ek minden esetben ott maradjanak a jobb és bal felső sarokban, akkor is ha a szülő div tartalma túlcsordul.
Van valakinek ötlete hogy lehetne ezt megoldani?