Positionierung von Bildern und Text mit css

minbo · 02.01.2005

Ich möchte zwei Bilder nebeneinander haben und rechts daneben einen Text.
Bei einer Tabelle würde ich eine dreispaltige erstellen und einfach die Bilder und den Text in jeweils eine Spalte einfügen, soweit ich weiss geht es auch mit css, aber wie?
Kann jemand auf die schnelle mal was runtertippen, dass ich übernehmen kann?
edit: Es soll so ähnlich sein wie hier
danke

schildkroeter · 02.01.2005

Such doch mal im Quelltext von der Seite, wie die das da gemacht haben, und filter das heraus was du brauchen kannst...
Das ist ja kein Bild, dann werden die das wahrscheinlich auch mit CSS gemacht haben!

MfG, Jonny

Faser · 02.01.2005

Hallo,

ich würde es ersteinmal so probieren: Die beiden Bilder solltest du problemlos nebeneinander setzen können (also im Code einfach ohne Abtrennung untereinander schreiben), da "img" eigentlich ein Inline-Element ist. Wenn das nicht funktioniert musst du eins aus denen machen (das geht mit "display: inline;" in der CSS bzw. im style-Atrribut).

Anschließend machst du eine "div"-Box auf und definierst sie mit "float: right;", was den gleichen Effekt hat, wie wenn du bei einem Bild 'align="right"' angibst.

Habe es jetzt nicht getestet, aber prinzipiell sollte es so funktionieren.

Nickless · 02.01.2005

Faser schrieb:
Hallo,

ich würde es ersteinmal so probieren: Die beiden Bilder solltest du problemlos nebeneinander setzen können (also im Code einfach ohne Abtrennung untereinander schreiben), da "img" eigentlich ein Inline-Element ist. Wenn das nicht funktioniert musst du eins aus denen machen (das geht mit "display: inline;" in der CSS bzw. im style-Atrribut).

Anschließend machst du eine "div"-Box auf und definierst sie mit "float: right;", was den gleichen Effekt hat, wie wenn du bei einem Bild 'align="right"' angibst.

Habe es jetzt nicht getestet, aber prinzipiell sollte es so funktionieren.

<img> Kann definitiv nebeneinander gesetzt werden. Von float kann ich nur abraten. Bringt immer Probleme mit sich. Es gibt jede Menge andere Möglichkeiten: statt den <div>'s lieber <span> Container z.B., die Du wie Deinen Tabellenzellen verwenden kannst. Oder wie in Deinem Beispiel feste bzw. relative Positionierung der <div>'s (mit CSS style="position:relative; top:100px; left:300px") per CSS. Ganz altmodisch wäre das align-Attribut im <img> Tag (<img align="right">) Dann windet sich der Text um das rechts angeordnete Bild. Sieht aber nie so aus, wie man es will.

minbo · 04.01.2005

Es klappt bei mir nicht, der Text wird entweder über die Bilder gelegt oder darunter.
<div><div style="position: relative;left:0;">bilder</div><div style="position: relative;left:100;">text</div></div>
der Text wird nicht rechts neben den Bildern gelegt, sondern eine Zeile drunter.
Ich muss die beiden Bilder rechts nebeneinander haben und den Text rechts daneben.

Nickless · 04.01.2005

minbo schrieb:
Es klappt bei mir nicht, der Text wird entweder über die Bilder gelegt oder darunter.
<div><div style="position: relative;left:0;">bilder</div><div style="position: relative;left:100;">text</div></div>

Zeige bitte mal den vollständigen Code.

minbo schrieb:
Ich muss die beiden Bilder rechts nebeneinander haben und den Text rechts daneben.

Du meinst die Bilder links und den Text rechts oder?

minbo · 04.01.2005

ok gerne,
bedenke bitte, das ich eigentlich gar keine Ahnung davon habe und alles zusammen gewürfelt und für mich geändert habe.
der html-teil

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>W&auml;rmelehre</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<style type="text/css">
<!--
@import url(main.css);
-->
</style>
</head>
<body>
<div id="container">
<div id="head">
	<center>
		<h2>Überschrift </h2>
	</center>
</div>
<div id="menu">
<ul>
	<li><a href="index.htm">Wärmelehre</a></li>
	<li><a href="Energie.htm">Was ist Energie</a></li>
	<li><a href="#">W&auml;rmen & K&uuml;hlen</a></li>
	<li><a href="#">Messverfahren</a></li>	
	<li><a href="Kraftwerk.htm">Kraftwerk Mensch</a>
</ul>
</div>

<div id="submenu">
<ul>
	<li>&nbsp;<a href="energiearten.htm">Energieformen</a></li>
	<li>&nbsp;<a href="eumwandlung.htm">Energieumwandlung</a></li>
	<li>&nbsp;<a href="eeinheiten.htm">Energieeinheit</a></li>
</ul>
</div>

<div id="content">
<h1>Überschrift 2 </h1>
		<div style="position:absolute; top: 230;left:0">
		  <img src="bilder/eschoko.jpg">&nbsp;<img src="bilder/ewasser.jpg">
    	</div>
		  <div style="position: absolute; top:160px; left:310px;">
		    <p>text</p>
    </div>
</div>
<center>
  </p>
</center>
<b></b></div>
<div id="foot">
<p>Impressum</p>
</div>

</div>
</body>
</html>

und der css-teil

PHP:

body{
	color:black;
	background:#E3E2DC;
	font:13px verdana, sans-serif;
	margin:0px 0px 0px 0px;
}


#container{
	background:#C4C4C1;
	padding:0;
	margin:0% 0% 0% 0%;
}

#container head{
	text-align:center;
}


#container h2{
	margin-top:0px;
	padding-top:5px;
}

#head{
	height:60px;
	background:#A6A6A3;
}


#menu{
	margin:0;
	padding:0;
	border-top:1px solid white;
	border-bottom:1px solid black;
	text-align:center;
}

#menu ul{
	background:#003366;
	margin:0;
	padding:5px;
	list-style:none;
	white-space: nowrap;
}
#menu li{
	display:inline;
}

#menu a{
	color:#ffffff;
	background:#84847F;
	padding:2px 20px 2px 20px;
	border:1px solid black;
	font:bold 12px verdana, sans-serif;
	text-decoration:none;
	text-align:center;
}

#menu a:hover{
	color:#84847F;
	background:#ffffff;
	text-decoration:underline;
}

#menu a:active {
	color:#84847F;
	background:#ffffff;
	 
}
#submenu{
	margin:0;
	padding:0;
	border-top:1px solid white;
	border-bottom:1px solid black;
	text-align:center;
}

#submenu ul{
	height:20px;
	background:#333333;
	margin:0;
	padding:5px;
	list-style:none;
	white-space: nowrap;
}

#submenu li{
	display:inline
}
#submenu aktiv{
	color:#989878;
	background-color:#f98989;
}
#submenu a{
	color:#ffffff;
	background:#003366;
	padding:2px 20px 2px 20px;
	border:1px solid black;
	font:bold 12px verdana, sans-serif;
	text-decoration:none;
	text-align:center;
}
#submenu a:hover{
	color:#003366;
	background:#ffffff;
	text-decoration:underline;
}
#submenu a:active {
	color:#003366;
	background:#ffffff;
	 
}
#submenu p{
	font-weight:bold;
	font-size:12px;
	padding:10px 0 10px 0px;
	margin:0;
}

#content{
	height:480px;
	color:black;
	background:white;
	padding:40px 20px 20px 20px;
	margin:0 0 0 0px;
}

#content h1{
	margin:0 0 10px 0;
	padding:2px 0 2px 5px;
	font:bold 16px verdana, sans-serif;
	border-left:10px solid #000066;
	border-bottom:1px solid #000066;
}

#content h2{
	margin:25px 0 10px 0;
	padding:2px 0 2px 5px;
	font:bold 14px verdana, sans-serif;
	border-bottom:1px solid #003399;
}

#content h3{
	margin:25px 0 10px 0;
	padding:2px 0 2px 5px;
	font:bold 12px verdana, sans-serif;
	border-bottom:1px solid #003399;
}
#content p{
	padding:15px;
}

#innen{ 
	height:300px;
	margin:0 1% 0 1%;
}
#marginblock{
	margin:'margin-top' 'margin-right' 'margin-bottom'300px;
	height:350px;
	width:670px;
}
#foot{
	color:white;
	background:#98bed1;
	padding:0;
	margin:0;
	border-top:1px solid black;
}

#foot p{
	margin:0;
	padding:4px;
	text-align:right;
}

die diversen Höhenangaben, also Top-Werte, kommen daher, da ich bei gleicher Höhenangabe ein unterschiedliches Ergebnis hatte und damit rumgespielt habe, bis es bei safari passte, dafür dann nicht bei ie.

Nickless · 04.01.2005

oh man ... wenn die Bilder wenigstens width und height Angaben hätten ... Mal etwas grundsätzliches: position:absolute beudetet, dass Du die Bilder pixelgenau auf der Website positionieren kannst. Wenn es also über oder unter der Schrift liegt, verändere den Wert der Koordinaten für left und top so lange, bis es passt. Das selbe machst Du mit dem Text dann natürlich auch. Eine bessere Hilfe fällt mir im Moment nicht ein. Du müsstest Dich erst mal grundsätzlich mit HTML/CSS vertraut machen fürchte ich.

minbo · 04.01.2005

Die Angaben für die Bilder habe ich hinzugefügt ohne eine Verbesserung oder auch bloss eine Veränderung wahr zu nehmen.
Ich kann die Angaben verändern, dass ist nicht das Problem, mein Problem ist, dass die Sachen hauptsächlich auf den ie laufen sollen und dort und nur dort werden sie anders dargestellt als auf Firefox und Safari.
Also wie kann ich das Problem lösen, ich kann doch nicht für ein paar Seiten css/html komplett auswendig lernen...

minbo · 08.01.2005

Faser schrieb:
Hallo,

ich würde es ersteinmal so probieren: Die beiden Bilder solltest du problemlos nebeneinander setzen können (also im Code einfach ohne Abtrennung untereinander schreiben), da "img" eigentlich ein Inline-Element ist. Wenn das nicht funktioniert musst du eins aus denen machen (das geht mit "display: inline;" in der CSS bzw. im style-Atrribut).

Anschließend machst du eine "div"-Box auf und definierst sie mit "float: right;", was den gleichen Effekt hat, wie wenn du bei einem Bild 'align="right"' angibst.

Habe es jetzt nicht getestet, aber prinzipiell sollte es so funktionieren.

jetzt habe ich endlich mal deinen Tipp verfolgt und es hat sich für mich ideal hervorgetan. Funktionert auf allen Browsern. So sollte es sein.

Positionierung von Bildern und Text mit css

minbo

Aktives Mitglied

schildkroeter

Aktives Mitglied

Faser

Aktives Mitglied

Nickless

minbo

Aktives Mitglied

Nickless

minbo

Aktives Mitglied

Nickless

minbo

Aktives Mitglied

minbo

Aktives Mitglied