Wie kriege ich Text über ein Bild ?

Computer: Software & Programmierung HTML & CSS
1

Hallo,

seit Stunden versuche ich dieses Problem zu lösen, aber es gelingt mir nicht.

Ich benutzte NVU als HTM Editor.

Ich versuche mal das Problem zu beschreiben.

Ein Bild als jpg soll als Logo dienen. Es hat die Grösse von ca. 900 x 300 pixel. Es soll also oben mittig in der Homepage erscheinen.

Nun soll aber auf manche Bereiche, also AUF dem Bild, Text und ggf. andere Objekte plaziert werden. Ich denke mal, das man das mit einer Tabelle macht. Also so möchte ich das eigentlich machen.

Aber es klappt nicht.

Wenn ich das erwähnte Bild in eine Tabellenzelle packe, kann ich auf dem Bild keine weiteren Zellen und auch keine Tabellen plazieren. Die rutschen dann immer woanders hin. Und wenn ich das Bild als Hintergrundbild der Seite verwende, dann wird das Bild immer wiederholt, das will ich ja auch nicht.

Ich könnte mein Problem lösen, wenn es eine Option gibt (gibt es die?) die besagt, das ein Hintergrund Bild eben nicht widerholt werden soll, sondern nur 1 x gezeigt wird. Dann würde ich das mit den Tabellen hinkriegen.

Oder wie wird sowas gemacht ???

Kann mir mal einer einen HTM Quelltext posten, wo oben ein grosses Bild ist (das Bild brauche ich ja nicht, es reicht ja wenn ich den Link zum Bild sehe, dann kann ich den Link anpassen) und auf dem Bild ist z.B. im rechten Drittel eine Tabelle/Celle, wo man was anderes (z.B. Text, oder PHP Code) AUF diesem Bereich des Bildes platzieren könnte?

Hoffe das war einigermassen verständlich.

Danke
Grüße
Jürgen

2

Hi,

Hallo,

seit Stunden versuche ich dieses Problem zu lösen, aber es
gelingt mir nicht.

Ich benutzte NVU als HTM Editor.

Ich versuche mal das Problem zu beschreiben.

Ein Bild als jpg soll als Logo dienen. Es hat die Grösse von
ca. 900 x 300 pixel. Es soll also oben mittig in der Homepage
erscheinen.

Nun soll aber auf manche Bereiche, also AUF dem Bild, Text und
ggf. andere Objekte plaziert werden. Ich denke mal, das man
das mit einer Tabelle macht. Also so möchte ich das eigentlich
machen.
[…]
Kann mir mal einer einen HTM Quelltext posten, wo oben ein
grosses Bild ist (das Bild brauche ich ja nicht, es reicht ja
wenn ich den Link zum Bild sehe, dann kann ich den Link
anpassen) und auf dem Bild ist z.B. im rechten Drittel eine
Tabelle/Celle, wo man was anderes (z.B. Text, oder PHP Code)
AUF diesem Bereich des Bildes platzieren könnte?

Hoffe das war einigermassen verständlich.

Danke
Grüße
Jürgen

Du könntest das Bild als Hintergrund der Tabelle oder der Seite einbinden.
Bevorich Dir irgendeinen unpassenden HTML-Code poste, hier mal der passsende Verweis zum SELFHTML:

http://de.selfhtml.org/css/eigenschaften/hintergrund…

Da solltest du alles passende finden.

Gruß Yelmalio

3

Zusatz

Hi,

Hallo,

seit Stunden versuche ich dieses Problem zu lösen, aber es
gelingt mir nicht.

Ich benutzte NVU als HTM Editor.

Ich versuche mal das Problem zu beschreiben.

Ein Bild als jpg soll als Logo dienen. Es hat die Grösse von
ca. 900 x 300 pixel. Es soll also oben mittig in der Homepage
erscheinen.

Nun soll aber auf manche Bereiche, also AUF dem Bild, Text und
ggf. andere Objekte plaziert werden. Ich denke mal, das man
das mit einer Tabelle macht. Also so möchte ich das eigentlich
machen.
[…]
Kann mir mal einer einen HTM Quelltext posten, wo oben ein
grosses Bild ist (das Bild brauche ich ja nicht, es reicht ja
wenn ich den Link zum Bild sehe, dann kann ich den Link
anpassen) und auf dem Bild ist z.B. im rechten Drittel eine
Tabelle/Celle, wo man was anderes (z.B. Text, oder PHP Code)
AUF diesem Bereich des Bildes platzieren könnte?

Hoffe das war einigermassen verständlich.

Danke
Grüße
Jürgen

Eine andere Möglichkeit wäre, dass du die Grafik und den Text in Blöcke einbettest und die dann passend positionierst.

Dazu noch der passende Link in SELFHTML
http://de.selfhtml.org/css/eigenschaf…

und ein Codeschnipsel, der das machen dürfte, was du möchtest:

 Hallo Welt

Gruß Yelmalio

4

Du könntest das Bild als Hintergrund der Tabelle oder der
Seite einbinden.
Bevorich Dir irgendeinen unpassenden HTML-Code poste, hier mal
der passsende Verweis zum SELFHTML:

http://de.selfhtml.org/css/eigenschaften/hintergrund…

Da solltest du alles passende finden.

Gruß Yelmalio

Hi,

meiner Meinung nach kann dein Vorschlag nicht funktionieren, bzw. so habe ich es schon versucht. Wenn also eine Zelle ein Hintergrundbild hat, kriege ich es NICHT hin, das ich in der gleichen Zelle noch andere Dinge positionieren kann. Genau das möchte ich aber.

Ich weiss das es mit Tabellen geht. Es geht auch mit DIVs, aber ich möchte es mit Tabellen machen.

Die Link sehe ich mir an.

Danke.
Jürgen

5

Eine andere Möglichkeit wäre, dass du die Grafik und den Text
in Blöcke einbettest und die dann passend
positionierst.

Dazu noch der passende Link in SELFHTML
http://de.selfhtml.org/css/eigenschaf…

und ein Codeschnipsel, der das machen dürfte, was du möchtest:

Hallo Welt

Gruß Yelmalio

Hi,

hm…also ich muss gestehen, das mir da im Moment noch zu hoch ist…

Danke aber.

Jürgen

6

Nochmal hi,

meiner Meinung nach kann dein Vorschlag nicht funktionieren,
bzw. so habe ich es schon versucht. Wenn also eine Zelle ein
Hintergrundbild hat, kriege ich es NICHT hin, das ich in der
gleichen Zelle noch andere Dinge positionieren kann. Genau das
möchte ich aber.

Dies klappt bei mir ganz wunderbar.
Du musst nur zusehen, wie du die Positionierung mit den Tabellen hinbekommst.
Die Größe des Hintergrundbildes musst Du so natürlich vorher richtig anpassen.

Text
mehr Text
2Text
2mehr Text

Ich weiss das es mit Tabellen geht. Es geht auch mit DIVs,
aber ich möchte es mit Tabellen machen.

Die Link sehe ich mir an.

Danke.
Jürgen

Gruß Yelmalio

7

Hi Jürgen.Hier ne kleine erklärung zu den codeschnipsel:

Div {Das ist eine Art Container, in den sich andere Objekte befinden können und der beliebig platzierbar ist }

{diese angaben sagen folgendes aus:

position:absolute// der container befindet sich 100px von der oberen und 100 px von der linken Ecke entfernt.

width: 400// der container ist 400px breit

height:200px // Er ist 200px hoch

z-index:1 // Er befindet sich auf oberster Ebene; was im Klartext bedeutet; wenn meherere Ebenen/Container vorhanden sind, befindet sich der Container mit dem Z-Index 1 an Oberster Stelle und der mit dem Z-Index 2 demzufolge darunter.

In diesem Falle befindet sich in dem ersten Container ein Bild}

{Im zweiten Container befindet sich der Schriftzug „Hallo Welt“;
Dieser wird im Bezug auf den ersten Container an der 20 px von Oben und 20 px von links gesetzt. Dies ist nun eine korrektur meinerseits.
Wenn sich der Schriftzug ÜBER dem Bild befinden soll, dann benötigt der Schriftzug den Z-Index 1 und demnach der Erste Container den Z-Index 2.}

Hallo Welt

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

8

Hi,

Eine andere Möglichkeit wäre, dass du die Grafik und den Text
in Blöcke einbettest und die dann passend
positionierst.

Dazu noch der passende Link in SELFHTML
http://de.selfhtml.org/css/eigenschaf…

und ein Codeschnipsel, der das machen dürfte, was du möchtest:

Hallo Welt

Gruß Yelmalio

Hi,

hm…also ich muss gestehen, das mir da im Moment noch zu hoch
ist…

Ist gar nicht so schwer:

Du benutzt das als Container, um Blockinhalte zu positionieren (und ihnen andere Eigenschaften mit CSS zuzuweisen).
Tatsächlich könntest Du in dem Beispiel oben auch einfach den Text mit einschließen und dann dem Absatz und dem Bild direkt die CSS-Eigenschaften zuweisen.
Zu den Formaten:

  • position:absolute; Positionierung soll auf eine Absolute Position (relativ zum nächst übergeordneten positionierten Element) erfolgen.

  • top:100px; left: 100px; die Position selbst

  • width:400px; height:200px; die Ausmaße des Elements. Wird sonst passend bestimmt, ist aber nützlich, wenn man eine bestimmte Größe einhalten möchte/muss. Dann muss man aber noch mit der Eigenschaft overflow bestimmen, was mit überstehendem Inhalt passieren soll. (Hab ich vergessen :frowning: )

  • z-index:1; Die ‚Schicht‘ in der die Elemente übereinander angeordnet werden. Dabei verdeckt ein Element mit einem hohen z-index eines mit einem niedrigeren (hier also der Text das Bild).

Die Erklärungen sind nicht vollständig, aber dafür gibts ja die Erklärung auf Selfhtml.org (auch bei anderen, aber hier finde ich mich am schnellsten durch).

Danke aber.

Jürgen

Versuchs einfach mal.

Gruß Yelmalio

9

Eine andere Möglichkeit wäre, dass du die Grafik und den Text
in Blöcke einbettest und die dann passend
positionierst.

Dazu noch der passende Link in SELFHTML
http://de.selfhtml.org/css/eigenschaf…

und ein Codeschnipsel, der das machen dürfte, was du möchtest:

Hallo Welt

Gruß Yelmalio

Hi,

hm…also ich muss gestehen, das mir da im Moment noch zu hoch
ist…

Danke aber.

Jürgen

Hi Jürgen.Hier ne kleine erklärung zu den codeschnipsel:

Da war ich mit meiner Erklärung wohl definitiv zu langsam. Mache es halt nur nebenher, wenn grad mal Zeit bei der Arbeit ist…

Div {Das ist eine Art Container, in den sich andere Objekte
befinden können und der beliebig platzierbar ist }

{diese angaben sagen folgendes aus:

position:absolute// der container befindet sich 100px von der
oberen und 100 px von der linken Ecke entfernt.

width: 400// der container ist 400px breit

height:200px // Er ist 200px hoch

z-index:1 // Er befindet sich auf oberster Ebene; was im
Klartext bedeutet; wenn meherere Ebenen/Container vorhanden
sind, befindet sich der Container mit dem Z-Index 1 an
Oberster Stelle und der mit dem Z-Index 2 demzufolge darunter.

Da sagt mir meine Erfahrung (und die Dokumentation) etwas anderes.
http://de.selfhtml.org/css/eigenschaften/positionier…
Da heisst es:
Elemente mit höherem Wert überdecken Elemente mit niedrigerem.

Ich lasse mich gerne eines besseren belehren, aber zumindest entspricht dies auch dem Verhalten, in den von mir getesteten Browsern.

In diesem Falle befindet sich in dem ersten Container ein
Bild}

{Im zweiten Container befindet sich der Schriftzug „Hallo
Welt“;
Dieser wird im Bezug auf den ersten Container an der 20 px von
Oben und 20 px von links gesetzt. Dies ist nun eine korrektur
meinerseits.
Wenn sich der Schriftzug ÜBER dem Bild befinden soll, dann
benötigt der Schriftzug den Z-Index 1 und demnach der Erste
Container den Z-Index 2.}

Hallo Welt

siehe oben.

Gruß Yelmalio

10

Da ist mir doch noch was aufgefallen…

[…]

{Im zweiten Container befindet sich der Schriftzug „Hallo
Welt“;
Dieser wird im Bezug auf den ersten Container an der 20 px von
Oben und 20 px von links gesetzt. […]

Wenn der Text über das Bild soll, dann muss der Text natürlich auch entsprechend positioniert werden.
Der Text sollte dann entweder auf top:120px; left:120px stehen oder - was ich in diesem Fall für günstiger halten würde - man setzt den Text-Div einfach in den umgebenden Div-Container ein. Dann wird jener nämlich auf 20,20 in diesem platziert, was ja auch beabsichtigt war.

11

Hi,

erstmal Danke an alle für die Tipps.

Bin schon einiges weiter gekommen.

Neue Anfrage;

Wie kann ich obiges erweitern, dass die Grafik MITTIG auf die SEite erscheint. Hab alles pobiert. Das Program NVU kann das offenbar nicht. Komisch.

Oder gibt es keinen Parameter wie „align…“ oder ähnlich?

Danke
Jürgen

12

Hintergrund mittig
Hi,

hast du mit background-position: center; probiert?

Gruß
Maja

13

Hi Maja,

super, danke dir/Ihnen.

Klasse, ja funktioniert.

Hab div. Parameter probiert, nix hat geklappt. Komischerweise bietet NVU nirgendwo eine solche Funktion an. Oder ich habs übersehen. Aber ich hab viel gesucht im Programm.

Egal.

Ich hab mir deine/Ihre Seiten im Netz angesehen; find ich klasse, das Sie sich mit sowas auskennen!

Alles Gute Ihnen!

Grüße
Jürgen

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

14

Hallo Maja,

upss…sorry. Manchmal „sprühe“ ich vor Begeisterung :smile:

Hmm…also jetzt hab ich ein neues Problem. dieser Paramter ZENTRIERT das Bild, also auch vertikal. Es sollte aber nur horizontal oben mittig sein…

Was tun?

Danke.

Grüße
Jürgen

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

15

Hintergrund mittig => LÖSUNG

Hi,

hast du mit background-position: center; probiert?

Gruß
Maja

Hallo Maja,

jetzt hab ich es durch Zufall rausgefunden;

background-position: center top;

Danke.

Grüße
Jürgen

16

Hallo Jürgen,

das freut mich, dass du es selber raus gefunden hast.

Das „Ihnen“ wird hier eher NICHT verwendet :smile:

Viele Grüße
Maja