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
Nur nochmal zum Verständnis:

Das Ergebnis soll so aussehen, wie auf dem angehängten Bild? Sprich man fährt z. B. über "Text 6" und dann wird ein Vorschaubild der "dahinterliegenden" Seite angezeigt? Falls ja, wo genau soll das Bild dann angezeigt werden?

BTW: Oben im Beitrag ist nur ein leeres IMG-Tag, hast du da was vergessen?
 
Also das Vorschaubild soll klein direkt unter dem Text angezeigt werden.
und wo ist da ein leeres IMG-Tag ?
 
Hallo,
ich kann derzeit leider nichts unter deiner Darstellungsform vorstellen, also wie es genau aussehen soll.

Gruß,
Patrick
 
Hier nochmal ein Bild und ich hoffe es ist jetzt anschaulicher was ich erreichen will.
 

Anhänge

  • Bild14.png
    Bild14.png
    78,2 KB · Aufrufe: 47
Oder direkt untereinander?

[spoilerbb]
# HTML #

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pagetest</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<p><span class="link"><a href="#">Hallo</a><img src="http://bilder.bild.de/fotos/borussia-dortmund-47475354/Bild/2.bild.svg"/></span> geht es weiter :D <br/>Und so...</p>
<p><span class="link">Test<a href="#"><img src="http://bilder.bild.de/fotos/borussia-dortmund-47475354/Bild/2.bild.svg"/></a></span></p>
</div>
</body>
</html>

# CSS #
style.css


.link {
position: relative;
display: block;
}
.link img {
display: none;
position: absolute;
z-index: 100;
width: 200px;
height: 200px;
}
.link:hover img {
display: block;
}

[/spoilerbb]

Workt fine, Positionsangaben für das Bildelement können entsprechend in .link img auch durchgeführt werden, um das Bild genauer auszurichten.
 
vielen Dank schon mal das Einzige Problem ist, dass ich nicht auf eine weitere Datei verlinken kann, also alles in einer Datei stehen muss.
Hinzu kommt, dass ich nach wie vor, ein Bild als Grundlage habe.

Also es sollte in diesem Editor funktionieren.
Tryit Editor v3.1
 
Dieses Problem ist weiter oben gelöst^^

Der Code ohne externe Dateien:

[spoilerbb]

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pagetest</title>
<style type="text/css">
.link {
position: relative;
display: block;
}
.link img {
display: none;
position: absolute;
z-index: 100;
width: 200px;
height: 200px;
}
.link:hover img {
display: block;
}
</style>
</head>
<body>
<div id="content">
<p><span class="link"><a href="#">Hallo</a><img src="http://bilder.bild.de/fotos/borussia-dortmund-47475354/Bild/2.bild.svg"/></span> geht es weiter :D <br/>Und so...</p>
<p><span class="link">Test<a href="#"><img src="http://bilder.bild.de/fotos/borussia-dortmund-47475354/Bild/2.bild.svg"/></a></span></p>
</div>
</body>
</html>
[/spoilerbb]

Für jedes Element, welches den Bildeffekt besitzen soll, im <img src="HIER"/> die URL/den Pfad eintragen. Du kannst weitere Elemente mit <span class="link"><a href="LINK_ADRESSE">LINKNAME</a><img src="BILDADRESSE/PFAD"/></span> ohne Probleme anlegen, soviele wie du willst. Für die Positionierung des Bildes ganz einfach im Style-Bereich unter .link img Positionsangaben durchführen. Bisher ist der Effekt, dass das Bild unter dem Link über weiteren Elementen dargestellt wird.
 
ja dein Code funktioniert, aber ist nicht dass was ich meinte und hilft mir daher wenig :D

Bei moritz ist es fast genau so wie es sein sollte.
ich habe ein Bild über dieses lege ich verschiedene Div-Boxen und wenn ich über die Boxen mit der Maus fahre ein neues kleines Bild direkt darunter erscheint.

aber trotzdem danke schonmal an euch zwei für die bisherige Hilfe ;)
 
Was ist dann der gewollte Effekt, bzw. was soll genau passieren? Also sonst: Dann musst du für jedes Element eine neue Klasse mit einem neuen Bild deklarieren im CSS-Bereich. Copy-Paste, anderes Bild rein und fertig.
 
Is ja kein Problem :)

Schau: Tryit Editor v3.1
ja perfekt, habe es jetzt mal auf meinen Fall angepast, sodass wenn man über Text 5 fährt das Bild erscheint.

Momentan rutscht leider noch aus irgendwelchem Grund das bild runter und wenn ich keinen Text in die Dix Box 2 schreibe gar nichts passiert.

kann mir da noch wer helfen ?

bin wie gesagt ein HTML Noob :D



Tryit Editor v3.1
 
So ich habe es jetzt die Woche versucht einzubauen, leider gibt es noch kleine Änderungen die aufgrund der Seiten gestaltung vornehmen musste (siehe Link)
Darüberhinaus habe ich jetzt das Problem, dass aus irgendeinem Grund bei "Text 4" der Cursor repeatet.

Tryit Editor v3.1

Als nächstes müsste ich nun noch das Bild mittig ausrichten und die Button-Boxen skalierbar machen, aber auch da habe ich bisher keine Ahnung wie ich es bewerkstelligen soll :/

vll. mag mir ja nochmal jemand helfen :D
 
Zurück
Top