Hallo,
ich habe ein Bild und möchte dieses beschriften. Wie bekomme ich die Schrift denn innerhalb des Rahmens?
.meinbild {
border: gray solid thin;
padding: 10px;
}
Beschriftung
Hallo,
Meinbild
#header {
background-color:
text-align: center;
}
#titel {
color:white;
}
#middle {
text-align: center;
}
#box {
border-right: 15px solid;
border-left: 15px solid;
border-bottom: 15px solid;
border-color: blue;
}
Titel/Beschreibung
Informiere dich zu:
-> http://de.selfhtml.org/html/allgemein/grundgeruest.htm
-> http://de.selfhtml.org/css/formate/box_modell.htm
-> http://de.selfhtml.org/css/eigenschaften/rahmen.htm
Mein Code kommt auch durch den Validator:
-> http://validator.w3.org/check
Grüße Roman
Danke für die Antwort BHXW9! Allerdings suche ich etwas anderes, ich möchte nur das Bild und die darunter stehende Beschreibung umrahmen und nicht den Rahmen über die gesamte Breite des Bildschirms aufspannen.
Hallo,
dann mache es selber mit dieser Hilfe:
-> http://de.selfhtml.org/css/eigenschaften/positionier…
Damit das Beispiel möglichst anpassungsfähigt bleibt, habe ich auf Größenangaben verzichtet. Füge bei #box { noch die Größenangaben ein.
Viel Erfolg,
Roman
Das mit der Größenangabe habe ich natürlich schon probiert. Leider ohne Erfolg, da meine Bilder aus einer Datenbank kommen und unterschiedlich groß sind. Ich habe auch bereits versucht „“ statt " " zu verwenden, um den Rahmen an die Bildergröße anzupassen, allerdings will mein Bild in diesem Fall partout nicht in den Rahmen.
Hallo,
Das mit der Größenangabe habe ich natürlich schon probiert.
Woher soll ich das wissen?
Leider ohne Erfolg, da meine Bilder aus einer Datenbank kommen
Warum hattest du das bisher verschwiegen?
und unterschiedlich groß sind.
-> http://hoffmann.bplaced.net/hilfe.php?me=mehrcss&in=…
-> http://de.selfhtml.org/html/grafiken/einbinden.htm#b…
( DER WICHTIGSTE TEIL IST Beachten Sie:!!! )
Hilfreich?
Ich habe auch bereits versucht
„“ statt " " zu verwenden, um den Rahmen an die
Bildergröße anzupassen, allerdings will mein Bild in diesem
Fall partout nicht in den Rahmen.
span ist ein Inline-Element! da ich dir strict vorgegeben habe, kannst du das hier nicht so im body verwenden:
-> http://de.selfhtml.org/html/referenz/elemente.htm#span
Darum also bei mir das div um das span 
Grüße Roman
Danke, ich habe schon soviel gelesen und probiert. Ich denke CSS ist für mich einfach zu komplex. Nach einem langen Abend sieht mein Code (auf das Nötigste reduziert) nun so aus. Wenn ich die Box noch in die Mitte des Bildschirmes bringe, habe ich mein Ziel erreicht, „margin:0 auto“ funktioniert aber nicht. Wäre ja auch zu schön gewesen 
.box {
border: gray solid thin;
padding: 10px;
display:inline-block;
}
.bild {
margin-bottom:10px;
}
.text {
text-align: right;
}
Bildtext Zeile 1
Bildtext Zeile 2
Hallo,
noch gar nicht mal so alt und hätte man man über die SuFu finden können:
-> /t/bild-horizontal-und-vertikal-mittig-ausrichten/65…
Sehe das bitte mit dem Doctype nicht so als eine Kleinigkeit an:
-> http://de.wikipedia.org/wiki/Quirks-Modus#Quirks-Mod…
-> http://jendryschik.de/wsdev/einfuehrung/css/browserk…
Viele Grüße,
Roman
Habe „display:inline-block“ nun durch „dispay:table“ ersetzt, jetzt funktioniert auch „margin:0 auto“. Ich kann nicht einschätzen, ob die Lösung elegant ist, aber immerhin habe ich jetzt ein beschriftetes, mittig zentriertes Bild mit einem Rahmen.
Hallo,
wie gut funktioniert deine Lösung:
- verschiedene Browser, verschiedene Versionen?
- nimmst du nun einen Doctype, oder nicht?
- Verkleinerung des Browserfenstern, Vollbild?
-> http://de.selfhtml.org/css/eigenschaften/positionier…
inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem „inline replaced element“ wie img. Dieser Wert wird erst mit CSS 2.1 eingeführt.
und
table = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.
Mir ist der Unterschied nicht so klar, kann mir jemand das näher bringen?
Grüße Roman
ich habe ein Bild und möchte dieses beschriften. Wie bekomme
ich die Schrift denn innerhalb des Rahmens?
Hallo,
das funktioniert in HTML/CSS z.B. folgendermaßen:
Bildbeschreibung, hier ein Bild mit X’en
Dies ist nur eine von vielen Möglichkeiten, hier u.a. mit einem Float am rechten Rand. Du kannst float und margin auch weglassen, dann steht das Bild im normalen Textfluss.
Die meisten Lösungen funktionieren ähnlich: Um das Bild und seine Beschreibung wird ein DIV gelegt, das entsprechend formatiert werden muss (Rahmen, Position, etc.).
Die CSS-Regeln kannst/solltest du natürlich wieder eine Klasse oder ID auslagern.
Gruß
A.
Titel/Beschreibung
Hallo,
diese Lösung ist insofern unglücklich, als dass DIVs dazu da sind, um mehrere Inhaltselemente (z.B. Bild-Tag _und_ Text) zu gruppieren, nicht um sie um einzelne HTML-Objekte zu legen, was den Quelltext nur aufbläht und nicht notwendig ist.
Einzelobjekte kann man leicht auch über ihre eigene ID (und/oder eine Klasse) gestalten. Dafür muss und sollte man kein DIV darum herum legen.
Besser wäre meines Erachtens etwas der Art:
Beschriftung Bla
Das CSS müsste dann natürlich entsprechend angepasst werden. Ein ähnliches Beispiel dazu habe ich direkt auf die Ursprungsfrage gepostet.
Gruß
A.
->
http://de.selfhtml.org/css/eigenschaften/positionier…inline-block = (…)
und
table = (…)
Mir ist der Unterschied nicht so klar, kann mir jemand das
näher bringen?
Hallo,
Inline-Block habe ich, glaub ich, selbst noch nie verwendet, aber damit soll das Element faktisch inline bleiben, obwohl man ihm Attribute eines Blockelements zuordnen kann (width, height etc.).
display:table ist in Verbindung mit display:table-row, display:table-cell usw. interessant, um HTML-Elemente (hauptsächlich wohl div’s) optisch als tabellarische Inhalte darzustellen.
Gruß
A.
Hallo,
diese Lösung ist insofern unglücklich, als dass DIVs dazu da
sind, um mehrere Inhaltselemente (z.B. Bild-Tag _und_ Text) zu
gruppieren, nicht um sie um einzelne HTML-Objekte zu legen,
was den Quelltext nur aufbläht und nicht notwendig ist.
Ungefähr einmal im Jahr kommt es vor, dass hier jemand beweist, dass es doch noch Leute gibt, die den Sinn von HTML verstanden haben und beweisen, dass es doch viel einfacher ist, als die meisten vermuten.
Hat mir Spaß gemacht, Deine Antwort zu lesen.
Viele Grüße,
-Efchen