Navigation was mach ich nur falsch?

hume · 5. September 2010

Hallo, bin schon seit einer halben Stunde am basteln warum meine Navigation wohl nicht nach rechts gehen will, normal müsste es margin-left sein, mir zieht es aber die Navigation auseinander. Zusehen unter <a class="postlink" href="http://www.aiizo.de">http://www.aiizo.de</a> hab es auch schon mit einem <div nach der Navigation versucht ohne Erfolg. Heute ist wahrscheinlich nicht mein Tag

Hier mal mein Code:

index.html:

HTML

<!doctype html>
<html>




<head>
    <title>Aiizo</title>




    <meta charset="ISO-8859-2" />
    <meta name="description" content="" />
    <meta name="author" content="Christian Huml" />
    <meta name="keywords" content="" />
    <meta name="generator" content="" />




    <link href="design.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>




<body>
<div id="head">
</div>










<ul id="navigation">
<li> <a href="index.html">Home</a></li>
<li> <a href="filme.html">3D Filme</a></li>
<li> <a href="agb.html"> AGB</a></li>
<li> <a href="impressum.html">Impressum</a></li>
</ul>







</body>
</html>

Alles anzeigen

CSS:

Code

* {
 margin: 0;
 padding: 0;
        }
body {
font-size: 14px;
font-family: arial, sans-serif, verdana;
line-height: 28px;
}
/* Kopfbereich --------------------------------------------------------------------------*/
    div#head {
    margin-top:10px;
    margin-left:18px;
    margin-right:18px;
    background:url(images/header.gif);
    visibility: visible;
    height:130px;
    background-repeat:no-repeat;




/* Navigation ---------------------------------------------------------------------------*/




  }
 #navigation li {
 font-size:18px;
 display: inline;
 line-height: 21px;
 }







 #navigation a {
 color: #ffffff;
 text-decoration:none;
 padding:8px;
 margin-left:12px;
 background:url(images/menu_1.png);
 float:left;




 }




 #navigation a:hover {
 text-decoration: blink;
 background-position: 0 0;
 }

Alles anzeigen

lauras · 5. September 2010

Bei dem Link wird es genauso angezeigt, wie du es da angibst. Versteh ehrlich gesagt nicht, was du meinst. Die Listenpunkte werden doch nach rechts gerückt?

hume · 5. September 2010

Zitat

Bei dem Link wird es genauso angezeigt, wie du es da angibst. Versteh ehrlich gesagt nicht, was du meinst. Die Listenpunkte werden doch nach rechts gerückt?

Ja, dass stimmt schon aber ich wollte eigentlich gesagt dass zwischen den Links kein Abstand entsteht, also dass die Navigation zwar schon rechts ist, aber ohne Abstände von Link zu Link, also zusammenhängend.

PS: Screenshot im Anhang.

NeoAramis · 5. September 2010

Das Problem ist, dass Du den Farbverlauf (menu_1.png) für die Navigation den einzelnen Buttons zugewiesen hast. Das klappt dann natürlich nicht, wenn Du dann dem a-Tag margin und padding zuweist.

Eine Lösung wäre, wenn du das Hintergrundbild einfach dem ul-Tag mit der ID navigation zuweist:

index.html

HTML

<!doctype html>
<html>
<head>
    <title>Aiizo</title>
    <meta charset="ISO-8859-2" />
    <meta name="description" content="" />
    <meta name="author" content="Christian Huml" />
    <meta name="keywords" content="" />
    <meta name="generator" content="" />
    <link href="core.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
<div id="head">
	<!-- kein Inhalt -->
</div>
<ul id="navigation">
	<li><a href="#">Home</a></li>
	<li><a href="#">3D Filme</a></li>
	<li><a href="#">AGB</a></li>
	<li><a href="#">Impressum</a></li>
</ul>
</body>
</html>

Alles anzeigen

core.css

Code

* {
	margin: 0;
	padding: 0;
}




body {
	font-family: Arial, sans-serif, Verdana;
}




/*	Kopfbereich --------------------------------------------------------------------------*/
	div#head {
		background: url(images/header.gif);
		visibility: visible;
		height: 130px;
		background-repeat: no-repeat;
	}




/*	Navigation ---------------------------------------------------------------------------*/
	#navigation {
		background: url(images/menu_1.png) repeat-x;
		overflow: hidden;
		height: auto;
	}

	#navigation li {
		float: left;
		list-style-type: none;
	}




	#navigation a:link, #navigation a:visited {
		color: #fff;
		display: block;
		text-decoration: none;
		font-size: 16px;
		padding: 11px 15px 11px 15px;
	}

	#navigation a:hover, #navigation a:active {
		color: #000;
		background-color: #fff;
		display: block;
		text-decoration: none;
		font-size: 16px;
		padding: 11px 15px 11px 15px;
	}

Alles anzeigen

hume · 7. September 2010

Zitat

Das Problem ist, dass Du den Farbverlauf (menu_1.png) für die Navigation den einzelnen Buttons zugewiesen hast. Das klappt dann natürlich nicht, wenn Du dann dem a-Tag margin und padding zuweist.

Eine Lösung wäre, wenn du das Hintergrundbild einfach dem ul-Tag mit der ID navigation zuweist:

Ja, da hast du recht, ich glaube an diesem Tag wäre ich nicht mehr darauf gekommen Danke

Navigation was mach ich nur falsch?

Jetzt mitmachen!

Teilen