zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation rutscht heraus

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.01.2011, 21:01
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
  #2 (permalink)  
Alt 03.01.2011, 21:09
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.142
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Warum ist der #head kleiner wie die darin liegende ul (800px --> 850px)?

Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.01.2011, 21:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Oh,

habe ich sofort behoben.

Daran liegts aber leider auch nicht. Wäre auch zu schön gewesen
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können.
Mit Zitat antworten
  #4 (permalink)  
Alt 03.01.2011, 22:11
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.142
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Noch ein Punkt fällt mir auf: wo ist der Bezug für pos.absolute (relative) im #menu?
Teste eventuell mal mit firebug lite im IE.

Manfred
Mit Zitat antworten
  #5 (permalink)  
Alt 03.01.2011, 23:21
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 946
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Der ganze #head ist etwas durch den Wind.
#head und #menu brauchen kein float, margin oder width. Nur #menu bräuchte height, background und position: relative.
Siehe Little Boxes containing block
Dann die li mit position: absolut; in #menu positionieren.
__________________
MfG
Jens

Geändert von plastiko (03.01.2011 um 23:29 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 04.01.2011, 08:16
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Vielen Dank schon mal.
Kann leider erst am Abend probieren.

Werde mir das Buch wohl auch mal zulegen müssen. Sehr gut erklärt !

Eine Frage noch, kann ich auch die einzelnen class pos:rel; ?
Sozusagen Die einzelnen img die ich jetzt alle gefloatet habe.

Frage nur weil plastiko das <b>li</b> so betont hat

Kann z.B. <a href class="home" behalten oder sollte li class="home" bekommen ?

Vielen Dank.
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können.

Geändert von Muamicus (04.01.2011 um 11:23 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 04.01.2011, 12:36
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 946
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Welche img?
li habe ich betont weil du momentan für a position: absolute; stehen hast.
Class sollte jeweils in li stehen.
__________________
MfG
Jens
Mit Zitat antworten
  #8 (permalink)  
Alt 04.01.2011, 12:43
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

OK, ich versuche es heute Abend umzusetzen.

Du dann <li class="img"> bekommt anstelle von a das pos:abs; ? So richtig verstanden?
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können.
Mit Zitat antworten
  #9 (permalink)  
Alt 04.01.2011, 13:13
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 946
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von Muamicus Beitrag anzeigen
... So richtig verstanden?
Ich weiß es nicht.
Code:
<li class="home"><a href="index.php">Startseite<span></span></a></li>
Wenn du den Linktext per text-indent versteckst, brauchst du das span nicht.
__________________
MfG
Jens
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.01.2011, 13:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Vielen Dank schon mal !
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können.
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
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 15:46
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:45 Uhr.