• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Link Mouse-Over Background image

S

SteffSteff

Neues Mitglied
Hallo ihrs,

bin blutiger Anfänger und muss für meine Abschlussarbeit in EDV eine eigene HP erstellen.

Inhalte müssen zb Tabelle, Bilder, Verlinkungen zu mind. 4Seiten, Mouse-Over-Effekt, Styles...sein

Tabelle ist kein Problem, Bilder (meistens) auch nicht, Verlinkungen auch nicht - ABER:
Styles und Mouse-Over mit Backgroundimage

Was ich möchte:
Meine Menuepunkte sollten keine einfachen Texte sein, sondern sowas wie ein Schild. Habe mir sauviel Mühe damit gegeben, dass ich in klein die Meueschilder habe und auf den jeweiligen Seiten diese in groß als Überschrift erscheinen.
Aber ich bekomm keinen Mouse-Over-Effect mit denen hin. Ich habe zwei verschiedene Datein (erst als jpg, als es nicht klappte extra nochmal als gif) abgespeichert (einmal im Normalzustand und einmal wie es aussehen soll, wenn man über das Schild fährt).
Ich habe folgenden Befehl eingegeben:
<head>
<title> confectionerssugar </title>
<style type="text/css">

a:link { font-weight:bold; color:000000; text-decoration:none; }
a:visited { font-weight:bold; color:000000; text-decoration:none; }
a:hover { font-weight:bold; color:FF99FF; text-decoration:none; }

#menue a:link { font-weight:bold; color:000000; text-decoration:none; }
#menue a:visited { font-weight:bold; color:000000; text-decoration:none; }
#menue a:hover { font-weight:bold; color:FF99FF; text-decoration:none; }

#p-menue { border:none 1px; width:140px; padding:11px; margin:10px; background-image:url (menueschild.gif); }
#p-menue:hover { border:solid black 1px; width:140px; padding:11px; margin:10px; background-image:url (menueschildh.gif); }

</style>
</head>

Was er stattdessen macht: gar kein Bild als Hintergrund! Dafür habe ich einen M.O.Effekt mit der Schrift erreicht.

Es ist mir egal, ob das Schild nur als Hintergrundbild erscheint und die Schrift den M.O.Effekt hat oder ob ich mit dem Schild den M.O.Effekt erziele. Es wäre einfach nur schade, wenn ich die Idee mit den Hintergrundschildern, die ja auch als Wiedererkennungswert dienen, gar nicht umsetzen könnte.

Finde nach 5std. Arbeit keinen Fehler mehr und langsam ist die Luft aus der Fehleranalyse raus.

Kann mir bitte jemand helfen?

Danke,
Steff
 
SteffSteff schrieb:
bin blutiger Anfänger und muss für meine Abschlussarbeit in EDV eine eigene HP erstellen.
Zum Vergrößern anklicken....
Widerspricht sich das nicht? Zwischen einem blutigen Anfänger und einer eigenen Website stehen normalerweise ein paar Monate Arbeit.

Inhalte müssen zb Tabelle, Bilder, Verlinkungen zu mind. 4Seiten, Mouse-Over-Effekt, Styles...sein
Zum Vergrößern anklicken....
1. Bei Tabellen aufpassen, dass es auch wirklich tabellarische Inhalte sind.
2. MouseOver würde ich drauf verzichten (mit dem Begriff meint man für gewöhnlich JavaScript), besser und einfacher und barrierefrei geht das in CSS.
3. Styles sind keine Inhalte.

Styles und Mouse-Over mit Backgroundimage
Zum Vergrößern anklicken....
Mit "Styles" meinst Du vermutlich CSS. Das sollte auch kein Problem sein, denn nur mit CSS definierst Du ja das Aussehen Deiner Website. Wenn Du kein CSS kannst, kannst Du das Aussehen nicht bestimmen. Ein Bildwechsel in CSS geht mit der Pseudoklasse ":hover".

Meine Menuepunkte sollten keine einfachen Texte sein, sondern sowas wie ein Schild. Habe mir sauviel Mühe damit gegeben, dass ich in klein die Meueschilder habe und auf den jeweiligen Seiten diese in groß als Überschrift erscheinen.
Zum Vergrößern anklicken....
Sollte man trennen. Ein Hintergrundbild und einen normalen Text. Erscheint der Text auf der Grafik kann man den nicht skalieren.

