Bilder horizontral zentrieren
0 0 0 
Felix Riesterer
0
Bilder horizontral zentrieren
Hallo ihr Lieben,
Ich habe seit einem halben Jahr nix mehr mit HTML und Css gemacht, deshalb bin ich etwas eingerostet.
Ich versuche gerade ein Bild in meiner Inhaltsbox zu zentrieren und es funktioniert nicht so wie ich es im Tutorial gelesen hab, wahrscheinlich ist da irgendwo ein total sinnloser Fehler, doch ich finde ihn einfach nicht.
die Url zu der Seite ist:
http://www.personal.uni-jena.de/~b2stch/
Das CSS hier:
http://www.personal.uni-jena.de/~b2stch/bilder/ratte.css
und der relevante Css Ausschnitt sollte dieser hier sein:
div#Inhalt img{
border:0;
text-align:center;
}
Angelehnt an dieses Beispiel müßte doch meine Grafik (z.B. auf der Startseite) eigentlich zentriert sein?
Ich würde mich freuen wenn ihr mir dabei weiterhelfen könntet.
Dankeschön!
B-ellanna
-
Hej,
> div#Inhalt img{ > border:0; > text-align:center; > }Du möchtest also den Inhalt _in_ deinem <img /> zentrieren?
Angelehnt an dieses Beispiel müßte doch meine Grafik (z.B. auf der Startseite) eigentlich zentriert sein?
Du hast es aber nicht an das Beispiel angelehnt ;). Mit text-align zentrierst du den Inhalt _innerhalb_ des definierten Elements. In dem Fall müsstest du also #Inhalt dieses text-align geben. Unschön daran ist natürlich dass auch alle Kindelemente und Textknoten dieses Verhalten erben. Wenn du an deiner html-Struktur nichts mehr ändern möchtest, musst du das <img /> zu einem Block-Element machen und es mittels margin positionieren.
#Inhalt img{ border: 0; display: block; margin: 0 auto; }Hab jetzt keinen IE zur Hand. Ich meine, mich aber erinnern zu können, dass er wiederum nicht damit zurecht kommt und mal wieder eine Extrabehandlung benötigt. Bin mir aber nicht ganz sicher.
Achso: Es ist eigentlich nicht nötig, dass du im CSS eine ID in der Form element #id einsetzt, da die ID in _einem_ html-Dokument schließlich eindeutig sein soll. Es hätte höchstens Sinn, wenn du das CSS dokumentübergreifend einsetzt und die IDs in verschiedenen Dokumenten in verschiedenen Kontexten vorkommt. Dann solltest du dir aber überlegen ob es nicht eigentlich eher eine Klasse ist. War aber auch nur eine Anmerkung, weil falsch ist es AFAIK nicht.
Beste Grüße
Biesterfeld--
Art.1: Et es wie et es
Art.2: Et kütt wie et kütt
Art.3: Et hätt noch immer jot jejange
Das Kölsche Grundgesetz-
Hallo,
Hab jetzt keinen IE zur Hand. Ich meine, mich aber erinnern zu können, dass er wiederum nicht damit zurecht kommt und mal wieder eine Extrabehandlung benötigt. Bin mir aber nicht ganz sicher.
Der 6-er dürfte im standardkonformen Modus keine Probleme machen.
mfg. Daniel
-
-
Hallo.
div#Inhalt img{
border:0;
text-align:center;
}
Angelehnt an dieses Beispiel müßte doch meine Grafik (z.B. auf der Startseite) eigentlich zentriert sein?Du definierst hier den Inhalt des <img>Tag als zentriert (was Quatsch ist)..
Es muss eher so sein:#Inhalt {text-align:center;}
img {border:0px;}Im Quelltext dann:
<div id="Inhalt"><img src="" /></div>Alles klar?
MfG.
-
Du definierst hier den Inhalt des <img>Tag als zentriert (was Quatsch ist)..
Es muss eher so sein:#Inhalt {text-align:center;}
img {border:0px;}Im Quelltext dann:
<div id="Inhalt"><img src="" /></div>Alles klar?
Nö, nicht alles klar. So wird doch auch mein Text zentriert oder? Wie der Poster vor dir auch schon geschrieben hatte.
Ich mag gerne meinen Text Block oder links und meine Bilder zentriert.
Sehr ich das also richtig das ich den inhalt des img nciht zentrieren kann weil das img selber der inhalt ist den ich zentrieren möchte?
Die Frage ist jetzt also wie mache ich mein img zu einem positinierbaren Block Element, ich änder auch was am Html falls nötig, das ist mir egal.
Was der Poster vor dir geschrieben hat versteh ich halt leider net.
Hm.
Danke für die Antwort zu früher Stunde.
B-ellanna-
Hallo.
Was der Poster vor dir geschrieben hat versteh ich halt leider net.
Hm.Dann schau mal was Biesterfeld geschrieben hat.. (Stichwort:margin:auto;} und versuch es damit..
<img> "hat keinen Inhalt", es ist der Inhalt.
Mfg.
-
(Stichwort:margin:auto;}
Heißt das, dass margin "auto" ein Element zentriert? Und wie mach ich aus einem img ein Block Element?.
Ich werde es zwar nicht mehr verwenden da Herr Riesterer's Tipp schon zum Ziel geführt hat, aber man lernt ja nie aus.
Danke!
B-ellanna-
Hej,
(Stichwort:margin:auto;}
Heißt das, dass margin "auto" ein Element zentriert?http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_right
Und wie mach ich aus einem img ein Block Element?.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
Beste Grüße
Biesterfeld--
Art.1: Et es wie et es
Art.2: Et kütt wie et kütt
Art.3: Et hätt noch immer jot jejange
Das Kölsche Grundgesetz
-
-
-
Hej,
Nö, nicht alles klar. So wird doch auch mein Text zentriert oder? Wie der Poster vor dir auch schon geschrieben hatte.
[Der|Die|Das] Poster hat nennt sich hier übrigens Biesterfeld ;)
Du könntest natürlich bei dem hier diskutierten Vorschlag für die einzelnen Paragraphen die Ausrichtung rückgänig machen:#Inhalt p { text-align:justify; }Sehr ich das also richtig das ich den inhalt des img nciht zentrieren kann weil das img selber der inhalt ist den ich zentrieren möchte?
Jau.
Die Frage ist jetzt also wie mache ich mein img zu einem positinierbaren Block Element, ich änder auch was am Html falls nötig, das ist mir egal.
Dann nimm bitte die Lösung von Felix.
Was der Poster vor dir geschrieben hat versteh ich halt leider net.
Was genau hast du an
#Inhalt img{ border: 0; /* mache das Element visuell * zu einem Blockelement */ display: block; /* Weise den links und rechts * zur Verfügung stehenden Platz * gleichmäßig zu */ margin: 0 auto; }nicht verstanden?
Beste Grüße
Biesterfeld--
Art.1: Et es wie et es
Art.2: Et kütt wie et kütt
Art.3: Et hätt noch immer jot jejange
Das Kölsche Grundgesetz-
Hallo,
Was genau hast du an
#Inhalt img{
border: 0;
/* mache das Element visuell
* zu einem Blockelement */
display: block;Das hier. Jetzt geht mir das Licht auf! Danke. B-ellanna
/* Weise den links und rechts
* zur Verfügung stehenden Platz
* gleichmäßig zu */
margin: 0 auto;
}> > nicht verstanden?
-
-
-
-
Liebe(r) Bellanna,
wie wäre es, wenn Du das <img /> semantisch in ein <p> verpackst, welches Du dann mittels einer eigenen Klasse mit text-align:center formatierst? Dann wird Dein Bild zentriert und der Code ist schon ein gutes Stückchen semantischer!
Wenn Du dann dem Bild noch eine kleine Unterschrift gönnst, dann ist es meiner Meinung nach kaum mehr zu toppen...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo,
wie wäre es, wenn Du das <img /> semantisch in ein <p> verpackst, welches Du dann mittels einer eigenen Klasse mit text-align:center formatierst? Dann wird Dein Bild zentriert und der Code ist schon ein gutes Stückchen semantischer!
Ja das wäre gut, und so versteh ich das schon eher. Und so funktioniert es auch sehr schön.
Wenn Du dann dem Bild noch eine kleine Unterschrift gönnst, dann ist es meiner Meinung nach kaum mehr zu toppen...
Das ist mir allerdings zu aufwändig, da die Seite nur Bilder präsentieren soll, wärs ein Haufen Arbeit für Jedes Bild was extra zu schreiben. Wenn ich mal eine Seite mit wenig Bildern mache denk ich hoffentlich wieder an deinen Tipp
Also vielen Dank.
jetzt siehts so aus wie ich möchte!
B-ellanna (Sie)
-
-
Hallo Bellanna,
und der relevante Css Ausschnitt sollte dieser hier sein:
div#Inhalt img{
border:0;
text-align:center;
}heißt also:
jeder Inhalt eines Bildes, das sich im div mit der id=Inhalt befindet, soll zentriert werden? nee, bestimmt nicht. du müsstest nur zwei anweisungen machen:div#Inhalt img {
border:0;
}und
div#Inhalt {
text-align:center;
}Mit freundlichen Grüßen,
André--
