IMG innerhalb eines div vertical centern

[kills]

Hallo zusammen,

ich bekomme dieses Image einfach nicht vertikal innerhalb eines div`s zentriert

html:

<div class="foldercontent">

       					  	 <img src="Images/Icons/icon_folder.gif" alt="Buttons" width="37" height="36" style="border:1px solid black;"/>

       					  </div>

css:

.foldercontent {

  height: 80px;

  width: 80px;


  text-align: center;

  vertical-align:middle;


  border-width: 1px;

  border-style: solid;

  border-color: #C0C0C0;


  padding: 5px;

}

[forTeesSake]

hi kills,

hab einige websites zum thema besucht und die essenz des ganzen its, das da wohl was faul ist und es nicht geht...

hier mal eine zum thema:

http://www.dreamworker.de/foren/viewtopic.php?TopicID=14975

[Spike]

Hi,

wenn es in dein Konzept passt, bau dein Image als Hintergrund des DIVs ein, dann gehts.

.foldercontent {

  height: 80px;

  width: 80px;


  background-image:url(image.gif);

  background-repeat:no-repeat;

  background-position:50% 50%;


  border-width: 1px;

  border-style: solid;

  border-color: #C0C0C0;


  padding: 5px;

}

[kills]

ich habs nun hinbekommen, aber wieder ein neues prob:

HTML

        <table style="height: 100%; width: 100%;" cellspacing="0" cellpadding="0">

          <tr>

            <td style="vertical-align: middle; text-align: center;">

              <a href="index.php?path=Images/Test/Ordner 2">		  

                <img src="Images/Icons/icon_folder.gif" alt="Ordner 2" style="width:37px; height:36px"/>

              </a>

           </td>

         </tr>

       </table>

CSS:

.foldercontent {

  height: 80px;

  width: 80px;


  border: 1px solid #C0C0C0;


  padding: 5px;

}

ich möchte nun im rechten oberen eck der Tabelle eine Checkbox unterbringen. also ungefähr so:

-------------------

|                X |

|                  |

|       IMG        |

|                  |

|                  |

-------------------

Also Image immernoch zentriert im Table,

und eine checkbox dann oben rechts.

[etreu]

Wie wäre es mit einer weiteren Zeile in deiner Tabelle? Dieser gibts du dann eine feste Grösse. Damit rückt zwar dein Ordner etwas nach unten, aber das sollte doch soweit nicht stören, oder?

[kills]

Wie wäre es mit einer weiteren Zeile in deiner Tabelle? Dieser gibts du dann eine feste Grösse. Damit rückt zwar dein Ordner etwas nach unten, aber das sollte doch soweit nicht stören, oder?

das habe ich mir auch schon überlegt, aber dann ist das image nicht mehr zentriert im rahmen.

sieht unschön aus, aber wenn es keine andere Lösung gibt, werd ich das wohl so machen....

da das IMG nun auch die Tabelle zu 100% füllen kann, hätte ich gerne gehabt, das die checkbox per z-index über dem image liegt.

ich weiss nun aber nicht, wie ich position der checkbox da schön oben rechts hinbekomme

[etreu]

Vielleicht etwas spät, aber wäre es möglich, nur mit absolut positionierten Ebenen zu arbeiten? Damit sollte eigentlich alles soweit gehen.

[kills]

Vielleicht etwas spät, aber wäre es möglich, nur mit absolut positionierten Ebenen zu arbeiten? Damit sollte eigentlich alles soweit gehen.

zu spät gibts nicht

daran habe ich mich schon versucht, konnte aber nicht das resultat erreichen, welches ich mir vorgenommen hatte.

Könntest du mir nen Gedankenanstoß geben?

[etreu]

Die Tabelle füllt deine komplette Seite aus?

Wenn ja, dann pack doch die Checkbox in eine separate Ebene.

[kills]

und wie positioniere ich die ebene genau über der tabelle, damit sie direkt mit ihr deckungsgleich ist?

Info:

Ich habe von diesen Tabellen N-oft auf meiner Page, deshalb sollte eine aufwendige JS Lösung vermieden werden..

[Spike]

Warum versuchst du nicht meinen Vorschlag?

Dann kannst du eine Tabelle reinlegen und deine Checkbox positionieren, ohne das das Image sich verschiebt ...

[etreu]

Habe ich dich jetzt richtig verstanden? Du hast diese Tabelle mehr als 1 mal pro Seite?

Wie wichtig ist die richtige Darstellung mit Netscape 4.x?

[kills]

Warum versuchst du nicht meinen Vorschlag?

Dann kannst du eine Tabelle reinlegen und deine Checkbox positionieren, ohne das das Image sich verschiebt ...

weil ich da nicht die größe des Hintergrundbildes angeben kann.

Soll halt ne vorschau des richtigen bildes darstellen und da sollte dann das komplette bild (notfalls skaliert) angezeigt werden

Habe ich dich jetzt richtig verstanden? Du hast diese Tabelle mehr als 1 mal pro Seite?

Wie wichtig ist die richtige Darstellung mit Netscape 4.x?

egalo

[Spike]

Und schonmal über Thumbnailgenerierung nachgedacht? Hat doch eine viel bessere Performance als wenn du immer das große Image lädst.

[kills]

Und schonmal über Thumbnailgenerierung nachgedacht? Hat doch eine viel bessere Performance als wenn du immer das große Image lädst.

ja hab ich schon, aber mir war der aufwandt eigentlich ein bissl groß.....

[etreu]

Ich habe das ganze jetzt nochmal und nochmal durchprobiert. Es funktioniert nicht so ganz, wie ich mir das vorgestellt habe.

Aber trotzdem:

<div style="top: 0px; right:0px; float:right; width:10px;">x</div>

Diese Zeile vor der Tabelle einfügen. Hat allerdings im Endeffekt die gleiche Wirkung, wie eine eigene Tabellenzeile. Wenn man die Tabelle durch eine Ebene ersetzt, dann wird ist das "x" auf der richtigen Höhe, aber dann würde die Sache von vorne losgehen. Sobald eine Tabelle ins Spiel kommt, wird dieser in einer neuen Zeile dargestellt, wenn sie breiter ist, als der zur Verfügung stehende Platz.

Übringens mit den GD-Funktionen kannst du mit ca. 15 Zeilen ein Thumbnail generieren und ausgeben lassen.

[kills]

das mit den thumbnails habe ich ja alles schon ma gemacht, ich lass mirs nochma durch kopf gehen!

Bis hier hin, danke für eure hilfe!!

[kills]

Also danke nochmal für die Idee.

Ich habs jetzt mit Background-Image (thumbnail) innerhalb eines Divs gemacht und die Checkbox als value ins DIV.

Hat bestens funktioniert!!