CMS - Der Dirigent » Community » DeDi-Talk

Neue Umfrage | neues Thema | Antworten

horizontale Navigation wird übersehen, sind Sprechblasen wie hier die Lösung?

« Älteres Thema | Neueres Thema » Thema abonnieren | Thema versenden | Thema drucken

steffterra
Geschrieben am: 06. Oct 2006 - 20:35


Member


Gruppe: Members
Beiträge: 367
Mitgliedsnummer: 534
Mitglied seit: 27. Mar 2004


Hallo,

ich hoffe, ich poste im richtigen Forum.

viele meiner Webseitenbesucher haben das Problem, daß meine horizontale Navigation nicht gesehen wird, da sie genauso, wie die vertikale Nav., ins Rahmenlauyout eingebettet ist.

Daztu muss man wissen, dass in der vert. Nav die Ordner ausgewählt werden und in der horizontalen die Seiten. Eine Baumstruktur möchte ich aus Designgründen und da ich recht viele Ordner habe, nicht.

Nun habe ich mir gedacht, ich weise beim Überfahren der vert. Navigation per Sprechblase, wie hier im Forum auf das Vorhandensein der horizontalen Navigation hin.

Könnt Ihr DeDi-Web-Admins bitte schreiben, auf welcher Basis das funktioniert und was man alles dazu braucht? Das wäre sehr nett von Euch.

Vielen lieben Dank,

steffterra

EDIT: könntet ihr bitte den Titel meines Threads korregieren, habe da nen blöden Tippfehler reinbekommen. Danke
Top    
AndreX
Geschrieben am: 06. Oct 2006 - 22:10


Member


Gruppe: Members
Beiträge: 145
Mitgliedsnummer: 355
Mitglied seit: 26. Oct 2003


Hallo steffterra,

hier auf der Seite sind die Sprechblasen über CSS geregelt und als Hintergrundbild eingebunden.

Schau Dir mal die CSS an und suche nach dem Bild: style_images/dedi/bub2.gif, dann kannst Du sicher schon erkennen, wie das hier gemacht ist. Ach ja, das Bild gehört zum Link "Das Projekt".

Gruß
André

--------------------

...
Top   
steffterra
Geschrieben am: 07. Oct 2006 - 08:45


Member


Gruppe: Members
Beiträge: 367
Mitgliedsnummer: 534
Mitglied seit: 27. Mar 2004


Vielen Dank!

Wenn Du jetzt noch den kompletten link zum richtigen CSS hast (es gibt ja mehrere im sourcecode), dann wäre das super! :-)

steffterra
Top    
fx4u
Geschrieben am: 07. Oct 2006 - 09:32


Member


Gruppe: Tester v1.1
Beiträge: 328
Mitgliedsnummer: 1593
Mitglied seit: 05. Nov 2005


Firefox mit dem Web Developer Kit stellt dir das richtige CSS auf Knopfdruck dar:

Als Beispiel:

mehr CODE

#topnavi a#doku:hover span,#topnavi a#doku:active span,#topnavi a#doku:focus span{

background:url(../style_images/dedi/bub5.gif) no-repeat;

display:block;

height:64px;

left:40px;

position:absolute;

top:-55px;

width:269px;
}

--------------------

Gruss
Oli

Meine DeDi-Seiten sind HIER zu finden.
Top   
AndreX
Geschrieben am: 07. Oct 2006 - 09:58


Member


Gruppe: Members
Beiträge: 145
Mitgliedsnummer: 355
Mitglied seit: 26. Oct 2003


Ja, mit dem Firefox Web Developper Kit kommt man auf die CSS oder der direkte Link

http://forum.der-dirigent.de/sources/forum.css

--------------------

...
Top   
steffterra
Geschrieben am: 07. Oct 2006 - 16:01


Member


Gruppe: Members
Beiträge: 367
Mitgliedsnummer: 534
Mitglied seit: 27. Mar 2004


Danke für die schnelle Hilfe,

wie zu erwarten war, funktioniert es bei mir natürlich nicht so einfach, das style-id in den dedi-css-manager einzubauen, die graphik hochzuladen und im layout für das entsprechende Tabellenfeld die id- zuzuordnen. Liegt sicher daran, daß das hover nur für links funktioniert, nicht jedoch für Tabellenfelder, richtig?

Ich will Eure Geduld nicht überstrapazieren, aber wie müsste das css denn aussehen, wenn ich es dem <td background="media/layout/blau.gif" id="menue"> Menü</td > zuweisen möchte und das bubble beim Überfahren mit dem Mauszeiger angezeigt werden soll?

