✔ Footer ohne Rand?

T

teraflop

Mitglied
[Erledigt] Footer ohne Rand?

Moin,

ich plage mich schon seit Stunden mit einem nervigen Problem herum: Ich habe eine Seite gebaut die unten einen Footer hat, der sich (mit Hintergrund) über die gesamte Breite der Seite erstrecken soll und auch unten bis zum Rand gehen. In CSS sieht das momentan so aus:

#footer {
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
background: url(img/footerverlauf.gif) 0 0 repeat-x;
height: 120px;


}

Durch width 100% klappt das links und rechts auch wunderbar und der Hintergrund geht bis an die Seitenränder. Unten habe ich allerdings sowohl in Firefox als auch in IE noch einen minimalen Rand von ca. 5px, der ja immer vom Browser hinzugefügt wird. Ich krieg den einfach nicht weg :(
margin/padding auf 0 setzen bringt überhaupt nichts, hab ich alles schon probiert. Da ich ständig Seiten sehe wo das funktioniert muss es doch eine Lösung geben! Habe auch schon gegoogled aber nichts schlüssiges gefunden .. ich hoffe jemand kann mir helfen. Danke schon mal!

Ich hab noch ein kleines Bild gemacht damit klar ist was ich meine: http://www.abload.de/img/randvd6a.jpg
 
Zuletzt bearbeitet:
Hi,

zeig mal bitte den HTML-Code, sowie den übrigen CSS-Code deiner Seite, denn anhand dieses Codeschnipsels lässt sich hierzu nichts sagen.

Ein Link zu deiner Seite wäre hier aber auch nicht schlecht, um sich das direkt anschauen und mittels Firebug analysieren zu können.

mfg Maik
 
Brauchst du unbedingt auch den gesamten HTML-Code? Ich müsste jetzt eine Menge Zeug da rausklauben das ich (noch) nicht online stellen/in Foren kursieren haben will da das Projekt nicht für mich privat ist. Der Aufbau ist aber relativ Simpel, ich habe einen Wrapper in dem sich ein Header+Navi sowie der Contentbereich+Sidebar befindet. Unter dem Wrapper kommt dann der Footer aus dem ersten Post.

Die CSS kann ich natürlich mal pasten:
(Ich weiß da kann man noch einiges sonst optimieren, aber darum gehts hier gerade nicht ;) )


Code: 
@charset "utf-8";

 { margin-top: 0px;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
	background-color: #FFF;
	background-image: url(img/balkenverlauf.gif);
	background-repeat: repeat-x;
	background-position: 0px 160px;
	background-attachment: scroll;
	margin:0px 0px 0px 0px;
 	padding:0px 0px 0px 0px;
}

#wrapper {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}
h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 36px;
	font-weight: lighter;
	color: #FFF;
	text-align: left;
	margin-botton: 10px;
}

h2 {
	font-size: 22px;
	font-weight: lighter;
}


h3 {
	text-align: center;
	font-size: 16px;
	padding: 0px;
	margin: 0px;
	font-weight: lighter;
}


#logo {
	margin-top: 30px;
	margin-bottom: 30px;
	padding-left: 40px;
}

#header {
	width: 920px;
	padding-left: 40px;
	height: 239px;
}
#navi {
	width: 700px;
	margin-top: 20px;
	float: left;
}

#navi ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
		}

#navi ul li {
	float: left;
		}

#navi img {
	margin-right: 16px;
}

#header h1 {
	float: left;
}


#addresse {
	height: 209px;
	width: 215px;
	float: right;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	padding-top: 5px;
}
#maincontent {
	width: 880px;
	padding-left: 40px;
	text-align: justify;
	padding-right: 40px;
	margin: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	background-image: url(img/schatten_960px.png);
	background-repeat: repeat-y;
	background-position: center center;
	line-height: 20px;
}
#footerinhalt img {
	float: right;
	margin-top: 25px;
	padding-right: 15px;
	padding-left: 15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#sidebar {
	float: right;
	width: 185px;
	text-align: justify;
	padding-left: 20px;
	padding-bottom: 30px;
	margin-top: 0px;
	margin-left: 20px;
	padding-right: 20px;
	border: thin solid #666;
	padding-top: 30px;
}
#sidebarlinks {
	text-align: center;
	font-weight: normal;
	background-color: #FFF;
	border: thin solid #666;
}
#maincontentpics {
	border: thin solid #333;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
}
#footer  {
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	background: url(img/footerverlauf.gif) 0 0 repeat-x;
	height: 120px;
	margin-top: 0px;

}
#header a:link {
	color: #FFF;
}

#footerinhalt{
	height: 120px;
	width: 910px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 40px;
	padding-bottom: 15px;
	padding-left: 20px;
	color: #FFF;
}
#footerinhalt ul {
	list-style-position: outside;
	list-style-type: square;
	text-align: left;
}


a:link {
	color: #333;
	text-decoration: none;
}
#footerinhalt a:link {
	color: #FFF;
}
#footerinhalt a:visited {
	color: #FFF;
}
#sidebar a:hover {
	color: #FFF;
	background-color: #666;
	text-align: center;
	padding-right: 37px;
	padding-left: 37px;
	padding-top: 3px;
	padding-bottom: 3px;
}

#footerinhalt a:hover {
	color: #999;
}


a:hover {
	color: #09F;
}
a:visited {
	color: #333;
	text-decoration: none;
}
 
Ohne den HTML-Code kann ich mit dem so nichtssagenden Stylesheet nichts anfangen.

Oder soll ich jetzt raten, dass es eventuell hieran liegt?
Code: 
#maincontentpics {
	border: thin solid #333;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
}


Entweder zeigst du ihn hier, oder stellst besser die Seite online, damit ich sie mittels "Firebug" unter die Lupe nehmen kann.

Den Link kannst du mir auch per PN zukommen lassen, falls die Öffentlichkeit hiervon ausgeschlossen bleiben soll.

mfg Maik
 
Na gut, ich habe mal alles unnötige aus dem HTML Code rausgenommen, hoffentlich hilfts.

Code: 
<!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></title>
<link href="das stylesheet.css" rel="stylesheet" type="text/css" />
	
</head>


<div id="wrapper">
  <div id="logo"><img src="img/Logo 200x102.jpg" width="200" height="102" alt="Logo" /></div>
  <div id="header"><br /><br />
    <h1>Home</h1>
   
    <div id="addresse">
     
   	</div>
     <div id="navi">
</div>
  </div>
  <div id="maincontent"><h2>Maincontent Headline</h2>
  <div id="sidebar"><h3>Sidebar Headline</h3>
   
    <p id="sidebarlinks"><a href="http://www.test.de">Sidebar Sublink 1</a></p>
    <p id="sidebarlinks"><a href="http://www.test.de">Sidebar Sublink 2</a></p>
    <p id="sidebarlinks"><a href="http://www.test.de">Sidebar Sublink 3</a></p><hr />
    <p>Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. <br />  <img src="img/imac.jpg" width="185" height="174" alt="imac" /> <br /> Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. </p>
  </div>
  Dies ist ein Typoblindtext. 
  <div id="maincontentpics"><img src="img/cat cable.jpg" width="300" height="200" alt="cat cable" /></div>
 </div> 
</div>
 <div id="footer">
   <div id="footerinhalt"> 
   <ul>
     <li><a href="http://www.test.de">Impressum</a></li><br />
   <li><a href="http://www.test.de">AGB</a></li><br />
   <li><a href="http://www.test.de">Sitemap</a></li><br />
   <li><a href="http://www.test.de">Kontakt</a></li>
   </ul>
   
   </div>
 </div>

</body>
</html>


Edit: Achja: Woran es liegt, weiss ich ja eigentlich: daran dass alle Browser zu HTML Elementen wie Divs immer einen kleinen Sicherheitsabstand hinzufügen so dass sie nicht 100% bis zum Rand des Browsers gehen. Was ich wissen muss ist, wie ich das verhindere ;)
Mit margin: 0px; klappts ja zumindest links und rechts (siehe body im css, nachdem ich dort alles auf 0 gesetzt hatte gings) aber aus irgendeinen Grund halt nicht unten.
 
Zuletzt bearbeitet:
Wenn dies nicht der Grund ist, obwohl er dem Markup entsprechend sehr naheliegend ist:
Maik hat gesagt.:
Code: 
#maincontentpics {
	border: thin solid #333;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
}
Zum Vergrößern anklicken....
... dann versuch es mal hiermit:

CSS: 
#maincontentpics img {display:block;}

mfg Maik
 
Maik hat gesagt.:
Wenn dies nicht der Grund ist:
... dann versuch es mal heirmit:

CSS: 
#maincontentpics img {display:block;}


mfg Maik
Zum Vergrößern anklicken....

Das ists nicht, hab den #maincontentpics schonmal komplett auskommentiert ohne erfolg. Wie in meinem letzten Post gesagt: Ich glaube nicht, dass der Rand durch eine irgendwie vererbte Margin zustandekommt, sondern dadurch, dass Firefox bzw. der IE automatisch diesen "Sicherheitsrand" bei bestimmten Elementen Reinhauen.
 
Sicherheitsrand bzw. -abstand?

Wenn dem so wäre, dann lässt er sich mit dieser Regel zu Beginn des Stylesheets zurücksetzen:

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

Übrigens ist das hier absolut sinnfrei, weil ohne Selektor benannt:

CSS: 
{ margin-top: 0px;
}

Achja, dein geposteter Code sieht in den Browsern übrigens etwas eigenwürdig und merkartig aus, und ist von deinem Schnappschuß meilenweit entfernt.

mfg Maik
 
Ja, das mit dem Universalselektor hatte ich auch schon probiert! Das funktioniert dann auch und der Rand unten ist weg - Das Problem ist, dass es mir dann auch einige margins der anderen Selektoren weghaut (komischerweise nur top und bottom, left und right margins bleiben davon unberührt?) und ich habe noch nicht rausbekommen, wie ich das verhindere, also bestimmte Selektoren von dem Effekt "verschone", denn ich wills ja nur beim Footer haben.

Daher kommt übrigens auch das Codefragment ganz oben ;) Da war mal ein Sternchen vor, da ich zu faul um ausklammern war hab ich einfach den Namen weggenommen und die Eigenschaft stehen lassen ;)

Dass mein Code merkwürdig ist kann gut sein, ich bin noch ziemlicher Anfänger was HTML angeht, wenn sie mit Inhalt gefüllt ist funktioniert die Seite bei mir in Firefox und IE6 aber wunderbar, das ist fürs erste die Hauptsache.
 
Es liegt an den voreingestellten Polsterungseigenschaften des <ul>-Listenelements innerhalb des Footers, die zurückgesetzt gehören:

CSS: 
#footer ul {
margin:0;
padding:0;
}

Hab deinen Schnappschuß vorhin falsch interpretiert, und die dunkle Statusleiste als Footer betrachtet :suspekt:

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück