Ankündigung

Einklappen
Keine Ankündigung bisher.

zentrieren kappt nicht.

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • zentrieren kappt nicht.

    Hallo,
    irgendwie stelle ich mich wohl gerade ziemlich blöde an. Ich habe einen img-Tag in einer HTML-Seite und will diesen zentrieren, eigentlich per CSS.
    HTML-Code:
                        <div class="fenster">
                            <div class="fenster_foto">
    <?php
                                $dateiname = "../images/waren/thubs/tn_".$x_ArtNr[$a][$i].".jpg";
    
                                if (file_exists ($dateiname)){
    ?>
                                <img src="<?php echo $dateiname?>" alt=""    height="" width="266" align="middle"></img>
    <?php
    }
    else {
    ?>                    
                                <img src="../images/waren/thubs/tn_platzhalter.jpg" alt=""    height="" width="" class="center"></img>
    <?php } ?>
                            </div>
    
                        </div>
    mein CSS dazu:
    HTML-Code:
    .fenster{
        width: 300px;
        height: 200px;
        float: left;
        display:block;
        text-align: center;
        border: solid black 1px;
    
    }
    
    .fenster_foto{
        height: 200px;
        max-width: 266px;
        float: left;
    
    }
    Ich habe schon alles mögliche versucht: margin: auto; text-align: center; auch im img-Tag mit align="middle". Nichts hat eine Wirkung. Margin-left: 20px; verschiebt die Box aber ohne weiteres.


  • #2
    Was hat PHP-Code bei der Beschreibung eines CSS-Problems verloren?

    Poste bitte ein HTML-Beispiel. Außerdem solltest du den HTML-Code mit dem W3C-Validator analysieren und alle dort angemerkten Mängel beseitigen.

    Kommentar


    • #3
      Sorry, wusste nicht, dass das PHP so ablenkt

      HTML-Code:
                          <div class="fenster">
                              <div class="fenster_foto">
      
                                  <img src="<?php echo $dateiname?>" alt=""    height="" width="266" align="middle"></img>
      
                              </div>
      
                          </div>

      Kommentar


      • #4
        Mit Ablenkung hat das nichts zu tun. Der Browser bekommt auch nur den generierten HTML-Code und nicht den PHP-Code. Um Probleme im Browser nachvollziehen zu können, sollte man auch nur Code posten, der im Browser existiert.

        Außerdem ist da immer noch PHP-Code drin. Und der HTML-Code ist immer noch fehlerhaft. z.B. das align-Attribut sollte nicht verwendet werden.

        Kommentar


        • #5
          Das align-Attribut kannte ich auch gar nicht, habe ich über google gefunden. Und </img> macht nun auch nicht wirklich den Unterschied.
          HTML-Code:
                              <div class="fenster">
                                  <div class="fenster_foto">
          
                                      <img src="../images/waren/thubs/tn_platzhalter.jpg" alt="" height="" width="">
          
                                  </div>
          
                              </div>

          Kommentar


          • #6
            Das Problem sind deine float: left. Wenn etwas gefloatet wird, kann es logischerweise auch nicht zentriert werden. Gib die raus.

            Kommentar


            • #7
              align wird auch unter HTML5 nicht mehr unterstützt.

              Ein fiddle hiflt meistens bei der Lösungssuche:

              https://jsfiddle.net/ekfj4ztp/1/

              Ein paar Grundlagen fehlen Dir da schon noch. Das float:left in .fenster_foto hebt das text-align: center logischerweise wieder auf.

              Kommentar


              • #8
                Das mir nen paar Grundlagen fehlen, da hast Du schon recht. Hab seit 10 Jahren oder so keine Webseiten mehr gemacht. Bin jetzt gerade dabei, mich nach und nach wieder da reinzufuchsen.
                Das die float:left das Problem sind, war mir schon klar - irgendwie. Aber ich brauche auch beide, da durch php eine Liste generiert wird und die dann nebeneinander angezeigt wird.

                Kommentar


                • #9
                  Zitat von rabab Beitrag anzeigen
                  Das die float:left das Problem sind, war mir schon klar - irgendwie. Aber ich brauche auch beide, da durch php eine Liste generiert wird und die dann nebeneinander angezeigt wird.
                  Dafür braucht man kein Float. Nimm doch einfach Flexbox. Oder setz die Elemente auf Inline-Block.

                  Kommentar


                  • #10
                    Mhhh, Flexbox kannte ich noch nicht. Muss ich mir mal in Ruhe zu Gemüte führen, scheint schon etwas kompliziert zu sein. Aber ich habe es damit hinbekommen, auch wenn ich weiterhin float: left; benuzten muss.
                    HTML-Code:
                    .fenster{
                        width: 300px;
                        height: 200px;
                        float: left;
                        display: flex;
                        justify-content: center;
                        text-align: center;
                        border: solid black 0px;
                    
                    }
                    
                    .fenster_foto{
                        height: 200px;
                        display: flex;
                    }

                    Kommentar


                    • #11
                      Da ergibt genau gar keinen Sinn.

                      Kommentar


                      • #12
                        Okay, sorry, hatte noch Reste drin:
                        HTML-Code:
                        .fenster{
                            width: 300px;
                            height: 200px;
                            float: left;
                            display: flex;
                            justify-content: center;
                        }
                        
                        .fenster_foto{
                            height: 200px;
                        }
                        Ich danke Euch übrigens

                        Kommentar


                        • #13
                          HTML-Code:
                            <img src="../images/waren/thubs/tn_platzhalter.jpg" alt="" height="" width="">
                          alt sollte angeben werden, da es für die Leute gedacht ist, die nicht sehen können und sich den Text zum Beispiel vorlesen lassen, Barrierefrei ist hier das Stichwort.
                          Die Attribute height und width ohne Angaben ist wie Pommes ohne Kartoffeln. Wenn du das drin hast dann schreib auch die Grösse in Pixel da rein, dann kann der Browser den Platz für das Bild schon mal bereit halten, oder lass es ganz weg.

                          Zum Lernen empfehle ich dir die Seite selfhtml, dort gibt es auch einen Abschnitt CSS.

                          Kommentar


                          • #14
                            Du hast vollkommen recht. Da ich jetzt aber beim experimentieren keinen Namen für die Fotos habe, habe ich den alt-Tag frei gelassen. Die Maßangaben sind auch noch Reste vom Versuch zu zentrieren. Ursprünglich hatte ich die gar nicht erst geschrieben. Trotzdem danke für den TIpp

                            Kommentar


                            • #15
                              Zitat von hellbringer Beitrag anzeigen
                              Nimm doch einfach Flexbox
                              Danke noch mal für den Tipp. Hab ich heute mal damit beschäftigt. Macht ja vieles viel einfacher, wenn man erst mal den Dreh raus hat . Super

                              Kommentar

                              Lädt...
                              X