Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Bilder Block zentrieren

  1. #1
    Youngster
    Registriert seit
    16.04.2015
    Beiträge
    14
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard Bilder Block zentrieren

    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-Code:
    <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-Code:
    #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
    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
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.152
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Bilder Block zentrieren

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

    http://www.w3.org/Style/Examples/007/center
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  3. #3
    Youngster
    Themenstarter

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

    Standard AW: Bilder Block zentrieren

    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.
    Geändert von Johnny6er (17.06.2015 um 16:10 Uhr)

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Bilder Block zentrieren

    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:

    Code:
    <!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>
    Gruss

    MrMurphy

  5. #5
    Youngster
    Themenstarter

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

    Standard AW: Bilder Block zentrieren

    Hier bekommst du den ganzen Code :

    Code:
    <!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>
    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;
    }
    Ich hoffe du kannst mir anhand des Codes vielleicht genauer helfen.

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Bilder Block zentrieren

    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

  7. #7
    Youngster
    Themenstarter

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

    Standard AW: Bilder Block zentrieren

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

    Aber hab dir mal ein Foto gemacht:

    Unbenannt-2.jpg

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

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

    Standard AW: Bilder Block zentrieren

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

  9. Folgende User finden die Antwort von djheke gut:


  10. #9
    Youngster
    Themenstarter

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

    Standard AW: Bilder Block zentrieren

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


    Zitat Zitat von djheke Beitrag anzeigen
    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%;
    }
    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.

    Unbenannt-1.jpg

  11. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Bilder Block zentrieren

    Hallo

    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

Ähnliche Themen

  1. display: block;
    Von bma im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.05.2007, 03:41
  2. Bilder im Zielframe zentrieren + weiterklicken
    Von Kremse im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 23.05.2007, 15:28
  3. dynamisch geladene bilder auf der bühne zentrieren
    Von magguz im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 17.11.2006, 08:46
  4. css: display block
    Von phore im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 07.09.2005, 10:48
  5. div-Block
    Von ALex16 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.04.2005, 07:42

Stichworte

Berechtigungen

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