kostenloser Webspace werbefrei: lima-city

Content Background durch 3 geteilt

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   psd

   psd hat kostenlosen Webspace.

   8:46, 15.9.2009

   Hi
   
   ich such seit tagen ne lösung dafür und find leider keine die meinen vorstellungen entspricht.
   Mein Problem:
   
   ich habe 3 grafiken die in meinen content sollen. (als background img)
   
   - 1. headbereich
   - 2. txtbereich (repeat-y da sich der bereich dem inhalt anpassen soll)
   - 3. schlussbild
   
   
   Frage:
   
   1. welche lösung soll ich nehmen ( divs, table, mischung ?? )
   2. da sich der txtbereich dann auch dem inhalt anpassen soll wie lass ich dann grafik 3 ganz unten anfügen ohne sie am
   browser boden zu positionieren ??
   
   hoff ihr könnt mir da helfen bis jetzt sieht mein code so aus
   
   CSS: (div lösung welches aber dann nicht meine Grafik3 nach unten macht)
   

   #content{
   	float: right;
   	width: 638px;
   	height: auto;
   	margin-right: 0px;
   	margin-top: 5px;
   	padding: 0px;
   	margin-left: auto;
   }
   
   #cnthead {
   	vertical-align: top;
   	width: 638px;
   	height: 20px;
   	margin: 0px auto 0px auto;
   	padding: 0;
   	background-image: url(../images/content/grafik1);
   	background-repeat: no-repeat;
   }
   #cnttxt {
   	margin: opx;
   	padding: 20px 20px 20px 20px;
   	height: auto;
   	width: 638px;
   	min-height: 100%;
   	background-repeat: repeat-y;
   	background-image: url(../content/grafik2);
   }
   
   #cntfooter {
   	vertical-align: bottom;
   	width: 638px;
   	height: 20px;
   	margin: auto auto 0px auto;
   	padding: 0;
   	background-image: url(..content/grafik3);
   	background-repeat: no-repeat;
   }

   
   
   HTML dazu
   

   ..........
   
           <div id="content">
                    <div id="cnthead"></div>
                            <div id="cnttxt">
                                    <h1 class="hn">Willkommen auf</h1>
                                    <h2 class="hn">www.xyzwebseite.com</hn>
                                    <h3 class="hn"><blockquote>Slogan</blockquote></h2>
                                    <hr>
                                    <p>Lorem ipsum</p>
                            </div>
                    <div id="dntfooter"></div>
            </div>
   
   ...........

   
   
   
   nochmal zur übersicht
   
   | html |
   ->| body |
   ->-> | Header |
   ->-> | content |
   ->->-> | bild1 darunter bild2 mit höhen anpassung darunter bild3 |
   ->-> | Footer |

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. color

   

   color hat kostenlosen Webspace.

   8:51, 15.9.2009

   <div class="head"></div>
   <div class="content'>
   <div class="footer">
   </div>
   </div>

   
   
   

   .head
   {
   position:relative;
   top:0px;
   margin:0px auto;
   width:600px;
   height:100px;
   background:#ccc;
   }
   
   .content
   {
   position:relative;
   top:10px;
   margin:0 auto;
   width:600px;
   height:500px;
   background:#ccc;
   }
   
   .content .footer
   {
   position:absolute;
   bottom:0px;
   left:0px;
   width:600px;
   height:100px;
   background:#aaa;
   }

   
   
   Hab ich nicht getestet aber ich denke so wird das was.

4. barney

   

   barney hat kostenlosen Webspace.

   9:04, 15.9.2009

   Hallo,
   
   warum machst Du nicht einfach ein großes Div, in das Du dann die anderen drei reipackst.
   
   z.B.:
   
   <div style="width:1000px;">
   
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
   
   </div>
   
   
   Dann brachst Du auch nichts mit 'position:relative' oder 'float ' machen.
5. Autor dieses Themas

   psd

   psd hat kostenlosen Webspace.

   9:25, 15.9.2009

   hmm danke für die schnelle antwort aber leider nicht das was ich wollte.
   
   1. passt er mir nicht den content an den footer an.
   2. geht der footer ganz an den Browser rand.
   (der soll aber nur bis zum ende des übergeorneten divs gehn)
   
   edit: das soll nicht das layout der webseite sein sondern des contents
   
   Beitrag zuletzt geändert: 15.9.2009 9:31:24 von psd

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?