Danke, steffterra
Top    
AndreX
Geschrieben am: 07. Oct 2006 - 17:08


Member


Gruppe: Members
Beiträge: 145
Mitgliedsnummer: 355
Mitglied seit: 26. Oct 2003


QUOTE
Liegt sicher daran, daß das hover nur für links funktioniert, nicht jedoch für Tabellenfelder, richtig?
Ich denke, dass Du damit recht hast, bin aber bisher auch davon ausgegangen, dass du die Links mit dem Bild versehen willst und nicht die Tabellenfelder. Tabellenfelder und Hintergrundbilder gehen bestimmt mit javascript, kann da allerdings nicht weiterhelfen.

QUOTE
Nun habe ich mir gedacht, ich weise beim Überfahren der vert. Navigation per Sprechblase, wie hier im Forum auf das Vorhandensein der horizontalen Navigation hin.
Wieso nutzt Du jetzt nicht einfach den Link? Verstehe ich nicht, warum es die Tabellenzeile sein soll?

Übrigens, in der Linknavigation gibt es die Templatevariable {desc}, damit können ähnliche effekte im zusammengang mit title="{desc} erzielt werden.

--------------------

...
Top   
mika
Geschrieben am: 07. Oct 2006 - 17:09


Wurschtler


Gruppe: Tester
Beiträge: 659
Mitgliedsnummer: 333
Mitglied seit: 09. Oct 2003


servus steffterra,

schau dir mal die Beispielseite an. Da sind die Grundlagen für Hover-Effekte in CSS ganz gut beschrieben.

hth michel
Top    
hk-cons
Geschrieben am: 07. Oct 2006 - 17:37


Dauertester


Gruppe: Tester
Beiträge: 5444
Mitgliedsnummer: 71
Mitglied seit: 31. Mar 2003


<td background="media/layout/blau.gif" id="menue"><span class="overclass'"> Menü</span></td >
oder so ähnlich

--------------------

spart sich sprüche und wird humorlos
Top   
steffterra
Geschrieben am: 07. Oct 2006 - 19:40


Member


Gruppe: Members
Beiträge: 367
Mitgliedsnummer: 534
Mitglied seit: 27. Mar 2004


Hallo,

danke für die zahlreichen Antworten! Ich werde mich da mal durcharbeiten udn wieder berichten.

AndreX: Ich möchte es nicht für einen link machen, da das Wort "Menü" eine Überschrift für die Nav ist und kein link. Möchte das Bubble aber beim Berühren der Überschrift bzw. des Überschrift-Tabellenfeldes haben.

hk-cons: soweit war ich auch schon, und wie sieht Deiner Meinung die CSS-Klasse dazu aus?

steffterra
Top    
hk-cons
Geschrieben am: 09. Oct 2006 - 08:09


Dauertester


Gruppe: Tester
Beiträge: 5444
Mitgliedsnummer: 71
Mitglied seit: 31. Mar 2003


oder so:

mehr CODE
<td><a class="tipp" href="#">?<span> Menü</span></a></td>

mit

mehr CODE

a.tipp {
position: relative;
z-index : 24;
color : red;
text-decoration: none;
cursor: help;
}

a.tipp:hover {
z-index: 25;
background-color: #ffffff;
text-decoration : none;
}

a.tipp span {
display: none
}

a.tipp:hover span {
display: block;
position: absolute;
top: 15px;  
left: 150px;
width: 200px;
border: 1px solid #707070;
background-color: #fffacd;
color: #333333;
text-align: left;
padding: 2px;
z-index: 26;
font-size: 11px;
text-decoration: none;
}

wobei die classes natürlich angeppaßt werden müssen ......

--------------------

spart sich sprüche und wird humorlos
Top   
steffterra
Geschrieben am: 14. Oct 2006 - 09:26


Member


Gruppe: Members
Beiträge: 367
Mitgliedsnummer: 534
Mitglied seit: 27. Mar 2004


Vielen Dank,

das waren die entscheidenden Hinweise. Ich hatte nicht bedacht, dass ich nicht nur für die hover-funktion ein css brauche, sondern auch für den nicht-hover-Fall. Liegt wohl an meinem geringen CSS-Grundwissen.
Habs jetzt geschafft und bin Euch sehr dankbar!

Grüße,

steff
Top    

Thema wird von 0 Benutzer gelesen (0 Gäste und 0 Anonyme Benutzer)
0 Mitglieder:

11 Antworten seit 06. Oct 2006 - 20:35

Thema abonnieren | Thema versenden | Thema drucken


Neue Umfrage | neues Thema

Home | Das Projekt | Download | Entwicklung | Dokumentation | Forum | Impressum