Bilder Block zentrieren

Johnny6er

Hallo zusammen, ich möchte gerne, dass die 4 Bilder zentriert auf der Homepage angezeigt werden. Alles funktioniert, bis auf diese blöde Zentrierung. Ich hoffe mir kann jemand helfen. Die Bilder sollen aber bitte nebeneinander stehen bleiben.

HTML

<div id="Bilder">    
<a href="#"><img src="images/Beispiel%201.jpg"></a>    
<a href="#"><img src="images/Beispiel2.jpg"></a>    
<a href="#"><img src="images/Beispiel3.jpg"></a>    
<a href="#"><img src="images/Beispiel4.jpg"></a></div>

HTML

#Bilder img{    
border: 5px solid rgba(0, 0, 0, 0.12);    
border-radius: 4px;    
display: inline-block;    
margin-top: 10px;    
max-width: 70%;    
margin: auto;}

MFG

Gastl

Nichts im Netz gefunden? Okay, hier mal ein Suchergebnis:

http://www.w3.org/Style/Examples/007/center

Johnny6er

Dabei geht es um ein einzelnen Bild, ich habe aber vier Bilder nebeneinander.:?

EDIT: Hab es ausprobiert. Wenn ich "display: block" verwende, werden alle Bilder zentriert, aber untereinander angeordnet.
Ich möchte die Anordnung aber nebeneinander, deshalb benutze ich "display: inline-block". Bei dieser Anordnung funktioniert aber die Zentrierung irgendwie nicht.

MrMurphy

Hallo

Um dir konkret helfen zu können benötigen wir deinen gesamten HTML- und CSS-Code sowie die Bilder. Mit den bisherigen Angaben können wir dir nur allgemein helfen.

Um Bilder zu zentrieren werden die in einen Container gepackt der dann zentriert wird. Das könnte zum Beispiel so aussehen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Bilder zentrieren 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      img {
         max-width: 100%;
         border: 0.2rem solid rgba(0, 0, 0, 0.12);    
         border-radius: 0.1rem;    
      }


      article {
         width: 80%; /*Hier die Breite des Containers vorgeben*/
         margin: 1rem auto;
         display: flex;
      }


      div {  
         width: 23%;
         margin: 1rem 1%;
      }


   </style>
</head>
<body>
   <article>
      <div>
         <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Auto_Union_1000s-02.JPG" alt="DKW"></a>
      </div>
      <div>
         <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/7/7c/Desfile_de_Autos_Clasicos_y_Antiguos%2865%29.JPG" alt="LKW"></a>
      </div>
      <div>
         <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/e/e4/Desfile_de_Autos_Clasicos_y_Antiguos%2861%29.JPG" alt="Oldtimer"></a>
      </div>
      <div>
         <a href="#"><img src="https://c2.staticflickr.com/4/3091/2789464563_589862125f_z.jpg?zz=1" alt="Mustang"></a>
      </div>
   </article>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

Johnny6er

Hier bekommst du den ganzen Code 8):

HTML

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <title>Homepage Neu</title>
    <meta name="keywords" content="Lustig, Video, Test, use">
    <meta name="description" content="Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.">
    <link href="style.css" type="text/css" rel="stylesheet">
    </head>

<body>
    <div id="Header">
</div> 

    <div id="Navigation">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test2</a></li>    
    <li><a href="#">Test3</a></li>
    <li><a href="#">Test4</a></li>    
</div>

    <div id="Main">
    <a>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.         Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein          unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um       ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</a>
</div>

    <div id="Bilder">
    <a href="#"><img class="position" src="images/Beispiel%201.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel2.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel3.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel4.jpg"></a>
</div>




    <div id="Footer">
    <a>Hier könnte ein Urheberrechts-Hinweis stehen...</a>
</div>

Alles anzeigen

Code

#Header {    text-align:center;
    height: 423px;
    background-image: url(images/Test01.png);
    background-repeat: repeat-x;
}




#Navigation li {
    display: inline-block;
    padding-top: 200px;
    width: 150px;
    }




#Navigation {
    text-align: center;
    font-family: Calibri;
    font-size: 130%;
    letter-spacing: 4px;
    }
#Main {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-family: Calibri;
    font-size: 90%;
    letter-spacing: 1px;
    }
#Bilder img{    
    border: 5px solid rgba(0, 0, 0, 0.12);    
    border-radius: 4px;    
    display: inline-block;    
    margin-top: 10px;    
    }




img.position {
    margin-left: 100px;
    margin-right: auto;
    }   
#Footer {
    position: relative;
    bottom:0px; left:0px; right:0px;
    background-image: url(images/Test04.png);
    background-repeat: repeat-x;
    text-align:center;
    padding:0px;
    height:150px;
}

Alles anzeigen

Ich hoffe du kannst mir anhand des Codes vielleicht genauer helfen.

MrMurphy

Hallo,

wie schon geschrieben ist ohne die Bilder keine konkrete Hilfe möglich.

Außerdem wäre es schön wenn du schreiben würdest ob mein Beispiel deinen Vorstellungen entspricht oder was du anders haben möchtest.

Gruss

MrMurphy

Johnny6er

Ich hab deinen Code noch nicht ausprobiert, überlege gerade wie ich den bei mir einbaue.

Aber hab dir mal ein Foto gemacht:

"margin- left" und "margin-right" steht auf "Auto", dies zieht mir die Bilder enorm weit auseinander. Normalerweise sollen die Bilder ziemlich eng aneinander. Gibt es eigentlich eine Möglichkeit, beim verkleinern des Browserfensters das verschieben der Bilder zu verhindern?

djheke

Versuch's mal so. Sollte ausreichen.

Code

#Bilder {
 max-width:70%;
 margin:0 auto;
 overflow:hidden;
}


#Bilder img {
 float:left;
 width:24%;
 margin-right:1%;
}

Alles anzeigen

Johnny6er

Hab es immer noch nicht geschafft die Variante von MrMurphy zu testen, werden es denke ich mal heute Nacht mal testen.

Zitat von djheke
Versuch's mal so. Sollte ausreichen.
Code
#Bilder {
 max-width:70%;
 margin:0 auto;
 overflow:hidden;
}


#Bilder img {
 float:left;
 width:24%;
 margin-right:1%;
}
Alles anzeigen

Deinen Code habe ich aber mal kurz eingefügt, fast alles richtig, er zentriert die Bilder so wie ich das haben möchte. Nur das Problem, dass er mir das letzte Bild in die nächste Reihe setzt.

MrMurphy

Hallo

Zitat

Nur das Problem, dass er mir das letzte Bild in die nächste Reihe setzt.

Dann hast du einen zusätzlichen seitlichen Abstand bei den Bildern. Die Ursache ist aus deinen Quelltextschnipseln leider nicht ersichtlich.

Die üblichen Verdächtigen sind padding, border, margin, display: inline-block u.s.w.

Gruss

MrMurphy

Johnny6er

Zitat von MrMurphy

Hallo

Dann hast du einen zusätzlichen seitlichen Abstand bei den Bildern. Die Ursache ist aus deinen Quelltextschnipseln leider nicht ersichtlich.

Die üblichen Verdächtigen sind padding, border, margin, display: inline-block u.s.w.

Gruss

MrMurphy

Alles anzeigen

Ok danke, hab mir den Code noch mal genauer angeschaut, aber finde den Fehler irgendwie leider nicht.

CSS

Code

#Header {	text-align:center;
	height: 423px;
	background-image: url(images/test01.png);
	background-repeat: repeat-x;
}




#Navigation li {
    display: inline-block;
    padding-top: 200px;
    width: 140px;
    }




#Navigation {
    text-align: center;
    font-family: Calibri;
    font-size: 130%;
    letter-spacing: 4px;
    overflow: hidden;
    }
#Main {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-family: Calibri;
    font-size: 90%;
    letter-spacing: 1px;
    }
#Bilder {
    max-width:60%;
    margin: auto;
    overflow: hidden;
}




#Bilder img {
    border: 5px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    float: left;
    width:24%;
    margin-right:1%;
}




#Footer {
    position: relative;
	bottom:0px; left:0px; right:0px;
	background-image: url(images/test4.png);
    background-repeat: repeat-x;
    text-align:center;
	padding:0px;
	height:150px;
}

Alles anzeigen

HTML

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Homepage</title>
    <meta name="keywords" content="Groß, usw">
    <meta name="description" content="Beispieltext.">
    <link href="style.css" type="text/css" rel="stylesheet">
    </head>

<body>
	<div id="Header">
</div> 

    <div id="Navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Referenzen</a></li>    
    <li><a href="#">Service</a></li>
    <li><a href="#">Kontakt</a></li>    
</div>

    <div id="Main">
    <a>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum</a>
</div>

    <div id="Bilder">
    <a href="#"><img class="position" src="images/test.jpg"></a>
    <a href="#"><img class="position" src="images/test.jpg"></a>
    <a href="#"><img class="position" src="images/test.jpg"></a>
    <a href="#"><img class="position" src="images/test.jpg"></a>
</div>




	<div id="Footer">
	<a>Hier könnte ein Urheberrechts-Hinweis stehen...</a>
</div>

















    </body>
















































</html>

Alles anzeigen

MrMurphy

Hallo,

viel Mühe scheinst du dir bei der Suche ja nicht gegeben zu haben. Du musstest ja nur nacheinander alle von mir genannten Attribute auf Null setzen.

Das Problem ist die folgende Angabe

Code

#Bilder img {
   border: 5px solid rgba(0, 0, 0, 0.12);
...}

Dieses border muss weg.

Ansonsten müsstest du die Breite der border von der Bildbreite und dem rechten margin abziehen, was bei verschiedenen Einheiten schwierig wird (px und %).

Oder du beschäftigst dich mit dem CSS-Attribut "box-sizing". Das halte ich für das sinnvollste.

Gruss

MrMurphy

Bilder Block zentrieren

Tags

Benutzer online in diesem Thema