DIV-Rahmen mit Images zentrieren @ tutorials.de: Tutorials, Forum & Hilfe

Netzwerkidi · 19.08.11 23:57

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>

**chmee** · 20.08.11 01:41

Hier das fiddle dazu

- http://jsfiddle.net/MGdR3/

Du musst Dich ja dann schon auf eine Breite einigen, oder?
CSS horizontale Zentrierung?
http://www.ohne-css.gehts-gar.net/0001.php

Fiddle-Update - http://jsfiddle.net/MGdR3/4/

mfg chmee

Netzwerkidi · 20.08.11 06:35

Hi chmee,

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.

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

**chmee** · 20.08.11 09:54

Geiger? Hä?

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

Netzwerkidi · 20.08.11 11:14

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 · 21.08.11 06:41

Zitat von chmee

Du musst Dich ja dann schon auf eine Breite einigen, oder?
CSS horizontale Zentrierung?

CSS-Technisch geht's auch ohne spezifische Breite und Höhe

http://www.pmob.co.uk/temp/vertical-align11.htm

spicelab · 21.08.11 07:35

Zitat von Netzwerkidi

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.

Du hast das Floaten der inneren Boxen nicht "gecleart", um wieder den normalen Textfluß herzustellen.

Webmaster FAQ -> [CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?

**chmee** · 21.08.11 09:36

@spicelab
Ja. Das Problem vermutete ich eher in der sich dynamisch verändernden Anzahl an Bildern in einer Zeile..

mfg chmee

spicelab · 21.08.11 09:38

http://jsfiddle.net/6HWAE/

Code xhtml:

1	<div id="imageGrid" class="clearfix">

Code 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 */

**chmee** · 21.08.11 09:53

mit fixed width im center-Div..

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

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

spicelab · 21.08.11 10:28

Minimal-Lösungscode für das Zentrieren einer unbekannten Element-/Objektanzahl (<li>) pro Zeile innerhalb der verfügbaren, im vorliegenden Fall, variablen Viewport-Breite (<ul>):

Code xhtml:

<body>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <!-- ... -->    
    </ul>
</body>

Code css:

ul 
{
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
    border:#0ff solid 5px
}
 
ul li
{
    display:inline-block;
    width:160px;
    height:100px;
    margin:15px;
    border:lightgray solid 1px;
    background:#f2f2f2
}

**chmee** · 21.08.11 10:54

Ich bin inzwischen auf JS umgestiegen, lese die maximale Breite aus, erstelle/berechne mit Math.Floor den Platz passend für x ImageGrids - ohne überschüssigen Freiraum rechts. Beispiel unten müsste noch in ein onChange-Event eingebunden werden)

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

mfg chmee

spicelab · 21.08.11 11:06

Zitat von chmee

Ich bin inzwischen auf JS umgestiegen

Klar, geht auch - gefragt wurde hier bislang aber nach einer CSS-Lösung

spicelab · 21.08.11 11:17

http://jsfiddle.net/N3Zvz/

**chmee** · 21.08.11 11:20

spicelab, ich weiß ich weiß.. Und ja, ul/li ist eine absolut gangbare Lösung. mfg chmee

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Images

Hässliger Rahmen um Images

Rahmen für Jpgs erstellen (Rahmen an Bild anpassen)

hdr-images?

Stichworte

E-Mail:

Abonnieren Abbestellen