Text zentriert über einem Bild (vert+hor)

[ak-swiff]

Hi an alle,

da mein letzter Thread irgendwie unterging und keine wirkliche Lösung dabei herauskam, stell ich nun nochmal konkret das Problem und hoffe auf einen Lösungsweg.

(btw: wird ein Thread hier schon nach 2 Tagen geschlossen und weggepackt? Er landete gleich im Archiv und ich konnte nicht mehr weiter darauf antworten)

Also, nun zu der Hürde vor der ich stehe und die ich trotz Recherchen nicht lösen konnte:

Ich habe ein Div das vollständig von einem Bild ausgefüllt sein soll (no-repeat).
Das div ist 'resizable', d.h. das Bild muss width und height 100% haben, da es immer exakt das ganze div ausfüllen soll (über background-image klappts also nicht).
Auf/über dem Bild möchte ich Text schreiben.
Zwei Worte, untereinander, horizontal und vertical im Bild zentriert.
Immer zentriert, also auch bei einem 'resize'.
Wie der Text hineinkommt ist egal. Also ob in einem zusätzlichen <div>, <p> oder sonstiges. Hauptsache man kann ihn zentrieren.
(vertical-align z.B. funktioniert nicht immer)

Ich hab schon lange mit sämtlichem standard align=center, text-align, position ect. rumprobiert, aber immer passt irgend eine Eigenschaft mit der anderen nicht zusammen und ich komme nicht auf das gewünschte Ergebnis.

Ich wäre sehr dankbar wenn da jemand ne Lösung parat. Is ja eigentlich kein Hexenwerk das ganze und müsste doch irgendwie machbar sein.

Gruß,
ak-swiff

[frankx]

Hellihello ak-swiff,

(btw: wird ein Thread hier schon nach 2 Tagen geschlossen und weggepackt? Er landete gleich im Archiv und ich konnte nicht mehr weiter darauf antworten)

In der Regel hast du drei Tage. Kannst ja dann nochmal auf deinen eigenen Thread aufsetzen, u.U. mit genauerern infos und Themenwexel. Das verlängert die Lebensdauer dann wieder.

Ich habe ein Div das vollständig von einem Bild ausgefüllt sein soll (no-repeat).

Das wäre ein background, sonst nix no-repeat.

Das div ist 'resizable', d.h. das Bild muss width und height 100% haben, da es immer exakt das ganze div ausfüllen soll (über background-image klappts also nicht).

Aha. wie ist denn ein div resizable?

Auf/über dem Bild möchte ich Text schreiben.
Zwei Worte, untereinander, horizontal und vertical im Bild zentriert.

Wie schaffst Du denn das?

Immer zentriert, also auch bei einem 'resize'.
Wie der Text hineinkommt ist egal. Also ob in einem zusätzlichen <div>, <p> oder sonstiges. Hauptsache man kann ihn zentrieren.
(vertical-align z.B. funktioniert nicht immer)

Ich hab schon lange mit sämtlichem standard align=center, text-align, position ect. rumprobiert, aber immer passt irgend eine Eigenschaft mit der anderen nicht zusammen und ich komme nicht auf das gewünschte Ergebnis.

Ich wäre sehr dankbar wenn da jemand ne Lösung parat. Is ja eigentlich kein Hexenwerk das ganze und müsste doch irgendwie machbar sein.

Mein Vorschlag: extrahiere den wesentlichen Code und poste ihn. U.u. musst Du die line-height anpassen? mach dir auch mal rahmen um die fraglichen Elemente, dann siehste mehr.

Dank und Gruß,

frankx

[ak-swiff]

Hi frankx,

Ich habe ein Div das vollständig von einem Bild ausgefüllt sein soll (no-repeat).

Das wäre ein background, sonst nix no-repeat.

Ja, ich hatte u.a. auch versucht das Bild als background einzufügen, weil dann das mit dem Text darüber einfacher/wunderbar klappt.
Das background-image soll dann no-repeat sein, allerdings konnte ich dann nicht die width/height des Bildes in 100% angeben ('background-width' gibt es noch nicht), was also keine Lösung war.

Aha. wie ist denn ein div resizable?

Ich benutze die Prototype/Scriptaculous Bibliothek, damit kann man einfach resizable Elemente erstellen (es ist btw auch drag'n'droppable).

