onmouseover popup via css-only - tooltips?

gindaisy

Hallo ihr Lieben.

Ich hoffe dass Ihr mir ein wenig weiter helfen könnt, den im Moment treibt mich die neue Website in den Wahnsinn.
Das Prinzip ist eigentlich ganz einfach, die Umsetzung raubt mir dafür den letzten Nerv. Link kann ich derzeit noch nicht reinstellen - ist eine Firmenwebsite und noch nicht startklar, daher hoffe ich dass das so funktioniert.

Und zwar haben wir eine Homepage mit wordpress gebaut und soweit läuft auch alles. Jetzt allerdings möchte ich ein onmouseover per HTML / CSS einbinden. Ich habe dazu zahlreiche Tutorials gefunden, allerdings reichen meine Kenntnisse nicht aus um das alles so aufzubauen wie ich mir das vorstelle.

Dazu bitte einmal das Bild im Anhang beachten.

Es gibt 12 dieser Kästchen von denen man aktuell 1 bis 4 auf der Grafik sieht.

Ein Kästchen besteht aus:

Code

<div class="item grid1x1">
<h2>Text Text 
1</h2>
<div class="white">1</div>
</div>

Im Prinzip möchte ich nun dass sich, wenn ich mit der Maus über das Kästchen fahre, wie auf der Grafik ein grünes Feld öffnet, mit Pfeil unten links welcher in das entsprechende Kästchen ragt, in welchem man weitere Informationen zu dem Produkt findet, dessen Foto sich eigentlich als Hintergrundbild in den jeweiligen Boxen finden sollte und sich wieder schließt, sobald ich mit der Maus das Kästchen verlasse.

Das in genau der Art für alle 12 Kästchen - das Kästchen sollte dabei eine fixe Größe haben die ich dann im Nachhinein noch selbst festlegen muss, abhängig davon wie viel Text ich benötige.

Ich bin auf der Suche nach Tooltips gestoßen, allerdings hat das hinten und vorne nicht gepasst. Ich hatte es zwar irgendwann so weit dass sich ein Popup geöffnet hat, aber nicht dort wo es sollte und der h2-Text der jetzt IN dem Kästchen ist war auf einmal ganz oben auf der Website. Also definitiv nicht da wo er hingehört...
Außerdem war das eine Lösung per a-tag. Eigentlich nicht das was ich möchte da das onmouseover für den gesamten Container gelten soll - also sowohl wenn ich über das Hintergrundbild fahre als auch wenn ich mit dem Mauszeiger die h2-Schrift berühre.

Ich hoffe, dass mir hier jemand helfen kann. Ich bin mit meinem Latein nämlich tatsächlich langsam am Ende ._.

Danke im Voraus und viele Grüße,
Daisy

Sailor

Ist nur eine grobe Idee - aber die Funktionalität könnte zu dem passen, was dir vorschwebt.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>Tooltip Test</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style type="text/css">
<!--
body {
  background-color: #aaaaaa;
  }
ul {
  margin-left: 0px;
  }


li {
  display: inline-block;
  list-style-type: none;
  }


li.upper {
  position: relative;
  top: -102px;
  left: -25px;
  }


div.permanent {
  width: 100px;
  height: 100px;
  background-color: #999999;
  border: 1px solid #000000;
  border-radius: 5px;
  }


div.pop_up {
  width: 80px;
  height: 100px;
  background-color: #cccccc;
  border: 1px solid #000000;
  border-radius: 5px;
  display: none;
  }


li:hover div.pop_up {
  position: absolute;
  display: inline-block;
  }


  -->
</style>
</head>
<body>
<p>Irgendein Text mit sehr viel bla bla<br><br>
<br>


nur eben groß genug, dass das Popup genügend Platz hat,<br>


<br>
</p>
<ul>
  <li>
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 1</div>
        </li>
     </ul>
     <div class="permanent"><h3 style="text-align: right">bla bla</h3>1</div>
  </li>
  <li>
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 2</div>
        </li>
     </ul>
     <div class="permanent"><h3 style="text-align: right">bla bla</h3>2</div>
  </li>
  <li>
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 3</div>
        </li>
     </ul><div class="permanent"><h3 style="text-align: right">bla bla</h3>3</div>
  </li>
</ul>
</body>
</html>

Alles anzeigen

Hab diese kleine Datei auch mal zum ausprobieren hochgeladen:
http://s414653727.online.de/tab_test/pop_ups.html

gindaisy

Hi Sailor und erst mal vielen lieben Dank.
Auf Deiner Musterseite sieht das schon mal total top aus - muss aber zu meiner Schande gestehen... Dass ich ehrlich gesagt keinen blassen Schimmer habe wie ich das jetzt da auf die Seite einbringe. Die css-Datei ist ausgelagert und so wie Du es nun da geschrieben hast weiß ich zwar wie ich es beispielsweise auf meiner privaten Seite machen würde, aber bei der mit Wordpress gemachten Seite tu ich mich ein wenig schwer.
Was könnte ich Dir denn schicken damit Du weißt was ich meine...?
Ich bin in Wordpress unter Seiten drin. Und bearbeite da gerade entsprechende Seite auf der die Produkte zu finden sein sollen. Da geht es aber dann gleich los mit den weißen Kästchen etc. - also zum Design selbst oÄ garnichts weiter. Ach... Ich stell mich doof an. Verzeihung... x)

Viele Grüße,
Daisy

Sailor

Hallo Daisy,
leider habe ich von 'Wordpress' keinen blassen Schimmer ;-), da haben wir also was gemeinsam! Ich erstelle meine Webseiten immer 'von Hand' ohne die Verwendung irgendwelcher Webseitenerstellungsprogramme. Darum fällt es mir leicht, mal eben Dinge im Code zu ändern und solche Spielereien auszuprobieren.
Hast du denn Zugriff auf deine externe css Datei? Könntest du dort von Hand ein paar Zeilen Code einfügen? Eigentlich sollte das mit jedem x-beliebigen Texteditor gehen, denn css Dateien sind reiner Text.
Etwas schwieriger könnte es sein den Code für die weißen Kästchen in den Quelltext des HTML Dokumentes zu bekommen. Bietet Wordpress die Möglichkeit eigenen HTML Code einzufügen?
Wenn ja, dann kann ich dir die Elemente, die du benötigst, gerne noch mal näher erklären... wenn dir der Beispielcode aus meinem letzten Beitrag noch nicht ausreicht!

gindaisy

Hi Sailor und danke noch mal

Also die aktuelle Homepage wurde durch eine EDV Firma mit Wordpress erstellt und ich musste hart kämpfen, habe aber inzwischen den vollen Zugriff auf alle Seitendateien sowie die CSS-Datei, ändern kann ich da also jederzeit was. Ich kann Dir auch gern mal den Code der jeweiligen Seite anhängen die es derzeit zu bearbeiten gilt, vielleicht hilft das ja schon weiter.

Code

<div class="item grid2x2"><img class="alignnone size-full wp-image-29" src="" alt="" width="470" height="400" />
<h2>Texte</h2>
<div class="white"></div>
</div>
<div class="item grid2x2">
<div class="green">
<div align="justify">Text Text</div>
</div>
</div>


<div class="item grid1x1">
<h2>Text Text 
1</h2>
<div class="white">1</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
2</h2>
<div class="white">2</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
3</h2>
<div class="white">3</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
4</h2>
<div class="white">4</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
5</h2>
<div class="white">5</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
6</h2>
<div class="white">6</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
7</h2>
<div class="white">7</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
8</h2>
<div class="white">8</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
9</h2>
<div class="white">9</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
10</h2>
<div class="white">10</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
11</h2>
<div class="white">11</div>
</div>
<div class="item grid1x1">
<h2>Text Text 
12</h2>
<div class="white">12</div>
</div>


<div class="item grid2x1">
<div class="green"><div align="center"><b>Text</b></div><br />
<div align="justify"><font size="1,8">Text Text</font></div></div></div>


<div class="item grid2x1">
<div class="green"><div align="center"><b>Text</b></div><br />
<div align="justify"><font size="1,8">Text Text</font></div></div></div>


<div class="item grid2x2">
<div class="green"><div align="center"><b>Text</b></div><br />
<div align="justify"><font size="2">Text Text</font></div></div></div>


<div class="item grid2x3">
<div class="green">
[contact-form-7 id='425' title='Bestellungen']</div>
</div>

Alles anzeigen

Das wäre jetzt der Code wie er aussieht auf der entsprechenden Seite. Bei Bedarf kann ich auch gern die aktuelle CSS noch mit anhängen, sollte das irgendwie nötig sein.

Bin Dir auf jeden Fall super dankbar für Deine Hilfe!

Viele Grüße,
Daisy

Sailor

Guten Morgen Daisy,
ja, das wäre sehr wichtig, wenn ich die CSS Datei mal sehen könnte, denn alles das, was mit diesem 'Popup' zu tu hat, wird ja durch CSS gesteuert.
Ist diese Seite schon irgendwo online, dass ich mir sie mal live anschauen kann?

gindaisy

Guten Morgen

Die Seite an sich ist online, nur diese Unterseite natürlich nicht weil die noch komplett im Aufbau und nur mit Mustertext voll ist.
Die CSS Datei würde ich Dir mal eben per PN zukommen lassen

Viele Grüße,
Daisy

Sailor

Hallo Daisy,
ist angekommen - habe die neuen Informationen mal auf der Testseite

http://s414653727.online.de/tab_test/pop_ups.html

verarbeitet. Könnte klappen (ohne Gewähr 8))

gindaisy

Hallooooooooho!

Boah, das ist auf jeden Fall tausend Mal mehr als ich geschafft habe. Funktioniert soweit einwandfrei. Vielen herzlichen Dank dafür! Das einzige Problem was jetzt noch ist: Es passen auf meiner Laptopansicht nicht mehr automatisch 4 der Kästchen nebeneinander. Unten drunter ist ein Bestellformular was die Seite auf bis zu 920px Breite zieht - es würden, so wie vorher auch, locker 4 Kästchen hinpassen - aber nach 3 rückt es automatisch die nächste Zeile an (siehe Screenshot)... Können wir das noch irgendwie hinkriegen? Dann bin ich direkt mal wunschlos glücklich!

Vielen herzlichen Dank und viele Grüße!

Sailor

ja... sehe ich. Ich denke, das liegt an der Formatierung in der CSS Datei Zeile 116++

Code

#content .item{
    margin-right: 8px;
    margin-bottom: 8px;
    float: left;
    position: relative;
    overflow: hidden;
}

Hier sind/waren die Werte für margin-right und margin-bottom auf 20px gesetzt! Das sorgt für die Abstände zwischen den weißen Boxen.
Getestet hab ich es jetzt mit 8px ... ob das für deinen Laptop reicht musst du ausprobieren.

gindaisy

Hi!

Das hat super funktioniert. Sieht absolut klasse aus. Einziges Problem welches sich jetzt noch stellt ist dass ja unter den 12 Kästchen noch andere Kästchen platziert sind.
Entweder rückt es das 12. Kästchen automatisch eine Reihe tiefer wenn die weiteren Kästchen unten innerhalb des schwarzen Hintergrundes sind, oder die 12 bleibt oben, dafür sind die unteren Kästchen aber außerhalb des Hintergrundes... Siehe Screenshot.
Ansonsten sieht das super aus so wie es ist!

HTML

<div class="item grid2x2"><img class="alignnone size-full wp-image-29" src="" width="470" height="400" />
<h2>Überschrift</h2>
<div class="white"></div>
</div>
<div class="item grid2x2">
<div class="green">
<div align="justify">TEXT TEXT TEXT</div>
</div>
</div>




<br clear="all">
<ul>
  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 1</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 1</h2>
          <div class="white">1</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 2</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 2</h2>
          <div class="white">2</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 3</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 3</h2>
          <div class="white">3</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 4</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 4</h2>
          <div class="white">4</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 5</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 5</h2>
          <div class="white">5</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 6</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 6</h2>
          <div class="white">6</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 7</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 7</h2>
          <div class="white">7</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 8</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 8</h2>
          <div class="white">8</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 9</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 9</h2>
          <div class="white">9</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 10</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 10</h2>
          <div class="white">10</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 11</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 11</h2>
          <div class="white">11</div>
        </div>
     </div>
  </li>


  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 12</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 12</h2>
          <div class="white">12</div>
        </div>
     </div>








<br clear="all">
<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x2">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="2">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x3">
<div class="green">
[contact-form-7 id='425' title='Bestellungen']</div>
</div> </li>








</li>










</ul>


</div>
</body>

Alles anzeigen

Sailor

