Bilder zentrieren, wo liegt der Fehler???

luisaarnez

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

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

Alles anzeigen

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;

}

Alles anzeigen

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!

MrMurphy

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

Zitat

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

luisaarnez

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

MrMurphy

Hallo

Zitat

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

djheke

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

Alles anzeigen

Code

[COLOR=#000080]<section>[/COLOR]   

[COLOR=#000080]<p >[/COLOR]Skatepark[COLOR=#000080]</p>[/COLOR]                    
[COLOR=#800080]<img src=[COLOR=#0000FF]"pix/Lena_960x640.jpg"[/COLOR]>[/COLOR]     

[COLOR=#000080]</section>[/COLOR]     


               
[COLOR=#000080]<section>[/COLOR]    

[COLOR=#000080]<p>[/COLOR]Anna[COLOR=#000080]</p>[/COLOR]                    
[COLOR=#800080]<img src=[COLOR=#0000FF]"pix/Anna_DSC05796_rgb_1_3.jpg"[/COLOR]>[/COLOR]            
[COLOR=#800080]<img src=[COLOR=#0000FF]"pix/Anna_DSC05905_rgb_1_2.jpg"[/COLOR]>[/COLOR]            
[COLOR=#800080]<img src=[COLOR=#0000FF]"pix/Anna_DSC05940_rgb_1_4.jpg"[/COLOR]>[/COLOR]  

[COLOR=#000080]</section>[/COLOR]       
[COLOR=#000080]</div>[/COLOR]

Alles anzeigen

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

Alles anzeigen

Code

[COLOR=#000080]<section>[/COLOR]   

[COLOR=#000080]<p >[/COLOR]Skatepark[COLOR=#000080]</p>[/COLOR]                    
[COLOR=#800080]<figure class="quer"><img src=[COLOR=#0000FF]"pix/Lena_960x640.jpg"[/COLOR]>[/COLOR] </figure>    
 [COLOR=#000080]</section>[/COLOR]  
<section>
<p>Anna</p>
[COLOR=#800080]<figure class="hoch"><img src=[COLOR=#0000FF]"pix/Anna_DSC05796_rgb_1_3.jpg"[/COLOR]>[/COLOR][COLOR=#800080]</figure>[/COLOR]            
[COLOR=#800080][COLOR=#800080]<figure[/COLOR][/COLOR][COLOR=#800080][COLOR=#800080][COLOR=#800080] class="quer"[/COLOR]>[/COLOR]<img src=[COLOR=#0000FF]"pix/Anna_DSC05905_rgb_1_2.jpg"[/COLOR]>[/COLOR][COLOR=#800080]</figure>[/COLOR]            
[COLOR=#800080][COLOR=#800080]<figure[/COLOR][/COLOR][COLOR=#800080][COLOR=#800080][COLOR=#800080] class="hoch"[/COLOR]>[/COLOR]<img src=[COLOR=#0000FF]"pix/Anna_DSC05940_rgb_1_4.jpg"[/COLOR]>[/COLOR][COLOR=#800080]</figure>[/COLOR]  
</section>

Alles anzeigen

Arne Drews

Zitat von MrMurphy
Code
[COLOR=#3E3E3E]margin: 0 auto 0 auto;[/COLOR]
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

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

Tags