Ergebnis 1 bis 6 von 6

Thema: Bilder zentrieren, wo liegt der Fehler???

  1. #1
    HTML Newbie
    Registriert seit
    20.01.2016
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Bilder zentrieren, wo liegt der Fehler???

    hallo liebe community ich bin html&css anfängerin (ganz neu hier) und habe bei meiner seite das problem, dass ich meine bilder nicht zentriert bekomme. hier mal mein html:

    HTML-Code:
    <div class="serie">
    
    <section>   
         
    <p >Skatepark</p>                    
    <img class="quer" src="pix/Lena_960x640.jpg">     
               
    </section>     
    
                   
    <section>    
         
    <p>Anna</p>                    
    <img class="hoch" src="pix/Anna_DSC05796_rgb_1_3.jpg">            
    <img class="hoch" src="pix/Anna_DSC05905_rgb_1_2.jpg">            
    <img class="hoch" src="pix/Anna_DSC05940_rgb_1_4.jpg">  
            
    </section>       
    </div>             
    uuuund mein css:

    Code:
    .serie{width: 80%;       position: relative;
    margin: 0 auto 0 auto; }
    
    
    .quer {height: 100%;
        position: relative;
            width: auto;
       
            }
    
    
    .hoch { width: 30%;
        height: auto;
        margin: 0 auto 0 auto;
      
    }

    margin 0 auto 0 auto funktioniert einfach nicht und ich weiß nicht warum :/
    ich kenn mich halt echt nicht so gut aus und weiß nicht was/ wo der fehler ist und eine weitere frage noch: ist das überhaupt logisch wie ich mein html aufgebaut habe? es geht eben und querformat bilder und hochformat und da dachte ich ich sprech die mal getrennt an damit ich die größen bestimmen kann.
    freu mich schon auf eure antworten DANKE!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Bilder zentrieren, wo liegt der Fehler???

    Hallo

    Ein Link zur Seite wäre besser als die Quellcodeschnipsel. Falls du noch keinen Provider hast kannst du Freewareprovider wie bplaced.net nutzen.

    Wie wissen zum Beispiel nicht wie groß die einzelnen Bilder sind. Und dein restliches CSS kann meine Lösung überschreiben.

    So kann ich nur raten und mich nach deinen Angaben richten. Ansonsten gehe ich davon aus dass du das aktuelle HTML5 und CSS3 benutzt.

    Code:
    margin: 0 auto 0 auto;
    funktioniert nur, wenn sich in einer Zeile ein Element befindet. Bei dir sind es jedoch drei, nämlich die Bilder.

    Beim umschließenden div.serie funktioniert es, weil das div alleine in einer Zeile ist.

    Du kannst zum Beispiel einen passenden linken Abstand vor dem ersten Bild einfügen, indem du folgendes CSS hinzufügst:

    Code:
    .hoch:nth-child(2) {
       margin-left: calc(5% - 8px);
    }
    und eine weitere frage noch: ist das überhaupt logisch wie ich mein html aufgebaut habe? es geht eben und querformat bilder und hochformat und da dachte ich ich sprech die mal getrennt an damit ich die größen bestimmen kann.
    Das lässt sich an Hand deiner bisherigen Teil-Informationen nicht sagen. Deine Lösung kann funktionieren, ist aber wahrscheinlich nicht die geschickteste. Für eine Anfängerin aber schon ganz gut.

    Gruss

    MrMurphy
    Geändert von MrMurphy (20.01.2016 um 08:17 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    20.01.2016
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder zentrieren, wo liegt der Fehler???

    Hallo das sind schon mal paar nützliche Informationen ou den Link.hab ich total vergessen gestern...
    http://fk12.org/ia_fd_15/Brandstetter/

    Ist jetzt nur nicht die ganz aktuellste Version. Das was ich oben stehen hab hab ich erst gestern gemacht und noch nicht hochgelade :/ ich hoffe du kannst mir trotzdem helfen?

    Grüße luisa

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Bilder zentrieren, wo liegt der Fehler???

    Hallo

    ich hoffe du kannst mir trotzdem helfen?
    Habe ich doch schon. Bau die Seite erst mal mit deinem und meinem CSS zusammen. Das sollte funktionieren.

    Gruss

    MrMurphy

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Bilder zentrieren, wo liegt der Fehler???

    Wenn ich es richtig vestanden haben sollte, dann reicht es doch so.
    Code:
    .serie {
     width: 80%; 
     margin: 0 auto;
     background:#eee;
    }
    
    img {
     display:block;
     margin:10px auto;
    }
    Code:
    <section>   
         
    <p >Skatepark</p>                    
    <img src="pix/Lena_960x640.jpg">     
               
    </section>     
    
                   
    <section>    
         
    <p>Anna</p>                    
    <img src="pix/Anna_DSC05796_rgb_1_3.jpg">            
    <img src="pix/Anna_DSC05905_rgb_1_2.jpg">            
    <img src="pix/Anna_DSC05940_rgb_1_4.jpg">  
            
    </section>       
    </div>
    Oder betwas besser.
    Code:
    .serie {
     width: 80%; 
     margin: 0 auto;
     background:#eee;
    }
    
    .hoch img {
     display:block;
     height:50%; /*  max 100% */
     max-width:100%;
     margin:10px auto;
    }
    
    .quer img {
     display:block;
     width:50%; /*  max 100% */
     margin:10px auto;
    }
    Code:
    <section>   
         
    <p >Skatepark</p>                    
    <figure class="quer"><img src="pix/Lena_960x640.jpg"> </figure>    
     </section>  
    <section>
    <p>Anna</p>
    <figure class="hoch"><img src="pix/Anna_DSC05796_rgb_1_3.jpg"></figure>            
    <figure class="quer"><img src="pix/Anna_DSC05905_rgb_1_2.jpg"></figure>            
    <figure class="hoch"><img src="pix/Anna_DSC05940_rgb_1_4.jpg"></figure>  
    </section>
    Geändert von djheke (20.01.2016 um 22:28 Uhr)

  6. #6
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.231
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: Bilder zentrieren, wo liegt der Fehler???

    Zitat Zitat von MrMurphy
    Code:
    margin: 0 auto 0 auto;
    funktioniert nur, wenn sich in einer Zeile ein Element befindet. Bei dir sind es jedoch drei, nämlich die Bilder.
    Und warum sollte das nicht funktionieren??? Die Bilder werden über eine CSS-Klasse angesprochen und bekommen jedes für sich die Regeln verpasst:
    HTML-Code:
    <div class="serie">
    <section>
    <img class="image" src="pix/Anna_DSC05796_rgb_1_3.jpg" alt="" border="0">
    <img class="image" src="pix/Anna_DSC05905_rgb_1_2.jpg" alt="" border="0">
    <img class="image" src="pix/Anna_DSC05940_rgb_1_4.jpg" alt="" border="0">
    </section>      
    </div>
    Code:
    HTML, BODY { width:100%; }
    
    
    DIV.serie { width:80%; position:relative; margin:0 auto; border:1px solid #ccc; }
    IMG.image { display:block; width:80%; position:relative; margin:0 auto 10px auto; }
    Geändert von Arne Drews (21.01.2016 um 21:35 Uhr)

Ähnliche Themen

  1. PHP Chat - Wo liegt der Fehler?
    Von Frosto43 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 28.12.2014, 01:17
  2. Wo liegt der Fehler?
    Von Bananenmus im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 27.03.2013, 15:14
  3. Wo liegt der Fehler
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 27.05.2010, 23:10
  4. Wo liegt der Fehler?
    Von Ericfischer im Forum Forum für alle anderen Programmiersprachen
    Antworten: 18
    Letzter Beitrag: 27.06.2008, 20:00
  5. Wo liegt der Fehler?
    Von Christian im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 29.06.2007, 17:32

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •