Foto neben Text

ECHT_nordisch · 17.04.2008, 09:57

Ich bin gerade dabei, für unsere Ortschaft einen neuen Webauftritt zu gestalten. Jetzt würde ich gerne, alle Mitglieder des Rates auf einer Seite präsentieren. Ich habe mir dazu folgende Variante ausgedacht:

HTML-Code:

<div class="rat">
<div class="rat-hl">Name</div>
<div class="rat-sl">Fraktion</div>
<div class="rat-t">Ortsteil<br>PLZ & Ort</div>
</div>

Die CSS Einstellungen sehen so aus:

HTML-Code:

.rat
	{
		background-repeat: no-repeat;
		width:490px;
		height: 130px;
		float: center;
		position: relative;
		background-image: url('rat.jpg')
	}


.rat-hl
	{
		position: relative;
		top: 8px;
		font-size: 16px;
		font-weight: bold;
		width: 440px;
		left: 120px;
		float: left;
		color: #628799;
		font-family: Arial, Helvetica, Sans-Serif;
	}



.rat-sl
	{
		position: relative;
		top: 13px;
		font-size: 12px;
		font-weight: bold;
		width: 440px;
		left: 120px;
		float: left;
		color: #F57C14;
		font-family: Arial, Helvetica, Sans-Serif;
	}

.rat-t
	{
		position: relative;
		top: 18px;
		width: 420px;
		left: 120px;
		float: left;
		line-height: 18px;
		color: #333333;
	}

Jetzt würde ich gerne, genau neben den Text noch ein Foto legen. Kann mir jemand sagen, wie ich das am besten mache? Ich hab gestern schon ne ganze Stunde getüffelt, aber entweder rutschte das Foto unter den Text oder komplett daneben.

Bin für jeden Hinweis dankbar.

Ach ja, das ganze würde dann ausehen, wie in der Grafik:

jayjay · 17.04.2008, 10:12

versuch mal sowas

Code:

.rat {
	width: 490px;
	height: 130px;
	float: center;
	position: relative;
	background-image: url(images/rat.jpg);
	background-position: 10px 50%;
	background-repeat: no-repeat;
}

Singal · 17.04.2008, 10:42

Habt Ihr beide Euch schon einmal über float:center; Gedanken gemacht?!

Ich hab´s mal kurz versucht und das ist dabei raus gekommen:

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>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {font-family: Arial, Helvetica, Sans-Serif;}
.bild {float:left; height:120px; width:120px; margin:5px 15px 5px 10px; background-color:#990000;}
.rat {  background-repeat: no-repeat;
		background-color:#CCCCCC;
		border:1px solid #000000;
		width:490px;
		height: 130px;
		background-image: url('rat.jpg');
	}
	
.rat-hl {font-size: 16px;
		font-weight: bold;
		color: #628799;
		margin-top:5px;
		line-height:16px;
	    }

.rat-sl	{
		font-size: 12px;
		font-weight: bold;
		color: #F57C14;
		margin:10px 0;
	}

.rat-t {
		font-size:12px;
		line-height:18px;
		color: #333333;
	}
-->
</style>
</head>

<body>
<div class="rat">
<div class="bild"></div>
<div class="rat-hl">Name</div>
<div class="rat-sl">Fraktion</div>
<div class="rat-t">Ortsteil<br>PLZ & Ort</div>
</div>
</body>
</html>

Anbei noch Screenshots der Browserdarstellungen.

jayjay · 17.04.2008, 11:07

stimmt, hab das float: center auch übersehen

Rizzo · 17.04.2008, 11:24

Wie wäre es denn, statt viel zu floaten und eine DIV-Suppe zu fabrizieren, einfach die Personen-Info in ein dafür vorgesehenes address zu packen (da kann man auch mit span und Klassen arbeiten) und die Bilder dann per align="left" links vom Text zu platzieren? Horizontale und vertikale Abstände kann man über hspace und vspace definieren.

Hier findet man Beispiele dazu.

webcreate · 17.04.2008, 11:49

Ich würde hier kein Address nutzen ... auch wenn man es könnte.

My2Cent

HTML-Code:

<head>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.person{
		background: #ccc;
		width: 450px;
		min-height:100px;
		height:auto !important; 
		height:100px;
		padding: 10px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 1em;
	}
	.person img{
		float:left;
		width: 75px;
		height: 100px;
		margin-right: 15px;
	}
	.person h1{
		font-weight: 700;
		font-size: 1em;
		margin-bottom: 5px;
		color: #628799;
	}
	.person h2{
		font-weight: 700;
		font-size: .7em;
		margin-bottom: 5px;
		color: #f57c14;
	}
	.person p{
		font-size: .6em;
		line-height: 1.6;
		color: #000;
	}
	</style>
</head>

<body>
	<div class="person">
		<img src="bild.jpg" widht="75" height="100" alt="Foto" />
		<h1>Name</h1>
		<h2>Fraktion</h2>
		<p>Ortsteil<br />
		Plz und Ort</p>
	</div>
</body>

ECHT_nordisch · 17.04.2008, 13:25

Danke an alle! Ihr habt mir echt weitergeholfen! Genauso wollt ich das haben! Perfekt!

th2409 · 24.04.2008, 08:31

Das Problem ist nun zwar geklärt, aber da es mittendrin als Idee mal auftauchte:
float: center ist keine zulässige Option!

ECHT_nordisch · 24.04.2008, 11:08

Zitat:

Zitat von th2409

Das Problem ist nun zwar geklärt, aber da es mittendrin als Idee mal auftauchte:
float: center ist keine zulässige Option!

Danke für den Hinweis!

Rinaldo · 24.04.2008, 16:37

Hatte Singal doch schon oben bemerkt...