4. Text über ein Bild (position nicht absolute)

Text über ein Bild (position nicht absolute)

  • I

    Guten Tag 😉

    Ich arbeite gerade an einer Webseite die wir als Semesterarbeit bis Montag abgeben müssen.
    Grundsetzlich bin ich ja fertig, jedoch muss ich ein paar "Schönheitsfehler" der Seite
    ausbessern die ich übersprungen habe.

    Bereich: Menue
    Positionierung: keine Angabe, mit float die div-container feinsäuberlich nebeneinander gehalten
    Problem: Das Bild dient schlussendlich als Link, folglich muss der User auch wissen wohin er
    geht. Ich kann nicht für jeden Menüpunkt eine eigene Grafik erstellen, dies wäre ineffizient.

    Ich habe versucht mittels "z-index:1" die Ebenen zu setzen, jedoch funktioniert dies nur mit
    "position:absolute". Dadurch wäre jedoch meine positionierung durch float hinfällig und ich
    müsste wieder alles statisch machen 😉
    Im moment ist es so, dass egal wie groß/klein der Bildschirm ist, alles proportional angezeigt
    wird. Ob Text, Bilder oder andere Inhalte durch iframes...

    Die Code-Ausschnitte die es betreffen (anderswertige Inhalte für testzwecke entfernt)

    <body onLoad="init()" text="#000000" bgcolor="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div class="Kopf">

   <div id="Menue_Main">
         <div class="Menue_Field">
                 <div class="Menue_Field_Text">blubb</div>
                 <img class="Menue_Field_IMG" src="Images/Button-inaktiv.png" alt="" border="0" width="120" height="30">
         </div>
         <div class="Menue_Field">
                 <img class="Menue_Field_IMG" src="Images/Button-inaktiv.png" alt="" border="0" width="120" height="30">
         </div>
         <div class="Menue_Field">
                 <img class="Menue_Field_IMG" src="Images/Button-inaktiv.png" alt="" border="0" width="120" height="30">
         </div>
         <div class="Menue_Field">
                 <img class="Menue_Field_IMG" src="Images/Button-inaktiv.png" alt="" border="0" width="120" height="30">
         </div>
         <div class="Menue_Field">
                 <img class="Menue_Field_IMG" src="Images/Button-inaktiv.png" alt="" border="0" width="120" height="30">
         </div>
         <div class="Menue_Field">
                 <img class="Menue_Field_IMG" src="Images/Button-inaktiv.png" alt="" border="0" width="120" height="30">
         </div>
   </div>

</div>

</body>

    die dazugehörigen CSS-Definitionen:

    /* Div-Bereich des Kopf-Bereiches */
.Kopf {

     position:absolute;
     top:0%;
     left:0%;
     height:20%;
     width:100%;
     background-color:#44ECE9;

}

/* Positionierung des Menues (Kopf-Bereich) */
#Menue_Main {

     position:absolute;
     top:20%;
     left:20%;
     height:30%;
     width:60%;
     background-color:#FD032E;
     padding-left: 1.5%;
     padding-right: 1%;
     padding-top: 0.1%;
     padding-bottom: 0.1%;

}

/*
#Page:hover {

     background-color:#3900FF;

}

*/

.Menue_Field {

    float:left;
    height:60%;
    width:12%;
    margin-left:1.30%;
    margin-right:1.30%;
    margin-top:0.5%;
    /* margin-bottom:0.5%; */
    background-repeat: no-repeat;
    background-size: contain;
    /* background-color:#24F2E2;  */ /* Hintergrundfarbe zur Erkennung der Grenzen */

}

.Menue_Field_IMG {

      width:100%;
      height:100%;
      z-index:1;

}

/* Bezüglich Menue_Field_IMG ---> http://css-tricks.com/how-to-resizeable-background-image/ */ 

.Menue_Field_Text {

    float:left;
    height:60%;
    width:12%;
    margin-left:1.30%;
    margin-right:1.30%;
    margin-top:0.5%;
    z-index:2;

}

    Ich habe diese Semesterarbeit bis Montag abzugeben und es wäre schade wenn ich diesen Fehler nicht ausmerzen kann
    bis dahin 😉

    Gruß
    ITEDVO

    EDIT:// Bezüglich den Kommentaren in den CSS-Definitionen, werden wohl mit den html-tags nich richtig angezeigt...

    0
  • ?

    Da steht zwar viel Text und Code aber was ist deine Frage? Soll Images/Button-inaktiv.png das Hintergrundbild für die Menü-Items sein und der Text dadrüber stehen?
    Wenn ja, warum setzt du das Bild dann nicht einfach als hintergrund für die menü divs?
    Falls nein: bitte nochmal erklären was Ziel, Status Quo und Problem ist.

    0
  • I

    Dann bitte ich dich das nächste mal "genauer" zu lesen 😉

    Wieso ich die Bilder nicht als background-image:url('../Images/Button-Aktiv.png') verwendet habe,
    ist dieser, dass die Seite sich Dynamisch an die größe des Browserfensters anpasst -->
    http://css-tricks.com/how-to-resizeable-background-image/

    Bilder als background-image hingegen sind statisch und ändern ihre größe nicht. Ausserdem sollte
    die Webseite auch auf einem Smartphone einsehbar sein und da möchte ich nicht gerade von A nach
    B Scrollen um den gewünschten Inhalt zu finden um dann auch noch dorthin zu Zoomen. Die gesammte
    Webseite bis auf bestimmte Teile des Content-Bereiches sind auf einem Schlag ersichtlich.

    Und wie oben erwähnt:

    Die Ebenen-Positionierung der Divbereiche sind anscheinend nur mit "position:absolute" möglich, jedoch
    müsste ich dann für jeden einzelnen Button die Position einzeln vergeben, was bei 3 Buttons zwar nicht
    viel erscheint, jedoch mit Javascript und einer darin verbundenen Schleife die das Grundgerüst des Menüs
    in die Datei schreibt, ist es aufwendiger.
    So habe ich einfach mit "float:left" und einer padding/margin anpassung per CSS die Buttons mit einem
    schlag positioniert.

    Meine Frage: Ist es möglich, mit meinem Grundgerüst das ich vorgegeben habe (float:left, padding/margin, no-absolute)
    einen Text über eine Grafik zu positionieren?

    0
  • ?

    itedvo schrieb:

    Bilder als background-image hingegen sind statisch und ändern ihre größe nicht.

    Quatsch, mit background-size: 100% lässt sich der Hintergrund strecken
    Alternative wäre auch das bild als border-image einzusetzen, jenachdem wie das Bil d aussieht.

    0
Anmelden zum Antworten