Problem mit Webseitenbreite

struchli · 02.11.11, 19:07

Hallo Zusammen

Ich entwickle momentan eine Webseite für Joomla 1.5.X. Meine Webseite ist 100% Breit, darin befindet sich ein DIV mit einer festen Breite, der zentriert ist.. Dabei habe ich folgendes Problem: Wenn das Fenster maximiert ist, ist die Breite des html Tags 100% und der zweite DIV wird auch korrekt angezeigt. Sobald man aber das Fenster verkleinert auf zum Beispiel die grösse des festen Div's, wird zwar die Webseite korrekt dargestellt, aber es hat unten eine Scrollbar. Schiebt man diese nach rechts, so sieht man wie die Seite irgendwann endet und dann einfach Weiss kommt (Siehe Bild). Mit dem Debugger habe ich herausgefunden, dass der Fehler schon beim HTML Tag liegt.

Frage: Wie kann ich diesen Fehler beheben?
Habe Lösung gefunden! Bei Fragen bitte PN

Bild (Size: 535 X 708px): Blau Markierte ist der HTML Tag. Man sieht schön, wie er plötzlich endet.

HTML & PHP Code:

CSS Code:

Code:

/****** CSS Webseite ******/
/******© Nicole Fink, 2011 - V. 1.0 ******/

body {
 /* Background:url(images/background.jpg);*/
  background-color: #f5f5f5;
  background-color: rgb(245, 245, 245); /* The Fallback */ /* Hintergrundfarbe */
  background: rgb(245, 245, 245);
  color: white; /* Schriftfarbe */
  background-repeat:repeat-x;
  margin: 0 auto;
}

#wrapper{
	text-align:center;
	width:100%;
	height: 100%;/*automatische Hoehe*/
	margin:0 auto;/*positioniert den wrapper in der Mitte des Browserfensters*/
	/*background-color:#f5f5f5;*/
	background-color: #add2e6;
	background:rgb(173, 210 230);
}

#blabla{
	text-align:center;
	width:935px;
	height: auto;/*automatische Hoehe*/
	margin:0 auto;/*positioniert den wrapper in der Mitte des Browserfensters*/
	/*background-color:#f5f5f5;*/
	background-color: #f5f5f5; 
	background: rgb(245, 245, 245);
	background-color: rgb(245, 245, 245); 
}

#col{
	width:100%;
	height:auto;
	margin:0;
	background-color: #add2e6;
	background-color:rgb(173, 210 230);
	background:rgb(173, 210 230); 
}

#line{
	background-image:url(images/strike.jpg);
	background-repeat:repeat-x;
	height:8px;
	width:100%;
}
	

#logo{
	position:relative;
	background:url(images/logo.png);
	width:      935px;
	height:     150px;
	background-repeat:no-repeat;
	margin-top:35px;
	margin-left: -20px;
	text-align:left;
	}
	
#logo h1 { 
    color: #2796d6;
  	text-transform: uppercase;	
	font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-transform: lowercase;
	font-size: 28px;
	font-variant: small-caps;
	font-style:italic; 
	padding-top: 90px;
	padding-left:30px;
	letter-spacing: 3px;
	}
	
#navigation{
	position:relative;
	width: 935px;
	height: 41px;
	margin-left:480px;
	font-size: 21px;
	text-align: center; 
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	letter-spacing: 2px; 
	color: #7d8692; 
}
/******** LINK Definition NAVIGATION********/
#navigation a:link
{
color: #706f6a;
text-decoration: none;
}
#navigation a:visited
{
color: #706f6a;
text-decoration: none;
}
#navigation a:hover
{
color: #2796d6;
text-decoration: none;
}

			/*** Bilder Header ***/ 

			#bild_tan{
				position: relative; 
				background: url(images/bild_tan2.jpg);
				width: 935px;
				height: 311px;
				margin-top: 0px;
				}
				
			#bild_help{
				position: relative; 
				background: url(images/bild_help.jpg);
				width: 934px;
				height: 315px;
				margin-top: 0px;
				}
				
			#bild_nini{
				position: relative; 
				background: url(images/bild_nini.jpg);
				width: 936px;
				height: 318px;
				margin-top: 0px;
				}
				
			#bild_zeit{
				position: relative; 
				background: url(images/bild_zeit.jpg);
				width: 936px;
				height: 315px;
				margin-top: 0px;
				}
				
			#bild_preis{
				position: relative; 
				background: url(images/bild_preis.jpg);
				width: 924px;
				height: 312px;
				margin-top: 0px;
				}
			#bild_kontakt{
				position: relative; 
				background: url(images/bild_kontakt.jpg);
				width: 924px;
				height: 314px;
				margin-top: 0px;
				}
			#bild_treppe{
				position: relative; 
				background: url(images/bild_treppe.jpg);
				width: 931px;
				height: 312px;
				margin-top: 0px;
				}
			#bild_all{
				position: relative; 
				margin-top: 0px;
				background-color:#f5f5f5;
				background: rgb(245, 245, 245);
				background-color: rgb(245, 245, 245); 
				}

	
#offerte_button{
	position:absolut;
	width: 200px;
	height:70px;
	padding-top: 210px;
	padding-left: 111px;
	border:none;
	}

#text{
	position: relative; 
	background-color:#add2e6;
	background-color:rgb(173, 210 230);
	background:rgb(173, 210 230);
	height: auto; 
	width: 935px; 
	margin: 0 auto;
	padding-top: 38px;
	margin-left: 10px; 
	font-family: Verdana, Arial, Tahoma, sans-serif;
	font-size: 14px;
	font-style: italic;
	color: black; 
	}

  #text h1 { 
	width: 935px;
	position: relative; 
	color: #616161;
  	text-transform: uppercase;
	font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align: left; 
	font-size: 30px;
	font-variant: small-caps;
	font-style:italic;  }
}

#fusszeile{
	border: 2px soild red; 
	color: red;
	}	
	
	
#fusszeile{	
	width: 935px; 
	margin-top: 30px;
	border: 2px soild red;
	width:      935px;
	text-align: center;
	font-family: Verdana, Arial, Tahoma, sans-serif;
	font-size:  12px;
	color:      black;
	letter-spacing: 1px; /* Abstand zwischen den Buchstaben */
	line-height:    1.5;
	margin-left: auto ;
	margin-right: auto ;
	 /* Zeilenabstand, ohne Einheit */		
	}
	
/******** LINK Fusszeile ********/
#fusszeile a:link{
	color: black;
	text-decoration: none;
	}
#fusszeile a:visited{
	color: black;
	text-decoration: none;
	}
#fusszeile a:hover{
	color: #7d8692;
	text-decoration: none;
	}
/******** LINK Fusszeile ENDE********/

CSS IE Code:

Vielen Dank für die Hilfe!!