zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü mit Grafikbuttons - wie :active einbauen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.04.2008, 16:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.04.2008
Beiträge: 5
tarlo befindet sich auf einem aufstrebenden Ast
Standard Menü mit Grafikbuttons - wie :active einbauen?

Hallo CSSler!

Habe mir ein Paar Grafik-link-buttons -> "ampel-studie" gebastelt, die soweit richtig funktionieren. Wie baue ich den :active zustand noch dazu?

Anbei der Quellcode (css+html) und 3 Grafiken: idle, mit hover und wie active aussehen soll.

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>ampel studie</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<style type="text/css">
<!--

#box_ampel_top{
width:40px;
position:absolute;top:3px;right:148px;
background : #ffffFF ;
color:#ffffff;
border:1px solid #ffffFF;
padding:3px;
margin:2px 0 0 0;}

#box_ampel_top img {border:1px solid #ffffFF;}

#box_ampel_top div{display:none;}

#box_ampel_top:hover div{
display:block;
width:40px;
position:absolute;top:0px;right:0px;
background : #ffffFF ;
color:#ffffff;
border:1px solid #ffffFF;
padding:2px;
margin:1px 0 0 0;}

#box_ampel_mitte{
width:40px;
position:absolute;top:47px;right:148px;
background : #ffffFF ;
color:#ffffff;
border:1px solid #ffffFF;
padding:3px;
margin:2px 0 0 0;}

#box_ampel_mitte img {border:1px solid #ffffff;}

#box_ampel_mitte div{display:none;}

#box_ampel_mitte:hover div{
display:block;
width:40px;
position:absolute;top:0px;right:0px;
background : #ffffFF ;
color:#ffffff;
border:1px solid #ffffFF;
padding:2px;
margin:1px 0 0 0;}

#box_ampel_unten{
width:40px;
position:absolute;top:87px;right:148px;
background : #ffffFF ;
color:#ffffff;
border:1px solid #ffffFF;
padding:3px;
margin:2px 0 0 0;}

#box_ampel_unten img {border:1px solid #ffffFF;}

#box_ampel_unten div{display:none;}

#box_ampel_unten:hover div{
display:block;
width:40px;
position:absolute;top:0px;right:0px;
background : #ffffFF ;
color:#ffffff;
border:1px solid #ffffFF;
padding:2px;
margin:1px 0 0 0;}
-->
</style>
<body>

<h1>Willkommen im Shop! Wohin soll es gehen?</h1>

<div id="box_ampel_top"> <img src="idle_blau_blog.gif" width="80" height="30" alt="blog" />
<div>
<a href="http://blog.xxx.de/index.php"><img src="grau_blog.gif" width="80" height="30" alt="blog" />
</div>

</div>

<div id="box_ampel_mitte">
<img src="idle_gelb_club.gif" width="80" height="30" alt="club" /></a>
<div>
<a href="http://club.xxx.de/index.php"><img src="grau_club.gif" width="80" height="30" alt="club" />
</div>
</div>

<div id="box_ampel_unten">
<img src="idle_gruen_info.gif" width="80" height="30" alt="info" /></a>
<div>
<a href="http://info.xxx.de/index.php"><img src="grau_info.gif" width="80" height="30" alt="info" />
</div>
</div>
</body>
</html>

[code/]

Bin für Hinweise dankbar! (auch Verbesserungen des vorhanden codes..)

Gruss Tarlo
Angehängte Grafiken
Dateityp: gif menu_idle.gif (2,3 KB, 11x aufgerufen)
Dateityp: gif menu_hover.gif (2,4 KB, 13x aufgerufen)
Dateityp: gif menu_active.gif (3,6 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.04.2008, 17:17
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Ich verstehe dein Problem nicht. Mit a:hover bist du doch auch klar gekommen, :active ist eine weitere Pseudo-Klasse, die genauso angewendet werden muss.

bzw: Du hast Fehler im Markup: The W3C Markup Validation Service
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.04.2008, 18:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.04.2008
Beiträge: 5
tarlo befindet sich auf einem aufstrebenden Ast
Standard

Ok, ich hab erst mal sauber gemacht.. (danke für den Tip) ; also die Definiton geht ja sinngemäß gleich,

#box_ampel_top:active div{
display:block;
width:40px;
position:absolute;top:0px;right:0px;
background : #ffffFF ;
color:#ffffff;
border:1px solid #ffffFF;
padding:2px;
margin:1px 0 0 0;}

