1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

css problem <id>

  • Darrenshan
  • 5. August 2012 um 22:28
  • Darrenshan
    Anfänger
    Beiträge
    3
    • 5. August 2012 um 22:28
    • #1

    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
    König(in)
    Reaktionen
    4
    Beiträge
    1.391
    • 6. August 2012 um 00:27
    • #2

    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
    Anfänger
    Beiträge
    3
    • 6. August 2012 um 14:08
    • #3

    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
    König(in)
    Reaktionen
    4
    Beiträge
    1.391
    • 6. August 2012 um 18:27
    • #4

    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
    Anfänger
    Beiträge
    3
    • 6. August 2012 um 22:07
    • #5

    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
    Meister(in)
    Beiträge
    491
    • 6. August 2012 um 23:19
    • #6

    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
    König(in)
    Reaktionen
    4
    Beiträge
    1.391
    • 7. August 2012 um 00:44
    • #7

    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

  • html
  • link
  • color
  • http
  • background
  • body
  • text
  • funktion
  • problem
  • navigation
  • code
  • php
  • datei
  • bot
  • bottom
  • position
  • doc
  • border
  • index.php
  • height
  • css
  • header
  • margin-bottom
  • padding
  • name

Benutzer online in diesem Thema

  • 1 Besucher
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern