• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild wird mehrmals gezeigt

S

SchokoBrunnen

Mitglied
Hallo,


ich übe gerade und habe ein Design von einem Freund bekommen, der Hobby-Grafiker ist. Ich habe jedoch folgendes Problem; Ein Bild wird mehrmals angezeigt, die Breite und Höhe stimmt, jedoch wird es über den gesamten Bildschirm gezeigt.
Schaut es euch am besten an, dann versteht ihr was ich meine:
HabboLayout - 2

CSS Code :

Code: 
@charset "UTF-8";
/* HTML AND BODY */ 
/* // ---------------------------------------------------\\ */
/* // LAYOUT CODED BY || ME.AND.YOU. || HABBO.DE         \\ */
/* // LAYOUT CODED BY || SCHOKOBRUNNEN || HABBO.LC      \\ */
/* // DESIGNED BY     || MeatIce.x3 || HABBO.DE         \\ */
/* // ---------------------------------------------------\\ */




	html, body {	
		background-image: url("../images/bg.png");
		margin: 0; 
		padding: 0;	
	}




/* DIES UND DAS */ 




	img {	
		border: none;
	}




	#floatright {
		float: right;
	}


#site {
   width: 700px;
   height: auto;
   margin: auto;
   padding: auto;
}


.content_titel {
    padding-top: 14px;
    padding-left: 35px;
}




#user_pos	{
	padding-top: 100px;
	padding-left: 300px;
}




/* LINKS */


a:link 
{ font-family: Verdana,Arial; 
font-size: 11px; 
color: #ffffff; 
text-decoration: none; 
text-underline: none; } 


a:active 
{ font-family: Verdana,Arial; 
font-size: 11px; 
color: #ffffff; 
text-decoration: none; 
text-underline: none; } 


a:visited 
{ font-family: Verdana,Arial; 
font-size: 11px; 
color: #ffffff; 
text-decoration: none; 
text-underline: none; } 


a:hover 
{ font-family: Verdana,Arial; 
font-size: 11px; 
color: #ffffff; 
text-decoration: none; 
text-underline: none; } 








/* POSITIONEN */


	.nav_pos1 {
		padding-top: 14px;
   		padding-left: 20px;
}


	.nav_pos2 {
		padding-top: 13px;
   		padding-left: 18px;
}


	.nav_pos3 {
		padding-top: 17px;
   		padding-left: 20px;
}


	.nav_pos4 {
		padding-top: 20px;
   		padding-left: 22px;
}


	.nav_pos5 {
		padding-top: 20px;
   		padding-left: 17px;
}


	.nav_pos6 {
		padding-top: 15px;
   		padding-left: 25px;
}




	#bbx	{
		position:absolute;
		top:410px;
		padding-left:200px;
	}




	#left	{
		float:left;
	}




	#right	{
		float:right;
	}




	#clear	{
		clear:both;
	}




/* CONTENTBOX SCHWARZ */ 
	
	#content-oben {
		background: url('../images/Box/c_oben.png');
		width: 489px;
		height: 60px;
		color: white;
        margin-top: 0px;
	}




	#content-mitte {
		background: url('../images/Box/c_mitte.png');
		width: 489px;
		height: auto;
		padding-top: 15px;
		padding-left:20px;
		padding-right:20px;
		}
	
	#content-unten {
		background: url('../images/Box/c_unten.png');
		width: 489px;
		height:10px;
		
		}
		




/* CONTENTBOX BLAU */ 
	
	#content-oben-b {
		background: url('../images/Box/c_oben_b.png');
		width: 489px;
		height: 53px;
		color: white;
        margin-top: 0px;
	}




	#content-mitte-b {
		background: url('../images/Box/c_mitte_b.png');
		width: 489px;
		height: auto;
		padding-top: 15px;
		padding-left:20px;
		padding-right:20px;
		}






/* SUBBOX SCHWARZ */ 
		
		#sub-oben {
		background: url('../images/Box/s_oben.png');
		width: 355px;
		height: 48px;
		color: white;
        margin-top: 10px;
	}




	#sub-mitte {
		background: url('../images/Box/s_mitte.png');
		width: 355px;
		height: auto;
		}
	
	#sub-unten {
		background: url('../images/Box/s_unten.png');
		width: 355px;
		height:9px;
		
		}
		




/* SUBBOX BLAU */ 
		
		#sub-oben-b {
		background: url('../images/Box/s_oben_b.png');
		width: 357px;
		height: 49px;
		color: white;
        margin-top: 10px;
	}




	#sub-mitte-b {
		background: url('../images/Box/s_mitte_b.png');
		width: 357px;
		height: auto;
		}
	
	#sub-unten-b {
		background: url('../images/Box/s_unten_b.png');
		width: 357px;
		height:8px;
		
		}




/* Footer oben */ 
	#footer_1 {
    	background: url('../images/Box/footer_3.png');
		width:100%;
		height:48px;
		margin: auto;
		padding: auto;
		color:white;
}




/* Footer 2 */ 
	#footer_2 {
    	background: url('../images/Box/footer_1.png');
		width:867px;
		height:58px;
		margin: auto;
		padding: auto;
}


/* Footer 3 */ 
	#footer_3 {
    	background: url('../images/Box/footer_2.png');
		width:100%;
		height:41px;
		margin: auto;
		padding: auto;
}






/* Navigation */ 
	#nav_bg {
    		background: url('../images/nav_bg.png');
		widht:73px;
		height:71px;
		text-algin:center;
}




 
  #nbutton {
      float: left; 
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 10px;
  }


.nmidnav {
      padding-top: 6px;
  }
  
.nmiddle {
      background-image: url(images/nav_bg.png);
      background-repeat: repeat-x;
      width: 73px;
      height: 71px;
      float: left;
      font-size: 11px;
      color: white;
      font-family: Verdana;  
  }


/* Userbereich */


	#user	{
		background: url('../images/Box/us.png');
		widht:355px;
		height:72px;
		margin: auto;
		padding: auto;
}
Index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml"><head>	<title>HabboLayout - 2</title><link icon/sharkset="favicon.ico" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="author" content="Emre" /><meta name="description" content="" /><meta name="keywords" content="Habbo,chatten,Sulake,Design,Layout,Me.and.You.,SchokoBrunnen,Emre,Habbo Hotel" /><link type="text/css" rel="stylesheet" href="css/global.css" /><link href="tooltip.css" rel="stylesheet" type="text/css"><script src="tooltip.js" type="text/javascript"></script></head><body><script type="text/javascript" src="wz_tooltip.js"></script><!-- Footer oben --><div id="footer_1"><div class="content_titel"><script type="text/javascript">var Jetzt = new Date();var Tag = Jetzt.getDate();var Monat = Jetzt.getMonth() + 1;var Jahr = Jetzt.getYear();var Stunden = Jetzt.getHours();var Minuten = Jetzt.getMinutes();var NachVoll = ((Minuten < 10) ? ":0" : ":");if (Jahr < 2000)  Jahr = Jahr + 1900;document.write("<b>Es ist der " +               Tag + "." + Monat + "." + Jahr + ". - " +               Stunden + NachVoll + Minuten + " Uhr</b>");</script>			</div>					</div><!-- Footer oben -->
<!-- #########################   Navigation Anfang #########################  -->

<!-- Button Anfang --><a href="lol.html"><div id="nbutton" class="gradualfader"><div class="nleft"></div><div class="nmiddle"><div class="nmidnav"><div id="nav_bg"><div class="nav_pos1"><a href="index.html" onmouseover="Tip('Startseite')" onmouseout="UnTip()"><img style="float: left; margin-right: 5px;" src="uploads/1.png"/><font color="white"></font></div></div></a>      </div><div class="nright"></div></div></div>           </a><!-- Button Ende -->

<!-- Button Anfang --><a href="lol.html"><div id="nbutton" class="gradualfader"><div class="nleft"></div><div class="nmiddle"><div class="nmidnav"><div id="nav_bg"><div class="nav_pos2"><a href="index.html" onmouseover="Tip('News')" onmouseout="UnTip()"><img style="float: left; margin-right: 5px;" src="uploads/2.png"/><font color="white"></font></div></div></a>      </div><div class="nright"></div></div></div>           </a><!-- Button Ende -->
<!-- Button Anfang --><a href="lol.html"><div id="nbutton" class="gradualfader"><div class="nleft"></div><div class="nmiddle"><div class="nmidnav"><div id="nav_bg"><div class="nav_pos3"><a href="index.html" onmouseover="Tip('Events')" onmouseout="UnTip()"><img style="float: left; margin-right: 5px;" src="uploads/3.png"/><font color="white"></font></div></div></a>      </div><div class="nright"></div></div></div>           </a><!-- Button Ende -->
<!-- Button Anfang --><a href="lol.html"><div id="nbutton" class="gradualfader"><div class="nleft"></div><div class="nmiddle"><div class="nmidnav"><div id="nav_bg"><div class="nav_pos4"><a href="index.html" onmouseover="Tip('Nachrichten')" onmouseout="UnTip()"><img style="float: left; margin-right: 5px;" src="uploads/4.png"/><font color="white"></font></div></div>  </a>    </div><div class="nright"></div></div></div>           </a><!-- Button Ende -->
<!-- Button Anfang --><a href="lol.html"><div id="nbutton" class="gradualfader"><div class="nleft"></div><div class="nmiddle"><div class="nmidnav"><div id="nav_bg"><div class="nav_pos5"><a href="index.html" onmouseover="Tip('Ausloggen')" onmouseout="UnTip()"><img style="float: left; margin-right: 5px;" src="uploads/5.png"/><font color="white"></font></div></div>   </a>   </div><div class="nright"></div></div></div>           </a><!-- Button Ende -->
<!-- Button Anfang --><a href="lol.html"><div id="nbutton" class="gradualfader"><div class="nleft"></div><div class="nmiddle"><div class="nmidnav"><div id="nav_bg"><div class="nav_pos6"><a href="index.html" onmouseover="Tip('Hilfe')" onmouseout="UnTip()"><img style="float: left; margin-right: 5px;" src="uploads/6.png"/><font color="white"></font></div></div>  </a>    </div><div class="nright"></div></div></div>           </a><!-- Button Ende -->
<!-- #########################   Navigation Ende #########################  -->
<!-- Userbereich Anfang -->
<div id="user_pos"><div id="user">										</div>								</div>								<!-- Userbereich Ende --> 									 </body></html>
 
Werbung:
Werbung:
Nein, du hast ihm keine Breite gegeben. Im CSS-Code hast Du (ebenso wie im HTML-Code) mindestens einen Schreibfehler:

Code: 
#user	{
		background: url('../images/Box/us.png');
		[COLOR="#FF0000"]widht[/COLOR]:355px;
		height:72px;
		margin: auto;
		padding: auto;
}

Es heißt width und nicht widht.

Und dein HTML-Code ist weiterhin fehlerhaft und führt sicherlich ebenfalls zu Fehldarstellungen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben