ERLEDIGT HTML Nachhilfe

MrVrain

Ehem. Vereinsvorstand
Vereinsmitglied
Community-Mitglied
Registriert seit
9. Juli 2013
Beiträge
2.383
Ort
Dortmund
Vorname
Milan
Nabend ihr Lieben,

ich muss etwas mit HTML/CSS erstellen und brauche dabei eure Hilfe, weil ich in HTML einfach ein Noob bin.

Es geht um folgendes (Beispiel-) Bild, wo man wenn man über die einzelnen Textboxen fährt ein kleines Bild angezeigt wird, welches die Vorschau der dahinter liegenden Seite zeigt.



Mein bisheriger Code sieht folgenderweise aus.

[spoilerbb]
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<div>
<div style="width: 700px; height: 376px; z-index:1;">
<img style="absolute: position; width: 700px; height: 376px; z-index:2;" src="https://finexes.com/attachments/connect-png.5658/?temp_hash=f9d99862a47d8860eaa64e4131bb964c" />

<div style="box; absolute: position; margin-left: 521px; margin-top: 321px; width: 147px; height: 23px; z-index: 3;">
Text
</div>
</div>


</body>
</html>

[/spoilerbb]

Das erste Problem, ist das die einzelnen Div Boxen nicht über einander liegen und dass das Bild nicht Zentriert ist was leider erforderlich ist.
Anschließend müsste ich dann noch den Hover befehl einfügen, aber wollte erst mal die grundlegenden Elemente definieren, daher ist bisher auch nur eine Box definiert bei welcher auch die Position noch nicht komplett stimmt, aber dies sind sachen die ich dann am Ende auch hin bekomme.

Also vll. kann ja jemand ein wenig mehr HTML als ich und hilft mir dabei weiter.

Vielen Dank schon mal.
 

Anhänge

  • Connect.png
    Connect.png
    28,2 KB · Aufrufe: 53
Skalierbarkeit der Boxen sind über relative Größenangaben möglich (in Prozent % oder em). Wenn es darum geht, die Buttons responsiv auf die Bildschirmgröße anzugleichen (Position, Effekt usw.), empfehle ich dir, nach CSS Media Querys zu googeln. Nachteil an dieser Lösung ist jedoch, dass ältere Browser eventuelle Darstellungsfehler erzeugen.

Das Bild mittig ausrichten spricht für jeden Button das Bild in der Mitte darstellen?

Zum Repeat des Cursors: Es liegt schlicht ergreifend daran, dass die Verwendung bei #element:after liegt. Ein :after Element ist ein virtuelles Element, was nach dem Element eingeschoben wird. Das Problem an der Seite ist, dass das Bild größer als der zur Verfügung stehende Platz ist und sich somit verschiebt (Darstellungsfehler). Durch die Verschiebung ist das Bild in diesem Fall das Element, es wird getriggert. Der Cursor spring in diesem Moment in den Status Normal, denn im :hover hast du den Cursor ausschließlich als cursor: pointer; deklariert, allerdings nicht im :after Element. Da das Bild jetzt das :after-Element darstellt, ist das Hovern des Elementes kurzzeitig unterbrochen (da du nicht auf dieses Element explizit verweist. Bleibt die Maus dort, beginnt die Maus ihren "Affentanz" mit dem cursor: pointer;. Um das zu beheben, besteht die Möglichkeit, mehr Platz zu schaffen oder im Buttonbereich in der normalen Deklaration cursor: pointer; einzubinden. Damit würdest du den Affentanz beenden ;)
 
Zuletzt von einem Moderator bearbeitet:
Das Bild mittig ausrichten spricht für jeden Button das Bild in der Mitte darstellen?
Nein das "Hintergrund" Bild soll sich in der Mitte des Bildschirms befinden.
Ihr könnt es euch so vorstellen ich habe eine ähnliche Textbox wie hier in Forum und muss dort diesen HTML Code einfügen und innerhalb dieser Textbox soll dass Bild mittig dargestellt werden.
 
Benutze hierfür die Deklaration background: url(IMG) no-repeat fixed center center;

Das müsste arbeiten, habe ich gerade nicht getestet.
 
Dem Background Befehl kann ich leider nicht benutzen da dann das Bild hinter der "Textbox" landet :D

Den Affentanz der Maus habe ich aber behoben nun wackelt aber immer noch das "Hintergrund" Bild und veranstaltet dadurch auf der gesamten Seite ein Affentheater :D
 
Ja, das liegt leider an der der :after-Deklaration, andere Elemente sind im Weg ;)

Das Bild soll vor der Textbox gelagert werden oder auf der gleichen Ebene?
 
Das Bild soll einfach innerhalb der Box dargestellt werden und davor sollen die Buttons stehen. Eben genau wie in dem Beispiel von mir nur dass dad Bild mit text1 Text 2 usw. Mittig ist :D


Ja und Welche Elemente sind in weg?
Bzw. Wie bekomme ich es jetzt weg? vergrößern des Platzes hat nichts gebracht
 
Zurück
Top