AUSSTEHEND HTML Nachhilfe

Dieses Thema im Forum "Software" wurde erstellt von MrVrain, 11. November 2016.

  1. MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    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.

    [​IMG]

    Mein bisheriger Code sieht folgenderweise aus.

    Spoiler

    <!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://tactical-riot-gaming.de/att...8/?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>



    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:

  2. Fields

    Fields Website/Server
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    1.906
    Zustimmungen:
    251
    Vorname:
    Moritz
    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?
     
  3. Starter
    Starter
    MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    Vorname:
    Milan
    Also das Vorschaubild soll klein direkt unter dem Text angezeigt werden.
    und wo ist da ein leeres IMG-Tag ?
     
  4. Fields

    Fields Website/Server
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    1.906
    Zustimmungen:
    251
    Vorname:
    Moritz
    Alles klar, aber vom Layout her wie im angehängten Bild?

    Über dem Spoiler, aber jetzt gehts :D
     
  5. Seagra

    Member

    Registriert seit:
    4. Oktober 2014
    Beiträge:
    587
    Zustimmungen:
    157
    Vorname:
    Patrick
    Hallo,
    ich kann derzeit leider nichts unter deiner Darstellungsform vorstellen, also wie es genau aussehen soll.

    Gruß,
    Patrick
     
  6. Starter
    Starter
    MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    Vorname:
    Milan
    Hier nochmal ein Bild und ich hoffe es ist jetzt anschaulicher was ich erreichen will.
    [​IMG]
     

    Anhänge:

  7. Fields

    Fields Website/Server
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    1.906
    Zustimmungen:
    251
    Vorname:
    Moritz
    Bevor ich weiter mache: Page Title

    Hast du dir das so in etwas vorgestellt?
     
  8. Seagra

    Member

    Registriert seit:
    4. Oktober 2014
    Beiträge:
    587
    Zustimmungen:
    157
    Vorname:
    Patrick
    Oder direkt untereinander?

    Spoiler

    # 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;
    }



    Workt fine, Positionsangaben für das Bildelement können entsprechend in .link img auch durchgeführt werden, um das Bild genauer auszurichten.
     
  9. Starter
    Starter
    MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    Vorname:
    Milan
    ja ganz genau sowas
     
  10. Fields

    Fields Website/Server
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    1.906
    Zustimmungen:
    251
    Vorname:
    Moritz
    Hab dir das mal angehängt, vielleicht kommst du damit erstmal weiter :)
     

    Anhänge:

  11. Starter
    Starter
    MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    Vorname:
    Milan
    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
     
  12. Seagra

    Member

    Registriert seit:
    4. Oktober 2014
    Beiträge:
    587
    Zustimmungen:
    157
    Vorname:
    Patrick
    Dieses Problem ist weiter oben gelöst^^

    Der Code ohne externe Dateien:

    Spoiler


    <!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>


    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.
     
  13. Starter
    Starter
    MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    Vorname:
    Milan
    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 ;)
     
  14. Seagra

    Member

    Registriert seit:
    4. Oktober 2014
    Beiträge:
    587
    Zustimmungen:
    157
    Vorname:
    Patrick
    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.
     
  15. Fields

    Fields Website/Server
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    1.906
    Zustimmungen:
    251
    Vorname:
    Moritz
  16. Starter
    Starter
    MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    Vorname:
    Milan
    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
     
  17. Fields

    Fields Website/Server
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    1.906
    Zustimmungen:
    251
    Vorname:
    Moritz
  18. Starter
    Starter
    MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    Vorname:
    Milan
    optimal vielen vielen lieben dank :)
     
    Fields gefällt das.
  19. Fields

    Fields Website/Server
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    1.906
    Zustimmungen:
    251
    Vorname:
    Moritz
    Keine Ursache :)
     
  20. Starter
    Starter
    MrVrain

    MrVrain E-Sport/Sponsoring
    Community-Manager Vereinsvorstand

    Registriert seit:
    9. Juli 2013
    Beiträge:
    2.253
    Zustimmungen:
    455
    Vorname:
    Milan
    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
     

Diese Seite empfehlen

OK Mehr Informationen

Diese Seite verwendet Cookies. Mit deinem Klick auf OK stimmst du der Nutzung von Cookies zu, andernfalls ist die Funktionalität unserer Seite eingeschränkt.