Anzeige

Problem mit div-Container

Problem mit div-Container | PSD-Tutorials.de

Erstellt von Lakai, 26.04.2007.

  1. Lakai

    Lakai Aktives Mitglied

    Dabei seit:
    19.09.2005
    Beiträge:
    385
    Problem mit div-Container
    sees community!

    hab hier mal wieder ein problem...

    hab hier Getränkefachmarkt Aumüller eine seite, deren design zwar noch nicht fertig ist, aber ich bleib schon beim css-layout hängen...

    mein problem ist dass das hintergrundbild (footerbg) im #container nicht bis zum seitenende mitgezogen wird.

    #main und #artikel befinden sich in #container - aber #container wird nicht vergrößert wenn in #artikel bzw. #main viel inhalt ist...

    weiß jmd. was ich falsch mache?! komm net drauf...


    HTML

    Code (Text):
    1.  
    2.  
    3. <body>
    4.    
    5. <div id="container">
    6.  
    7.     <div id="main">
    8.         <div id="artikel">
    9.             <h3><span>Artikel</span></h3>
    10.             <p class="p1"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    11. </span></p>
    12.  
    13.             <p class="p2"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    14. </span></p>
    15.         </div>
    16.  
    17.         <div id="artikel">
    18.             <h3><span>Artikel</span></h3>
    19.             <p class="p1"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    20. .</span></p>
    21.  
    22.             <p class="p2"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    23. </span></p>
    24.             <p class="p3"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    25. </span></p>
    26.  
    27.                     </div>
    28.  
    29.         <div id="artikel">
    30.             <h3><span>Artikel</span></h3>
    31.             <p class="p1"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    32. </span></p>
    33.         </div>
    34.  
    35.         <div id="artikel">
    36.  
    37.             <h3><span>Artikel</span></h3>
    38.             <p class="p1"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    39. </span></p>
    40.  
    41.             <p class="p2"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    42. </span></p>
    43.             <p class="p3"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    44. </span></p>
    45.  
    46.             <p class="p5"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel turpis vel erat gravida mattis. Sed pretium risus. Mauris laoreet pede at pede imperdiet venenatis. Quisque vestibulum. Suspendisse potenti. Integer ut nulla. Aenean vehicula tincidunt felis. Vestibulum sit amet urna vitae nisl vehicula sodales. Pellentesque facilisis iaculis nisl. Aliquam erat volutpat. Nunc tincidunt odio porttitor tellus. Fusce eget arcu non turpis aliquet suscipit. Maecenas ornare. Morbi tellus nibh, malesuada ultrices, pellentesque auctor, bibendum id, sem. In molestie viverra nulla. Vivamus volutpat quam sit amet odio.
    47. </span></p>
    48.         </div>
    49.  
    50.  
    51.     </div> 
    52.  
    53. </div>
    54.  
    55.  


    CSS

    Code (Text):
    1.  
    2.  
    3. * {
    4.     margin: 0;
    5.     padding: 0;
    6. }
    7. html {
    8.     background: transparent url(images/htmlbg.jpg) repeat-x;
    9. }
    10.  
    11. body {
    12.     margin: 0;
    13.     padding: 0;
    14.     font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif;
    15.     color: #7c7c7c;
    16.     text-align: center;
    17.     background: transparent url(images/bodybg.jpg) no-repeat center top;
    18. }
    19.  
    20. #container {
    21.     margin: 0px auto;
    22.     padding: 0;
    23.     width: 900px;
    24.     border: none;
    25.     text-align: left;
    26.     background-image: url(images/footerbg.jpg);
    27.     background-repeat: no-repeat;
    28.     background-position: bottom;
    29.     padding-bottom: 70px;
    30. }
    31.  
    32.  
    33.  
    34. a, a:visited {
    35.     text-decoration: none;
    36.     color: #D7661C;
    37.     border-bottom: 1px dotted #ccc;
    38. }
    39.  
    40. a:hover {
    41.     text-decoration: none;
    42.     color: #94AB36;
    43.     border-bottom: 1px solid #ccc;
    44. }
    45.  
    46.  
    47. p {
    48.     margin-bottom: 10px;
    49. }
    50.  
    51.  
    52.  
    53. #main {
    54.     top: 300px;
    55.     margin-left: 50px;
    56.     margin-right: 50px;
    57.     position: relative;
    58.     width: 800;
    59.    
    60.    
    61. }
    62.  
    63. #artikel{
    64.     margin-right: 15px;
    65.     margin-left: 15px;
    66.     color: #B0A77E;
    67.     width: 770px;
    68.     padding-bottom: 29px;
    69.     text-align: justify;
    70. }
    71.  
    72.  
     
    #1      
  2. Sapoot

    Sapoot Pixelsammler

    Dabei seit:
    23.11.2005
    Beiträge:
    391
    Geschlecht:
    männlich
    Ort:
    Unterfranken
    Kameratyp:
    EOS 300D
    Problem mit div-Container
    AW: Problem mit div-Container

    Hi...

    der hintergrund wird ja nicht wiederholt.
    background-repeat: no-repeat;
     
    #2      
  3. Lakai

    Lakai Aktives Mitglied

    Dabei seit:
    19.09.2005
    Beiträge:
    385
    Problem mit div-Container
    AW: Problem mit div-Container

    ah ok!
    vielen dank schon mal!

    dann muss ich mir da nochmal was überlegen!
     
    #3      
  4. 10c

    10c Unscharfe Maske

    Dabei seit:
    05.10.2005
    Beiträge:
    253
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Kameratyp:
    Pentax K100D
    Problem mit div-Container
    AW: Problem mit div-Container

    Das Problem ist, dass du in #main ein "top: 300px;" hingeschrieben hast.
    Probiere mal stattdessen "padding-top:300px;".

    10c :)
     
    #4      
  5. Lakai

    Lakai Aktives Mitglied

    Dabei seit:
    19.09.2005
    Beiträge:
    385
    Problem mit div-Container
    AW: Problem mit div-Container

    woah wunderbar!!!


    10c, du bist mein held!

    nein, aber mal im ernst sitzt schon seit ein paar stunden an dem problem und dann liegts wieder an so einer kleinigkeit!

    vielen dank!!
     
    #5      
x
×
×