Anzeige von Div-Containern @ tutorials.de: Tutorials, Forum & Hilfe

Netzwerkidi · 20.11.11 23:55

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

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

threadi · 21.11.11 00:48

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.

Netzwerkidi · 21.11.11 08:04

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.

djheke · 21.11.11 12:48

Hallo,
versuch es mal so.

Code :

1
2
3

    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

Netzwerkidi · 21.11.11 14:07

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 :

1
2
3

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

djheke · 21.11.11 17:15

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.

Netzwerkidi · 21.11.11 18:11

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

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

Anordnung von div-Containern

Groesse von Containern aendern.

Frage zu scrollbaren DIV-Containern

Würfel aus Containern

[MX] variable Framerate in Containern ?

E-Mail:

Abonnieren Abbestellen