Text soll neben Grafik erscheinen

Lisa1302 · 30.06.2012, 17:48

Hallo

ich bin totaler Anfänger in HTML und probiere mich gerade ein wenig aus.
Ich habe folgendes Problem: Sobald ich eine Grafik einsetze verschwindet der Text weiter nach unten und ich weiß nicht wie ich das weg bekomme :/

http://www.pic-upload.de/view-149089...nshot.png.html
http://www.pic-upload.de/view-149089...shot2.png.html

Wäre für jede Hilfe dankbar

schnullerbacke · 30.06.2012, 18:38

Nur anhand der screenshots vermag ich das nicht zu erkennen.
Die Seite ist (noch) lokal auf deiner Festplatte?
Oder hast du auch schon irgendwas hochgeladen?
Dann poste mal den Link, ansonsten zumindest den html-Code und die css-Anweisungen.
Vielleicht hast du ja auch eine Datei, wie das Ganze mal fertig aussehen soll. Könnte auch hilfreich sein, das zu sehen.

Nebenbei:
Du schreibst, du bist totale Anfängerin. Das könnte jetzt etwas übertrieben sein oder du hast tatsächlich null Plan.
Im screenshot sieht's aus, als arbeitest du mit Dreamweaver. Wenn du da in die Codeansicht gehst, sagt dir das was? Ein bißchen oder gar nichts?
Wenn dir das nämlich wirklich gar nichts sagt, solltest du dir den Gefallen tun und erst einmal ein paar Grundlagen lernen, bevor du anfängst an eigenen Sachen rumzuprobieren. Man ist sonst zu schnell frustriert, weil es dann meißtens doch nicht so easy ist, wie einem die Programme weißmachen wollen.
Zudem musst du einfach auch die gängigsten Begriffe kennen, sonst verstehst du ja die Antworten hier kaum.

Hier gibt es doch (Video)-Tutorials zu dem Thema.
Alternativ kannst du dich auch hier durchlesen:
http://little-boxes.de/little-boxes-teil1-online.html

DirkSH · 30.06.2012, 21:31

Du kannst es wenn es schnell und einfach gehen soll eine Tabelle machen ohne Rahmen. und links den Text und Rechts das Bild

Bye

Dirk

PS: auch wenn Du Drug and Drop Hilfsprogramme einsetzt solltest du Grundkenntnisse in HTML haben.

Hier wird dir gut geholfen: http://de.selfhtml.org/

Mackymesser111 · 30.06.2012, 22:01

Zitat:

Tabelle

DAS war jetzt doch wohl ein Witz oder?
Ironie, oder?

BITTE

@Lisa: tut mir leid ich hab irgendwie deine frage nicht ganz verstanden aber wenn ich nicht total falsch liege solltest du mal nach "float" googeln vielleicht hilft dir das.

fetterwurm · 01.07.2012, 12:41

Du könntest auch dem Image eine Ausrichtung geben.

Beispielsweise so:
<img src="bildpfad.jpg" align="left" />

Lisa1302 · 01.07.2012, 15:29

Zitat:

Zitat von schnullerbacke

Nur anhand der screenshots vermag ich das nicht zu erkennen.
Die Seite ist (noch) lokal auf deiner Festplatte?
Oder hast du auch schon irgendwas hochgeladen?
Dann poste mal den Link, ansonsten zumindest den html-Code und die css-Anweisungen.
Vielleicht hast du ja auch eine Datei, wie das Ganze mal fertig aussehen soll. Könnte auch hilfreich sein, das zu sehen.

Nebenbei:
Du schreibst, du bist totale Anfängerin. Das könnte jetzt etwas übertrieben sein oder du hast tatsächlich null Plan.
Im screenshot sieht's aus, als arbeitest du mit Dreamweaver. Wenn du da in die Codeansicht gehst, sagt dir das was? Ein bißchen oder gar nichts?
Wenn dir das nämlich wirklich gar nichts sagt, solltest du dir den Gefallen tun und erst einmal ein paar Grundlagen lernen, bevor du anfängst an eigenen Sachen rumzuprobieren. Man ist sonst zu schnell frustriert, weil es dann meißtens doch nicht so easy ist, wie einem die Programme weißmachen wollen.
Zudem musst du einfach auch die gängigsten Begriffe kennen, sonst verstehst du ja die Antworten hier kaum.

Hier gibt es doch (Video)-Tutorials zu dem Thema.
Alternativ kannst du dich auch hier durchlesen:
http://little-boxes.de/little-boxes-teil1-online.html

Also zuerst Codeansicht sagt mir was

Ich lerne gerade die Grundlagen im Unterricht und den Rest will ich mir einigermaßen selbstbeibringen.
Und ja, die Seite ist noch lokal auf meiner Festplatte

Ich habe auch eine vorstellung wie das ganze aussehen soll, kann das vllt eben schnell fertig machen und lade das hier hoch

Hier der HTML-Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lisa Humphrey - Printdesign </title>
<style type="text/css">

.img2 {margin-left:1100px; margin-top:-250px; float:right;}

body { margin-top:170px; margin-left:50px; margin-bottom:150px;}

li { display:inline;}

img { margin-top:-150px; margin-left:25px;}

h1 { font-family:Myriad Pro; font-size:24px; margin-left:40px; margin-top:100px;}

p { font-family:Myriad Pro; font-size:16px; margin-left:40px;}

a { color:blue; text-decoration:none;}

</style>
</head>

<body>

<ul>
<a href="Leistungen.html"> <li style="list-style:none; color: #333333; font-size:18px; font-family:Myriad Pro; margin-right:30px; margin-left:250px;"> <b>Leistungen</b> </li> </a>

<a href="Leistungen.html"> <li style="list-style:none; color:#333333; font-size:18px; font-family:Myriad Pro; margin-right:30px;"> <b>Referenzen </b> </li> </a>

<a href="Leistungen.html"> <li style="list-style:none; color:#333333; font-size:18px; font-family:Myriad Pro; margin-right:30px;"> <b> Kontakt</b> </li> </a>

</ul>

<a href="index.html">
<table>
<tr>
<td> <img src="website_logo/mein_logo_2.jpg" height="150px" width="160px" /> </td>
</tr>
</table>
</a>

<img src="bewerbung_element.jpg" class="img2"/>

<h1> Herzlich Willkommen! </h1> <br/>
<p> Wir bieten Ihnen verlockende Angebote für ihr gewünschtes Printprodukt an! <br /> <br/>
Logos, Visitenkarten, Broschüren u.v.m. <br /> <br/>
Bei Interesse kontaktieren Sie uns!</p>
<p>Mit freundliche Grüßen, Lisa Humphrey - Printdesign</p>

</body>
</html>

Lisa1302 · 01.07.2012, 15:40

So soll die Website aussehen,

Vllt ist so auch ersichtlich, was ich meine mit dem Text.
Mit Float und Algin hab ichs auch schon ausprobiert, änderte aber nichts

lg lisa

strolch_007 · 05.07.2012, 18:57

Hallo Lisa,
zuerst mal weiß ich nicht so recht was mit deinen beiden Bildern website_logo/mein_logo_2.jpg (wird wohl das oben links sein) und bewerbung_element.jpg anfangen soll. Drum hab ich die jetzt einfach mal unbeachtet gelassen. Ich habe mir folgende Lösung ausgedacht.

Zitat:

Sorry ich finde hier nur [/QUOTE] um CSS und HTML einzufügen.
Mit dem margin (1.Stelle: Abstand nach oben, 2. Stelle Abstand rechts, 3. Stelle Abstand unten und 4. Stelle Abstand links) kannst du nun bequem einstellen wie sich was wohin verschieben soll. Da ich nicht so recht wußte was du mit dem "Farbenwirrwar" im CSS mal blue, im li dann #333333, eigentlich machen willst, habe ich einfach die Links in blau gehovert. Die Höhe und Breite im li01 sind willkürlich gewählt, da ich keine Ahnung habe wie groß das Bild ist. Mit border: 1px solid #000; könntest du noch einen schwarzen Rahmen ziehen und die Größe des Platzhalters sichtbar machen.
Mit .div02 p bestimmst du das Verhalten von 'p' nur in diesem Container (.div02), nicht auf deiner gesamten Seite, während z. B. h1 für alle Überschriften auf allen Seiten gilt. Drum diese unterschiedliche Schreibweise (zur Veranschaulichung).

schnullerbacke · 05.07.2012, 19:49

Hatte gar nicht mitbekommen, dass du mittlerweile geantwortet hast. Wurde mir in den abonnierten Themen gar nicht angezeigt.

Die Grafik mit der Welle ist im Prinzip ein Fall für eine Hintergrundgrafik.
Im css wäre das background-image.
Du kannst z.B. dem Body-Element die Wellengrafik als background-image mitgeben. Da braucht es dann kein float.
Z.B.
body {
background: #fff url("bewerbung_element.jpg") x y no-repeat;
}
x ist die Position der Grafik von links
y ist die Position der Grafik von oben

Wie soll die Seite denn auf großen Monitoren aussehen?
Dein Vorschaubild hat eine Auflösung von 842x595.
Wie soll es aussehen bei Monitoren mit z.B. 1600x1000. (Das hast du oben, unten, rechts, links ne Menge Leerraum.)
Als Rechteck in der Mitte des Bildschirms?

Lisa1302 · 05.07.2012, 22:02

Zitat:

Zitat von strolch_007

Hallo Lisa,
zuerst mal weiß ich nicht so recht was mit deinen beiden Bildern website_logo/mein_logo_2.jpg (wird wohl das oben links sein) und bewerbung_element.jpg anfangen soll. Drum hab ich die jetzt einfach mal unbeachtet gelassen. Ich habe mir folgende Lösung ausgedacht.

Sorry ich finde hier nur

um CSS und HTML einzufügen.
Mit dem margin (1.Stelle: Abstand nach oben, 2. Stelle Abstand rechts, 3. Stelle Abstand unten und 4. Stelle Abstand links) kannst du nun bequem einstellen wie sich was wohin verschieben soll. Da ich nicht so recht wußte was du mit dem "Farbenwirrwar" im CSS mal blue, im li dann #333333, eigentlich machen willst, habe ich einfach die Links in blau gehovert. Die Höhe und Breite im li01 sind willkürlich gewählt, da ich keine Ahnung habe wie groß das Bild ist. Mit border: 1px solid #000; könntest du noch einen schwarzen Rahmen ziehen und die Größe des Platzhalters sichtbar machen.
Mit .div02 p bestimmst du das Verhalten von 'p' nur in diesem Container (.div02), nicht auf deiner gesamten Seite, während z. B. h1 für alle Überschriften auf allen Seiten gilt. Drum diese unterschiedliche Schreibweise (zur Veranschaulichung).[/QUOTE]

Danke erstmal!

Zu den Bildern, website_logo/mein_logo_2.jpg und bewerbung_element.jpg
Hatte ich ja im Entwurf gezeigt was das sein soll.
Das blue hatte mit der verlinkung zu tun, dass die nicht blau und unterstrichen Ddargestellt wird
und #33333 war einfach nur die Farbe der Schrift

und zu schnullerbacke
da hatte ich gar nicht dran gedacht mit dem Leerraum bei größeren Monitoren, weiß aber auch nicht wie ich das dann so umsetzen kann, dass mein Entwurf an allen Monitoren so angezeigt wird.

lg, lisa

strolch_007 · 06.07.2012, 00:44

Hallo Lisa,

Zitat:

Das blue hatte mit der verlinkung zu tun, dass die nicht blau und unterstrichen Ddargestellt wird

Aha color: blue damit es nicht blau wird. Verstehe?!? :-)

Nachfolgend der etwas modifizierte Code (solltest mal testen!). Habe jetzt mal die border drin gelassen.

Denke mal das ist das Ergebnis das du dir vorgestellt hast, zumindest in etwa.
Hier der nun etwas geänderte Code

Zitat:

zu schnullerbacke:

Zitat:

Wie soll die Seite denn auf großen Monitoren

aussehen?
Dein Vorschaubild hat eine Auflösung von 842x595.
Wie soll es aussehen bei Monitoren mit z.B. 1600x1000. (Das hast du oben, unten, rechts, links ne Menge Leerraum.)
Als Rechteck in der Mitte des Bildschirms?

Naja ich würde sagen mittig ausgerichtet wäre am sinnvollsten und mit festen Pixelwerten (wie oben) "arbeiten". Ist für den Anfang am einfachsten und bei der Größe wirken 842px auch bei einem großen Bildschirm.
Sicher kann man aber auch mit %-Werten arbeiten und Breite und Höhe den Bildschirmgegenbenheiten anpassen. Kann man, muß man aber nicht....
Ist auch Geschmackssache ob das bei hohen Bildschirmauflösungen mit der rechten Grafik dann wirklich gut aussieht wenn die z. B. oben nicht mehr abschließt.
Ist ja auch nur ein Lösungsansatz den ich da anbiete. Möglichkeiten gibt es noch einige mehr und dein Denkanstoss ist auch gut und richtig so.

schnullerbacke · 06.07.2012, 11:41

Für diese Wellengrafik braucht man eigentlich kein eigenes Element.
Da hast dafür das li04 vorgesehen, oder?
Bei deinem Beispiel kann die Grafik als background-image für den div01 fungieren.
z.B.
.div01 {
background: #FFF url("bewerbung_element.jpg") right top no-repeat;
}

Ein Container mit fester Breite und Höhe ist eine von mehreren Möglichkeiten.
Hat aber den Nachteil, dass die Höhe bei umfangreicherem Inhalt vlt. nicht ausreicht. Dann hat man einen Scrollbalken im Container. Sieht standardmäßig fast immer scheiße aus. Da könnte man dann mit javascript einen eigenen, schickeren basteln.
Oder man definiert für Seiten mit mehr Inhalt eine andere feste Höhe. Geht auch.

@Lisa
"da hatte ich gar nicht dran gedacht mit dem Leerraum bei größeren Monitoren, weiß aber auch nicht wie ich das dann so umsetzen kann, dass mein Entwurf an allen Monitoren so angezeigt wird."

Tröste dich, da bist du nicht die einzige, die nicht daran denkt. Umsetzen kann man viel (ich würde sagen fast alles), aber du solltest dir Gedanken machen, wie es aussehen soll.
Ein Beispiel wurde dir ja schon genannt: Feste Höhe und Breite. Vlt. mit einem Rahmen drumherum oder einer farbigen Hinterdrundfläche sieht das dann quasi aus wie eine Visitenkarte auf dem Bildschirm.
Du kannst auch die Welle immer rechts am Bildschirmrand platzieren, so dass sie auf jedem Monitor immer von oben bis unten geht. Dann wäre halt, je nach Monitorbreite, der Abstand zwischen Text und Welle unterschiedlich breit. Dann müsste nur die Wellengrafik entsprechend hoch oder kachelbar sein.

Bei der Umsetzung wird dir hier mit Sicherheit der eine oder andere helfen, nur muss du die Richtung vorgeben.

30.06.2012, 17:48	#1
Lisa1302 Helper Registriert seit: 04.01.2009 Beiträge: 207	Text soll neben Grafik erscheinen Hallo ich bin totaler Anfänger in HTML und probiere mich gerade ein wenig aus. Ich habe folgendes Problem: Sobald ich eine Grafik einsetze verschwindet der Text weiter nach unten und ich weiß nicht wie ich das weg bekomme :/ http://www.pic-upload.de/view-149089...nshot.png.html http://www.pic-upload.de/view-149089...shot2.png.html Wäre für jede Hilfe dankbar __________________ Achtung Anfängerin!

30.06.2012, 18:38	#2
schnullerbacke Helper Registriert seit: 22.03.2006 Beiträge: 254	AW: Text soll neben Grafik erscheinen Nur anhand der screenshots vermag ich das nicht zu erkennen. Die Seite ist (noch) lokal auf deiner Festplatte? Oder hast du auch schon irgendwas hochgeladen? Dann poste mal den Link, ansonsten zumindest den html-Code und die css-Anweisungen. Vielleicht hast du ja auch eine Datei, wie das Ganze mal fertig aussehen soll. Könnte auch hilfreich sein, das zu sehen. Nebenbei: Du schreibst, du bist totale Anfängerin. Das könnte jetzt etwas übertrieben sein oder du hast tatsächlich null Plan. Im screenshot sieht's aus, als arbeitest du mit Dreamweaver. Wenn du da in die Codeansicht gehst, sagt dir das was? Ein bißchen oder gar nichts? Wenn dir das nämlich wirklich gar nichts sagt, solltest du dir den Gefallen tun und erst einmal ein paar Grundlagen lernen, bevor du anfängst an eigenen Sachen rumzuprobieren. Man ist sonst zu schnell frustriert, weil es dann meißtens doch nicht so easy ist, wie einem die Programme weißmachen wollen. Zudem musst du einfach auch die gängigsten Begriffe kennen, sonst verstehst du ja die Antworten hier kaum. Hier gibt es doch (Video)-Tutorials zu dem Thema. Alternativ kannst du dich auch hier durchlesen: http://little-boxes.de/little-boxes-teil1-online.html

01.07.2012, 12:41	#5
fetterwurm Newbie Registriert seit: 09.01.2010 Beiträge: 6	AW: Text soll neben Grafik erscheinen Du könntest auch dem Image eine Ausrichtung geben. Beispielsweise so: <img src="bildpfad.jpg" align="left" />

01.07.2012, 15:40	#7
Lisa1302 Helper Themenstarter Registriert seit: 04.01.2009 Beiträge: 207	AW: Text soll neben Grafik erscheinen So soll die Website aussehen, Vllt ist so auch ersichtlich, was ich meine mit dem Text. Mit Float und Algin hab ichs auch schon ausprobiert, änderte aber nichts lg lisa __________________ Achtung Anfängerin!

05.07.2012, 19:49	#9
schnullerbacke Helper Registriert seit: 22.03.2006 Beiträge: 254	AW: Text soll neben Grafik erscheinen Hatte gar nicht mitbekommen, dass du mittlerweile geantwortet hast. Wurde mir in den abonnierten Themen gar nicht angezeigt. Die Grafik mit der Welle ist im Prinzip ein Fall für eine Hintergrundgrafik. Im css wäre das background-image. Du kannst z.B. dem Body-Element die Wellengrafik als background-image mitgeben. Da braucht es dann kein float. Z.B. body { background: #fff url("bewerbung_element.jpg") x y no-repeat; } x ist die Position der Grafik von links y ist die Position der Grafik von oben Wie soll die Seite denn auf großen Monitoren aussehen? Dein Vorschaubild hat eine Auflösung von 842x595. Wie soll es aussehen bei Monitoren mit z.B. 1600x1000. (Das hast du oben, unten, rechts, links ne Menge Leerraum.) Als Rechteck in der Mitte des Bildschirms?

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Text soll neben Grafik erscheinen

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

30.06.2012, 21:31	#3
DirkSH Newbie Registriert seit: 02.12.2010 Ort: Bad Bramstedt Beiträge: 24 Kamera: Sony A580 Verwendet: Photoshop CS5, Corel	AW: Text soll neben Grafik erscheinen Du kannst es wenn es schnell und einfach gehen soll eine Tabelle machen ohne Rahmen. und links den Text und Rechts das Bild Bye Dirk PS: auch wenn Du Drug and Drop Hilfsprogramme einsetzt solltest du Grundkenntnisse in HTML haben. Hier wird dir gut geholfen: http://de.selfhtml.org/

06.07.2012, 11:41	#12
schnullerbacke Helper Registriert seit: 22.03.2006 Beiträge: 254	AW: Text soll neben Grafik erscheinen Für diese Wellengrafik braucht man eigentlich kein eigenes Element. Da hast dafür das li04 vorgesehen, oder? Bei deinem Beispiel kann die Grafik als background-image für den div01 fungieren. z.B. .div01 { background: #FFF url("bewerbung_element.jpg") right top no-repeat; } Ein Container mit fester Breite und Höhe ist eine von mehreren Möglichkeiten. Hat aber den Nachteil, dass die Höhe bei umfangreicherem Inhalt vlt. nicht ausreicht. Dann hat man einen Scrollbalken im Container. Sieht standardmäßig fast immer scheiße aus. Da könnte man dann mit javascript einen eigenen, schickeren basteln. Oder man definiert für Seiten mit mehr Inhalt eine andere feste Höhe. Geht auch. @Lisa "da hatte ich gar nicht dran gedacht mit dem Leerraum bei größeren Monitoren, weiß aber auch nicht wie ich das dann so umsetzen kann, dass mein Entwurf an allen Monitoren so angezeigt wird." Tröste dich, da bist du nicht die einzige, die nicht daran denkt. Umsetzen kann man viel (ich würde sagen fast alles), aber du solltest dir Gedanken machen, wie es aussehen soll. Ein Beispiel wurde dir ja schon genannt: Feste Höhe und Breite. Vlt. mit einem Rahmen drumherum oder einer farbigen Hinterdrundfläche sieht das dann quasi aus wie eine Visitenkarte auf dem Bildschirm. Du kannst auch die Welle immer rechts am Bildschirmrand platzieren, so dass sie auf jedem Monitor immer von oben bis unten geht. Dann wäre halt, je nach Monitorbreite, der Abstand zwischen Text und Welle unterschiedlich breit. Dann müsste nur die Wellengrafik entsprechend hoch oder kachelbar sein. Bei der Umsetzung wird dir hier mit Sicherheit der eine oder andere helfen, nur muss du die Richtung vorgeben.

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
onmouseover soll text erscheinen lassen	tommy_gFm	(X)HTML & CSS	6	09.05.2011 20:54
Mouse_over Text soll erscheinen, aber wie?	PourkianProductions	Flash - ActionScript	4	19.09.2009 15:43
Grafik neben Text doof?? ;)	Zeiflex	(X)HTML & CSS	3	05.04.2008 09:14
Durch Klick auf ein Bild soll ein Text erscheinen.	NiklasD	PHP und andere Scriptsprachen	1	10.09.2007 13:08
Wenn ein Puzzleteil passt, soll ein Text erscheinen	Taubenbaum	Flash - Allgemein	1	29.08.2006 09:33

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Text soll neben Grafik erscheinen

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige