Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 03.01.2011, 22:01
Muamicus Muamicus ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard Navigation rutscht heraus

Hallo,

meine komplette Navigation rutscht im IE 7 aus dem Container heraus.
Habe auch speziell für den IE 7 rumexperimentiert leider alles ohhe Erfolg.

Hoffe mir kann da jemadn helfen

Link

CSS - Navigation

Code:
								/*NAVIGATION*/
*		{margin:0; padding:0;}
#menu		{
			float:left;
			list-style:none;
			background-image:url("../img/head.jpg");
			background-repeat:x-repeat;
			width:850px;
			height:331px;
			margin:0 0 0 55px;
}
#menu span {
	display: none;
	position: absolute;		margin-left:-150px;
}
#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menu a:hover {
	background-position: left bottom;
}
#menu a:hover span{
	display: block;
}
#menu .home {float:left;
	width: 87px;
	height: 22px;
	background: url(../img/home.gif) no-repeat;
	margin:200px 0 0 100px;
}
#menu .home span {float:left;
	width: 113px;
	height: 50px;
	background: url(../img/home_hover.gif) no-repeat;
	margin:-36px 0 0 -13px;
}
#menu .warum {float:left;
	width: 485px;
	height: 49px;
	background: url(../img/warum.gif) no-repeat;
	margin:220px 0 0 150px;
}
#menu .warum span {float:left;
	width: 485px;
	height: 49px;
	background: url(../img/warum_hover.gif) no-repeat;
	margin:-19px 0 0 0px;
}
#menu .referenz {float:left;
	width: 216px;
	height: 45px;
	background: url(../img/referenzen.gif) no-repeat;
	margin:140px 0 0 250px;
}
#menu .referenz span {float:left;
	width: 216px;
	height: 45px;
	background: url(../img/referenzen_hover.gif) no-repeat;
	margin:-19px 0 0 0px;
}
#menu .kontakt {float:left;
	width: 145px;
	height: 37px;
	background: url(../img/kontakt.gif) no-repeat;
	margin:180px 0 0 500px;
}
#menu .kontakt span {float:left;
	width: 145px;
	height: 37px;
	background: url(../img/kontakt_hover.gif) no-repeat;
	margin:-19px 0 0 0px;
}
#menu .leistungen {float:left;
	width: 194px;
	height: 50px;
	background: url(../img/leistungen.gif) no-repeat;
	margin:120px 0 0 480px;
}
#menu .leistungen span {float:left;
	width: 194px;
	height:50px;
	background: url(../img/leistungen_hover.gif) no-repeat;
	margin:-19px 0 0 0px;
}
#menu .impressum {float:left;
	width: 141px;
	height: 33px;
	background: url(../img/imp.gif) no-repeat;
	margin:270px 0 0 360px;
}
#menu .impressum span {float:left;
	width: 141px;
	height: 33px;
	background: url(../img/imp_hover.gif) no-repeat;
	margin:-19px 0 0 0px;
}
CSS - Content

Code:
*		{margin:0;
		padding:0;
}
body	{
		text-align:center;
		font-family:Arial;
		font-size:100.01%;
		background-color:#f5f1dc;
}
#wrapper	{
			margin:0 auto;
			background-image:url("../img/bg.jpg");
			background-repeat:x-repeat;
			width:960px;
			min-height:300px;
			padding-bottom:10px;
}
#wrapper:after {
		content:".";
		display:block;
		clear:both;
		font-size:0;
		overflow:hidden;
		height:.1px;
		visibility:hidden;
	}

#content		{

				width:530px;
				min-height:250px;		
				margin-left:45px;
}
#content	h2	{
				text-align:left;
				color:#444343;
				font-size:18px;
				width:370px;
				min-height:30px;
				margin:10px 0 0 55px;
				padding-top:13px;
}
#content	p	{
				text-align:left;
				color:#161e80;
				line-height:26px;
				width:370px;
				min-height:30px;
				margin:10px 0 0 55px;

}
#content_top	{
				background-image:url("../img/content_top.png");	
				background-repeat:no-repeat;
				width:500px;
				height:176px;
				margin:20px 0 0 25px; 
}
#content_mid	{
				background-image:url("../img/content_mid.png");	
				background-repeat:y-repeat;
				width:500px;
				min-height:113px;
				margin:-10px 0 0 25px; 
}
#content_bot	{
				background-image:url("../img/content_bot.png");  
				background-repeat:no-repeat;
				width:500px;
				height:113px;
				margin:0px 0 0 25px; 
}
#content_bot ul	{
				text-align:left;
				padding-top:10px;
				font-size:12px;
}
#ul1			{float:left;
				margin-left:55px;		
				width:120px; 		
}
#ul2			{
				float:left;
				margin-left:10px;
				width:160px; 		
}
#ul3			{
				float:left;
				margin-left:0px;
				width:140px; 		
}
#content_bot li	{
				list-style:none;
}
#content_bot a	{
				text-decoration:none;
				color:#939395;
}
#content_bot a:hover	{
				color:#636366;
}
#content_bot a:aktive	{
				color:#a0101d;
}
#head		{
			width:800px;
			height:331px;
		}
		
		
										/*CONTENT RIGHT*/
#content_right	{
			float:right;
			margin:23px 80px 0 0;
			width:270px;
			min-height:400px;
}
#right_top	{
			
				background-image:url("../img/right_top.png");	
				background-repeat:no-repeat;
				width:270px;
				height:44px;
				margin:0px 0 0 0px; 
}
#right_mid	{
			
				background-image:url("../img/right_mid.png");	
				background-repeat:y-repeat;
				width:270px;
				height:216px;
				margin:0px 0 0 0px; 
}
.ref_img		{
				float:left;
				background-image:url("../img/unger_img.png");	
				background-repeat:no-repeat;
				margin:10px 0 0 30px;
				width:80px;
				height:80px;
}
.ref_img2		{
				float:left;
				background-image:url("../img/schmiedeeisen_img.png");	
				background-repeat:no-repeat;
				margin:10px 0 0 30px;
				width:80px;
				height:80px;
}
#right_mid	p	{
				float:left;
				text-align:left;
				margin:10px 0 0 10px;
				width:138px;
				height:100px;
}
#right_mid	p a	{
				color:#a53038;
}
#right_mid	p a:hover	{
				color:#8394de;
}
#right_bot	{
			
				background-image:url("../img/right_bot.png");	
				background-repeat:no-repeat;
				width:270px;
				height:20px;
				margin:0px 0 0 0px; 
}
#w3c_paper	{
			float:right;
			background-image:url("../img/w3c_paper.png");	
			background-repeat:no-repeat;
			margin:43px 0px 0 0;
			width:269px;
			height:210px;
			min-height:400px;
}
#w3c_paper	p	{
				float:left;
				background-image:url("../img/p_bg.png");  
				text-align:left;
				line-height:20px;
				margin:42px 0 0 120px;
				width:138px;
				height:150px;	
}
#w3c_paper	p a	{
				color:#a53038;
}
#w3c_paper	p a:hover	{
				color:#8394de;
}



										/*LEISTUNGEN*/
										
										
				
				
.link_lst		{color:#a53038;
				}	
.link_lst:hover   {color:#8394de;
				}	




#content .lst_ul			{
				text-align:left;
				margin:0px 0 0 60px;
				padding:20px 0 20px 0;
				width:480px;
				}
#content .lst_ul li			{
				list-style:none;
				margin-top:3px;
				}
.haken			{
				width:15px;
				height:15px;
				margin-right:10px;}
				
				
										/*REFERENZEN*/
										
.referenz_box	{
				float:left;
				width:480px;
}		
#last_box		{
			margin-bottom:30px;
}							
.img_link	{
		float:left;
		margin:20px 0 0 50px;
		border:0;
		width:100px;
		height:90px;
}
.link_text	{
		float:left;
		width:280px !important;
		margin:30px 0 0 30px !important;
		min-height:30px;
}





											/*KONTAKT*/
											
#content .fieldbox		{
							text-align:left;
							width:330px;
							min-height:60px;		
							margin-left:60px;
}		
#name					{margin-left:30px;}
#vname					{margin-left:6px;}
#betreff				{margin-left:25px;}
#mail					{margin-left:46px;}
#text					{margin-left:90px; margin-top:-22px;}
#anliegen				{float:left; }
html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<link rel="shortcut icon" href="img/icon.ico" type="image/x-icon" />
<title>Your-Dreamworks - Webdesign aus Hoyerswerda</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your-dreamworks ist eine Werbeagentur im Bereich Webdesign aus Hoyerswerda." />
<meta name="keywords" content="Startseite, Webdesigner, Webagentur, Suchmaschinenoptimierung, Webdesign, Web Design, HTML, PHP-Programmierer, PHP, Webtagebuch, Webblog, XHTML, Hoyerswerda, CMS, CSS, W3C valide" />
<meta name="language" content="de" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Nils Hoffmann" />
<meta name="abstract" content="Your dreamworks ist eine junge dynamische Werbeagentur aus Hoyerswerda bei Dresden das sich auf Webdesign/ -entwicklung spezialisiert hat." />
<meta name="copyright" content="Nils Hoffmann" />
<meta name="designer" content="Nils Hoffmann" />
<meta name="publisher" content="www.your-dreamworks.de" />
<meta name="revisit-After" content="5 days" />
<meta name="distribution" content="global" />
<style type="text/css">
	@import url("css/content.css");
	@import url("css/navigation.css");
