✔ css bild und text als link

[leon_20v]

Ich danke dir für deine Mühe!

Aber das ist nicht das Problem. Ich habe glaub das Problem jetzt, es liegt nicht am Bild selber oder an der Größe des Bildes, sondern ich lass ja das Bild selber ausblenden und lasse mittels CSS das Hintergrundbild wechseln. Hier liegt wohl das Problem, das Hintergrundbild wird zu klein angezeigt. Warum auch immer.

Was auch sehr komisch ist, ich habe das Bild jetzt eingeblendet. Ich habe von der darüber liegenden CSS einen grauen rand um das bild, der weiß wird. Also genau wie meine TEXTLINKS! Warum ist das so? Sehr störend!

http://veritas-fluctuare.de


das ist auch da nur in blau, wenn mein CSS nicht wirkt:

http://veritas-fluctuare.de/naviphpaneu.php

 

[SpiceLab]

Aber das ist nicht das Problem.

Doch, doch, das ist eines von beiden, die du hier eingangs vorgestellt hast

Ich habe glaub das Problem jetzt, es liegt nicht am Bild selber oder an der Größe des Bildes, sondern ich lass ja das Bild selber ausblenden und lasse mittels CSS das Hintergrundbild wechseln. Hier liegt wohl das Problem, das Hintergrundbild wird zu klein angezeigt. Warum auch immer.

Was auch sehr komisch ist, ich habe das Bild jetzt eingeblendet. Ich habe von der darüber liegenden CSS einen grauen rand um das bild, der weiß wird. Also genau wie meine TEXTLINKS! Warum ist das so? Sehr störend!

http://veritas-fluctuare.de

Setz mal diese Regelmenge ein, damit die Anzeige des voreingestellten Rahmen einer Grafik als Verweis unterdrückt wird, in dem deine beiden global festgelegten Schriftfarben für Links und überfahrene Links zum Vorschein kommen.

a img { border:none; }

 

[leon_20v]

sau gut! vielen dank

nur wie bekomme ich das mit dem Hintergrundbild gebacken. Das will irgendwie nicht funktionieren

weil

a.hauptthemen {
/* deine best. Regeln */
display:block;
width:170px;
height:25px;
}

kapier ich irgendwie nicht

 

[SpiceLab]

/* deine best. Regeln */ ersetzt du selbsterklärend durch deine "mitgebrachte" background-Eigenschaftangaben innerhalb dieses Deklarationsblocks

Und dieser gedankenlos zusammengefügte Kauderwelsch:

a.buttons {
background: url("Buttons/themenn.gif") center no-repeat;
hover: background: url("Buttons/themenh.gif") center no-repeat;
img visibility:hidden;
display:block;
width:170px;
height:25px;
}

hat so zu lauten:

a.buttons {
background: url("Buttons/themenn.gif") center no-repeat;
display:block;
width:170px;
height:25px;
}
a.buttons:hover {
background: url("Buttons/themenh.gif") center no-repeat;
}
a.buttons img {
visibility:hidden;
}

Du wärst hier eigentlich längst im Ziel, wenn du meine Beiträge aufmerksam gelesen hättest, und den Angaben gefolgt wärst, aber mit so einem wirren Code, den du zu Themenbeginn in dieser Form auch noch überhaupt nicht besessen hast, und ich dir in keinster Weise so vorgeschlagen habe, trägst du hier nun kräftig dazu bei, das Thema völlig unnötig in die Länge zu ziehen.

 

[leon_20v]

1. Ich hatte bisher nur ein ganz klein wenig mit HTML programmiert, alles andere ist für mich absolutes neuland und dies ist die erste Seite die ich sogar mit PHP machen muss, weil ich es einem sehr guten Bekannten versprochen habe, ich helfe ihm. Deshalb stelle ich mich wahrscheinlich auch so Dumm an und verstehe dein geschriebenes nicht richtig

2. Vielen lieben Dank für deine Hilfe. Auch wenn es dich irgendwie bisschen genervt hat, hast du mir doch total weitergeholfen! DANKE!

 

[SpiceLab]

Sorry, den Grad deiner Kenntnisse und Fertigkeiten in den einzelnen angewandten Sprachen konnte ich dir hier leider anfänglich nicht von der Stirn ablesen - nu bin ich aber einen Schritt weiter, und schlauer

 

[leon_20v]

hehe

aber was ich gerade merke, ich muss ja für jeden Button im CSS das komplett neu anlegen, oder gibt es da etwas, was ich nicht weiß?

 

[SpiceLab]

Sieht fast so aus, wenn sich die Hintergrundbilder der einzelnen Links voneinander unterscheiden sollen

In diesem Fall wird den Buttons jeweils ein eindeutiger ID-Bezeichner zugewiesen - analog zu ihrer Linkbeschreibung -, über den sich im CSS ihre individuellen Hintergründe definieren lassen.

Hier ein heruntergebrochenes Beispiel einer praxisnahen Listenstruktur zum Auszeichnen einer Seitennavigation:

<ul>
  <li><a href="#" id="home" class="buttons">...</a></li>
  <li><a href="#" id="about" class="buttons">...</a></li>
  <li><a href="#" id="news" class="buttons">...</a></li>
  <li><a href="#" id="contact" class="buttons">...</a></li>
  <li><a href="#" id="guestbook" class="buttons">...</a></li>
</ul>

die sich anschliessend mit CSS schick aufpolieren lässt.

Siehe z.B. Listamatic: one list, many options. Oder bei Navigationmenüs mit Untermenüebenen Listamatic2: nested list options.

Für deine Buttons gilt dann im CSS:

a.buttons {
display:block;
width:170px;
height:25px;
background-position:center;
background-repeat:none;
}
/* HOME */
a#home { background-image:url(home.gif); }
a#home:hover { background-image:url(home_hover.gif); }
/* ABOUT */
a#about { background-image:url(about.gif); }
a#about:hover { background-image:url(about_hover.gif); }
/* USW. */

 

[leon_20v]

okay danke.. mit ner id arbeiten


Ich hätte da mal noch ne Frage. Ich suche ein Menü das per Klick aufgeht und dazu noch gut aussieht. Ich versuche heute schon den ganzen Tag irgendwas passendes zu finden. Doch irgendwie bin ich zu blöd. Also ich habe auf der Page was versucht mit PHP und Arrays aber das ist nicht das Gelbe vom Ei. (Ich gebe den Inhalten in den Arrays Namen mit Nummer, füge dann die Jeweiligen Arrays zusammen und lasse diese dann Sortiert ausgeben). Das Funktioniert zwar, aber schön programmiert ist es nicht und durch die Nummerierung sind meine Links begrenzt.

Wo finde ich denn so ein verschachteltes Menü mit 4 Ebenen. Ich hab bisher noch nichts einfaches gefunden, das überall läuft. Und wenn ich mal eins gefunden habe, dann verstehe ich nur Bahnhof

 

[SpiceLab]

Ich hätte da mal noch ne Frage. Ich suche ein Menü das per Klick aufgeht und dazu noch gut aussieht.

Solch ein Menü, das seine Untermenüs durch das Anklicken der Menüpunkte öffnet, benötigt Javascript, damit sie "dauerhaft" geöffnet bleiben, wenn der Nutzer die Maustaste nach dem Anklicken wieder loslässt, und sich erst dann wieder schliessen, wenn von ihm ein anderer Menüpunkt ausgewählt wird.

• Click through flyout menu
  (5 Submenüebenen: Products > Cameras > Digital > Nikon > Lenses > ...)
• jQuery - Menu tree
  (3 Submenüebenen: Contacts > Sales > USA > ...)

Wenn dir das Erscheinungsbild eines Fundstückes nicht zusagt, steht es dir doch frei, daran per CSS etwas zu ändern

Deine weiteren Javascript-relevante Fragen postest du bitte im Fachforum für Javascript & Ajax, zumal deine neu aufgekommene Frage mit deiner eingangs vorgestellten Problematik nichts mehr zu tun hat, und entsprechend im Forum ein gesondertes Thema mit neuem Betreff wert ist.