zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Rahmen um ein Bild (jpg, png, gif) ziehen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.07.2005, 19:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2005
Beiträge: 30
Don Stefano befindet sich auf einem aufstrebenden Ast
Standard Rahmen um ein Bild (jpg, png, gif) ziehen

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.
Angehängte Grafiken
Dateityp: jpg 1_792.jpg (113,4 KB, 449x aufgerufen)
Dateityp: jpg 2_821.jpg (115,9 KB, 445x aufgerufen)
Dateityp: jpg 3_129.jpg (107,2 KB, 444x aufgerufen)
__________________
Viele Grüße
Euer Don
http://www.profilingportal.de
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.07.2005, 19:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: Rahmen um ein Bild (jpg, png, gif) ziehen

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.07.2005, 19:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2005
Beiträge: 30
Don Stefano befindet sich auf einem aufstrebenden Ast
Standard

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...
__________________
Viele Grüße
Euer Don
http://www.profilingportal.de
Mit Zitat antworten
  #4 (permalink)  
Alt 30.07.2005, 19:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 30.07.2005, 20:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2005
Beiträge: 30
Don Stefano befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Viele Grüße
Euer Don
http://www.profilingportal.de
Mit Zitat antworten
  #6 (permalink)  
Alt 30.07.2005, 20:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 30.07.2005, 21:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2005
Beiträge: 30
Don Stefano befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
Viele Grüße
Euer Don
http://www.profilingportal.de
Mit Zitat antworten
  #8 (permalink)  
Alt 30.07.2005, 21:29
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

text-align beschreibt, wie der inline-Inhalt eines Blocks ausgerichtet wird.
Mit Zitat antworten
  #9 (permalink)  
Alt 30.07.2005, 21:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:22 Uhr.