[alivecc]

Hallo zusammen,

Anfänger Frage:

ich möchte den Bottom der Seite fixieren und habe ihn dazu mit Position:fixed; fixiert. Das Ergebnis ist auch soweit wie ich es haben möchte.

#bottom {
background: #000000 url(images/balken.gif) repeat-x;
  clear: both;
  padding: 3px 20px;
  position:fixed;
  bottom:0px;
  width: 1100px;
}

Nur wir mir dadurch die Background-color des Containers ausserkraft gesetzt.

Wenn ich position:fixed auskommentiere ist die Farbe wieder da.

Was kann ich tun?

Danke und Gruß

[fricca]

Zitat von alivecc

Was kann ich tun?

Vollständigen Code zeigen, der dein Problem nachvollziehbar macht.
Siehe auch: http://xhtmlforum.de/40080-fuer-frag...twortende.html

Vermutlich liegt die Ursache deines Problems darin, dass Clear bei absolut positionierten Elementen keine Wirkung hat.

[grischa_sgd]

In welchen Browsern tritt das Problem auf?
Hier geht es soweit ich das sehe um das gleiche Problem. Schau da mal nach.

[alivecc]

Hier noch der Container:

#container {
  background-color: #99ccff;
	margin: 0 auto;
  text-align: left; /* needed for center hack in the body to display website centered in IE < 6 */
	width: 891px;


}

das clear:both; hatte ich schon auskommentiert, hat aber keine Wirkung gezeigt.

Bin ausschließlich mit firefox 2.0 unterwegs

Gruß

[fricca]

CSS-Schnipsel nützen nichts.
Warum liest du nicht, was in dem geposteten Link steht?

das clear:both; hatte ich schon auskommentiert, hat aber keine Wirkung gezeigt.

Clear ist unwirksam wenn du fixed positionierst!

[alivecc]

Sorry, aber ich beim ersten Versuch den Code nicht gepostet bekommen, da zu groß...

Hier das wichtigste, reduziert um plugins und so.

* {
  font: 100% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Geneva, Arial, Sans-Serif;

margin: 0;
  padding: 0;
	list-style: none;
}

html, body {
	color: black;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}

body {
  background: #567 url(images/bg_body.gif) center repeat-y;
  font-size: 0.9em;
  text-align: center; /* hack for IE5.5 to display website centered */
}

h2, h2 a, h2 a:hover, h3, h3 a, h3 a:hover, h4, h4 a, h4 a:hover {
	color: #3366cc;
	margin: 20px 0 10px;
}

a {
	color: #3366cc;
	font-size: 1.0em;
  outline: none;
	text-decoration: none;
}

a:hover {
	color: black;
}


.entry a {
  text-decoration: underline;
}

a img {
	border: none;
}

img {
  font-size: 0.6em;
}

strong, b {
	font-weight: bold;
}

em, i, cite {
	font-style: italic;
}

big {
  font-size: 120%;
}

small {
  font-size: 80%;
}

hr {
  border-bottom: 1px dotted #d8fbd8;
}

code, pre {
	background: #E8EFE8;
	display: block;
  margin: 10px 0 10px 0;
	padding: 5px;
}

blockquote {
	background: url(images/cite.gif) no-repeat;
	margin: 5px 15px 5px 15px;
	padding: 5px 10px 5px 25px;
}

.right {
  text-align: right;
}

.centered {
  text-align: center;
}

.block {
  text-align: justify;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.clear {
	clear: both;
  padding: 10px 0 0 0;
}

.space {
  padding: 15px 0 0 0;
}

.border {
  border-bottom: 1px solid #444;
}

acronym, abbr, span.caps {
	cursor: help;
  border-bottom: 1px dotted;
}

/* page */
#header {
  background: url(images/bg_header_grass.jpg) repeat-x;
  cursor: pointer;
	height: 160px;
	text-align: right;
	position: fixed;
	width: 1100px;
	z-index: 100;

}

