zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden position:fixed löscht background-color des Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.10.2007, 12:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.10.2007
Beiträge: 3
alivecc befindet sich auf einem aufstrebenden Ast
Standard position:fixed löscht background-color des Container

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.

Code:
#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ß
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.10.2007, 12:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von alivecc Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.10.2007, 12:54
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

In welchen Browsern tritt das Problem auf?
Hier geht es soweit ich das sehe um das gleiche Problem. Schau da mal nach.
Mit Zitat antworten
  #4 (permalink)  
Alt 25.10.2007, 13:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.10.2007
Beiträge: 3
alivecc befindet sich auf einem aufstrebenden Ast
Standard

Hier noch der Container:
Code:
#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ß
Mit Zitat antworten
  #5 (permalink)  
Alt 25.10.2007, 13:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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

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

Clear ist unwirksam wenn du fixed positionierst!
Mit Zitat antworten
  #6 (permalink)  
Alt 25.10.2007, 13:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.10.2007
Beiträge: 3
alivecc befindet sich auf einem aufstrebenden Ast
Standard

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

Hier das wichtigste, reduziert um plugins und so.

Code:
* {
  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ß
Mit Zitat antworten
  #7 (permalink)  
Alt 25.10.2007, 13:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich geb's auf.
Was genau verstehst du an dem geposteten Link nicht?
Mit Zitat antworten
  #8 (permalink)  
Alt 25.10.2007, 13:53
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Ich geb's auf.
Was genau verstehst du an dem geposteten Link nicht?
Was fricca damit meint, ist Folgendes:

Zitat:
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

Geändert von grischa_sgd (25.10.2007 um 14:26 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 25.10.2007, 14:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Was fricca damit (höchstwahrscheinlich) meint
Bravo.

Lassen wir zukünftig die Linkerei bleiben.
Wer braucht schon Links?
Was ist Hypertext?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.10.2007, 14:25
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Inline Listenelement wird nicht richtig im background befüllt SteveB CSS 3 28.04.2011 21:41
Problem mit CSS Style flo007 CSS 3 25.01.2009 18:08
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 02:35
Float - Probleme wolf1985 CSS 5 19.08.2008 09:14
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:55 Uhr.