ugrás a tartalomhoz

Rés a CSS ben

superman · 2010. Júl. 14. (Sze), 23.30
Csináltam egy honlap sablont, amit később tervezek beprogramozni is, de egy olyan hibáb
a ütköztam amilyennel eddig soha sem találkoztam, mert máshogy csináltam. A tartalom rész 3 rétegből áll. Bal és jobb oldalt 1 "keret", középen az a rész ahova a tartalom megy. Mivel a középső rétegbe megy a tartalom, a két oldalsó rész marad ugyan akkora.
Mindhárom rétegnek minimum magasság van megadva.
Bemásolom a forráskódot is:
  1. #container  
  2. {  
  3.     margin: 0 auto;  
  4.     width: 688px;  
  5.     background-color: red;  
  6.     min-height: 500px;  
  7. }  
  8.   
  9. #header  
  10. {  
  11.     background-image: url(images/header2.jpg);  
  12.     width: 688px;  
  13.     height: 126px;  
  14. }  
  15.   
  16. #holder_left  
  17. {  
  18.     background-image: url(images/border_up_left.jpg);  
  19.     width: 34px;  
  20.     height: 50px;  
  21. }  
  22.   
  23. #holder_right  
  24. {  
  25.     background-image: url(images/border_up_right.jpg);  
  26.     width: 34px;  
  27.     height: 50px;  
  28. }  
  29.   
  30. #ad_line  
  31. {  
  32.     position: relative;  
  33.     background-image: url(images/ad_line.jpg);  
  34.     width: 688px;  
  35.     height: 49px;  
  36. }  
  37.   
  38. #ad_text  
  39. {  
  40.     position: relative;  
  41.     top: 15px;  
  42.     left: 25px;  
  43.     background-color: #3ed0ea;  
  44.     width: 638px;  
  45.     height: 24px;  
  46. }  
  47.   
  48. #border_left  
  49. {  
  50.     background-image: url(images/border_left.jpg);  
  51.     background-repeat: repeat-y;  
  52.     float: left;  
  53.     width: 34px;  
  54.     min-height: 250px;  
  55. }  
  56.   
  57. #contents  
  58. {  
  59.     background-color: #efefef;  
  60.     float: left;  
  61.     width: 620px;  
  62.     min-height: 250px;  
  63. }  
  64.   
  65. #border_right  
  66. {  
  67.     background-image: url(images/border_right.jpg);  
  68.     background-repeat: repeat-y;  
  69.     float: left;  
  70.     width: 34px;  
  71.     min-height: 250px;  
  72. }  
  73.   
  74. #footer  
  75. {  
  76.     background-image: url(images/footer.jpg);  
  77.     float: left;  
  78.     width: 688px;  
  79.     height: 87px;  
  80.     clear: both;  
  81. }  
Szemléltetés:
http://www.woodoocaudron.uw.hu/index.php -> A jó
http://www.woodoocaudron.uw.hu/index2.php -> A hibás

Ha tudtok légyszíves segítsetek. Köszönöm!
‹ HTML hírlevél + képek TEXTAREA formázó ›
 ■
1

Tedd bele a #contentet

Ajnasz · 2010. Júl. 14. (Sze), 23.57
Tedd bele a #contentet mondjuk a #border_left-be, a right border backgroundot allitsd be a #contentnek, igy a #border_left a #contenttel egyutt fog noni plusz megsporolsz egy elemet. A width property-t termeszetesen vedd le a #border_leftrol.
2

Ezzel a módszerrel elég fura

superman · 2010. Júl. 15. (Cs), 11.37
Ezzel a módszerrel elég fura eredményt kaptam...
3

Tekintve, hogy a #border_left

LeGaS · 2010. Júl. 15. (Cs), 13.02
Tekintve, hogy a #border_left és #border_right elemekben nem lesz semmi tartalom, szerintem jobban jársz, ha egyszerűen úgy vágod ki a képet, hogy benne van a két széle is és azt állítod a #contents hátterének. Így egyrészt kevesebb lesz a HTML markup, másrészt a háttér is úgy fog nőni, ahogy a tartalom.
4

Igen tudom, de úgy kilóg a

superman · 2010. Júl. 15. (Cs), 13.23
Igen tudom, de úgy kilóg a szöveg a háttérbe is, ami nem túl szép. Bekezdésekkel meg nem nagyon tudom variálni:S De mindegy. Köszönöm a segítséget.
5

De tudod szabályozni. Vagy

LeGaS · 2010. Júl. 15. (Cs), 14.30
De tudod szabályozni. Vagy padding-ot alkalmazol a #contents div-re, ebben az esetben a megadott padding értékekkel csökkentened is kell a div szélességét, vagy pedig ahogy írtad paragrafusokba teszed és azoknak megadsz margót (margin).

Bocsi, nem a válaszra nyomtam.