aber ich weiß nicht, wie ich den neuen Grafikbutton für den aktiv_Zustand dann in HTML anspreche/einbinde.

Gruss Tarlo
Mit Zitat antworten
  #4 (permalink)  
Alt 03.04.2008, 19:29
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Was ist das für Code? Zum Button wohl eher nicht, denn der Anker darf kein <div> enthalten.

Schau mal in die FAQ, dort wird gezeigt, wie man grafische Navigationen erstellt.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 04.04.2008, 15:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.04.2008
Beiträge: 5
tarlo befindet sich auf einem aufstrebenden Ast
Unglücklich

Gibt es hier auch Antworten, die auf die Frage eingehen?

Ich will z.Z. keine Preise für Einhaltung von Standards gewinnen, sondern ein kleines, praktisches Problem lösen. Also: wie baue ich in den o.g. code das active - element ein und wir rufe ich die Grafik dazu auf?

Gruss Tarlo
Mit Zitat antworten
  #6 (permalink)  
Alt 04.04.2008, 15:19
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Es gibt kein Preis, wenn man sich an die Regel hält, sondern nur Probleme, wenn man es nicht tut.

Die Pseudoklassen müssen im CSS-Teil direkt an den Link gehängt werden, wenn sie ihn betreffen sollen nicht das Elternelement!
So: :active: Aktiviertes Element: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets


So wie dein Code aussieht, hast du einfach nicht genug Grundlagen-Wissen, um einen grafische Navigation aufzustellen, deshalb habe ich dich an die FAQ verwiesen: http://xhtmlforum.de/40267-faq-h-ufi...tml#post296439

Nimm die Hilfe an oder lass es.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 04.04.2008, 15:19
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Ohne das Du den Standard einhältst wird das nicht funktionieren ...
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #8 (permalink)  
Alt 04.04.2008, 16:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.04.2008
Beiträge: 5
tarlo befindet sich auf einem aufstrebenden Ast
Standard

Fein, die CCS4you: http://www.css4you.de/wscss/css03.html#pseudoformate war hilfreich.

Grundlagenwissen nehme ich nicht auf Vorrat zu mir, sondern eben das, was ich aktuell brauche, das aber gründlich.

Die vertikal - horizontal Grafikmenü - Tutorials von http://xhtmlforum.de/40267-faq-h-ufi...tml#post296439 sind nix für newbies - zuviel Seiten- und Umwegsgedanken....

Gruss Tarlo

p.s.: Hast den code mal ausprobiert? Er tut ja seinen Job...
Mit Zitat antworten
  #9 (permalink)  
Alt 04.04.2008, 17:32
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von tarlo Beitrag anzeigen
Grundlagenwissen nehme ich nicht auf Vorrat zu mir, sondern eben das, was ich aktuell brauche, das aber gründlich.
Danach sieht dein Code nicht aus. Grafische Navigation macht man so nicht.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.04.2008, 17:58
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

tarlo, könntest du bitte die Code tags nutzen, damit der code überhaupt lesbar wird?! Viel dank!

sry, wenn das jetzt nicht zum thema passt, aber wenn ich den code nich ordnetlich lesen kann, ist es auch schwer zu helfen!
__________________
Meine Spielwiese: http://blog.kanedo.net
Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt
Für open Source Liebhaber: open Com

Auch ich Zwitschere als @kanedo
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Strich über dem Menü bei hover und active Jeanny (X)HTML 15 11.10.2010 20:57
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
dropdown menü einbauen PatrickM CSS 6 07.01.2008 17:13
Umbruch in einem LI bei horizontalem Menü M4rco CSS 12 13.10.2006 12:26
Navigation - Menü T.S. CSS 6 18.02.2006 19:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:43 Uhr.