tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
860
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 15.05.11 01:47 #1
    filament filament ist offline Mitglied Silber
    Registriert seit
    Oct 2010
    Beiträge
    53
    Hallo liebe Community,

    ich finde die Navigation der ARD Seite echt gut. Habe versucht das mal nachzubauen, aber irgendwie gelingt mir das nicht so richtig. (www.ard.de)

    Folgendes habe ich bisher erstellt:

    Index.html:

    HTML-Code:
    <body>
 <div id="navi">
  <ul id="menu">
   <span>Home</span>
   <li><a href="aktuelles.php">Aktuelles</a></li>
   <li><a href="registrieren.php">Registrieren</a></li>
   <li><a href="screenshots.php">Screenshots</a></li>
   <li><a href="impressum.php">Impressum</a></li>
  </ul>
 </div>
 </body>
    So sieht meine screen.css aus die natürlich eingefügt wird oben im Head der index.html:

    HTML-Code:
    /* -- Allgemeines -- */
html,body{
  height:100%;
  width:100%;
  margin:0;
} 


body {
  background: #e7f3f7;
  color: black;
  margin: 0;
  padding: 0;
  min-width: 640px;
  width: 70%;
  font-size: 100.01%;
  font-family: verdana, arial, sans-serif ;
}

#navi {
  background: #d6e3ed;
  color: black;
  margin: 0;
  padding: 0;
  width: 100%;
  border-bottom: solid 3px #001f4d;
}

ul li {margin: 0px; padding: 0px;}

#menu li {
  font-size: 0.8em;
  display: inline; 
  list-style-type: none;
  font-weight: bold;
  background: #d6e3ed;
}

#menu span {
  font-size: 0.8em;
  display: inline; 
  list-style-type: none;
  font-weight: bold;
  background: white;
  border-top: solid 2px #082c5e;
}

#menu li a {
  color: black;
  text-decoration: none;
}

#menu li a:hover {
  color: black;
  text-decoration: none;
}

#menu li:hover {
  color: black;
  text-decoration: none;
  background: white;
  border-top: solid 2px #082c5e;  
}
    Die Seite hat aber folgende Fehler:

    1. Der Div-Container fängt erst nach einigen Pixeln an, nicht am Anfang der Seite, warum das, hab doch kein Padding oder Margin angegeben?
    2. Der Border (Bottom) ist nicht direkt an der Liste dran? Warum dass? Ich wollte schließlich den nächsen Div-Container weiß machen, damit es aussieht, als wenn das aktive Element zum Content gehört.
    3. Die Textlinks bzw. das Hover des Textlinks umschließt nur den Text. Auf der ARD Seite ist es aber ein Kasten, der an den nächsten Anschließt. Die Hovers haben also nicht wie bei mir lücken zwischen den weißen Umrandungen. Woran liegt das nun wieder?

    Vielleicht kann mal jemand über meinen Quelltext gucken und findet die Fehler?

    Danke im Voraus!
     
    Zitieren Zitieren
  2. 16.05.11 05:57 #2
    filament filament ist offline Mitglied Silber
    Registriert seit
    Oct 2010
    Beiträge
    53
    Hat wirklich niemand eine Idee woran die Fehler liegen könnten?
     
    Zitieren Zitieren
  3. 16.05.11 22:30 #3
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Ich weiß gar nicht wo ich da anfangen soll .. Mal einige Tipps:
    Wenn Du ein horizontales Menü erstellen willst bei dem die Links eine bestimmte Höhe haben, mach die Links zu Blockelemten (display: block). Danach kannst Du per padding dem Link eine Höhe geben. Die <li>'s müssten dagegen zu Inline-Elementen gemacht werden die auch noch floaten (Kompatiblität zu IE<9).
    Den Strich oben sollte man als border-top des Links umsetzen. Wenn der Link nicht aktiv ist, setze dennoch einen border ohne Farbe (border-top: 2px solid transparent). Wenn der Link aktiv ist, ändere die Farbe entsprechend (border-top-color: red).
     
    Zitieren Zitieren
« Problem mit z-index im IE7 | Tabellen trotz border-spacing rechts und links bündig »

Ähnliche Themen

  1. Navigation im IE6 wird vertikal statt horizontal angezeigt - ab IE7, FF, Op, Sa funkt
    Von dwex im Forum CSS
    Antworten: 3
    Letzter Beitrag: 13.05.11, 16:01
  2. CSS [horizontale navigation] (textnavigation mit mouseover)
    Von BlackBirdone im Forum CSS
    Antworten: 14
    Letzter Beitrag: 02.11.08, 18:08
  3. CODE für horizontal scroll bei mouseover
    Von archindian im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 08.09.08, 10:00
  4. Navigation Mouseover problem
    Von Rec-Tec im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 22.04.07, 13:54
  5. [PHP/CSS] Mouseover horizontal will nich
    Von Greeney im Forum CSS
    Antworten: 1
    Letzter Beitrag: 12.05.06, 16:22