✔ backgroundcoler bis zum ende der seite****

R

robat2oo6

Mitglied
1284998079_erklrung.jpg


Hi Tutorialers,
im obrigen link seht ihr gleich mein Problem.

Ich codiere mir derzeit meine Homepage und hab als Backgroundimage für die Homepage ein Muster verwendet, welches sich wiederholt.

Auf meiner Startseite habe ich zu wenig Content, so wenig das der Footer (wo impressum und so steht) nicht ganz am boden ist.

Wie bekomme ich es hin das man das Muster unten nicht sieht, so das die Fläche dort komplett weiß ist? Oder das der Footer einfach am Boden hängt.


Hoffe ihr versteht die Frage.

MfG
 
robat2oo6 hat gesagt.:
Auf meiner Startseite habe ich zu wenig Content, so wenig das der Footer (wo impressum und so steht) nicht ganz am boden ist.

Wie bekomme ich es hin das man das Muster unten nicht sieht, so das die Fläche dort komplett weiß ist? Oder das der Footer einfach am Boden hängt.
Zum Vergrößern anklicken....
Wie auch immer dein Code lautet, der hier aufschlußreicher gewesen wäre, als dein Schnappschuß: Webmaster FAQ -> CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten?
 
mein css:






@charset "utf-8";
/* CSS Document */

* { margin:0; padding:0; border:0; }

body { background:#CCC; }

html { overflow-y:scroll;}


a:link, a:active, a:visited{ color:#3292cd; text-decoration:none; border:0; }

a:hover{ color:#000000; text-decoration:none; border:0; }

html, body { background:url(../Bilderhomepage/muster.jpg); font-size: 101%; }


h1 { font-family:Verdana,Geneva,sans-serif; font-size:12px; color:#3292cd; font-weight:bold; margin-left:10px; padding: 0 0; }
h2 { font-family:Verdana,Geneva,sans-serif; font-size:12px; color:#797979; margin-left:10px; padding: 0 0; }


/* --- gesamte box der hp */

div#siteWrapper{ width:900px; margin:0 auto; }


/* --- Head */

#headWrapper { width:900px; height:auto; float:left; }

#headImage { background:url(../Bilderhomepage/header.jpg); width:900px; height:228px; float:left; }


/* --- NavigationButtons */

#btn_startseite{ background:url(../Bilderhomepage/btn_startseite.jpg) no-repeat;
width: 155px;
height: 38px;
float: left;}
#btn_startseite:hover { background:url(../Bilderhomepage/btn_startseite_aktiv.jpg) no-repeat;}

#btn_agentur{ background:url(../Bilderhomepage/btn_agentur.jpg) no-repeat;
width: 137px;
height: 38px;
float: left;}
#btn_agentur:hover { background:url(../Bilderhomepage/btn_agentur_aktiv.jpg) no-repeat;}

#btn_kompetenzen{ background:url(../Bilderhomepage/btn_kompetenzen.jpg) no-repeat;
width: 168px;
height: 38px;
float: left;}
#btn_kompetenzen:hover { background:url(../Bilderhomepage/btn_kompetenzen_aktiv.jpg) no-repeat;}

#btn_referenzen{ background:url(../Bilderhomepage/btn_referenzen.jpg) no-repeat;
width: 158px;
height: 38px;
float: left;}
#btn_referenzen:hover { background:url(../Bilderhomepage/btn_referenzen_aktiv.jpg) no-repeat;}

#btn_angebote{ background:url(../Bilderhomepage/btn_angebote.jpg) no-repeat;
width: 144px;
height: 38px;
float: left;}
#btn_angebote:hover { background:url(../Bilderhomepage/btn_angebote_aktiv.jpg) no-repeat;}

#btn_kontakt{ background:url(../Bilderhomepage/btn_kontakt.jpg) no-repeat;
width: 138px;
height: 38px;
float: left;}
#btn_kontakt:hover { background:url(../Bilderhomepage/btn_kontakt_aktiv.jpg) no-repeat;}





/* Content */

#werbung { background-color:#FFF; width: 900px; height: auto; float: left; }

#contentWrapper { background-color:#FFF; width: 900px; height: auto; float: left; }

#ContentLinks{
background-color: none;
width: 590px;
height: auto;
float: left;
margin: 5px 5px 5px 5px;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;
color:#797979;
}

#ContentRechts {
background-color: none;
width: 290px;
height: auto;
float: left;
margin: 5px 5px 5px 5px;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;
color:#797979;
}


/* Footer */

#footerwrapper { background:url(../Bilderhomepage/footer.jpg); width:900px; height:41px; float:left; }

#footerLinks {
background-color: none;
width: 450px;
height: auto;
float: left;
margin: 5px 5px 0 5px;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;}

#footerRechts {
background-color: none;
width: 420px;
height: auto;
float: left;
margin: 5px 5px 0 5px;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;
text-align:right}

#footerLinks p { margin:0px; padding:10px 0 10px 0; text-align:left; }
#footerRechts p { margin:0px; padding:10px 10px 10px 0; text-align:right; }


.BilderVerstecken {
width:0px;
height:0px;
display:none;
}



/* hintergrund links */


.kastenlinks_oben { background:url(../Bilderhomepage/kasten_links_oben.jpg) no-repeat; width:590; height:52px;}
.kastenlinks_oben p { margin:0px; padding:18px 10px 0 10px; text-align:center; color:#fff; }

.kastenlinks_mitte { background:url(../Bilderhomepage/kasten_links_bg.jpg) repeat; width:590; height:auto;}
.kastenlinks_mitte p { margin:0px; padding:0 10px 0 10px; text-align:center; }

.kastenlinks_unten { background:url(../Bilderhomepage/kasten_links_unten.jpg) no-repeat; width:590; height:52px;}

/* hintergrund rechts */

.kastenrechts_oben { background:url(../Bilderhomepage/kasten_rechts_oben.jpg) no-repeat; width:290; height:52px;}
.kastenrechts_oben p { margin:0px; padding:18px 10px 0 10px; text-align:center; color:#fff; }

.kastenrechts_mitte { background:url(../Bilderhomepage/kasten_rechts_bg.jpg) repeat; width:290; height:auto;}
.kastenrechts_mitte p { margin:0px; padding:0 10px 0 10px; text-align:center; }

.kastenrechts_unten { background:url(../Bilderhomepage/kasten_rechts_unten.jpg) no-repeat; width:290; height:52px;}
 
Dein nachgereichter CSS-Code in allen Ehren, aber ohne den dazugehörigen HTML-Code ist er in dieser Form für uns Außenstehende aussagelos.

Und nutze bitte zur Code-Präsentation die Highlight-Tags [code=html].[/code], [code=css].[/code], usw.

Aus dem Bauch heraus würde ich mal behaupten, dass eine fehlende clear-Eigenschaft anstelle der float-Regel für #footewrapper die Ursache auf deinem Schnappschuß ist.

Meinem empfohlenen Link bist du offensichtlich nicht nachgegangen.
 
Nein, sorry bin ich nicht, weil ich dachte es sei der Link den ich mir gestern schon angeschaut hatte:


HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if IE 6]>
<link rel="stylesheet" href="./css/ie6fixes.css" />
<![endif]-->


<link rel="shortcut icon" href="icon.ico">

</head>
<body>

	<div id="siteWrapper">
    	
        <div id="headWrapper">
        	<div id="headImage"></div> 
           
            <!-- navigation start -->
            	
                <a href="index.html" id="btn_startseite"></a>
            	<a href="agentur.html" id="btn_agentur"></a>
            	<a href="kompetenzen.html" id="btn_kompetenzen"></a>
                <a href="referenzen.html" id="btn_referenzen"></a>
                <a href="angebote.html" id="btn_angebote"></a>
                <a href="kontakt.html" id="btn_kontakt"></a>
            <!-- navigation ende -->   
            
            <img class="BilderVerstecken" src="Bilderhomepage/btn_startseite.jpg" />
            <img class="BilderVerstecken" src="Bilderhomepage/btn_agentur_aktiv.jpg" />
            <img class="BilderVerstecken" src="Bilderhomepage/btn_kompetenzen_aktiv.jpg" />
            <img class="BilderVerstecken" src="Bilderhomepage/btn_referenzen_aktiv.jpg" />
            <img class="BilderVerstecken" src="Bilderhomepage/btn_angebote_aktiv.jpg" />
            <img class="BilderVerstecken" src="Bilderhomepage/btn_kontakt_aktiv.jpg" />
              
        </div><!-- headwrapper ende -->
        
        <div id="werbung"></div>
        
        
        
        
        <div id="contentWrapper">

    
			<div id="ContentLinks">
           
            <!-- /////////////////////////////////////////////////////////////////////////////// -->
            <div class="kastenlinks_oben" style="margin-top:10px;">
            
            <p>Haftungshinweis</p></div>
            
            <div class="kastenlinks_mitte">
            
            <p>Trotz sorgf&auml;ltiger inhaltlicher Kontrolle &uuml;bernehmen ich keine Haftung f&uuml;r die Inhalte externer Links.
	   		F&uuml;r den Inhalt verlinkter Seiten sind ausschlie&szlig;lich deren Betreiber verantwortlich.</p>                   
            
             
            </div><div class="kastenlinks_unten"></div>
             
            
            <!-- /////////////////////////////////////////////////////////////////////////////// -->
            <div class="kastenlinks_oben" style="margin-top:10px;">
            
            <p>Copyright</p></div>
            
            <div class="kastenlinks_mitte">
            
            <p>Ohne die Genehmigung von &uuml;rfen keine der
			gezeigten Bilder kopiert oder weiterverwendet werden.</p>                   
            
             
            </div><div class="kastenlinks_unten"></div>
            
            <div style="clear: both"></div></div><!-- contentLinks ende -->
            <!-- /////////////////////////////////////////////////////////////////////////////// -->
            <!-- /////////////////////////////////////////////////////////////////////////////// -->
            <!-- /////////////////////////////////////////////////////////////////////////////// -->
            <!-- /////////////////////////////////////////////////////////////////////////////// -->
            <!-- /////////////////////////////////////////////////////////////////////////////// -->
            <div id="ContentRechts">         
            
            
            
            <!-- /////////////////////////////////////////////////////////////////////////////// -->
            <div class="kastenrechts_oben" style="margin-top:10px;">
            
            <p>Impressum</p></div>
            
            <div class="kastenrechts_mitte">
            
                
            
                   
            </div> <div class="kastenrechts_unten"></div>
            
            
            

           
            
            
          
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            <div style="clear: both"></div></div><!-- contentRechts ende -->			
		</div><!-- contentWrapperende -->
       
            
            
            
            
            
            
       <div id="footerwrapper">        
        	<div id="footerLinks"><p>&bull; &nbsp;Copyright (c) 2010  All rights reserved. 
             </p>  
            <div style="clear: both"></div></div><!-- footerlinks ende -->	
                       	
        	<div id="footerRechts"><p>
            &bull; &nbsp;
            <a href="partner.html">Partner</a>
            &nbsp;&bull;&nbsp;
            Impressum
            &nbsp;&bull;&nbsp;
            Haftung
            &nbsp;&bull;&nbsp;
            <a href="agb.html">AGB</a>
            &nbsp;&bull;          
            </p>  
            <div style="clear: both"></div></div><!-- footerRechts ende -->	             
        </div><!-- footerwrapper ende -->
        
        
        
        
    </div><!-- sitewrapper ende-->
</body>
</html>


Bin kein Profi, deshalb wird er für manche sehr wir wirken.
 
also ich hab dein link mal durch gelesen und habe

bsp genohmen:

CSS: 
html,body {
              height:100%;
}
            
#wrapper {
              position:relative;
              width:900px;
              min-height:100%;
              height:auto !important;
              height:100%;
              margin:0 auto;
}
 
#footer {
              position:absolute;
              bottom:0;
              left:0;
              width:100%;
              height:80px;
              margin:-80px 0 auto;

Was dort wrapper heißt, heißt bei mir ja div#siteWrapper!?
und footer = #footerwrapper !?

Hab die daten dort so hingeschrieben, hat aber nicht funktioniert?!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück