✔ DIV-Rahmen mit Images zentrieren

  • Themenstarter Themenstarter Netzwerkidi
  • Beginndatum Beginndatum
N

Netzwerkidi

Hallo zusammen,

wäre toll, wenn mir jemand erklären könnte, wie ich die Bilder(rahmen) im folgenden Code IMMER zentriert auf die gesamte Breite ausgerichtet bekomme, egal wie die Bildschirm-/Browserbreite gerade ist.
Monentan ist es immer linksbündig wegen dem Float:left und rechts variabel.
Wenn ich ohne float:left und mit text-align:center arbeite, was mein erster Gedanke war, ist der Rahmen um die Bilder komischerweise immer weg....

Grüße + Dank im voraus!!
Idi

Code: 
<!DOCTYPE html PUBLIC %22-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
  <title>
  </title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv='Content-Language' content='de-DE' />

  <style type="text/css">       
    *{color:#333;}
    #main{width:100%;border:5px solid #0FF;}
    #imageGrid{padding-top:15px;text-align:center;}
    div.imgFrame{float:left;width:160px;background-color:#f2f2f2;border:1px solid lightgray;overflow:hidden;margin:15px;}
    div.imgFrame img{height:100px;}
    img.image{background-color:#ddd;border:1px outset #f6f6f6;margin:5px;padding:5px;}
  </style>
  
  </head>     
<body>     
  <div id="main">         
    <div id="content">       
      <div id="imageGrid"><b>Soll:</b> immer zentriert, auch wenn ich die Windowgröße verändere! <br><b>Ist:</b> linksbündig (wg. float) mir variablen rechten Rand.<br><b>Frage:</b> Wie geht das?
                          
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
        <div class='imgFrame'>
          <img class='image' src='http://style.tutorials.de/v10/loginbox/settings.png' />
        </div>
      </div>    
    </div>     
  </div>
  
  </body>
</html>
 
Hi chmee,

Du musst Dich ja dann schon auf eine Breite einigen, oder?
Zum Vergrößern anklicken....
Ungern, weil ich damit die Anzahl der Boxen in der Horizontale festlege, was ich eben gerade vermeiden wollte. Der Kunde Internetuser soll optimal bedient werden: immer maximale Anzahl Boxen, immer mittig.

Aber mir fällt mit Schrecken gerade auf, dass die Borders gar nicht bis unten gehen. Wie erreiche ich denn, dass die Borders bis unten unter die letzte Box gehen? Im IE macht er es bis auf den imageGrid-Div (=rot) komischerweise. Im FF mit keiner einzigen. Fängt der Tag ja gut an.

Code: 
    *{color:#333;}
    body{margin: 0;padding: 0; width:99.9%; height:99.9%;border:1px solid cyan;}     
    #main{width:99.9%;border:1px solid green;}
    #imageGrid{padding-top:15px;text-align:center;border:1px solid red;}
    #content{width: 1000px; border: 1px solid blue; margin: 30px auto;} 
    div.imgFrame{float:left;width:160px;background-color:#f2f2f2;border:1px solid lightgray;overflow:hidden;margin:15px;}
    div.imgFrame img{height:100px;}
    img.image{background-color:#ddd;border:1px outset #f6f6f6;margin:5px;padding:5px;}

Unabhängig davon, falls Du der Geiger bist, Respekt! Kannte ich noch nicht.

Grüße
Idi
 
Zuletzt bearbeitet von einem Moderator:
Geiger? Hä? :D Nein.. (Aber jsfiddle ist doch mehr als hilfreich, man sollte es mehr benutzen..)

Ich habs mal mit display:inline anstatt float versucht, da sieht man das Problem. Die Margins und überschüssiger freier Raum im Content-DIV führen zu Chaos.
http://jsfiddle.net/MGdR3/9/

(Hier noch eine Version ohne text-align:center http://jsfiddle.net/MGdR3/11/)

Ganz ehrlich, dass ist aber nur Gestochere von mir, weil ich mit dem Kopf woanders bin, sorry. Ich bin erstmal raus und hoffe, Jemand kann Dir bessere Tipps geben.

mfg chmee
 
Zuletzt bearbeitet:
Fiddler=Geiger? Ne?
Ich komme so auch nicht weiter.
Also werde ich Deinen Rat mal erst annehmen und mit fester Breite arbeiten.
Thx und noch einen schönen Tag hier bei uns in der führenden Bananenrepublik.
Grüße
Idi
 
@spicelab
Ja. Das Problem vermutete ich eher in der sich dynamisch verändernden Anzahl an Bildern in einer Zeile..

mfg chmee
 
http://jsfiddle.net/6HWAE/ :D

HTML: 
<div id="imageGrid" class="clearfix">
CSS: 
/* clearing floats*/
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
 
Zuletzt bearbeitet:
:D mit fixed width im center-Div.. :D
--Du musst Dich ja dann schon auf eine Breite einigen, oder?--
Ungern, weil ich damit die Anzahl der Boxen in der Horizontale festlege, was ich eben gerade vermeiden wollte. Der Kunde Internetuser soll optimal bedient werden: immer maximale Anzahl Boxen, immer mittig.
Zum Vergrößern anklicken....
Sobald wir ein prozentuales Verhältnis angeben, werden sie eben nicht mehr 100% zentriert werden können, das liegt in der Natur der Sache. (Überschüssige Breite, die für ein weiteres Image nicht ausreicht.. Deswegen versuchte ich es anstatt mit float eher mit display:inline, um die Divs im Div centern zu können)..

http://jsfiddle.net/6HWAE/7/

mfg chmee
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück