Anzeige

Bildergalerie + Text mit divs

Bildergalerie + Text mit divs | PSD-Tutorials.de

Erstellt von Doro999, 16.02.2009.

  1. Doro999

    Doro999 Nicht mehr ganz neu hier

    Dabei seit:
    30.10.2006
    Beiträge:
    145
    Geschlecht:
    weiblich
    Software:
    PS / DW
    Kameratyp:
    Canon EOS 400D
    Bildergalerie + Text mit divs
    Hallo!

    Ich versuche gerade eine Bildergalerie zu machen. Aber irgendwie wird diese nicht ganz zentriert dargestellt.
    Gerne hätte ich auch dass die breiteren Bilder vertikal zentriert sind. Hier mein Code. Ich hoffe mir kann jemand helfen.

    Code (Text):
    1.  
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>Unbenanntes Dokument</title>
    6. <link href="style.css" rel="stylesheet" type="text/css" />
    7. </head>
    8.  
    9. <body>
    10. <div id="wrap">
    11.   <div id="header"></div>
    12.   <div id="navi">
    13.   </div>
    14.  
    15. <div id="content">
    16.     <div id="galtxt">
    17.     <ul>   
    18.         <li><img src="../thumbs/01.jpg" width="73" height="110" class="border" />Bild01</li>
    19.         <li><img src="../thumbs/02.jpg" width="73" height="110" class="border" />Bild02</li>
    20.         <li><img src="../thumbs/03.jpg" width="73" height="110" class="border" />Bild03</li>   
    21.         <li><img src="../thumbs/04.jpg" width="110" height="73" class="border" />Bild04</li>       
    22.         <li><img src="../thumbs/05.jpg" width="73" height="110" class="border" />Bild05</li>   
    23.         <li><img src="../thumbs/06.jpg" width="73" height="110" class="border" />Bild06</li>   
    24.         <li><img src="../thumbs/07.jpg" width="73" height="110" class="border" />Bild07</li>   
    25.         <li><img src="../thumbs/08.jpg" width="110" height="73" class="border" />Bild08</li>   
    26.         <li><img src="../thumbs/09.jpg" width="73" height="110" class="border" />Bild09</li>   
    27.         <li><img src="../thumbs/10.jpg" width="73" height="110" class="border" />Bild10</li>   
    28.         <li><img src="../thumbs/11.jpg" width="73" height="110" class="border" />Bild11</li>   
    29.         <li><img src="../thumbs/12.jpg" width="73" height="110" class="border" />Bild12</li>   
    30.     </ul>  
    31.     </div>
    32.  
    33.  
    34.  </div>
    35. </div>
    36. </body>
    37. </html>
    38.  

    css:
    ---


    Code (Text):
    1.  
    2. *, html, body, div, p, ul, li, h1, h2, h3, hr, table, td, th, span, img, textarea {
    3.     margin: 0px;
    4.     padding: 0px;
    5. }
    6.  
    7. body {
    8.     color: #000000;
    9.     font-family: Verdana, Arial, Helvetica, sans-serif;
    10.     font-size: 80%;
    11. }
    12.    
    13. p {
    14.     line-height: 16px;
    15. }
    16.  
    17. #wrap {
    18.     margin: 0px auto;
    19.     width: 900px;
    20. }
    21.  
    22. #content{
    23.     width: 900px;
    24.     background: #FFFFCC;
    25.     float: left;
    26. }
    27.  
    28. .border {
    29.     padding:2px;
    30.     border: 1px solid #CCCCCC;
    31.     background: #963;
    32. }
    33.  
    34. #galtxt {
    35.     width: 760px;
    36.     text-align: center;
    37.     margin: 30px auto;
    38. }
    39.  
    40. #galtxt ul {
    41.     margin-right: auto;
    42.     margin-left: auto;
    43. }
    44.  
    45. #galtxt li {
    46.     list-style-type: none;
    47.     margin-bottom: 20px;
    48.     float: left;
    49.     vertical-align: middle;
    50. }
    51.  
    52. #galtxt img {
    53.     margin-bottom: 5px;
    54.     margin-right: 15px;
    55.     margin-left: 15px;
    56.     padding: 4px;
    57.     display: block;
    58. }
    59.  
    60.  
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Bildergalerie + Text mit divs
    AW: Bildergalerie + Text mit divs

    Wenn die Bilder immer die gleichen größen haben, dann mach doch für die breiten 'ne extra-klasse und gib ihnen dort margin-top:13px;
     
    #2      
  3. knispel

    knispel Mediendesigner

    Dabei seit:
    11.04.2007
    Beiträge:
    908
    Geschlecht:
    männlich
    Software:
    CS3
    Kameratyp:
    Nikon und Canon
    Bildergalerie + Text mit divs
    AW: Bildergalerie + Text mit divs

    Wie wäre es denn mit einem Container

    HTML:
    1. DIV.container {
    2.     height: wert;
    3.     display: table-cell;
    4.     vertical-align: middle }
    5. ...
    6.  
    für die vertikale Ausrichtung. Zwingend ist hier die Angabe in height!
     
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Bildergalerie + Text mit divs
    AW: Bildergalerie + Text mit divs

    die Lösung von cebito funktioniert wenigstens auch im IE<=6 - der kennt kein display:table-cell.
     
    #4      
  5. knispel

    knispel Mediendesigner

    Dabei seit:
    11.04.2007
    Beiträge:
    908
    Geschlecht:
    männlich
    Software:
    CS3
    Kameratyp:
    Nikon und Canon
    Bildergalerie + Text mit divs
    AW: Bildergalerie + Text mit divs

    ... natürlich könnte man auch auf eine Tabelle zurückgreifen ...
     
    #5      
  6. Doro999

    Doro999 Nicht mehr ganz neu hier

    Dabei seit:
    30.10.2006
    Beiträge:
    145
    Geschlecht:
    weiblich
    Software:
    PS / DW
    Kameratyp:
    Canon EOS 400D
    Bildergalerie + Text mit divs
    AW: Bildergalerie + Text mit divs

    Ich habe die erste Variante bereits eingebaut. Allerdings möchte ich noch dass die Galerie zentriert ist. Irgendwie sieht das komisch aus, was ich dort gemacht habe.
     
    #6      
  7. knispel

    knispel Mediendesigner

    Dabei seit:
    11.04.2007
    Beiträge:
    908
    Geschlecht:
    männlich
    Software:
    CS3
    Kameratyp:
    Nikon und Canon
    Bildergalerie + Text mit divs
    AW: Bildergalerie + Text mit divs

    die
    HTML:
    1. <li>
    kleben durch
    HTML:
    1. float= left;
    innerhalb von
    HTML:
    1. div id="content">
    an der linken Seite
     
    #7      
  8. Doro999

    Doro999 Nicht mehr ganz neu hier

    Dabei seit:
    30.10.2006
    Beiträge:
    145
    Geschlecht:
    weiblich
    Software:
    PS / DW
    Kameratyp:
    Canon EOS 400D
    Bildergalerie + Text mit divs
    AW: Bildergalerie + Text mit divs

    Wenn ich das float rausnehme dann haut gar nichts mehr hin. Ich habe die Abstände verändert und nun es schaut ganz gut aus. Vielen Dank an alle.
     
    #8      
x
×
×