Sauberer Weg um Schrift im div mit Hintergrundbild zu platzieren

[snafu]

Hallo!

Ich habe im Rahmen einer Hausaufgabe eine Seite mit zwei Grafiken erstellt, die genau nebeneinander sind. Das ganze ist mittels div-Elementen umgesetzt.

Wie kann ich jetzt den Text, der über den Bildern liegt, positionieren? Bisher bekomme ich es nur mit line-height durch Ausprobieren einigermaßen vertikal zentriert. Diese Lösung (der Wert steht auf 1000%) finde ich aber nicht sehr sauber. Gibt es da bessere Möglichkeiten?

Zudem würde ich gerne den Abstand zum Bildrand um ein paar Prozent erhöhen. "padding" führt hier leider nicht zum Erfolg, da dies zwar einen Abstand erzeugt aber leider auch den gesamten div-Bereich entsprechend vergrößert.

Schaut euch das ganze am besten selber mal an: http://www.schalke-ost.de/uni/

[Timo]

Hi,

ich weiss gar nicht ob das nicht noch zu deinem unteren Thread gehört also ein Doppelposting darstellt. Ich finde nein, weils ja um vertikale Zentrierung geht und somit was anderes als Blockelemente nebeneinander, aber mal sehen.

Zuerst mal, nein deine Divs sind nicht nebeneinander, zumindest nicht in jedem Browser. "CSS Schrift Veritkal zentrieren" ist dein Zauberwort für Google.

Ich persönlich, jaja jetzt kommt wieder Gemecker ich weiss, würde es mit einer Tabelle machen.

<h1>Willkommen beim DSC Schalke-Ost</h1>  
<table align="center" border="1">  
<tr>  
<td width="296" height="375" align="center" background="http://www.schalke-ost.de/uni/fussball_angepasst.jpg">Fussball</td>  
  
<td width="296" height="375" align="center" background="http://www.schalke-ost.de/uni/tischtennis_angepasst.jpg">Tischtennis</td>  
</tr>  
</table>

Natürlich nur grober Ansatz, ein wenig verfeinert dann natürlich.

Timo

[snafu]

Hi,

ich weiss gar nicht ob das nicht noch zu deinem unteren Thread gehört also ein Doppelposting darstellt. Ich finde nein, weils ja um vertikale Zentrierung geht und somit was anderes als Blockelemente nebeneinander, aber mal sehen.

Es gehört zwar zur selben Hausarbeit, ist aber in meinen Augen dennoch ein anderes Thema. Und ich denke, es ist relativ irrelevant für die anderen Mitlesenden, wofür ich die Sachen letztlich brauche - daher die Trennung.

Zuerst mal, nein deine Divs sind nicht nebeneinander, zumindest nicht in jedem Browser. "CSS Schrift Veritkal zentrieren" ist dein Zauberwort für Google.

Die Divs müssten aber meiner Meinung nach schon nebeneinander sein, da sich die Pixelangaben ja auf keine Schriftgrößen sondern auf die Breite des Bildes beziehen. Und das sollte doch - wenn ich mich nicht irre - im Regelfall überall gleich angezeigt werden, oder? Ansonsten finde ich Pixelangaben ja eher böse und versuche, möglichst Prozentangaben zu nutzen.

Ich persönlich, jaja jetzt kommt wieder Gemecker ich weiss, würde es mit einer Tabelle machen.

Gemecker kommt insofern, dass wir leider keine Tabellen, sondern nur CSS nutzen sollen. Sorry. ;-)

Naja, ich habe jetzt verschiedene Dinge ausprobiert. Leider ohne Erfolg. Auch ein "display: table-cell; vertical-align: middle;" verändert den Text nicht. Ich überlege schon fast, ob mir den benötigten Abstand in Pixel selbst ausrechne. :-(

[Timo]

Hi,

Die Divs müssten aber meiner Meinung nach schon nebeneinander sein, da sich die Pixelangaben ja auf keine Schriftgrößen sondern auf die Breite des Bildes beziehen. Und das sollte doch - wenn ich mich nicht irre - im Regelfall überall gleich angezeigt werden, oder? Ansonsten finde ich Pixelangaben ja eher böse und versuche, möglichst Prozentangaben zu nutzen.

Ähm, Nein, Nein, Ja ich auch.

Nein zu : nebeinander sein
Nein zu : überall gleich angezeigt werden (verschiedene Browser oft verschiedene Ansichten

Ja ich auch zu: Prozent besser als Pixel wo immer das irgendwie Sinn macht.

Gemecker kommt insofern, dass wir leider keine Tabellen, sondern nur CSS nutzen sollen. Sorry. ;-)

Das ist was anderes, da such ich dir gleich mal eine Lösung raus weil mich das auch mal interessiert hatte komplett auf CSS umzusteigen un dich gerade für dein problem was gemacht hatte, mal sehen wo ichs finde, kommt nach.

Naja, ich habe jetzt verschiedene Dinge ausprobiert. Leider ohne Erfolg. Auch ein "display: table-cell; vertical-align: middle;" verändert den Text nicht. Ich überlege schon fast, ob mir den benötigten Abstand in Pixel selbst ausrechne. :-(

Das muss kein Scherz sein es gibt tatsächlich  Beispiele die solche Berechnungen via Javascript anstellen damit es mit der CSS auch passt, finde ich grauenhaft aber geht.

Bis gleich ich such dann mal
Timo

[Timo]

Hi,

da bin ich wieder mit einer quick&dirty Lösung.(aber nebeneinander)

Die Möglichkeiten sind vielfältig also sieh das bitte nur als Anregung an,
anpassen musst du es sowieso noch.

Ach ja und noch eine Frage, wie sollen die Besucher die Bilder denn anklicken, wie hast du das vor zu lösen?

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <link rel="stylesheet" type="text/css" href="design.css" />  
    <title>Willkommen beim DSC Schalke-Ost</title>  
  
<style type="text/css">  
*{margin:0;padding:0;}  
#auswahl{border:1px solid blue;text-align:center;width:592px;margin:auto;}  
  
.pic{width:296px;height:375px;float:left;line-height:375px;font-size:20px;font-weight:bold;}  
#fb {background-image:url(http://www.schalke-ost.de/uni/fussball_angepasst.jpg);}  
#tt{;background-image:url(http://www.schalke-ost.de/uni/tischtennis_angepasst.jpg);}  
 </style>  
  
  </head>  
  <body>  
    <h1>Willkommen beim DSC Schalke-Ost</h1>  
  
      <h5 id="auswahl_hinweis">Klicken Sie auf ein Bild Ihrer Wahl, um zur jeweiligen Abteilung zu gelangen</h5>  
  
      <div id="auswahl">  
  
  
      <p class="pic" id="fb">Fussball</p>  
      <p class="pic" id="tt">Tischtennis</p>  
  
      </div>  
    </p>  
  </body>  
</html>  
  

Gruss
Timo

[Timo]

Fast vergessen:
  <link rel="stylesheet" type="text/css" href="design.css" />

Das muss natürlich raus oder die CSS angepasst werden.

[snafu]

Hi,

da bin ich wieder mit einer quick&dirty Lösung.(aber nebeneinander)

Danke, ich habe deine Tipps jetzt weitesgehend übernommen, stehe jedoch etwas auf dem Schlauch an welcher Stelle du den Text horizontal mittig setzt. text-align:middle will nicht. :-(

[snafu]

Danke, ich habe deine Tipps jetzt weitesgehend übernommen, stehe jedoch etwas auf dem Schlauch an welcher Stelle du den Text horizontal mittig setzt. text-align:middle will nicht. :-(

Achso, die Sachen sind wieder hochgeladen.

Hoffe du bist noch wach. ;P

[Timo]

Danke, ich habe deine Tipps jetzt weitesgehend übernommen, stehe jedoch etwas auf dem Schlauch an welcher Stelle du den Text horizontal mittig setzt. text-align:middle will nicht. :-(

"text-align:middle" das gibts auch nicht, soweit ich weiss.
Aber text-align:center;

Warum willst du das nicht, dafür ist es doch da?

Achso, die Sachen sind wieder hochgeladen.

Und immer noch nicht nebeneinander.

Timo

[snafu]

Und immer noch nicht nebeneinander.

Was nutzt du denn für einen Browser? Bei mir waren die Bilder die ganze Zeit nebeneinander.

[snafu]

Hab's jetzt geschafft: http://www.schalke-ost.de/uni/

Besten Danke für die Hilfe. :)

[Timo]

Besten Danke für die Hilfe. :)

n.p.

und endlich nebeneinander;-)

Aber die Frage mit dem Anklicken der Bilder hast du noch nicht beantwortet.

Timo

[snafu]

Aber die Frage mit dem Anklicken der Bilder hast du noch nicht beantwortet.

Tja, das ist die Frage. Vielleicht hätte man mal von Anfang an Imagemaps nutzen sollen...

Obwohl ich sehe gerade in der Aufgabenstellung "bei Anklicken des Textes", also werde ich um meine zwei Wörter einfach Anker-Elemente setzen und den Text oben etwas anpassen.

[Timo]

Hi,

Mich würde ja mal die genaue Aufgabenstellung interessieren.

Eines noch, Fehler.

Warum das so ist weiss ich aber auch nicht. Verstehe ich so das dort kein Div sein kann, aber macht keinen Sinn.

Timo

[snafu]

Hi,

Mich würde ja mal die genaue Aufgabenstellung interessieren.

Eines noch, Fehler.

Da mach ich mir jetzt ehrlich gesagt keinen Kopf drum.

Die Aufgabenstellung: http://www.schalke-ost.de/uni/Hausaufgabe3.pdf

[Harlequin]

Yerf!

Warum das so ist weiss ich aber auch nicht. Verstehe ich so das dort kein Div sein kann, aber macht keinen Sinn.

Doch. In einem Absatz (<p>) darf kein Div sein.

Falls du in dem vom Validator ausgegebenen Quelltext den Absatz vermisst: das ist bereits eine bereinigte Version (die per Tidy erzeugt wird).

Gruß,

Harlequin

[Timo]

Hi,

Warum das so ist weiss ich aber auch nicht. Verstehe ich so das dort kein Div sein kann, aber macht keinen Sinn.

Doch. In einem Absatz (<p>) darf kein Div sein.

Falls du in dem vom Validator ausgegebenen Quelltext den Absatz vermisst: das ist bereits eine bereinigte Version (die per Tidy erzeugt wird).

ups, stimmt ja, danke für den Hinweis.

Timo

[suit]

Schaut euch das ganze am besten selber mal an: http://www.schalke-ost.de/uni/

der kollege macht mich mit seiner tabellenlösung nicht glücklich :D

sieh dir ggf das mal an
http://gut.lv/beispiel/verticalcenter.html

[Timo]

Hi,

der kollege macht mich mit seiner tabellenlösung nicht glücklich :D

Ja das höre ich öfter;-)

sieh dir ggf das mal an
http://gut.lv/beispiel/verticalcenter.html

und das ist jetzt besser als eine Tabelle? Sehr viel css rumgetrickse um nur ansatzweise die saubere tabledarstellung zu kopieren, welche durch display:table-cell; sogar wirklich eine Table immitieren soll?

Das kanns doch nicht wirklich sein.

Timo

[suit]

und das ist jetzt besser als eine Tabelle? Sehr viel css rumgetrickse um nur ansatzweise die saubere tabledarstellung zu kopieren, welche durch display:table-cell; sogar wirklich eine Table immitieren soll?

sie macht sich nur die darstellung der tabelle zu nutze, nicht aber die semantische eigenart

folgendes ersetzt auch noch lange kein em-element ;)
<strong style="font-weight: normal; font-style: italic;">foo</strong>

Das kanns doch nicht wirklich sein.

es ist nicht die schönste lösung (da der schmarrn für den ie6 dabei ist) aber eine brauchbarerere lösung als die tabelle

[snafu]

sieh dir ggf das mal an
http://gut.lv/beispiel/verticalcenter.html

Ja, alles schon mehrfach gesehen, aber irgendwie "wirkt" es nicht. Liegt es vielleicht an den Hintergrundbildern bzw den daran ausgerichteten festen Maßen der Divs? Ich kann da ehrlich gesagt nur mutmaßen, da ich auf dem Gebiet noch relativer Anfänger bin.

Ich habe jetzt mal den aktuellen Stand hochgeladen. Links die "automatische" Version mit table-cell und so, rechts die unschöne 1000%-Lösung via line-height. Wird übrigens von Opera ganz ähnlich wie von Firefox dargestellt. Ganz so unschön scheint es (zumindest was die Darstellung in verschiedenen Browsern angeht) doch nicht zu sein. ;-)

Nochmal der Link: http://www.schalke-ost.de/uni/