Auf/über dem Bild möchte ich Text schreiben.
Zwei Worte, untereinander, horizontal und vertical im Bild zentriert.

Wie schaffst Du denn das?

Schaff ich ja eben nicht. Aber es gibt ja diverse Möglichkeiten Text auf ein Bild zu bekommen (und auch unzählige Threads dazu, hab schon viel recherchiert...).

Mein Vorschlag: extrahiere den wesentlichen Code und poste ihn. U.u. musst Du die line-height anpassen? mach dir auch mal rahmen um die fraglichen Elemente, dann siehste mehr.

Die Rahmen lass ich mir längst anzeigen um da ein bisschen besser den Überblick zu haben, was welche Aktion bewirkt.

Also ich hab im Groben so eine Struktur:

<div>
  <img src="..." style="position:absolute; width:100%; height:100%">
  <div style="???">Wort 1 (zentrier mich) <br> Wort 2 (zentrier mich)</div>
</div>

Egal ob ich nun mit text-align, align=center, top50%, left50% oder so rumprobiere, es kommt nie das richtige dabei heraus.
Mal erscheint der Text erst nach dem Bild, mal gar nicht oder irgendwie verschoben halt.

[frankx]

Hellihello ak-swiff,

Also ich hab im Groben so eine Struktur:

<div>
  <img src="..." style="position:absolute; width:100%; height:100%">
  <div style="???">Wort 1 (zentrier mich) <br> Wort 2 (zentrier mich)</div>
</div>

Egal ob ich nun mit text-align, align=center, top50%, left50% oder so rumprobiere, es kommt nie das richtige dabei heraus.
Mal erscheint der Text erst nach dem Bild, mal gar nicht oder irgendwie verschoben halt.

Probier doch erstmal ohne Bild. Du musst evtl. den Text noch in ein Div wrappen. In jedem Fall ginge es mit einer Tabelle und einer Zelle, so groß wie das Div. U.u. wie gesagt, kannst Du auch mit line-height (an die Div-Größe anpassen) was machen. Gehen tuts natürlich auch ohne Tabelle.

Dank und Gruß,

frankx

[ak-swiff]

Probier doch erstmal ohne Bild. Du musst evtl. den Text noch in ein Div wrappen. In jedem Fall ginge es mit einer Tabelle und einer Zelle, so groß wie das Div. U.u. wie gesagt, kannst Du auch mit line-height (an die Div-Größe anpassen) was machen. Gehen tuts natürlich auch ohne Tabelle.

Hab's jetzt hinbekommen!
Mit 'margin:20%' für das innere div (nur 'fast' zentriert, aber ein zusätzliches 'margin-top:25%' gleicht das aus).
Dann noch top:0 und left:0 für das Bild, damit beides übereinander liegt und nicht angereiht wird.

Danke für die Hilfe!

[starwarskid]

Hi,

probier mal ein div in dein div mit dem bild zu legen mit ungefähr den CSS angaben die ich unten gemacht habe:

<div style="deinSytle">
  <div style="position: relative; top: 50%; left 50%;">text</div>
  <img  style="deinSytle"/>
</div>

Ich denke das klappt :) sonst poste mal deinen code dann bau ich dir das ein. aber erstmal selber probiern ;)

[ak-swiff]

Hi starwarskid,

probier mal ein div in dein div mit dem bild zu legen mit ungefähr den CSS angaben die ich unten gemacht habe:

<div style="deinSytle">
  <div style="position: relative; top: 50%; left 50%;">text</div>
  <img  style="deinSytle"/>
</div>

Ich denke das klappt :) sonst poste mal deinen code dann bau ich dir das ein. aber erstmal selber probiern ;)

Also das klappt nicht ganz. top,left 50% zentriert das div ja nicht wirklich (nicht ganz). Und es kommt so zu komischen Überlappungen mit dem img.

Hier mal mein Code. Ist ein wenig lang, da ich alles über den DOM mache:

// create the element-div
 var uc_div = document.createElement("div");
        uc_div.id = ucID;
        uc_div.className = "useCase";

var inner_div = document.createElement("div");
 inner_div.style.position = "relative";
  inner_div.style.border = "1px solid black";
  inner_div.style.top = "50%";
  inner_div.style.left = "50%";

var text = document.createTextNode("UseCase");
        var i = document.createElement("i");
        i.appendChild(text);
        inner_div.appendChild(i);

var br = document.createElement("br");
        inner_div.appendChild(br);

text = document.createTextNode("UseCase" + uc_count);
        var b = document.createElement("b");
        b.appendChild(text);
        inner_div.appendChild(b);

uc_div.appendChild(inner_div);

var uc_img = document.createElement("img");
 uc_img.name = "uc_img";
        uc_img.id = "uc_img";
 uc_img.src = "images/usecase.jpg";
 uc_img.style.position = "relative";
 uc_img.style.width = '100%';
        uc_img.style.height = '100%';
        uc_img.alt = "";
        uc_img.className = "uc_img";
 uc_div.appendChild(uc_img);

$('drawArea').appendChild(uc_div);

Hoffe du kannst damit was anfangen. Hab ich echt schon so ziemlich alles mit probiert was mir eingefallen is. Irgendwo hakt's aber am Ende immer...

[ak-swiff]

hab noch folgendes vergessen:

div.useCase {
 position: absolute;
 top: 90px;
 left: 30px;
         width: 109px;
         height: 81px;
         text-align: center;
}

Das 'text-align:center' funktioniert immerhin. Also der Text is horizontal zentriert.

[ak-swiff]

Hab's jetzt hinbekommen!
Mit 'margin:20%' für das innere div (nur 'fast' zentriert, aber ein zusätzliches 'margin-top:25%' gleicht das aus).
Dann noch top:0 und left:0 für das Bild, damit beides übereinander liegt und nicht angereiht wird.

Danke für die Hilfe!

[starwarskid]

Ja an die Lösung dachte ich auch, aber da hängt die zentriertheit von der größe des divs ab! :)

Guck dir nochmal kurz meine Lösung an, aber vielleicht ist deine ja für deine Zwecke besser geeignet! Meine fand ich sowieso nicht so gut :)

hau rein!

[starwarskid]

Hier ist die Lösung :)

<?xml version="1.0"?>
<!-- keep this ****** IE7 in quirks mode -->
<!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" style="height:100%; padding: 0; margin: 0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body style="height:100%; padding: 0; margin: 0;">
<div style="position: absolute; left: 10%; right: 10%; width: 300px; height: 300px; background-color: #99FFFF;">
  <table width="200" border="1" style="position: absolute; height: 100%; width: 100%;  z-index: 2;">
    <tr>
      <td style="height: 100px; width: 100px; text-align: center;"><p>Das hier ist eine L&ouml;sung,<br />aber eine unsch&ouml;ne!</p></td>
    </tr>
  </table>
  <img src="Bild.jpg" style="position: absolute; height: 100%; width: 100%; z-index: 1; background-color: #99CCFF;"/>
</div>
</body>
</html>

Setz anstatt Bild.jpg dein bild rein!
Bei mir klappt das (firefox)! :)

gruß
 starwarskid

[ak-swiff]

Danke trotzdem!

Auf Tabelle wollte ich wenn möglich verzichten.
Das mit margin passt schon.

[Detlef G.]

Hallo ak-swiff

(btw: wird ein Thread hier schon nach 2 Tagen geschlossen und weggepackt? Er landete gleich im Archiv und ich konnte nicht mehr weiter darauf antworten)

Die Archivfunktion hier interessiert sich nicht dafür, wie jung oder alt ein Thread ist. Sie verschiebt inaktive Threads ins Archiv.
Sobald die Forumshauptseite eine bestimmte Größe überschreitet verschwinden die Threads in denen am längsten nicht geantwortet wurde. So ist es möglich, dass sich eine regelmäßige Diskussion sehr lange im Forum hält (s. (HTML/XHTML) Frames vom 14.11.07), während Threads, in denen nicht (mehr) geantwortet wird, eventuell sehr schnell wieder verschwinden.

Zwei Worte, untereinander, horizontal und vertical im Bild zentriert.
…
Wie der Text hineinkommt ist egal. Also ob in einem zusätzlichen <div>, <p> oder sonstiges. Hauptsache man kann ihn zentrieren.

Hast du mal bei den „Häufig gestellten Fragen” nachgesehen?
Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren? (zweites Beispiel) dürfte dir helfen.
Beachte dabei auch, auf welches Element sich die Positionsangaben beziehen. („Erläuterung” unter position)

Auf Wiederlesen
Detlef