Zum Inhalt springen

schrift um bild herum


godfather_of_mx

Empfohlene Beiträge

hey leute,

ich will bei meiner hp das so machen, das um ein bild herum ein text geschrieben wird. also das bild rechts und die schrift links. der text wird zur zeit mit css in blocksatz dargestellt und hat rechts und links einen rannd von 100px. das soll auch so bleiben, nur das da halt noch das bild mit reinkommt.

ich hoffe ihr versteht was ich meine.

ps.: das mit css ist noch nicht auf meiner hp, ist noch im test.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Text um Grafik

fließen lassen

<img src="URI" alt="Alternativtext"

align="Ausrichtung" hspace="LinksRechts" vspace="ObenUnten">

Für Ausrichtung einen der folgenden Werte notieren:

left = Grafik links ausrichten (nachfolgende Inhalte fließen rechts vorbei),

right = Grafik rechts ausrichten (nachfolgende Inhalte fließen links vorbei),

Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Grafik zur Umgebung links und rechts zu bestimmen.

Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Grafik zur Umgebung oben und unten zu bestimmen.

Seite Beschreibung

Link zu diesem Kommentar
Auf anderen Seiten teilen

inwiefern meinst du hat float ned funktioniert?

die schrift war drunter und drüber, aber nicht daneben, oder hab ich da was falsch gemacht?

kein Problem, aber hast du schon mal ne onlinezeitung gelesen ? wie wäre das wenn der text da auch nicht um die grafik herum geschrieben wäre ? furchbar viel platzverlust ;)

da haste warscheinlich recht, aber das ist immer nur ganz wenig text, und dann siehts irgendwie nicht aus. kannst ja ma hier gucke: http://www.twostrokepimp.de/test/index2.html und dann links auf race reports klicken!

aber ich glaube auf der home seite werd ichs so machen

Link zu diesem Kommentar
Auf anderen Seiten teilen

die schrift war drunter und drüber, aber nicht daneben, oder hab ich da was falsch gemacht?

Ja, hast du (kurz und knapp) ;)

EDIT:

Ok, hier noch ein Beispiel:


<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>New Document</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

		<style type="text/css">

<!--

img { float: right; margin-left: 100px; margin-right: 100px;}

//-->

</style>

  </head>

  <body>

    <img src="http://www.fachinformatiker.de/skins/fi/images/header_monitor.jpg" alt="FI" />

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sed massa at orci sagittis blandit. Proin quis quam a dolor semper rhoncus. Suspendisse potenti. Integer consectetuer egestas orci. Nulla sodales faucibus erat. Phasellus semper, est ut ultrices aliquet, sem dolor ultricies nibh, euismod malesuada quam odio at lectus. Fusce sed ante. Phasellus aliquam elementum velit. Cras porttitor sagittis massa. In dictum, metus nec dignissim faucibus, diam elit laoreet nisl, ac iaculis leo mauris nec quam. Nam mollis neque id lacus. Nunc neque. Quisque ultricies porttitor lacus. Vivamus ut massa. Quisque vulputate pulvinar lectus. Cras vitae ipsum sit amet justo porttitor vestibulum. Donec a lacus a ligula ornare lobortis. Nulla eros.


Mauris at diam. Praesent velit eros, venenatis vitae, pretium suscipit, congue quis, velit. Cras purus. Nulla non magna venenatis purus tempus feugiat. Nam ornare, nibh ut venenatis porttitor, mauris ante facilisis nulla, et ornare nulla libero sit amet mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla elementum congue turpis. Nulla facilisis felis at lacus. Nam auctor elit quis enim. Aenean aliquet, risus in laoreet fermentum, nulla dui fermentum dolor, a lobortis neque neque vel pede. Aenean mattis venenatis felis. Sed adipiscing leo eget nibh.


Duis vestibulum mauris. Donec consectetuer. In tincidunt, nisi ut commodo volutpat, augue massa consectetuer mauris, et semper sem nisl ac nisl. Quisque ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci. Vestibulum sit amet eros eget pede tincidunt dictum. Curabitur quis neque. Nullam tincidunt, tellus vitae accumsan commodo, purus lectus ornare augue, quis ornare tellus dolor vel felis. Cras pellentesque arcu quis nunc. Donec pede turpis, sollicitudin ut, lobortis nec, aliquet vel, massa. Suspendisse mollis convallis nisi. In volutpat, velit vel blandit iaculis, sem metus venenatis enim, a congue quam augue et sem. Aliquam erat volutpat. Fusce mi orci, imperdiet nec, pharetra ac, mollis vel, mi. Duis bibendum posuere mauris.


Sed suscipit quam vitae odio. In eu libero eget metus ultrices adipiscing. Aenean vel risus nec mauris sodales dignissim. Nam ut nisi ut lacus eleifend vehicula. Integer sodales mauris et tortor. Praesent ut lorem. Sed urna. Donec rhoncus laoreet ligula. Duis luctus, magna id facilisis varius, orci turpis tempor odio, ornare tincidunt est neque sit amet est. Aenean vehicula. Sed sodales tortor vitae turpis. Pellentesque feugiat. Nunc viverra porttitor pede. Cras aliquet pellentesque ligula. Proin ullamcorper dignissim tortor. Morbi pellentesque erat eget enim lacinia ultricies. Morbi fringilla eros ut magna. Ut diam felis, imperdiet quis, rhoncus at, fermentum at, turpis. Ut dictum massa a est suscipit semper. Quisque porttitor leo sed massa.


Curabitur semper neque in neque. Vestibulum dignissim pharetra quam. Duis rutrum libero ac eros. Praesent nec odio eu arcu consectetuer vulputate. Aenean in orci. Praesent non lorem. Suspendisse a velit nec quam dignissim tempor. Nunc adipiscing, odio quis accumsan tincidunt, nunc ipsum iaculis urna, vitae faucibus nunc enim in magna. Nulla risus arcu, pharetra in, laoreet facilisis, vulputate a, urna. Etiam volutpat, leo non interdum vulputate, odio arcu tincidunt risus, hendrerit viverra tellus ipsum quis quam. Morbi volutpat. Proin feugiat magna nec augue. In hac habitasse platea dictumst. Pellentesque sem felis, faucibus et, adipiscing non, imperdiet nec, nisi. Mauris sit amet eros sed justo placerat varius.


  </body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen

ich denke du meinst wohl eher so. Float sollte nämlich schon funktionieren :)


<h4>RACE-REPORTS </h4>

<br>

<br>

<img src="http://www.twostrokepimp.de/test/db3.jpg" style="float:left; margin-right:20px"><br>

<strong>18.10.05:</strong> Auch beim wohl letzten Rennen für mich in diesem Jahr, bleibe ich vom Pech verfolgt. Lest selbst was geschah. <a href="dannenberg.html">Hier klicken </a> für den Race Report. <br>


<p style="clear:left "> </p>

<strong>13.10.05:</strong> Recht gut gefahren, trotzdem keine Punkte in Schenkenhorst. Was geschah? Lest selbst: <a href="schenkenhorst.html">Hier klicken </a> für den Race Report. <br>

<br>

<img src="http://www.twostrokepimp.de/test/dreetz2.jpg" style="float:left; margin-right:20px ">

<br>

<strong>05.10.05:</strong> Nach den ersten Punkten von Templin, folgten jetzt weitere in Dreetz, aber lest selbst! <a href="dreetz2.html">Hier klicken </a> für den Race Report. <br>

<p style="clear:left "> </p>


Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...