Aber ich bekomm keinen Mouse-Over-Effect mit denen hin.
#p-menue { border:none 1px; width:140px; padding:11px; margin:10px; background-image:url (menueschild.gif); }
#p-menue:hover { border:solid black 1px; width:140px; padding:11px; margin:10px; background-image:url (menueschildh.gif); }
Was er stattdessen macht: gar kein Bild als Hintergrund!
Zum Vergrößern anklicken....
Ohne den dazugehörigen Code, wo das Element mit der ID "p-menue" vorkommt, kann man da nichts dazu sagen.
Am besten bitte einen Link einstellen!

Kann mir bitte jemand helfen?
Zum Vergrößern anklicken....
Nur mit Link zur Seite.
 
hier erstmal der link:

confectionerssugar

(Verlinkungen hatte ich wieder rausgenommen - sprich die Seiten gibt's gerad nicht)

Mouse-Over-Effect: darum geht's ja - wenn ich den nicht benutze, bekomm ich nen Punkteabzug. Der ist klarer Bestandteil der Aufgabe des Profs!
Styles, CSS p-Befehl: ich versteh nur Bahnhof. Denn unsere tollen Rechner in der Uni haben alle so ihre Macken. An dem Tag, an dem wir das durchgenommen haben, war ich damit beschäftigt von einem Rechner zum anderen zu wechseln, um einen funktionstüchtigen zu finden.

blutiger Anfänger und HP: ich glaube wir hatten ca 8 Unterrichtsstd. bisher. Zeit zum Üben, Probieren und somit sich irgendwie drauf einstellen zu können, kann man das nicht nennen - aber das ist eben das neue Studiensystem:cry:

Tabelle: ist drin - die Aufteilung Menueleiste und Text hab durch eine Tabelle gemacht (war auch fester Bestandteil der Aufg.)

"a:hover" hab ich ja drin, damit sich da was bewegt, aber es bewegt sich eben nie das Richtige und vor allem ohne Bild :evil:

Sorry, was heißt skallieren? :oops:

Danke!!!!
 
ps:

hier nochmal die komplette html-kiste, mit der ich die Hp derzeit hab:

<html>


<head>
<title> confectionerssugar </title>
<style type="text/css">

a:link { font-weight:bold; color:000000; text-decoration:none; }
a:visited { font-weight:bold; color:000000; text-decoration:none; }
a:hover { font-weight:bold; color:FF99FF; text-decoration:none; }

#menue a:link { font-weight:bold; color:000000; text-decoration:none; }
#menue a:visited { font-weight:bold; color:000000; text-decoration:none; }
#menue a:hover { font-weight:bold; color:FF99FF; text-decoration:none; }

#p-menue { border:none 1px; width:140px; padding:11px; margin:10px; background-image:url (menueschild.gif); }
#p-menue:hover { border:solid black 1px; width:140px; padding:11px; margin:10px; background-image:url (menueschildh.gif); }

</style>
</head>


<body marginwidth="0" marginheight="30" topmargin="50" leftmargin="20" bgcolor=#B2B2B2>


<table width=100% leftmargin="75" border=0 cellpadding=0>
<tr>
<td>
<center>
<img src="ueberschriftconfectionerssugar.jpg">
</center>
</td>
</tr>
</table>


<table width=800 border=0 cellpadding=0 >
<td id="menue" valign=top width=150 bgcolor=#B2B2B2>

<p id="p-menue"><a href="index.html">Home</a></p>
<p id="p-menue"><a href="cookies.html">Cookies</a></p>
<p id="p-menue"><a href="muffins.html">Muffins</a></p>
<p id="p-menue"><a href="kuchen.html">Kuchen</a></p>
<p id="p-menue"><a href="crepes.html">Crêpes</a></p>
<p id="p-menue"><a href="impressum.html">Impressum</a></p>
<p id="p-menue"><a href="kontakt.html">Kontakt</a></p>

</td>

<td valign=top width=750 bgcolor=#B2B2B2 topmargin=50>

<p>
</p>
<p>
</p>
<p>
<p>
</p>
<p>
</p>

<p>
Willkommen

</td>

</table>
</body>

</html>
 
Ich würde an deiner Stelle die Links in eine Liste machen, Stichwort: <ul>, per CSS die Aufzälungspunkte entfernen(list-style:none), und eventuell ein Rahmen drumherum machen. Statt <table> bietet sich wohl tatsächlich <div> an, um die ganzen Elemente zusammenzufassen. Bei den Links würde ich schon standardmäßig einen Rahmen(boder) drumherumlegen, damit sich der Besucher nicht wundert, warum auf einmal ein Rahmen erscheint, denn auf den ersten Blick dachte ich, das wäre eine Liste ohne <ul>.

Sinnvoll wäre es auch, den Quellcode durch den W3C-Validator laufen zu lassen, dieser checkt deinen Quellcode nach syntaktischen Fehlern: The W3C Markup Validation Service
Der Validator hat bei dir 19 Errors, 4 warning(s) ausgegeben. Naja, vielleicht solltest du dich mehr auf das grundsätzliche konzentrieren, und dann die Seite durchchecken lassen durch den Validator. Dieser checkt jedoch nicht die Semantik.
 
hey,

was die border angeht - das war auch nicht mein plan. ich hatte einaml border none genommen, weil ich mich schon fasst damit abgefunden hatte, dass ich alles so lassen muss - border setz ich wieder ein, falls das mit dem bildhintergrund nicht klappt.

was ich nicht verstehe, dass es bei einer komilitonin genau so geklappt hat:

home.arcor.de/flashpacker

ich sollte von ihr den headteil nehmen und so meine backgroundimages für die verlinkungen einsetzen. aber genau das passiert nicht.

kann der fehler beim abspeichern, oder hochladen passiert sein? wenn ja, was wäre eine mögliche fehlerquelle?
 
...und liste statt tabelle:

ich MUSS eine tabelle zur strukturierung benutzen.

Aufgabe:

HP mit mind. 4 verlinkungen (a-befehl)
tabelle zur strukturierung
mouse-over der links
auf jeder seite mind. ein bild
und statt immer neue befehle zu geben oder die gleichen immer wieder einzugeben styles/css bzw p-befehle nutzen

da führt kein weg dran vorbei...
ich weiß, dass man das heute alles nicht mehr so macht. kann mir nur vorstellen, dass wir dadurch ein gewisses grundwissen über html erlangen sollen...

lg
 
Kann das sein, dass du beim Übernehmen die Grafiknamen nicht geändert hast? Oder womöglich falsch geschrieben hast? Im Quellcode steht: menueschildh.gif <- Das 'h' ist an richtiger Stelle?
 
jepp:

h hab ich drangehangen, damit ich weiß, dass das das gif oder jpg beim hover ist :mrgreen: sonst blick ich nicht mehr durch...
 
SteffSteff schrieb:
ich MUSS eine tabelle zur strukturierung benutzen.
Zum Vergrößern anklicken....
Schönen Gruß an Deine Lehrer/Prof, er soll bitte mal nen HTML-Kurs machen. Welchen Sinn soll das bringen, wenn dem Nachwuchs sinnloses Zeugs beigebracht wird? Dann fällt der nächste Pisa-Test noch schlechter aus. Und man sagt ja, dass in Zukunft Fachkräfte fehlen. Wenn der Nachwuchs nur Unfug lernt, dann werden noch mehr Fachkräfte fehlen und Leute ohne Qualifizierung werden keinen Job finden.

Kannst ja auch Deinem Prof das Antidiskriminierungsgesetz unter die Nase halten. Wer Tabellen zu Layoutzwecken missbraucht, der tangiert dieses Gesetz schon sehr deutlich. NOCH gilt es aber nicht für jede Website.

Sorry, aber unter den Umständen ziehe ich mich zurück. Sowas kann ich nicht gutheißen. Warum bringen wir den Kindern in der Schule noch Grammatik bei? Da werden so viele Fehler gemacht, da kann man die doch auch gleich abschaffen!
 
@efchen,

kann deinen unmut verstehen - ist ja nicht so, als wüsste ich nicht, dass ich das hier nie wieder gebrauchen oder anwenden werde!!!

trotzdem: kein edv-abschluss = keine studienlaufbahn und wenn die da oben entscheiden, dass ich als studienwürstchen am ende der nahrungskette so'n zeugs machen muss, bin ich nicht die, die das ändern kann. ich kann nur bestehen (und zwar möglichst gut) oder eben nicht und dann hab ich ein problem, obwohl ich das hier nicht freiwillig mache.

mir ist auf jeden fall langsam schlecht und zittrig - bekomm hier nix mehr hin...

danke, trotzdem...
 
Was ich nicht verstehen kann ist diese Unfairness gegenüber anderen, die sich ihr HTML-Wissen ernsthaft erarbeitet haben. Du wirst dann einen Abschluss bekommen für Peanuts. Du lernst völlig sinnloses Zeug und wirst dafür noch mit einem Titel belohnt! Hallo?
Was DENKEN sich die Herrschaften, die für den Quatsch verantwortlich sind!?

Mir ist auch schlecht...

Frohe Weihnachten,
-Efchen

P.S.: Du weißt ja, dass mein verhaltener Wutausbruch nicht Dich persönlich betrifft, hoffe ich.
 
jaja, moment.

ich studiere nichts mit edv.

ich studiere kulturpädagogik. ich denke das problem ist, dass bei fast alle jobs ein umgang mit dem internetauftritt der jeweiligen firma vorausgesetzt wird. eine freundin von mir arbeitet für die lufthansa und muss das auch machen, obwohl sie was ganz anderes gelernt hat. aber von ihr weiß ich auch, dass firmen ihr programme dafür haben.

das modul ist quasi ein berührungspkt. mit photoshop, office, exel, html ...
warum genau das bestandteil ist weiß ich nicht.

sprich ich nehm keinem edvler den job weg oder so, obwohl ich nichts kann. ob ich jemals in meinem job überhaupt mit so grundlegenden dingen der hp-gestaltung zu tun habe, wage ich zu bezweifeln. falls ich zb. mal in einem kulturbüro oder bei einem museum lande, werde ich andere aufgaben haben, als eine hp zu gestalten.

also nen titel (die heut zu tage nicht mehr allzu viel wert sind) werde ich nicht im edv-bereich haben (auch nicht in bwl auch wenn ich dazu auch ein modul belegen muss) sondern als kulturpädagogin.

lg

ach so und ps: dass wir so wenig zu den jeweiligen fächern lernen, liegt einfach an dem bologna-prozess (=gleiche fächer in statt 4 in 3 jahren - alles mal sporadisch angekratzt, aber den rest musst du dir selbst beibringen)
 
Hallo.

Bevor du an den Mouse-Over Effekt denkst sollest du erst mal deinen Code in Ordnung bringen.
So wie das jetzt aussieht ist die Darstellung reine Glückssache und kann von Browser zu Browser verschieden ausfallen.

Was mir auf die schnelle aufgefallen ist:
Du hast keinen Doctype.
Die Hälfte deiner CSS Befehle existierte überhaupt nicht.
Bei der anderen Hälfte muss der Browser raten was er jetzt Darstellen soll.

Beseitige diese Fehler und kümmere dich dann um den Mouse-Over Effekt.

Gruss
Elroy
 
hallo Elroy,

was ist ein Doctype?

Werd aber, wie Du gesagt hast alles nochmal (am besten neu)machen und dann schauen.

...aber heut nicht mehr - der Tag ist gelaufen...

Danke und LG
Steffi
 
Efchen schrieb:
Schönen Gruß an Deine Lehrer/Prof, er soll bitte mal nen HTML-Kurs machen. Welchen Sinn soll das bringen, wenn dem Nachwuchs sinnloses Zeugs beigebracht wird? Dann fällt der nächste Pisa-Test noch schlechter aus. Und man sagt ja, dass in Zukunft Fachkräfte fehlen. Wenn der Nachwuchs nur Unfug lernt, dann werden noch mehr Fachkräfte fehlen und Leute ohne Qualifizierung werden keinen Job finden.
Zum Vergrößern anklicken....
Ich muss dir da leider 100%ig Recht geben. In unserem Informatikkurs(Word/Excel) muss ich den Lehrer zeigen, wie man bei Word ein horizontales Layout einstellt. Wohlgemerkt bekommen die Lehrer Unmengen von Geld welches sie nicht verdient haben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben