sticky-footer ragt über die Containerbox

darkinside · 10.01.2013

Hallo ich habe mit einem Turorial einen div-container und div-boxen erstellt.
Wenn ich dem footer einen Abstand von links gebe um den Inhalt(Text) nach rechts zu schieben, vergrößert sich der footer nach rechts und läuft über den ContainerRand hinaus. Oder kann der Firefox 18 das nicht richtig darstellen?

Ich hoffe ihr könnt mir da weiter helfen.

Hier mein Code_CSS

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;

}
.rundecke{
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#seite {
position: relative;
min-height: 100%;
width: 550px;
margin: 0 auto;
background-color: silver;
}

#inhalt{
background-color: orange;
padding-bottom: 2em;
color:white;
padding-left:10px;
padding-top:5px;
}
.innenabstand{
padding-left: 5px;
padding-top: 5px;
border-radius: 10px;
}
#fussbereich{
position: absolute;
bottom: 0;
width: 100%;
background-color: yellow;
height: 2em;
color: silver;
}

Mein Code HTML:

<!DOCTYPE html>
<html>

<head>
<title>Test</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
<meta charset="UTF-8">

<link href="css/design.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="seite" class="rundecke">
<div id="inhalt" class="rundecke">
<p>Inhalt</p>
<p>Inhalt</p>
<p>Inhalt</p>
<p>Inhalt</p>
<p>Inhalt</p>
<p>letze Zeile vom Inhalt</p>
</div>

<div id="fussbereich" class="innenabstand">
www.html-seminar.de
</div>
</div>

</body>
</html>

SyyKum · 10.01.2013

AW: sticky-footer ragt über die Containerbox

wenn du das html gerüst noch posten könntest, könnte man dir sicherlich helfen.

darkinside · 10.01.2013

AW: sticky-footer ragt über die Containerbox

so, habs nochmal richtig reinkopiert

.

SyyKum · 10.01.2013

AW: sticky-footer ragt über die Containerbox

also.
wenn du padding verwendest musst du folgendes beachten:
Das was du als padding in %, em oder pixel angibst, MUSST du vom contaijner wieder abziehen.
Beispiel: der Div-Container ist 1000px breit und besitzt ein padding links von 20px musst du die 20px von den 1000px abziehen.

in deinem fall kannst du mit der texteinrück text-indent arbeiten. die bezieht sich nur auf den text und lässt den Div-Container in Ruhe.
...
.innenabstand{
padding-left:0px;
padding-top: 5px;
border-radius: 10px;
text-indent:30px;
}
...

darkinside · 12.01.2013

AW: sticky-footer ragt über die Containerbox

Danke dir für die Erklärung und eine Hilfe, hat geklappt!