Text soll neben Grafik erscheinen

Lisa1302 · 30.06.2012

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 :/

Wäre für jede Hilfe dankbar

schnullerbacke · 30.06.2012

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

DirkSH · 30.06.2012

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/

Mackymesser111 · 30.06.2012

AW: Text soll neben Grafik erscheinen

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

AW: Text soll neben Grafik erscheinen

Du könntest auch dem Image eine Ausrichtung geben.

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

Lisa1302 · 01.07.2012

AW: Text soll neben Grafik erscheinen

schnullerbacke schrieb:
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

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

strolch_007 · 05.07.2012

AW: Text soll neben Grafik erscheinen

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.

<style type="text/css">

.div01 {
margin: 0 auto;
width: 1100px;
height: 600px;
font-size: 18px;
font-family: Myriad Pro;
}

.div01 ul {
list-style: none;
}

.li01 {
float: left;
width: 200px;
height: 200px;
margin: 40px 30px 0 50px;
}

.li02 {
float: left;
margin: 40px 40px 0 90px;
}

.li03 {
float: left;
margin: 40px 40px 0 0;
}

.div01 ul li a {
color: #333333;
font-weight: bold;
text-decoration: none;
}

.div01 ul li a:hover {
color: #0000FF;
}

.div02 {
float: left;
margin: 60px 0 0 90px;
padding: 0;
text-align: left;
font-family: Myriad Pro;
}

.clear {
clear: both;
}

.div02 p {
font-size:16px;
}

h1 {
font-size: 24px;
}

</style>

<div class="div01">

<ul>

<li class="li01">Dein Bild<br />Lisa Humphrey</li>
<li class="li02"><a href="Leistungen.html">Leistungen</a></li>
<li class="li03"><a href="Leistungen.html">Referenzen</a></li>
<li class="li03"><a href="Leistungen.html">Kontakt</a></li>

</ul>

<div class="div02">
<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>
</div>

</div>

<div class="clear"></div>

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

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?

Lisa1302 · 05.07.2012

AW: Text soll neben Grafik erscheinen

strolch_007 schrieb:
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

AW: Text soll neben Grafik erscheinen

Hallo Lisa,

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

<style type="text/css">

.div01 {
margin: 0 auto;
width: 842px;
height: 595px;
font-size: 18px;
font-family: Myriad Pro;
border: 1px solid #000;
}

.div01 ul {
list-style: none;
}

.li01 {
float: left;
width: 160px;
height: 150px;
margin: 40px 30px 0 10px;
border: 1px solid #000;
}

.li02 {
float: left;
margin: 40px 40px 0 20px;
}

.li03 {
float: left;
margin: 40px 40px 0 0;
}

.li04 {
float: right;
width: 70px;
height: 595px;
background: #FFF url("bewerbung_element.jpg") no-repeat;
border: 1px solid #000;
}

.div01 ul li a {
color: #333333;
font-weight: bold;
text-decoration: none;
}

.div01 ul li a:hover {
color: #0000FF;
}

.div02 {
float: left;
margin: 60px 0 0 20px;
padding: 0;
text-align: left;
font-family: Myriad Pro;
border: 1px solid #000;
}

.clear {
clear: both;
}

.div02 p {
font-size:16px;
}

h1 {
font-size: 24px;
}

.img {
border: 0;
}

</style>

<div class="div01">

<ul>

<li class="li01"><img src="website_logo/mein_logo_2.jpg" height="150px" width="160px" alt="Lisa Humphrey" /></li>
<li class="li02"><a href="Leistungen.html">Leistungen</a></li>
<li class="li03"><a href="Leistungen.html">Referenzen</a></li>
<li class="li03"><a href="Leistungen.html">Kontakt</a></li>
<li class="li04">hier</li>

</ul>

<div class="div02">
<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>
</div>

</div>

<div class="clear"></div>

zu schnullerbacke:

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

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.