Entwicklerwerkzeuge im Browser

Guten Tag und schöne Weihnachten,

Ich weiß gar ned so recht, wie ich anfangen soll. Mich Interessiert das Thema Webprogrammierung sehr, Allerdings kann ich es nicht wirklich gut. Man muss dazu sagen dass ich auch kein Theroretiker bin. HTML- und CSS Tutorials habe ich nur überflogen. Die genauen Befehle Google ich dann. Es ist mehr so ein zusammengefummel und und hoffen das es geht. Die Entwicklerwerkzeuge von Browsern sind daher sehr geschickt für mich(zurzeit habe ich Opera). So kann ich mir dann immer irgendwelche Blank Themes holen und dann genau das Element stylen, auf das ich geklickt habe. Irgendwie habe ich es geschafft mir ein Joomla-Template zu erstellen. Dort gibt es Tooltips, die nur erscheinen, wenn man mit der Maus drüberfährt. Da komme ich eben mit den Entwicklertools schlecht dran, weil wenn ich mit der Maus auf das Element geklickt habe verschwindet der Div-Container ja wieder. Ich kann zwar den Elementstatus auf :hover stellen, aber der Tooltip verschwindet trotzdem.

Habt ihr irgendwelche Ideen? Gibt es vielleicht Programme für mein Anliegen?

Moin,

Ich habe es jetzt mehr oder weniger sauber gelöst bekommen.

Allerdings verstehe ich nicht warum es mir nicht angezeigt wird, wenn ich den Elementstatus auf :hover setze.

Dann habe ich angefangen, wie Wild in den Entwicklerwerkzeugen rumzuklicken und mich aufzuregen. Dabei ist mir aufgefallen, dass ich auf ein Element rechtsklicken und "Fokussieren" auswählen kann. So konnte ich zumindest mal nach unten scrollen und schauen, ob irgendwo unten noch ein Div-Container oder so dazu gekommen ist. Tatsächlich. 1 Zeile vor </body> ist er aufgetaucht und habe darauf geklickt. Aber sobald ich irgendwohin klicke verschwindet der Div-Container wieder.

Mein nächster Gedanke war, wenn das mit dem Fokussieren klappt, dann muss ich den Elementstatus vielleicht auf :focus stellen. Dann habe ich mich bei selfhtml über Pseudoklassen informiert. Aber :hover ist in dem Fall schon das richtige.

Dann habe ich nochmal einen Rechtsklick gemacht und Fokussieren ausgewählt. Dann habe ich einen Screenshot gemacht und konnte dann den Klassenname vom Bild abtippen.

So arbeitet ein professioneller Webprogrammierer!

Allerdings haben mir die Entwicklertools gesagt, dass ich den Tooltip mit div.tooltip im CSS ansprechen kann, was nicht funktioniert. Wenn ich mich richtig erinnere bedeutet das ja auch, dass es die Unterklasse .div in .tooltip gibt. Jetzt frage ich mich warum mir die Entwicklertools das anzeigen.

Jedenfalls mit .tooltip div hat es geklappt.