mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 23:39 Benutzername: Passwort: Auto-Login

Thema: Probleme mit CSS Hover Navigation vom 25.09.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Probleme mit CSS Hover Navigation
Autor Nachricht
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 25.09.2006 13:58
Titel

Probleme mit CSS Hover Navigation

Antworten mit Zitat Zum Seitenanfang

Hallo,

ich habe ein Problem und zwar gehts um folgendes. Ich habe eine Navigation mit 9 Navigationspunkten. Üblicherweise löst man das dann mit einer Liste. Soweit auch kein Problem, bei den Buttons handelt es sich um gif Grafiken, da eine spezielle Schrift verlangt wurde. Hab mittels CSS den Rollover Effekt realisiert und soweit passt auch alles, bis auf die Sache, dass ich die Navigation nicht horizontal darstellen kann. Alle Navibuttons stehen untereinander.
Habs mit display: inline probiert, was bei einer normalen Liste auch funktioniert, nur mit den Graphiken klappts nicht.
Keine Ahnung warum, vielleicht überseh ich was.

Hier mal der Code:

Code:

/* LAYOUT Grundlegegende Angaben (Background, Font etc) */

body {
   font: 10px verdana, sans-serif;
   color: #FFFFFF;
   background-color: #000000;
   }
   
/* Der Container der die Website im Browser definiert (Größe, Ausrichtung) */   
   
#container {
   margin: 1em auto;
   margin-top: 30px;
   width: 1000px;
   height: 600px;
   }

/* Header-Box (Größe und Hintergrund) */
   
#header {
   height: 115px;
   background: url(../bilder/layout/header.jpg) no-repeat;
   }
   
/*    Main Navigation unter dem Header */
   
#navi1 {
   margin-top: 0px;
   height: 20px;
   color: #FFFFFF;
   background-color: #ee7f00;
   }

/* Der Teil der Seite für die Flashs und Thumbnails */
   
#thumbnail {
   float: left;
   height: 120px;
   width: 700px;
   color: #FFFFFF;
   background-color: #9e6727;
   }

/* Der letze Teil in der Hierarchie der Links, rechts neben der Thumbnail Box */
   
#navi2 {
   float: left;
   height: 120px;
   width: 300px;
   color: #FFFFFF;
   background-color: #a8763d;
   }
   
/* Die Content Box unter der Thumbnail Box */   

#content {
   clear: both;
   float: left;
   height: 365px;
   width: 700px;
   color: FFFFFF;
   background-color: #4e4e4e;
   }
   
/* Die zweite Navigation direkt rechts neben dem Content und unter der Nav2 */   
   
#navi3 {
   float: left;
   height: 365px;
   width: 300px;
   color: FFFFFF;
   background-color: #5f5f5f;
   }
   
/* Gibt den Außenabstand der <ul> in der Navigation an */
   
#navi1 ul {
   margin:0px;
   }
   
/* Die Liste der Navigationspunkte erhält keine Aufzählungssymbole wie Kreise, Quadrate etc */
   
#navi1 ul li {
   display: inline;
   list-style-type: none;
   }

/* Die einzelnen Navigationsbuttons mit der Rollover Funktion */
   
#home {
   display: block;
   background: url(../bilder/navi/home_02.gif) no-repeat;
   width: 56px;
   height: 18px;
   }
   
#home:hover {
   background: url(../bilder/navi/home_01.gif) no-repeat;
   }
   
#profil {
   display: block;
   background: url(../bilder/navi/profil_02.gif) no-repeat;
   width: 58px;
   height: 18px;
   }
   
#profil:hover {
   background: url(../bilder/navi/profil_01.gif) no-repeat;
   }
   
#spirits {
   display: block;
   background: url(../bilder/navi/spirits_02.gif) no-repeat;
   width: 62px;
   height: 18px;
   }
   
#spirits:hover {
   background: url(../bilder/navi/spirits_01.gif) no-repeat;
   }

#boot {
   display: block;
   background: url(../bilder/navi/boot_02.gif) no-repeat;
   width: 69px;
   height: 18px;
   }
   
#boot:hover {
   background: url(../bilder/navi/boot_01.gif) no-repeat;
   }

#corporate {
   display: block;
   background: url(../bilder/navi/corporate_02.gif) no-repeat;
   width: 118px;
   height: 18px;
   }
   
#corporate:hover {
   background: url(../bilder/navi/corporate_01.gif) no-repeat;
   }

#web {
   display: block;
   background: url(../bilder/navi/web_02.gif) no-repeat;
   width: 85px;
   height: 18px;
   }
   
#web:hover {
   background: url(../bilder/navi/web_01.gif) no-repeat;
   }
   
#messe {
   display: block;
   background: url(../bilder/navi/messe_02.gif) no-repeat;
   width: 100px;
   height: 18px;
   }
   
#messe:hover {
   background: url(../bilder/navi/messe_01.gif) no-repeat;
   }
   
#kontakt {
   display: block;
   background: url(../bilder/navi/kontakt_02.gif) no-repeat;
   width: 71px;
   height: 18px;
   }
   
#kontakt:hover {
   background: url(../bilder/navi/kontakt_01.gif) no-repeat;
   }
   
#impressum {
   display: block;
   background: url(../bilder/navi/impressum_02.gif) no-repeat;
   width: 91px;
   height: 18px;
   }
   
#impressum:hover {
   background: url(../bilder/navi/impressum_01.gif) no-repeat;
   }



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <title></title>
      <link rel="stylesheet" type="text/css" href="css/screen.css">
   </head>
   
    <div id="container">
   
     <div id="header"></div>
     <div id="navi1">
       <ul>
       <li><a id="home" href="index.html"></a></li>
       <li><a id="profil" href="#"></a></li>
       <li><a id="spirits" href="#"></a></li>
       <li><a id="boot" href="#"></a></li>
       <li><a id="corporate" href="#"></a></li>
       <li><a id="web" href="#"></a></li>
       <li><a id="messe" href="#"></a></li>
       <li><a id="kontakt" href="#"></a></li>
       <li><a id="impressum" href="#"></a></li>
      </ul>
     </div>
     <div id="thumbnail"></div>
     <div id="navi2"></div>
     <div id="content"></div>
     <div id="navi3"></div>
   
    </div>
   
   </body>

</html>

  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 25.09.2006 14:12
Titel

Antworten mit Zitat Zum Seitenanfang

Erstmal fehlt dir das oeffnende body Tag und ansonsten versuch es mal mit float:left;

Zuletzt bearbeitet von m am Mo 25.09.2006 14:13, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Krisslinger
Threadersteller

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 25.09.2006 14:31
Titel

Antworten mit Zitat Zum Seitenanfang

Ok, super danke. Das Body Tag hab ich ausversehen gelöscht, als ich den JS rausgeworfen hab Ooops
Habs mit Float versucht und es klappt. Dankeschön.

Jetzt würde mich noch interessieren, wie ich die ganze <ul> in der Navi zentrieren kann. Hab a bissle gegoogelt und hier gesucht aber nichts passendes gefunden. Auch sämliche Versuche meinerseits über alle mir bekannten Formatierungen für die horizontale Ausrichtung bewirkten nichts. Habs jetzt mit margin an die Position gerückt, an ders passt, aber interessant wärs ja scho, wie ich des mittels "center" irgendwie in die Mitte bekomm.

Und noch eine Sache. Solang ich mich in einem Unterpunkt von Home bewege, soll der Homebutton ebenfalls das Rollover Image anzeigen, hab mal ein wenig rumgelesen, aber geholfen hat nichts.

Danke
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 25.09.2006 14:44
Titel

Antworten mit Zitat Zum Seitenanfang

http://cssplay.co.uk/menus/centered.html



Für die aktive Seite legst du dir einfach eine extra id an.

#profile:hover
#profileactive
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] Navigation bei a:hover bold > Verschiebung vermeiden
[CSS] Probleme mit CSS-Navigation und Rolloverbildern
Problem mit IE7 und hover-Navigation
Navigation mit Hover Elementen in Wordpress
[CSS] Hover in Css Klasse einfügen ?
[JS/CSS] CSS-Hover mit JS animieren?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.