bilder rechts vom text?

Katrin · 28. April 2010

Hallo zusammen,
ich habe da ein kleines problem.
Ich möchte auf meiner Seite, in einem Absatz, links den Text und rechts das Bild haben und das mit zwei Bilder untereinander. Der Text sollte, wenn möglich, mittig in der Bildhöhe sein.

Mit einer Tabelle bekomme ich das hin, aber ist das auch ohne Tabelle zu schaffen?

Bis jetzt sieht es schon ganz ordentlich aus, aber ich bekomme den Text einfach nicht mittig neben die Bilder.

Code

body { font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 12px; overflow: auto; padding: 20px; margin: 0px; background-color:#ffeca6; }
#seitenbereich { text-aligh:center; width:750px; }
#rechts { float:right; width:600px; background-color:white; }
#btr { float:right; width:100%; background-color:#e6e6e6; }




...




<body>
<div id="seitenbereich">
<div id="rechts">
...




<div id="btr"><p><img src="../bilder/bild_1.jpg">Text 1</p>
<p><img src="../bilder/bild_2.jpg">Text 2</p></div>




<br style="clear: both;">
<hr>
<a href="#oben"><img align="right" height="16" width="15" src="../bilder/oben.gif" alt="zum Textanfang" border="0"/></a>
...

Alles anzeigen

lauras · 28. April 2010

Gib mal den imgs ein float: left; mit, dann sollte es funktionieren.

Basi · 28. April 2010

Dein Ansatz ist nicht so richtig gut, mach es einfach so:

Code

body { font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 12px; overflow: auto; padding: 20px; margin: 0px; background-color:#ffeca6; } 
.bild { 
  float: right; 
  width: 600px; 
} 




p {
  overflow: auto;
}




<body>  




<p>Text... <img class="bild" /></p>

Alles anzeigen

lauras

Ich denk das Bild soll rechts? Und warum 2 Bereiche wenn es mit einem geht?

Katrin · 28. April 2010

Danke für die schnelle hilfe.

@ basiii Das funktioniert leider nicht. Der Text steht über dem ersten bzw. unter dem zweiten bild.

lauras Dann sind die Bilder links und der Text steht am unteren Rand bzw. unter den Bildern geht er weiter.

lauras · 28. April 2010

Achso, sry, hab ich überlesen.

Dann jedem img ein float: right; Inhalt und Bilder in einen div und für den Text gar nix. Sollte eigentlich funktionieren. Notfall noch float: right; für den Text.

Gruß
Laura

Katrin · 28. April 2010

Das witzige ist, es macht keinen unterschied ob ich float left oder float right eingebe.
Mit align="right" im img rutscht das Bild zwar nach rechts, aber der Text steht immer oben.

Also der Text steht in zwei Zeilen direkt untereinander und nicht mehr dem Bild zugeordnet.

Sarkkan · 28. April 2010

Zitat

Hallo zusammen,
ich habe da ein kleines problem.
Ich möchte auf meiner Seite, in einem Absatz, links den Text und rechts das Bild haben und das mit zwei Bilder untereinander. Der Text sollte, wenn möglich, mittig in der Bildhöhe sein.

Mit einer Tabelle bekomme ich das hin, aber ist das auch ohne Tabelle zu schaffen?

Bis jetzt sieht es schon ganz ordentlich aus, aber ich bekomme den Text einfach nicht mittig neben die Bilder.

Zu dem Fett geschriebenem dafür müsste man die Maße des Bildes wissen... zudem dann dem Absatz eine extra Box zuweisen und mit Padding optimieren
(wenn du es so genau haben willst... was einfacheres fällt mir dazu gerade nicht ein =/ )

Nebenbei:
Zuerst kommen die Bilder und dann der Text!

Katrin · 28. April 2010

Hallo Sarkkan,
das mittig ist mir nicht ganz so wichtig, aber wie bekomme ich den Text dem jeweiligen Bild zugewiesen?

Wie gesagt, mit align bekomme ich die bilder zwar nach rechts, aber der Text rutscht dann komplett nach oben neben das erste Bild.

lauras · 28. April 2010

Du brauchst halt Text, der lang genug ist.

Falls das nicht das Problem ist, lad es mal irgendwo hoch, damit wir uns ein Bild vom kompletten Code machen können.

Sarkkan · 28. April 2010

Grade folgendes geschrieben und Ausprobiert:

HTML

<!doctype html>
<html>




<head>
    <title>Titel</title>




    <meta charset="ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />




<style>
body {
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 12px;
overflow: auto;
padding: 20px;
margin:0 auto;
background-color:#ffeca6;
text-align: center;
}




#seitenbereich {
text-align:left;
width:750px;
}




#Bild {
    float: right;
}</style>
</head>
<body>




>!-- Text oberhalb des Absatzes -->
<p id="seitenbereich"><img id="Bild" src="ol.jpg"><!-- Hier kommt die URL deines Bildes hin -->
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- Text unterhalb des Absatzes -->




</body>
</html>

Alles anzeigen

Katrin · 28. April 2010

Die Seitefindet ihr unter http://spielplatzfragen.de/seiten/geraete_selber_bauen.html
wobei es dort noch in zwei div unterteilt ist.

Sarkkan · 28. April 2010

...und was willst du daran jetzt anders haben?

Katrin · 28. April 2010

evtl. die schrift mittig und vorhin wurde an den beiden div "gemeckert"

die frage ist, muss ich immer die bildgröße haben und es per hand mittig setzen?
Bei 5 Bildern unter einander ist das evtl. mühsam.

Sarkkan · 28. April 2010

Ja, müsstest du =/
oder versuch mal text-vertical: middle;
Aber das müsste nicht gehen... dafür müsse man die einzelne Zeilenhöhe angeben... und die wäre wiederum von Text und Bildgröße abhänig...
Bei padding-top: und padding-bottom: müsste man auch die Textlänge mit ein berechnen =/

Katrin · 28. April 2010

Das ist doch mal ne aussage.
Vielen dank!!!!!!!!!!!!!!!

sejuma · 29. April 2010

http://www.ohne-css.gehts-gar.net/0019.php

Sarkkan · 29. April 2010

Zitat von "sejuma"

http://www.ohne-css.gehts-gar.net/0019.php

Danke für diesen Link *__*
Ich mag dieses Blau von Links ... und weiter? .___.

Denke aber mal sollte eine Anspielung sein, dort das mal durch zu arbeiten... beziehungsweise evtl. an mich, wenn man Punkt 5 beachtet... wobei das so eben nicht funktioniert, wenn es mehr als 2 Zeilen Text sind... was da zwar auch steht.. aber egal ^__^

Und so wie mir das wirkt kann Katrin ja auch CSS, nur hatte sie damit ein kleines Problem, wo ich es auch nicht schlimm finde, dass sie gefragt hat^^
Gibt halt schon mal Sachen die man nicht weiß, obwohl man die Programmier-, Script-, ...Sprache beherrscht =/

bilder rechts vom text?

Jetzt mitmachen!

Teilen