Rahmen um ein Bild (jpg, png, gif) ziehen

Don Stefano · #1 (**permalink**) 30.07.2005, 19:05

Hallo zusammen,

nun habe ich ein Problem was ich nicht lösen kann.

Ich habe in meinem Inhalts-Container einfach eine Graphik eingefügt. Diese Graphik möchte ich mittig zentrieren und dann einen dünnen Rahmen um sie herum setzen:

Dazu habe ich folgende Klasse definiert:

Code:

.zentriert2 {text-align:center; margin-top:1em; margin-left:auto; margin-right:auto; padding:0; border-width:0.1em; border-color:darkred; border-style:solid;}

Leider ist der Rahmen nun aber nicht um das Bild sondern füllt die ganze Breite des Containers aus. (siehe 1.jpg)

Also habe ich die Klasse geändert, indem ich ihr ein width:0; hinzugefügt habe:

Code:

.zentriert2 {text-align:center; margin-top:1em; margin-left:auto; margin-right:auto; padding:0; border-width:0.1em; border-color:darkred; border-style:solid; width:0;}

Danach klappte es im Internetexplorer auch und war so wie ich es haben will (siehe 2.jpg).

Der FIrefox schiebt nun aber die gesamte Graphik nach rechts aus dem Bild (siehe 3.jpg). Ich vermute das könnte daran liegen, dass der gesamte Inhaltscontainer in dem auch das Bild ist mit float-right rechts positioniert ist.

Dennoch. Es muss doch wohl möglich sein, einen einfachen Rahmen um ein Bild zu ziehen, ohne dass sich dieser ausdehnt oder aus dem Bild schiebt.

Für Hilfsstellungen wäre ich euch sehr verbunden.

fricca · #2 (**permalink**) 30.07.2005, 19:29

Zitat:

Zitat von Don Stefano

Ich habe in meinem Inhalts-Container einfach eine Graphik eingefügt. Diese Graphik möchte ich mittig zentrieren und dann einen dünnen Rahmen um sie herum setzen:

Dazu habe ich folgende Klasse definiert:

Welchem Element hast du deine Klasse zugewiesen - also: wie sieht das HTML dazu aus?

Grüße
fricca

PS: Kannst du deine Screenshots mal bitte auf eine sinnvolle Größe beschneiden.

Don Stefano · #3 (**permalink**) 30.07.2005, 19:41

Im folgenden der HTML Code, der das Bild einfügt und die Klasse "zentriert2" verwendet.

Code:

<h3>Beispielabbildung Logisches Denkverm&ouml;gen:</h3>

<p class="zentriert2">[img]beispielaufgabeint.png[/img]</p>



<h2>A2. Mathematisches Verst&auml;ndnis</h2>

Ich wußte gar nicht, dass die Bilder so angezeigt werden, ich dachte man müßte draufklicken um sie zu sehen. Ich ändere sie gleich...

fricca · #4 (**permalink**) 30.07.2005, 19:46

Dacht ich mir's doch...
Du brauchst um das Bild herum kein weiteres Element (p = paragraph = Text!absatz)
Gib dem img-Element direkt den Rahmen.
img-Elemente sind inline-Elemente und werden per text-align:center im Elternelement zentriert.

[In deinem Konstrukt wird also gerade das Bild innerhalb des p-Elementes zentriert und das p-Element als Blockelement nimmt die ganze zur Verfügung stehende Breite ein (was hast du dir bei width:0 gedacht?)]

Grüße
fricca

Don Stefano · #5 (**permalink**) 30.07.2005, 20:16

So, die Screenshots habe ich mal angepasst. Sah ja wirklich schrekclich aus.

Bei der width:0 habe ich mir gar nichts gedacht *g* Einfach herumprobiert. Witzig dass es im Internet Explorer sogar klappte.

Nunja, nun weiß ich ja woran es liegt. Vielen Dank mal wieder dafür! Fricca Du bist der Beste

ABER: Wie weise ich dem image Element denn nun den Rahmen zu, den ich in "zentriert2" definiert habe?

Oder muss ich das dann für alle img Tags definieren? Das will ich eigentlich nicht, da manche Bilder auch keinen Rahmen erhalten sollen.

mit

Code:

[img]beispielaufgabeint.png[/img]

klappt das jedenfalls nicht.

Bitte nicht vergessen, dass ich mich erst seit etwa 5 Tagen mit CSS beschäftige.

fricca · #6 (**permalink**) 30.07.2005, 20:44

Zitat:

Zitat von Don Stefano

mit

Code:

[img]beispielaufgabeint.png[/img]

klappt das jedenfalls nicht.

Bitte: poste Code-Ausschnitte, die dein Problem nachvollziehbar machen.
Welche Eigenschaften hast du in der Klasse deklariert?
Was genau klappt nicht?