#headertitle {
  padding: 15px 80px 0 0;
}

#navigation {
	background: #d8fbd8 url(images/balken.gif) repeat-x;
  border-bottom: 0px solid #444;
  height: 18px;
  font-size: 1.2em;
  padding: 3px 10px 2px 5px;
	position: fixed;
	top: 160px;
	z-index: 100;
	width: 1085px;
}

#container {
  background-color: #99ccff;
	margin: 0 auto;
  text-align: left; /* needed for center hack in the body to display website centered in IE < 6 */
	width: 891px;


}

.outercontent {
  float: left;
  overflow: hidden;
	width: 80%;
}

.outercontentwide {
  float: left;
  width: 100%; 
}

#content {
	margin: 20px 0;
  min-height: 800px;
  overflow: hidden;
	padding: 0px 15px 20px;
	position:relative;
	top:180px;
}


.outersidebar {
  float: right;
  overflow: hidden;
  width: 20%;
}

#sidebar {
  margin: 15px 0 100px;
  overflow: hidden;
}

#footer {
  background: #d8fbd8 url(images/bg_green.jpg) repeat-x;
  clear: both;
  width: 100%;
  overflow: hidden;
}

/* page end */

/* forms and tables */
td, th {
  vertical-align: top;
}

form {
  margin: 5px 0 5px;
}

input, textarea {
	background: url(images/bg-input.jpg) top left repeat-x;
	border: 1px solid #ddd;
	margin: 0 0 5px 0;
  overflow: auto;
}

input:focus, textarea:focus {
	background:#ffc;
}

.noborder {
  background: none;
  border: none;
}

label:hover {
	cursor:pointer;
}

/* forms end */

/* header */

#header{
/*position: ;
width: 1100px;
overflow: auto;*/
}

#header h1 a {
  font-size: 2.3em;
}

#header h2 {
  font-size: 1.1em;
  margin: 0;
}

#navigation .feedicon {
  background: url(images/iconset.gif) no-repeat 0 -622px;
	display: inline;
	float: right;
	margin: 0 10px;
	padding: 0 0 0 22px;
}

/* suckerfish top-navigation */
#nav ul { z-index:1; } /* Safari hack - otherwise menus are not fully accessable */

#nav a {
	display: block;
	padding: 0 9px;
}

#nav li {
	float: left;
}

#nav li:hover, #nav li.sfhover { /* ie7 hack - otherwise menus stay forever */
  position: static;
}

#nav li ul {
	background: #eefad7;
  margin: 0 0 0 8px;
  padding: 2px 5px 5px 5px;
	position: absolute;
	left: -999em;
	border: 1px solid #444;
}

#nav li ul a {
	font-size: 0.85em;
	white-space: nowrap;
}

#nav li ul li {
  display: inline; /* IE5.5 hack - otherwise subemenus are not accessable */
  float: none; 
}

#nav li li ul {
	background: #faefd7;
	margin: -1.22em 0 0 90%;
	position: absolute;
	left: -999em;
}

#nav li li li ul {
	background: #eefad7;
	position: absolute;
	left: -999em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul,
#nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul,
#nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

/* header end */



#s {
	background: white url(images/iconset.gif) no-repeat 2px -564px;
	padding: 3px 0 3px 25px;
  width: 80%;
}

/* content */



#content {
	line-height:1.3em;
	/*position: relative;
	top: 130px;*/
}

#content h2 {
  font-size: 1.4em;
  margin: 0;
}

#content h2 a:hover {
  color: #68f;
}

#content h3 {
  font-size: 1.3em;
}

#content h4 {
  font-size: 1.1em;
}

#content p {
	line-height: 1.3em;
	margin: 10px 0 10px;
}

#content ul li {
	background: url(images/bullet_blue.gif) no-repeat;
	padding: 0 0 0 16px;
}

#content ul ul li {
  padding: 0 0 0 15px;
}

#content ol li {
  margin: 0 0 0 30px; 
  list-style: decimal;
  padding: 0;
}

#content dt {
  color: #3a7930;
}

#content td {
  padding: 0 10px 10px 0;
}

#sidestep {
  margin: 0 0 25px;
  overflow: hidden;
  padding: 0 0 2px;
}

.previouslink {
  border-bottom: 1px solid #444;
  display: block;
}

#content .title {
  margin: 0 0 10px 0;
  overflow: hidden;
}

.editlink {
	float: right;
}

.info {
  margin: 4px!important;
}

.infoblock {
	background: #f8f8f8;
	border-bottom: 1px dotted #666;
	border-top: 1px dotted #666;
  margin: 40px 0 40px 0;
	padding: 10px 10px 0 8px;

.entry {
  clear: both;
  width: 100%;
}

#content .post, #content .singlepost {
  clear: both;
  margin: 0 0 30px 0;
  overflow: hidden;
  padding: 0 0 20px 0;  
}

.more-link, .more {
	background: url(images/iconset.gif) no-repeat 0 -338px;
  display: block;
  margin: 10px 0 0 0;
	padding: 0 0 0 17px;
}

.tag {
	background: url(images/iconset.gif) no-repeat 0 -283px;
	padding: 0 0 0 22px;
}

#content .tags {
  clear: both;
	letter-spacing: -1px;
	margin: 20px 0 0 0;
	text-align: right;
}

.rss {
	background: url(images/iconset.gif) no-repeat 0 -624px;
	padding: 0 0 0 21px;
}

.trackback {
	background: url(images/iconset.gif) no-repeat 0 -509px;
	padding: 0 0 0 21px;
}


/* sidebar & footer */
#sidebar {
	border-left: 1px dotted #333;
	padding: 0 15px 70px 15px;
	background: #99ccff;
	position:fixed;
	top:180px;
	width: 12%;
}

.widget_title {
  clear: both;
}

#sidebar .alert {
  background: #e8efe8;
  border: 1px solid red;
  padding: 5px;
  text-align: center;
}

#subnavigation {
  background: #d58422;
  border: 2px dotted #444;
  margin: 15px 0 0;
  padding: 0 7px;
}

#sidebar .pagenav {
  background: none;
  padding: 0;
}

#subnavigation ul {
  padding: 0 0 5px 0;
}

#subnavigation li.page_item {
	background: url(images/bullet_sub.gif) no-repeat;
  padding: 0 0 0 17px;
}

.current_page_item .page_item a {
  font-weight: normal;
}

.current_page_item a {
  font-weight: bold;
}

#sidebar ul li, #footer ul li {
	background: url(images/bullet_blue.gif) no-repeat;
	padding: 0 0 0 16px;
}

#sidebar .linkcat ul li, #footer .linkcat ul li {
	background: url(images/bullet_go.gif) no-repeat;
  padding: 0 0 0 18px;
}

#sidebar .linkcat, #footer .linkcat {
  background: none;
  padding: 0;
}

.sidestep {
  margin: 8px 0 0;
}

#sidebar #column {
  overflow: hidden;
  width: 100%;
}

.outercolumn1 {
	background: #ffc977 url(images/balken_orange_gedreht.gif) repeat-x;
  float: left;
  overflow: hidden;
  width: 100%;
  font-size: 110%
}

/*.outercolumn2 {
	background: #d8fbd8 url(images/bg_green.jpg) repeat-x;
  float: right;
  overflow: hidden;
  width: 49%;
}
*/
#sidebar .column1 {
	color: #333;
  display: block;
	margin: 15px 2px 0 0;
	padding: 0 0px 10px 9px;
}

#sidebar .column2 {
	color: #333;
  display: block;
	margin: 15px 0;
	padding: 0 3px 10px 3px;
}

#log, #pwd, #sidebar select, #footer select {
  width: 90%;
}

#calendar_wrap {
	margin: 0 auto;
  max-width: 250px;
}

/* footer */
.outerleftfooter, .outermiddlefooter, .outerrightfooter {
  float: left;
  overflow: hidden;
  width: 33%;

}


#footer .Left_Footer {
	margin:15px 15px 15px 10px;
  overflow: hidden;
	padding:0px 5px 10px 5px;

}

#footer .Middle_Footer {
	margin:15px 15px 15px 5px;
  overflow: hidden;
	padding:0px 5px 10px 5px;

}

#footer .Right_Footer {
	margin:15px 0px 15px 5px;
  overflow: hidden;
	padding:0px 5px 10px 5px;
}

#footer h2, #footer h3 {
  border-bottom: 1px dotted #444;
  margin: 10px 0 10px;
}

#footer ul li {
	background: url(images/bullet_blue.gif) no-repeat;
  margin: 0 0 2px;
	padding: 0 0 0 16px;
}

#bottom {
background: #000000 url(images/balken.gif) repeat-x;
/*  border-bottom: 1px solid #444; 
  height: 19px;
  font-size: 1.2em;
  padding: 3px 10px 2px 5px;
  background: #3366cc;*/
  clear: both;
  padding: 3px 20px;
  position:fixed;
  bottom:0px;
  width: 1100px;

}

#bottom li {
  color: #eee;
  display: inline;
  padding: 0 5px;
}

#bottom a {
  color: #000000;
}

#bottom a:hover {
  color: #09e;
}

Danke und Gruß

[fricca]

Ich geb's auf.
Was genau verstehst du an dem geposteten Link nicht?

[grischa_sgd]

Zitat von fricca

Ich geb's auf.
Was genau verstehst du an dem geposteten Link nicht?

Was fricca damit meint, ist Folgendes:

Für Fragende

Versuche, das Problem nachvollziehbar für andere zu beschreiben. Fang dabei mit der Betreffzeile an.

Stell einen kompletten, lauffähigen Code ein, der einen das Problem sicher nachvollziehen lässt und der dabei auf Überflüssiges verzichtet. Selten, sehr selten sind dazu mehr als ein paar Handvoll Zeilen notwendig. Viele Probleme lösen sich dabei auch von selbst.

Gib zusätzlich eine URL an: Niemand hat Zeit, Archive auszupacken und Codefragmente zusammenzusetzen. Manche Probleme sind lokal gar nicht nachvollziehbar. Die Tools der Antwortenden, die bei der Fehlersuche helfen, funktionieren nicht mit Schnipseln. Ein "relevanter Ausschnitt" hat dir selbst den Fehler auch nicht offenbart und mag für den Nächsten gar nicht so relevant sein.

Validiere sowohl dein (X)HTML als auch dein CSS selbst. Maschinen können viele Fehler effizienter finden.

>Schreib, was du schon versucht hast, um anderen die Wiederholung zu ersparen.<(toscho)

Diese Schritte zeugen von Respekt vor den Bemühungen der Antwortenden, verkürzen Threads und machen eine Forumssuche überhaupt erst sinnvoll. (Ja, dieses Forum hat eine Suchfunktion.) Manchmal muss man auf einen der Punkte verzichten, nie auf alle.

Reduzier deine Seite auf das Wichtigste und Nötigste.
Validier sie. Ansonsten kann dir niemand eine Hilfestellung geben - geschweige denn das Problem nachvollziehen können.

+ auch den HTML-CODE
+ Bestenfalls erstellst du einfach eine Beispielseite und gibst hier die URL an

[fricca]

Was fricca damit (höchstwahrscheinlich) meint

Bravo.

Lassen wir zukünftig die Linkerei bleiben.
Wer braucht schon Links?
Was ist Hypertext?

[grischa_sgd]

Zitat von fricca

Bravo.

Lassen wir zukünftig die Linkerei bleiben.
Wer braucht schon Links?
Was ist Hypertext?

Natürlich bin ich auch für Links, aber ich denke, sonst hätte er es nicht kapiert... Nix für ungut alivecc.