1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Text über Bild schreiben:

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von manuthedanu, 17. Mai 2016.

  1. manuthedanu

    manuthedanu Grünschnabel

    Hi Jungs wie oben schon beschrieben gibt es bei mir ein Problem, bei dem ich vorhabe ein Bild, dass ich wegen eines Links als Karte geschrieben habe, mit Text überschreiben will. Bitte achtet jetzt nicht auf die fehlenden backgrounds usw mir geht es nur um das prinzip :)

    HTML:
    <!DOCTYPE html>
    <html>

    <head>

    <meta charset="UTF-8">
    <title>Gaming Portal</title>
    <link type="text/css" rel="stylesheet" href="text.css"
    </head>

    <body>

    <img src="Hintergrund.jpg" width="650" height="800" alt="Hintergrund" usemap="#Hintergrund">
    <map name="Hintergrund">
    <area shape="rect" coords="11,10,59,29"
    href="Anmelden.html" alt="Anmelden" title="Anmelden">
    <area shape="rect" coords="42,36,96,57"
    href="Regristrieren.html" alt="Noch nicht angemeldet?" title="Noch nicht angemeldet?">
    </map>

    <div id="text1">
    <p>
    blabla
    blabla
    blabla
    blabla
    blabla
    blabla
    blabla
    blabla
    blabla
    </p>
    </div>

    </body>
    </html>



    Nun zu CSS:
    #Hintergrund{
    Z-index: 0;

    }

    #Text1{
    font-size: large;
    font-weight: bold;
    Z-index: 1;




    }


    Mein Problem ist, dass Es den Text einfach unter meine "Map" geschrieben hat.
    Ich möchte das Bild aber nicht absolut positionieren, da ich sonst sicher mit der Fenster minimierung Probleme bekomme.
    Wäre sehr Dankbar über eure Hilfe.
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Das geschieht einfach, weil sich derzeit #Text1 im normalen Textfluß befindet, und ein <div>- u. <p>-Element als sog. Blockelemente einen Absatz darin erzeugen.

    Als Arbeitsgrundlage empfehle ich http://www.cssplay.co.uk/menu/cssplay-imagemap-hover-v2.html, und wandel einfach einen der Mouseover-Texte in einen ständig sichtbaren um.

    Aus:
    Code (CSS):
    1. area:nth-of-type(1):hover ~ span:after {content:"Dummy Text";}
    wird:
    Code (CSS):
    1. area:nth-of-type(1) ~ span:after {content:"Dummy Text";}
     
    iCup gefällt das.
  3. manuthedanu

    manuthedanu Grünschnabel

    Danke für die Antwort ja dass ist verständlich.
    Wie man ein Bild so beschriftet weiß ich natürlich auch.
    Meine Frage war jedoch ob mir jemand sagen kann wie ich es in html bzw. CSS einstellen kann, dass es die Karte als Hintergrund sieht und meinen Text nicht unbedingt als beschriftung, sondern einfach nur als Beginn der Seite.
    Wäre da
    position: relative
    position: absolute

    notwendig?

    Vielen Dank im Vorraus
     
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Wenn Du es wüsstest, hättest Du hier nicht die Frage danach gestellt :D
    So deutlich kam das nicht rüber.

    Klar, auf diese Weise würde es auch gehen, aber wenn das eh nur eine Startseite repräsentieren soll, kann doch getrost das ImageMap verwendet werden.

    Ein paar Zeilen CSS aus dem Demo dazu, und fertitsch :cool:
     
    iCup gefällt das.
  5. manuthedanu

    manuthedanu Grünschnabel

    Wenn du es selbst nicht weißt dann schreib doch bitte einfach gar nichts dazu denkst du wenn ich das nur für eine einfache Startseite benötige wäre ich nicht selbst drauf gekommen. ;)
    Dass es mit der Positionierung auch geht ist mir natürlich kar aber da ich ja meinem Bild eine Grafik gegeben habe und in dieser Grafik wie von mir beschrieben mehrere Links enthalten sind, werden die Links durch die Positionierung entfernt.

    Deswegen habe ich ja gefragt ob mir dass jemand erklären kann, da ich zuvor mit dem <map> nicht viel am Hut hatte und mich deswegen nicht mit den Regeln dazu auskenne.

    Wenn sich jemand genauer damit auskennt würde ich mich freuen wenn es mir dass erklären kann sitze jetzt schon lange genug da und versuche das Problem zu lösen...
     
  6. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Was ich bislang nicht weiß, sind die weiteren Details Deiner Seite :p
    Du hast die Stichworte schon genannt: relative und absolute Positionierung.

    Also wenden wir uns von Deinem eingangs gezeigten ImageMap wieder ab, und betrachten die beiden Positionierungsarten genauer:
    Code (HTML5):
    1. <div id="imageMap">
    2.   <a href="Anmelden.html" id="link1">Anmelden</a>
    3.   <a href="Registrieren.html" id="link2">Registrieren</a>
    4. </div>
    Code (CSS):
    1. #imageMap {
    2.   position:relative;
    3.   width:650px;
    4.   height:800px;
    5.   background:url(Hintergrund.jpg) no-repeat
    6. }
    7. #imageMap a {
    8.   position:absolute
    9. }
    10. #imageMap a#link1 {
    11.   top:...px;
    12.   left:...px
    13. }
    14. #imageMap a#link2 {
    15.   top:...px;
    16.   left:...px
    17. }
    Mit dieser Technik beziehen sich die absoluten Startpositionen der Links auf die Grenzen des Elternelements #imageMap, und nicht mehr auf <body>, was zu Problemen führen kann, wenn das Browserfenster skaliert wird.
     
    Zuletzt bearbeitet: 17. Mai 2016
    iCup gefällt das.
  7. manuthedanu

    manuthedanu Grünschnabel

    Verstanden Danke :)

    Noch eine Frage:
    Wie kann ich bei den Links die Breite einfügen, da bei:
    #imageMap a#link2 {
    nur die Position angegeben wird aber nicht die Breite, was dazu führen würde, dass der Link genau 1 Pixel hoch und breit ist wenn ich dass richtig sehe oder?

    kann man statt den Koordinaten einfach unter top und left
    height:
    weight:
    hinzufügen?

    Wenn ich da falsch liege wäre es nett wenn du das erklären könntest.
    Sorry wegen dem oben ;)
     
  8. manuthedanu

    manuthedanu Grünschnabel

    Sorry...
    natrürlich
    Height / width nicht weight :D
     
  9. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Jip, weight = width, und dazu sicherheitshalber noch display:block, damit die Dimensionierungen beim Inline-Element auch greifen :)
    Code (CSS):
    1. #imageMap a {
    2.   position:absolute;
    3.   display:block
    4. }
    Je nachdem, ob die Linkflächen gleich groß werden sollen, können diese Angaben für diesen Selektor definiert werden, ansonsten analog zu den Startpositionen individuell für #link1 u. #link2.
     
    Zuletzt bearbeitet: 17. Mai 2016
    iCup gefällt das.
  10. manuthedanu

    manuthedanu Grünschnabel

    Danke dass ist einblendend :)
    Freut mich dass so schnell ging.
     
Die Seite wird geladen...