css problem <id>

Darrenshan

Hi leute,
ich hab ein kleines problem mit css. vermutlich hab ich die funktion einfach nicht richtig verstanden
also ich hab in einer datei folgendes:

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" content="text/html" />
 <meta name="author" content="" />
 <title>Untitled 1</title>
    <link rel="stylesheet" type="text/css" href="style/header.css" />
</head>
<body>
<a href="index.php" id="Navigation1">Index</a>
<a href="fight.php" id="Navigation2">Fiight</a>
<a href="Economie.php" id="Navigation3">Economie</a>
<a href="Worldmap.php" id="Navigation4">World Map</a>
<a href="Info.php" id="Navigation5">Info</a>
<a href="Contributing.php" id="Navigation6">Contributing</a>
</body>
</html>

Alles anzeigen

und im anderen folgendes:

Code

#navigation1  {
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 0px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
      position:relative;
   left: 100px;
   bottom: 300px;
 }
#navigation2  {
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 0px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
      position:relative;
      left: 300px;
   bottom: 200px;
 }
#navigation3  {
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 0px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
      position:relative;
      left: 500px;
   bottom: 100px;
 }
#navigation4  {
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 0px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
      position:relative;
      left: 600px;
   bottom: 100px;
 }
#navigation5  {
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 0px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
      position:relative;
      left: 400px;
   bottom: 300px;
 }
#navigation6  {
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 0px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
      position:relative;
      left: 200px;
   bottom: 200px;
 }

Alles anzeigen

aber dennoch wird nur die formation von #naviagtion eins herangezogen

Was mache ich falsch/ was muss ich machen, damit alle sachen einbezogen werden?

Danke im voraus,
Darren

threadi

Beachte die Groß-/Kleinschreibung. #navigation1 != #Navigation1. Ich würde dir raten alles klein zu schreiben.

Außerdem missbrauchst Du in deinem CSS die relative Positionierung. Zusammen mit margin ist das eine sehr komplizierte Positionierungsart die Du da versuchst zu erreichen. Verzichte am Besten auf positon, egal mit welchem Wert, und nutze float, margin und ggfs. padding um Elemente neben- und übereinander zu positionieren.

Darrenshan

Das löst aber leider nicht mein problem.
Wenn man die seite aufruft, sieht man lediglich folgendes:

http://s7.directupload.net/file/d/2974/7i85izbu_png.htm
es sollte aber jedes mal seperat eingerahmt sein...

threadi

Gib jeder ID noch

Code

display: block;

denn das was Du definiert hast erfordert Block-Elemente, also macht man die Links dazu. Dann wirken mit Sicherheit auch die vielen margins und Positionierungen die, wie ich schon sagte, eigentlich falsch angebracht sind.

Darrenshan

Ich hab den code jetzt wie folgend abgeändert:

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" content="text/html" />
 <meta name="author" content="" />
 <title>Untitled 1</title>
    <link rel="stylesheet" type="text/css" href="style/header.css" />
</head>
<body>
<a href="index.php" id="navigation1">Index</a>
<a href="fight.php" id="navigation2">Fight</a>
<a href="Economie.php" id="navigation3">Economie</a>
<a href="Worldmap.php" id="navigation4">World Map</a>
<a href="Info.php" id="navigation5">Info</a>
<a href="Contributing.php" id="navigation6">Contributing</a>
</body>
</html>

Alles anzeigen

Code

#navigation1  {
      display: block;
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 10px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
 }
#navigation2  {
      display: block;
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 10px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
 }
#navigation3  {
      display: block;
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 10px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
 }
#navigation4  {
      display: block;
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 10px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
 }
#navigation5  {
      display: block;
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 10px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
 }
#navigation6  {
      display: block;
   margin-top: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 10px;
      background: white;
      padding: 2px 2px 2px 2px;
      border-width: 3px;
   border-style: groove;
   border-color: red;
      height: 50px;
   width: 16%;
 }

Alles anzeigen

aber es sieht immernoch gleich aus...

djheke

Soll deine navi horizontal oder vertikal ausgerichtet sein? Außerdem gehören links in einer Liste.

Guck mal hier:http://www.gipspferd.de/css/anleitung/a5/a5.php

threadi

Abgesehen von o.g. Hinweis sieht die Seite bei mir übrigens leer aus, wenn ich deinen Quellcode mal speichere. Grund ist, wie schon gesagt, die Positionierung und der margin. Dadurch werden die Elemente so weit weg geschoben, dass sie nicht mehr in meinem Viewport zu sehen sind. Nimmt man diese Abstände weg sieht man etwas - ob es das ist was Du willst, kA. Aber schau dir mal o.g. Link an.

Tags