Hier mal zwei Möglichkeiten, einmal mit Bild als Inline-Element (v1) einmal als Block-Element (v2).
In deinem Fall würde ich eher die zweite Variante bevorzugen.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>xxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	* {
			margin:0;
			padding:0;
			}

	div#v1 {
		text-align:center; /* zentriert das img-Element (inline) */
		border:1px solid yellow;
		}

	img.bild1 {
		border: 1px solid red;
		}

	div#v2 {
		border:1px solid blue;
		text-align:center; /* zentriert das img für IE im Quirks-Modus */
		}

	img.bild2 {
		display:block;
		margin:0 auto; /* zentriert das img-Element (block) */
		border:1px solid green;
		}

</style> 
</head>


<body>
 <div id="v1">[img]test.png[/img]</div>

 <div id="v2">[img]test.png[/img]</div>

</body>   
</html>

Das div um die bilder herum brauchst du nicht einfügen - ist hier nur zu "Demonstrationszwecken"; du kannst das text-align:center bereits deinem Inhalts-Container geben. Dann müsstest du für die Text-Elemente (hx, p) jeweils wieder text-align:left angeben.

Grüße
die fricca

Don Stefano · #7 (**permalink**) 30.07.2005, 21:22

Nochmals vielen herzlichen Dank und sorry, dass ich Dich schon mit falschem Geschlecht ettiketiert habe. Du bist DIE Beste

Aber solche Stereotype (Programmieren = Mann) sind einfach drin (und das obwohl ich selbst 2 Programmiereinnen kenne).

Es klappt jetzt jedenfalls. Mein letzter Beitrag bezog sich lediglich auf die Syntax (also wie oder wo ich dem img-Tag die Klasse mitteile).

Zuerst klappte es wohl nicht, da in der Klasse noch paddings und margins standen.

Was ich aber noch nicht verstanden habe. Wieso kann ich dieser Klasse nicht die Anweisung geben "text-align:center;" ? Das ignorieren die Browser. Es wird erst dann zentriert, wenn ich das text-align:center; dem Container zuordne in dem das Bild ausgegeben wird.

Code:

#container /*enthaelt dann alle weiteren Boxen*/
	{
		margin:0.1em auto;
		width:56em;
		text-align:left;
    background-color:#D8D8D8;
	}

zusammen mit

Code:

.zentriert2 {text-align:center; border-width:0.1em; border-color:darkred; border-style:solid; }

funktioniert also nicht.

Code:

#container /*enthaelt dann alle weiteren Boxen*/
	{
		margin:0.1em auto;
		width:56em;
		background-color:#D8D8D8;
text-align:center;
	}

zusammen mit

Code:

.zentriert2 { border-width:0.1em; border-color:darkred; border-style:solid; }

klappt dann hingegen.

Jedesmal mit folgendem Img-Tag:

Code:

 [img]beispielaufgabeint.png[/img]

Geht die "align" Definiton des übergeordneten Elements also immer vor? Das ist doch eigentlich unpraktisch, oder ? Warum kann ich nicht in einzelnen Klassen definieren, dass davon dann eine Ausnahme gemacht werden soll?

IChao · #8 (**permalink**) 30.07.2005, 21:29

text-align beschreibt, wie der inline-Inhalt eines Blocks ausgerichtet wird.

fricca · #9 (**permalink**) 30.07.2005, 21:42

Zitat:

Zitat von Don Stefano

Warum kann ich nicht in einzelnen Klassen definieren, dass davon dann eine Ausnahme gemacht werden soll?

Schau dir bitte mein obiges Code-Beispiel nochmal an.
text-align richtet inline-Inhalt innerhalb eines Block-Element aus (also z.B. Text innerhalb eines p-Elements)
img-Elemente sind zunächst inline-Elemente - ergo: Ausrichtung per text-align im Elternelement.

Wenn du das Bild jedoch zum Block-Element machst (siehe oben v2), dann zentrierst du es, indem du dem Bild selbst margin:0 auto; zuweist.
[Nur der IE im Quirks-Modus kapiert das nicht, dafür richtet er fälschlicherweise Block-Elemente so aus, wie Inline-Elemente ausgerichtet werden: per text-align im Elternelement]

Grüße
fricca

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild mit Rahmen aus Bild	Holger (HMR)	CSS	3	21.05.2008 12:55
Verflixter Rahmen um ein Bild	Webelix	CSS	6	22.07.2007 12:32
Bilder und Bildqualität im Web - Entscheidungskriterien und Tricks?	andir	Grafik, Design, Typografie	23	04.06.2007 11:01
Einbinden von PNG oder GIF Bild im Header	deepblue	CSS	2	24.02.2007 00:04
Bild (gif, oder jpg) als Hintergr. --> verlinkt ?	ITWC	(X)HTML	15	19.08.2006 14:44