Guten Morgen Daisy,
als Erstes erkenne ich auf den Screenshots, dass dort ein Fehler sein muss, denn diese Liste mit den weißen Kästchen sollte so funktionieren, dass die Reihen immer aufgefüllt sind - also die gleiche Anzahl von Kästchen pro Reihe. Bei dir sieht es so aus, als hättest du in der vor-vorletzten Reihe 4.. dann 3... dann 1! Soll so nicht sein, erst wenn die oberen Reihen alle gleichmäßig aufgefüllt sind, kann die unterste Reihe mit den restlichen Elementen nur teilweise gefüllt sein. Kann im Moment nicht sagen woran das liegt - aber - in deinem Code sind Fehler!

HTML

<li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 12</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 12</h2>
          <div class="white">12</div>
        </div>
     </div>








<br clear="all">
<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x2">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="2">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x3">
<div class="green">
[contact-form-7 id='425' title='Bestellungen']</div>
</div> </li>








</li>










</ul>


</div>
</body>

Alles anzeigen

Du hast die letzten 4 Boxen vor Ende der Liste mit den 12 weißen Boxen eingefügt .... das </li> und das folgende </ul> gehören nach oben. Vor das <br clear="all">. und dann ist da noch ein einsames </li>, dass da gar nicht hingehört.
Also so sollte es sein

HTML

...
  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 12</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 12</h2>
          <div class="white">12</div>
        </div>
     </div>
 </li>
</ul>


<br clear="all">
<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x2">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="2">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x3">
<div class="green">
[contact-form-7 id='425' title='Bestellungen']</div>
</div>


</div>
</body>

Alles anzeigen

Versuche das mal zu ändern und schau, ob sich dadurch was an deinem Fehler 'verbessert'.

... ach ja, die Formatierungen, die du da in deinen <div.. benutzt sind grottig 8).
Besser wäre eine CSS Anweisung in der Form ...<div style="text-align: justify; font-size: 1.5em;">TEXT TEXXT...</div>

gindaisy

So hatte ich es vorher auch. Wenn ich das so mache rückt es aber die unteren Kästchen aus dem schwarzen Hintergrund raus. Dafür sind dann aber alle 4 Kästchen in der letzten Reihe in einer Reihe... (erster Screenshot)

Das mit den DIVs ist ein guter Tipp. Mach ich direkt. Dankeschön!

Sailor

Ohne den gesamten Quellcode zu sehen bin ich auf Rätselraten angewiesen.
Aber der schwarze Hintergrund muss die CSS Eigenschaft eines 'Containers' sein (evtl. ein div) in dem deine Kästchen eingebettet sind. Es könnte sich dabei um ein Element handeln, dass mit der id="content" ausgezeichnet ist. Das schließe ich zumindest aus den Eintragungen in deinem Stylesheet, denn dort werden (fast) alle die im Code vorkommenden Klassen (class="irgendwas") mit dieser vorgestellten ID formatiert.
Beispiel:

#content .item{
...
}

heißt im Klartext, diese Formatierung gilt für alle Elemente mit der Klasse item (class="item"), die sich in einem Element mit der ID content befinden.

Wenn nun diese content-Element mit dem schwarzen Hintergrund zu früh geschlossen wird - also bevor alle Elemente in diesem Container drin sind, dann liegen eben einige außerhalb des schwarze Hintergrundes :?.
Welchen Browser benutzt du? Die meisten Browser sind da ganz gut, wenn man solche Fehler suchen muss. Einfach mal Rechtsklick auf die angezeigte Seite im Browser und 'Quellcode anzeigen' auswählen.
Dann in dem Bereich, wo es zu den Problemen kommt mal genau hinschauen, ob da irgendwas anders aussieht - meist werden die Elemente, die dem Browser fehlerhaft erscheinen farblich (meist rot) markiert. Und dann mit dem Mauszeiger über die Stelle gehen, wo diese Markierung ist. Der Browser zeigt dann an, was ihm fehlerhaft erscheint.

gindaisy

Hi Sailor

Ich habe die Seite eben mal freigeschaltet und würde Dir den Link mal eben per PN zukommen lassen... Ich selbst habe jetzt nämlich nichts gefunden. Mir ist nur aufgefallen dass es mit meinem Code von oben geht, also vor /li und /ul...

Danke für Deine Hilfe!

gindaisy

Errrrledigt. x) Dankeschön.

onmouseover popup via css-only - tooltips?

Tags

Benutzer online in diesem Thema