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 :
  1. <!-- tartalom-->  
  2.       
  3.     <div id="content">  
  4.           
  5.         <div id="felso">  
  6.             <div><img src="../img/content/contenttop.jpg" alt="contenttop" /></div>  
  7.             <div><img src="../img/content/helyszin.jpg" alt="helyszin" /></div>  
  8.         </div>  
  9.           
  10.         <div id="also">  
  11.             <div id="bal">  
  12.                 <div id="balfelso"></div>  
  13.                 <div id="balkozep"></div>  
  14.                 <div id="balalso"><img src="../img/content/bal_03.jpg" alt="balalso" /></div>  
  15.             </div>  
  16.               
  17.             <div id="tartalom">  
  18.                 <p></p>  
  19.                 <p>hello</p>  
  20.             </div>  
  21.       
  22.             <div id="jobb">  
  23.                 <div id="jobbfelso"></div>  
  24.                 <div id="jobbkozep"></div>  
  25.                 <div id="jobbalso"><img src="../img/content/jobb_03.jpg" alt="jobbalso" width="180" height="100" /></div>  
  26.             </div>  
  27.         </div>  
  28.           
  29.         <div id="alul"></div>  
  30.     </div>  
Ez pedig a CSS -kód:
  1. /*tartalom*/  
  2. #felso{  
  3.     border:0;  
  4.     width: 750px;  
  5.     height:80px;  
  6. }  
  7. #also{  
  8.     border:0;  
  9.     width: 750px;  
  10.     height: 420px;  
  11.     display:block;  
  12.     margin: 0 0 0 0;  
  13.     background-image: url(../img/content/contentback.jpg);  
  14.     background-position: top center;  
  15.     background-repeat: no-repeat;  
  16.     }  
  17. #bal, #tartalom, #jobb {float:left;}  
  18. #bal{  
  19.     height: 420px;  
  20. }  
  21. #balfelso{  
  22.     height:300px;  
  23. }  
  24. #balkozep{  
  25.     background-image: url(../img/content/bal_02.jpg);  
  26.     background-repeat: repeat-y;  
  27.     height: auto;  
  28. }  
  29. #balalso{  
  30.     height:100px;  
  31. }  
  32. #bal,#balfelso,#balalso, #balkozep {  
  33.     width:80px;  
  34.     border: 0;  
  35.     margin: 0 0 0 0;  
  36. }  
  37. #tartalom{  
  38.     width:490px;  
  39.     height: 420px;  
  40.     float: left;  
  41.     }  
  42. #jobb{  
  43.     height: 420px;  
  44.     }  
  45. #jobbfelso{  
  46.     height: 300px;  
  47. }  
  48. #jobbkozep{  
  49.     height: auto;  
  50.     background-image: url(../img/content/jobb_02.jpg);  
  51.     background-repeat: repeat-y;  
  52. }  
  53. #jobbalso{  
  54.     height: 100px;  
  55. }  
  56. #jobb, #jobbalso, #jobbkozep, #jobbfelso{  
  57.     border:0;  
  58.     width: 180px;  
  59.     margin: 0 0 0 0;  
  60. }  
  61. #alul{  
  62.     height:50px;  
  63.     clear:both;  
  64.     margin: 0 0 0 0;  
  65.     background-image: url(../img/content/alul.jpg);  
  66. }  
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:
  1. <body>  
  2. <div id="container">  
  3.       <div id="bal"></div>  
  4.       <div id="tartalom"></div>  
  5.       <div id="jobb"></div>  
  6.       <div id="also"></div>  
  7. </div>  
  8. </body>  
És ez lenne hozzá a kód:
  1. #container{  
  2.     width:750px;  
  3.     height: 520px;  
  4.     background-image: url(../../img/content/contentback.jpg);  
  5.     }  
  6. #bal {  
  7.     float: left;  
  8.     height: 470px;  
  9.     width: 80px;  
  10. }  
  11. #tartalom {  
  12.     float: left;  
  13.     height: 470px;  
  14.     width: 490px;  
  15. }  
  16. #jobb {  
  17.     height: 470px;  
  18.     width: 180px;  
  19.     float: left;  
  20. }  
  21. #also {  
  22.     clear: both;  
  23.     height: 50px;  
  24.     width: 750px;  
  25.     background-image: url(../../img/content/alul.jpg);  
  26.     margin: 0 0 0 0;  
  27. }  
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?