✔ Anzeige von Div-Containern

N

Netzwerkidi

Hai zusammen,

vielleicht hat jemand einen Tipp, wie ich es erreichen kann, dass im folgenden File die div-Container mit class c2 immer in der definierten Größe (50x50px) angezeigt werden.
Wenn ich den DOCTYPE weglasse, klappt es zwar, aber den wollte ich eigentlich behalten.

Außerdem sollte das Image immerbezogen auf seinen div-Container vertikal und horizontal zentriert angezeigt werden. Das bekomme ich auch nicht hin.

Irgendwie nicht mein Tag heute. Gott sei Dank, in 8 Minuten isser zu Ende....


Merci + Grüße
Idi

HTML: 
<!DOCTYPE html PUBLIC "-//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">
    div.c1 {width:200px;border:1px solid red;background:green; position:relative}     
    div.c2 {width:50px;height:50px;border:1px solid green;background:blue;display:inline;}  
    div.c2 img {width:50px;} 
</style>  
<script type="text/javascript">
  </script>     
</head>  
<body>  
  <div class="c1">     
    <div class="c2"><img src="http://style.tutorials.de/v10/tutorials.png" />
    </div>     
    <div class="c2">
    </div>     
    <div class="c2">
    </div>     
    <div class="c2">
    </div>  
  </div>  
</body>
</html>
 
Laut Boxmodell sind die Boxen bei deinen Definition 51x51 Pixel groß. Siehe:
http://css-tricks.com/2841-the-css-box-model/

Hast also 2 Möglichkeiten: entweder machst Du c1 breiter oder c2 um 2 Pixel kleiner.

Horizontale und vertikale Zentrierung könntest Du in dem Fall erreichen, indem Du das Bild zu einem Inline-Element machst und es per line-height versuchst auszurichten.
 
Merci, threadi, aber ich sehe keinen Unterschied. Alles wie vorher auch.
Auch wenn ich c1 250px breit mache, werden sie nicht alle divs angezeigt und der erste civ auch nicht in 50px Höhe. div1 bleibt auch der einzige, der überhaupt angezeigt wird.
 

Anhänge

  • 2011-11-21_080213.png
    2011-11-21_080213.png
    1,6 KB · Aufrufe: 31
Hallo,
versuch es mal so.
Code: 
    div.c1 {width:208px;border:1px solid red;background:green; position:relative;overflow:hidden;}     
    div.c2 {width:50px;min-height:50px;border:1px solid green;background:blue;float:left;}  
    div.c2 img {width:100%;position:relative;top:25px;margin-top:-8px;}

margin-top ist der hälftige Wert von deiner Bildhöhe. Die solltest du kennen.

Beispiel
 
Zuletzt bearbeitet:
Hai djheke,

Dank für den Hinweis.

Ich denke, rein mit CSS geht das nicht, zumal, das hatte ich bisher nicht erwähnt, die Images unterschiedlich groß sind aber immer zentiert in der Box erscheinen sollen.

D. h. ich werde das hier
Code: 
div.c1 {width:208px; border:1px solid red; background:green; position:relative; overflow:hidden}     
div.c2 {width:50px; height:50px; border:1px solid green; background:blue; float:left}  
div.c2 img {width:100%;}

übernehmen und dann mit JS die Image einzeln vemessen und sie dann indiviudell pro Box bemaßen.

Grüße
Idi
 
Naja, wenn die Größen nicht bekannt sind, dann wirst du mit js auch Schwierigkeiten haben.
Sollten es Bilder von einer Kamera sein und vorzugsweise das gleiche Format haben (Querformat 4.3), dann kommst du natürlich mit CSS aus. Hier mal das Beispiel etwas modifiziert. Hier sind aber 2 Hochformate bei.

Das sollte so völlig ausreichen.
P.S. Die 70/% sind an die Bildformate (4:3 3MP) angepasst.
 
Zuletzt bearbeitet:
Hai djheke,
die Größen kann man ja auslesen.
Aber im Prinzip hat dein Beispiel schon das, was ich will.
Und ich frage mich nun, warum das bei mir nicht so geklappt hat bisher.
Muss ich noch mal nachdenken. Ich melde mich... ;)
Danke nochmal + Grüße
Idi
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück