Runde Navigation

[danjo]

Hallo Ihr Lieben,

habe ein Problem mit meiner Navigation. Die besteht aus zusammenhängenden
Kreisen und soll den üblichen mouseover-Effekt beinhalten.
Die einzelnen Kreise sollen dementsprechend bis auf die sich überlagernden Teile
in hellblau erscheinen.
Das ganze mit Slices zu bewältigen erscheint mir recht schwierig.

Die Seite sollte auch nicht bei jedem Mouseklick neu geladen werden.

Gibts da eine Lösung?

 

[planet4]

Hallo,

ich würde nur die Wörter ("Unternehmen" etc.) verlinken und bei mouseover
per css das Hintergrundbild wechseln. Dazu brauchst du lediglich 5 Hintergrundbilder,
die sind ja nicht groß, jeweils mit dem richtigen hellblauen Kreis.

planet4.

 

[bubu-der-uhu]

Hmmm...
Ich hoffe Ich hab deine Beschreibung richtig verstanden - das also mein Lösungsvorschlag:

Für jeden Link machste eine .Gif-Maske: Die Weisen Flächen machst du Weiß - den Kreis transparent damit du die Links mit der BG-Color ausfüllenkannst und die Ecken eben mit dem entsprechenden Hintergrund. - Am besten du schneides die Bilder aus deinem Anhang raus und machst draus die Gifs.

Die Links machste ganz normal mit Css und gibts Ihnen position:absolute; für die genaue Positionierung und den entsprechenden z-Index zwecks korrekter überlappung.

-> Das Problem hierbei ist, dass die links eine Rechteckige Geometrie haben weshalb ein link hovern kann obwohl du garnicht auf dem Kreis bist.

-> Wenn dus kreisgenau haben willst wirst du um JS und Polys nicht herumkommen... Es sei den du nimmst Flash, da ist sowas ganz easy.


... Ich hoffe Ich hab deine Frage richtig verstanden.

Frr. bubu

 

[danjo]

Hallo,

ich würde nur die Wörter ("Unternehmen" etc.) verlinken und bei mouseover
per css das Hintergrundbild wechseln. Dazu brauchst du lediglich 5 Hintergrundbilder,
die sind ja nicht groß, jeweils mit dem richtigen hellblauen Kreis.

planet4.

Ok ist wohl zunächst der einfachste Weg. Mache mich gleich mal dran.

Müsste blos die entsprechend verschieden großen Schriften in CSS zusätzlich definieren...

 

[danjo]

Also habe mal angefangen, hier der Inhalt für die HTML Datei

<div id="test"></div>
				
				<ul>
<li><a href="http://www...htm" title="Home">Home</a></li>
<li><a href="http://www...htm" title="Unternehmen">Unternehmen</a></li>
<li><a href="http://www...htm" title="Leistungen">Leistungen</a></li>
<li><a href="http://www...htm" title="Kontakt">Kontakt</a></li>
<li><a href="http://www...htm" title="Impressum">Impressum</a></li>

				
				</ul>

Hier der CSS Teil

#test { 
   background-image: url(bild1.jpg);
   width: 181px;height:380px;
   z-index: -1;  
} 
a:hover { 
   background-image: url(bild2.jpg); 
   width: 181px;height:380px;  
}

Muss ich jetzt pro Link einen neuen div-Container erstellen?
z-Index muss ich auch noch hinzufügen, oder?

 

[bubu-der-uhu]

Eigentlich nicht.
Du kannst ja mit display:block; und dann den höhen bzw. breitenangaben deinen Link als "Box" erscheinen lassen.

Ich würd aber das <ul> und <li> weglassen und das Menü in einen <div> packen.
die einzelnen links musst du dann noch positionieren.

Für die links css:

#id1 {
display:block;
width: 30px;
height: 30px;
z-index:1;
background-image: url(bild1.jpg);
position: absolute;
top: 10px;
left: 50px;
}
#id1:hover {
.....
}

...das selbe für link 2 und 3 und 4 ....

 

[danjo]

Für den "Home-Link" habe ich folgendes CSS erstellt.

[COLOR="Green"]#home  {

      display:block;
      width: 30px;
      height: 30px;
      z-index:1;
      background-image: url(bild1.jpg);
      position: absolute;
      top: 10px;
      left: 50px;
}
#idhome:hover {

      display:block;
      width: 30px;
      height: 30px;
      z-index:1;
      background-image: url(bild2.jpg);
      position: absolute;
      top: 10px;
      left: 50px;
}[/COLOR]

Der Bildwechsel funzt leider noch nicht.
Die Schriftgröße, Schriftfarbe und Schriftart müssten auch noch hinzugefügt werden. Idee wie ich das bewerkstellige?

 

[wumble]

Der Bildwechsel funktioniert nicht weil du die links falsch selektierst.
Auch den Links gibst du falsche Attribute.
Also der Link sollte so aussehen:

<a href="home.html" id="home">Home</a>

Also statt Title benutzt du id.
Und in der CSS Datei greifst du dann folgendermassen auf den Link zu:

#home {
  allgemeine Angaben für den link
}
  #home:link {
    Angaben falls der Link unbekannt ist
  }
  #home:visited {
    Angaben wenn der Link bekannt ist
  }
  #home:hover {
    Angaben wenn die Maus drüber ist
  }
  #home:active {
    Angaben wenn du klickst
  }

mit dem "#" selektor fragst du also nach einer bestimmten id, hier "home".
Du kannst um Code zu sparen es auch zusammenfassen:

#home:link, #home:visited {
}
#home:hover, #home:active {
}

Für die Schrift brauchst du dann noch folgende Werte:

  color: [SCHRIFTFARBE];
  font-size: [SCHRIFTGRÖSSE];
  font-family: [SCHRIFTART];

Diese fügst du am besten bei den allgemeinen Angaben rein.
Da kannst eigentlich alle Angaben reinpacken bis auf das hintergrundbild und evtl. Schriftfarbe.
Bei den anderen brauchst dann nur noch das reinpacken was sich speziell in diesem Fall ändert.

Um sich in dem Thema etwas mehr einzuarbeiten wären folgende Seite sehr praktisch:

CSS 4 You - The Finest in Stylesheets
Google