</style>
</head>
<body>
<div id="wrapper">
	<div id="head">
		<ul id="menu">
			<li><a href="index.php" class="home">Startseite<span></span></a></li>
			<li><a href="warum_modernes_webdesign.php" class="warum">Warum modernes Webdesign?<span></span></a></li>
			<li><a href="referenzen.php" class="referenz">Referenzen<span></span></a></li>
			<li><a href="kontakt.php" class="kontakt">Kontakt<span></span></a></li>
			<li><a href="leistungen.php" class="leistungen">Leistungen<span></span></a></li>
			<li><a href="impressum.php" class="impressum">Impressum<span></span></a></li>
		</ul>
	</div>
	<div id="content_right">
	<div id="right_top"></div>
	<div id="right_mid">
		<div class="ref_img"></div>
		<p>
		<a href="http://unger-holzcreation.de/">Holzcreation Unger</a><br />
		Ihre Möbeltischlerei aus Schwarzkollm
		</p>
		<div class="ref_img2"></div>
		<p>
		<a href="http://schmiedeeisen-shop.de/">Schmiedeeisen Shop</a><br />
		Schmiedeeiserne Zaunbauteile
		</p>
	</div>
	<div id="w3c_paper">
		<p>Your Dreamworks versucht die strikten Vorgaben des <a href="http://validator.w3.org/">W3C</a> umzusetzen und präsentiert Sie <a href="suchmaschinenoptimierung.php">Suchmaschinen- freundlich</a> im Internet.</p>
	</div>
	<div id="right_bot"></div>
	</div>
	<div id="content">
		<div id="content_top"></div>
		<div id="content_mid">
		<h2>Betreff: Was ist your dreamworks?</h2>
			<p>
			<i>Wer aufhört zu werben, um Geld zu sparen, kann ebenso seine Uhr anhalten, um Zeit zu sparen.</i><br /><br />
			Your dreamworks ist eine junge, dynamische und moderne Werbeagentur aus Hoyerswerda. 
			Vom Konzept über die Realisation, Logo-Design bis hin zur Bildoptimierung erhalten Sie alles aus 
			einer Hand. Dank dieser Leistungen sichern Sie sich einen professionellen und vor allem zeitgemäßen 
			Auftritt Ihrer Seite im Internet.<br /><br />
			<strong>Ihre Website ist Ihr Aushängeschild im Internet!</strong>
			<br /><br />
			Your dreamworks präsentiert Sie professionell, anwenderfreundlich und zeitgerecht im Internet 
			und verschafft Ihnen einen Vorsprung gegenüber Ihrer Konkurrenz.
			</p>
			<p>
				<a href="#wrapper" class="link_lst">nach oben</a>
			</p>
		</div>
		<div id="content_bot">
			<ul id="ul1">
				<li><a href="index.php">>> Startseite</a></li>
				<li><a href="warum_modernes_webdesign.php">>> Warum modernes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Webdesign?</a></li>
				<li><a href="kontakt.php">>> Kontakt</a></li>
				<li><a href="leistungen.php">>> Leistungen</a></li>
				<li><a href="impressum.php">>> Impressum</a></li>
			</ul>
			<ul id="ul2">
				<li><a href="referenzen.php"><strong>>> Neuste Referenzen</strong></a></li>
				<li><a href="http://unger-holzcreation.de/">>> Holzcreation Unger</a><br /></li>
				<li><a href="http://schmiedeeisen-shop.de/">>> Schmiedeeisen Shop</a><br /></li>
				<li><a href="referenzen.php">>> uvm.</a></li>
			</ul>
			<ul id="ul3">
				<li><a href="#"><strong>Partnerlink`s</strong></a></li>
				<li><a href="#">>> Link 1</a></li>
				<li><a href="#">>> Link 1</a></li>
				<li><a href="#">>> Link 1</a></li>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10061099-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
P.S. Die Seite befindet sich noch in der Beta Version
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können.
Mit Zitat antworten
Sponsored Links