Ergebnis 1 bis 7 von 7

Thema: css problem <id>

  1. #1
    HTML Newbie
    Registriert seit
    05.08.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard css problem <id>

    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:

    Code:
    <!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>
    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;
     }
    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: css problem <id>

    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.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    05.08.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css problem <id>

    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...

  4. #4
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: css problem <id>

    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.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    05.08.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css problem <id>

    Ich hab den code jetzt wie folgend abgeändert:


    Code:
    <!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>
    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%;
     }
    aber es sieht immernoch gleich aus...

  6. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: css problem <id>

    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

  7. #7
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: css problem <id>

    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.

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •