Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   HTML - Grafiken beschriften (https://www.delphipraxis.net/122643-html-grafiken-beschriften.html)

Thomas F 19. Okt 2008 21:28


HTML - Grafiken beschriften
 
Hallo,

kann man eine HTML-Grafik beschriften oder einen Text drüber legen,
ich hab es mit einem HTML-Label und HTML-Textfeld probiert,
aber es geht , glaube ich nicht, oder ?

Vermutlich muß man die Schrift zusammen mit der Grafik erstellen.

Torpedo 19. Okt 2008 21:36

Re: HTML - Grafiken beschriften
 
Du könntest die Grafik als Hintergrund einer Tabelle, Div oder so nehmen und dann normal Text darauf schreiben, den du auch genau platzieren kannst. Geht aber wahrscheinlich noch einfacher oder besser.

Cyberbob 19. Okt 2008 21:47

Re: HTML - Grafiken beschriften
 
ein html-label (<span> oder <div>) kannst du verwenden. du musst dann halt die top und left-eigenschaften des labels so bearbeiten, dass das element vor dem bild steht. achso, und auf der z-ebene musst du das label dann auch vor das bild setzen

bigg 19. Okt 2008 21:51

Re: HTML - Grafiken beschriften
 
Container kann man mit Hilfe von CSS frei positionieren. Die erste Lösung sollte jedoch die Kompatibelste sein.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Seitentitel</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
  <body>

      <div style="background:#FFFF00; position:relative; left:300px; top:500px;">
      Dieser Text liegt über der Grafik.</div>
      [img]test_grafik.png[/img]

  </body>
</html>

omata 19. Okt 2008 22:39

Re: HTML - Grafiken beschriften
 
Warum nicht so...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Seitentitel</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
  <body>

      <div style="width:250px; text-align:center;">
       Dieser Text liegt über der Grafik.


       


       [img]test_grafik.png[/img]
      </div>

  </body>
</html>

Thomas F 20. Okt 2008 07:01

Re: HTML - Grafiken beschriften
 
Ich habs probiert, funktioniert einwandfrei !
Danke

Ich hab noch ne Frage
Wie stellt man es an, dass man so abgerundete Textboxen bekommt.
Eckige sind kein Problem, aber abgerundete , finde ich nicht,
oder nimmt man da ein Image ? ?
Hier auf der rechten Seite seht ihr ein Beispiel ---> http://www.investox.de/

Grolle 20. Okt 2008 07:29

Re: HTML - Grafiken beschriften
 
Hi,

ja, dafür nimmt man Images. Installier dir mal Firebug (Firefox) oder die
IE Developer Toolbar (IE). Damit kannst du solche Sachen ganz schnell heraus-
finden.

Viele Grüße ....

jfheins 20. Okt 2008 08:13

Re: HTML - Grafiken beschriften
 
Es geht auch mur mit CSS ( http://www.css4you.de/trickkiste/tr00012.html )

Aber das ist CSS 3 und das unterstützen die meisten Browser noch nicht ordentlich (= nur der FF, Safari und Konqueror)

Thomas F 20. Okt 2008 09:29

Re: HTML - Grafiken beschriften
 
Zitat:

Zitat von jfheins
Es geht auch mur mit CSS ( http://www.css4you.de/trickkiste/tr00012.html )

Aber das ist CSS 3 und das unterstützen die meisten Browser noch nicht ordentlich (= nur der FF, Safari und Konqueror)

Funktioniert bei mir nicht, sind trotzdem eckig. :cry:

Bleibt nur ein Image, oder ?

jfheins 20. Okt 2008 09:47

Re: HTML - Grafiken beschriften
 
Wie gesagt, die Ecken ( http://www.css4you.de/trickkiste/ex0007.html ) sind nur im FF rund und auf anderen Browsern ;)

Ja, Image ist die sauberste Lösung. Ich wollte nur zeigen, dass es auch ohne Image geht, nur leider noch nicht flächendeckend. Wenn du natürlich damit leben kannst, das alle Nicht-FF-Nutzer (= IE & Opera) den Kasten eckig sehen, ist die Lösung annehmbar ;)

Thomas F 20. Okt 2008 16:03

Re: HTML - Grafiken beschriften
 
HTML bleibt für mich trotz allem sehr rätselhaft.

Man verschiebt eine Zeile, oder ein Bild,oder fügt einen Text ein,
und plötzlich verschwinden ganze Zeilen und Bilder :shock: :shock:

Fügt man in einer Tabelle mehrere Zeilen hinzu,
dann verschwindet plötzlich die ganze Tabelle :shock:

Noch eine Frage , wie kann man den Zeilenumbruch im Editor einschalten ?

Jakob Ullmann 20. Okt 2008 17:16

Re: HTML - Grafiken beschriften
 
Wenn man sich mal die Zeit nehmen würde, und sich ein HTM-Tutorial ansehen würde, oder ein Buch kaufen, würden auch nicht ganze Tabellen verschwinden. :zwinker: Ich kann mir denken, was du gemacht hast. Eine Tabelle, und einfach Text vor den </table> geschrieben? Hätte man das ganze in <tr><td>...</td></tr> gesetzt, wäre das nicht passiert.

OG Karotte 20. Okt 2008 18:11

Re: HTML - Grafiken beschriften
 
Solltest Du noch Info's bezüglich der Umsetzung für runde Ecken (über CSS und Images) brauchen:

ALA

(z.B. gleich die ersten beiden Artikel)

Thomas F 21. Okt 2008 18:34

Re: HTML - Grafiken beschriften
 
Zitat:

Zitat von OG Karotte
Solltest Du noch Info's bezüglich der Umsetzung für runde Ecken (über CSS und Images) brauchen:

ALA

(z.B. gleich die ersten beiden Artikel)

Geht aber nur mit CSS , hab ich nicht
Ich versuch jetzt mal ein Image mit abgerundeten Ecken zu erstellen
Mit dem Grafik-Programm (Adobe Photoshop) das ich habe , geht das gar nicht

jfheins 21. Okt 2008 18:41

Re: HTML - Grafiken beschriften
 
Zitat:

Zitat von Thomas F
Mit dem Grafik-Programm (Adobe Photoshop) das ich habe , geht das gar nicht

*roflmao* :lol:

Sorry. Mit Adobe Photoshop geht alles. Okay, fast alles - aber wenn etwas geht dann geht es in Photoshop. Man muss nur wissen wie ;)

Und abgerundete Ecken erstelle ich immer mit einem kleinen Bild z.B. 20x20 Px und nehme einen Kreis und platziere sie in der Ecke. *wuppdi* hat man eine Ecke.

P.S. Ich habe zwar kein Adobe Photoshop, aber ich bin mir totzdem sicher, dass es geht. Und ich bin mir auch sicher, dass man da einen Kreis erstellen kann :stupid:

OG Karotte 21. Okt 2008 18:45

Re: HTML - Grafiken beschriften
 
Zitat:

Zitat von Thomas F
Geht aber nur mit CSS , hab ich nicht
Ich versuch jetzt mal ein Image mit abgerundeten Ecken zu erstellen
Mit dem Grafik-Programm (Adobe Photoshop) das ich habe , geht das gar nicht

Also das musst Du mir mal ausführlicher erklären :gruebel: :gruebel: :gruebel:

1. Cascading Style Sheets sind gewissermassen "Bestandteil" von HTML und jeder einigermassen aktuelle Browser kann das rendern und 99,9% der Webseiten im INet nutzen dies...

2. Klar kann man mit Photoshop (sogar mit Elements) runde Ecken erstellen...

Vielleicht solltest Du nochmal ein wenig Grundlagen pauken, z.B. hier -> SELFHTML und hier findest Du u.a. einige Grundlagen / Tutorials im Umgang mit Photoshop.

[edit] Link hinzugefügt [/edit]

Thomas F 21. Okt 2008 20:18

Re: HTML - Grafiken beschriften
 
Zitat:

Zitat von OG Karotte

2. Klar kann man mit Photoshop (sogar mit Elements) runde Ecken erstellen...

Vielleicht solltest Du nochmal ein wenig Grundlagen pauken, z.B. hier -> SELFHTML und hier findest Du u.a. einige Grundlagen / Tutorials im Umgang mit Photoshop.

[edit] Link hinzugefügt [/edit]

Habs hinbekommen (bin noch Anfänger)

Da gibts im Photoshop ein abgerundetes Rechteckwerkzeug mit dem bekommt man runde Ecken.

Leider hab ich es aber nicht transparent, obwohl ich transparent eingestellt hab,

aber beim abspeicher als jpg - Datei wird es weiß statt transparent

jfheins 21. Okt 2008 20:43

Re: HTML - Grafiken beschriften
 
jpeg unterstützt auch keine Transparanz.

Nimm PNG ;)

Thomas F 21. Okt 2008 20:45

Re: HTML - Grafiken beschriften
 
Ja, habs gemerkt

Mit gif gehts auch

Thomas F 22. Okt 2008 18:51

Re: HTML - Grafiken beschriften
 
Ich hab noch ne Frage

Wie macht man das ,die Seite auf jeden Bildschirm passt, egal welche Auflösung er hat?

Bei mir verschiebt sich nämlich alles etwas , wenn ich die Fenstergröße verändere.

Ich vermute, dass das was mit den Größenangaben und die Positionsangaben der Images und Textfelder

zu tun hat. Ich hab nämlich ein Image , auf das ich eine Tabelle mit Text draufgemacht habe,

wenn ich jetzt das Fenster minimiere, dann ist der Text nicht mehr auf dem Image, sondern daneben. :roll:
Ich hab die Positions-Angaben mit absolute und mit relative gemacht, ist aber immer dasselbe.

Thomas F 22. Okt 2008 19:48

Re: HTML - Grafiken beschriften
 
Ich habs schon gefunden.
Hier steht was dazu

http://www.css4you.de/position.html

DeddyH 22. Okt 2008 19:58

Re: HTML - Grafiken beschriften
 
Ich bin mit OG Karotte der Meinung, dass Du Dich mal intensiv mit SelfHTML beschäftigen solltest, IMHO eine der besten Seiten zu dem Thema.

Thomas F 22. Okt 2008 20:15

Re: HTML - Grafiken beschriften
 
Ich schau mir die Seite mal an.
SELFHTML

Thomas F 23. Okt 2008 15:46

Re: HTML - Grafiken beschriften
 
Jetzt weiß ich, was ich falsch gemacht habe. :wall:

Man muß die Tabelle( table) über die ganze HTML-Seite platzieren, so kann man die einzelnen Elemente (z.B. Images, Textfelder ,Buttons) viele leichter platzieren und positionieren, und nichts verschiebt sich mehr.

jfheins 23. Okt 2008 16:06

Re: HTML - Grafiken beschriften
 
Das kann man machen, aber es gehört sich eigentlich nicht. Zumindest nicht wenn deine Webseite keinen Tabellenähnlichen Aufbau hat.

Tabellen sind dafür da, Werte oder andere Daten tabellarisch anzuzeigen.

Sie wurden früher gerne vielfach verschachtelt und vergewaltigt, um ganze Webseiten zu beinhalten, aber der HTML-Quelltext wird dann einfach unübersichtlich ...

In Maßen sind sie noch tolerierbar, und wenn es mit Stylesheets arrg umständlich ist, isses auch okay; aber Tabellen zum Layouten zu verwenden, weil sie vor dem Boxenmodell erklärt werden sollte vermieden werrden ;)

(Das Alles nur so zur Info.)

P.S. wenn sich nichts verschiebt sieht das auf nem breiteren/schmaleren Monitor als du ihn hast vll. nicht mehr so super aus ;)

Thomas F 23. Okt 2008 16:15

Re: HTML - Grafiken beschriften
 
Das Problem war, immer wenn ich das Fenster verkleinert habe, dann stand der Text plötzlich

nicht mehr da, wo er eigentlich hingehört, sondern daneben.

Mit ner Tabelle kann ich das besser positionieren

Gruß

Thomas


Alle Zeitangaben in WEZ +1. Es ist jetzt 20:05 Uhr.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz