Stylesheet - Rahmen um Grafiken
Hallo, ich möchte gerne um meine gesamten Grafiken in meinem Blog einen Rahmen ziehen, der ein wenig Abstand zum Bild hat. Bisher habe ich den Rahmen ansicht hinbekommen, aber der Innenabstand mit dem Befehl "padding" funktioniert nicht. Am Ende sollte es beispielsweise so aussehen: http://traeume.twoday.net/topics/Fotos/.
Des Weiteren hätte ich die Bilder, v.a. die kleineren, gerne mittig und nicht linksbündig. Aber mit dem Befehl "align" funktioniert das nicht so ganz. Kann ich das ggf. auch im Stylesheet einstellen? (Beispiel auch auf im o.g. Blog).
Vielleicht kann mir jemand aus seinem Stylesheet den entsprechenden Code zusenden oder mir so weiterhelfen. Ich verzweifel :-( ... vielen lieben Dank.
Des Weiteren hätte ich die Bilder, v.a. die kleineren, gerne mittig und nicht linksbündig. Aber mit dem Befehl "align" funktioniert das nicht so ganz. Kann ich das ggf. auch im Stylesheet einstellen? (Beispiel auch auf im o.g. Blog).
Vielleicht kann mir jemand aus seinem Stylesheet den entsprechenden Code zusenden oder mir so weiterhelfen. Ich verzweifel :-( ... vielen lieben Dank.
Cebra - 7. Mai. 2005, 10:37 - Rubrik: Macros und Skins
Höhö....
Das mit den Padding ist richtig. Zumindest funktioniertt das bei mir so. Guck:
CSS:
border:1px solid Black; padding:10pxVersuch mal im Stylesheet ganzh am Ende des CSS eine Zeile mit:
img {border:1px solid Black; padding:10px}
einzufügen. Dann müsste es klappen. Gilt dann aber auch für ALLE Bilder.
[EDIT]
Ich hab grade mal in dein Blog geschaut. Also wenn du verhindern möchtest das ALLE Bilder so einen Rahmen bekommen, dann musst du im CSS eine Klasse definieren:
.links {
float:left;
margin: 3px 10px 10px 0;
border: 1px solid Black;
Padding: 10px;
}
.rechts {
float:right;
margin: 3px 0 10px 10px;
border: 1px solid Black;
Padding: 10px;
}
.mitte {
display:block;
margin:0px auto;
border: 1px solid Black;
Padding:10px;
}
img {
border:0px;
}
Die letzte Teile ist wichtig damit nicht alle Bilder einen Rahmen bekommen.
Wenn du nun im Beitrag ein Bild einbindest, dann verpasst du ihm eine CSS-Klasse:
<div class="links">< % image name="bildname" %></div>
So müsste es eigentlich klappen. Zumindest mache ich es bei mir im Blog so, nur mit dem Unterschied das ich keine Rahmen um die Bilder habe.
das da oben sieht etwas wie mit kanonen auf spatzen geschossen aus.. vor allem mit dem extra div um jedes bild aussenrum auchnoch..
Der Div-Tag ist nötig um mit den < % image % >-Macro arbeiten zu können. Denn soweit ich weiß, kann man den Macros keine CSS-Klasse zuordnen.Den Macros kann man doch CSS-Klassen zuordnen. Habs grade mal ausprobiert. Es reicht
< % image name="bildname" class="links" %>zu notieren. Der DIV-Tag kann also weg.Das mit den "verschachtelten" Klassen verstehe ich nicht. Also was du damit meinst. Man kann einen Bereich ja nur rechts- linksbündig oder halt mittig ausrichten.
Da ich bei jeder Klasse einen anderen Rand (margin) habe, kann ich das auch nicht zusammenfassen. Mit der border ebenso. Mit
img {border:1px solid Black}ordne ich ja allen Bildern (zB auch dem Weblog-Icon) einen Rahmen zu. Es sollen aber ja nur die Bilder in den Beiträgen Rahmen haben, nicht die Bilder ausserhalb von Beiträgen.Wenn du die Verschachteltelung von HTML-Elementen meinst (
div img {...}bzw.div > img {...}), dass wäre durchaus eine Möglichkeit. Hat aber den Nachteil das mit einem Layout-Wechsel auch die DIV-Tags wechseln.Die Methode oben ist etwas umständlicher, dafür aber auch flexibler. Sollte man einmal ein anderes Layout verwenden, muss man nicht befürchten das die alten Einträge vollkommen zerschossen dargestellt werden.
du denkst zu kompliziert :)
.story { ... }
und kannst dann folgende unterklasse hinzufügen:
.story img { border: 1px solid #000; }
...dann wirkt sich das nur auf bilder aus, die innerhalb der klasse story stehen.
.story img {...} funktioniert leider nicht. Da die Bilder nocheinmal eine Eben tiefer in .storyContent stehen. Oder auch nicht.
Zumindest hat es bei mir nicht geklappt HTML-Elementen auf diesen Weg Eigenschaften mitzugeben.
Aber das war auch weniger der Punkt meiner Kritik. So lange ich die Bilder alle mittig haben will, kann ich das mit .story img {margin:0px auto} hinbekommen.
Wenn ich aber ein Bild links, eins rechts haben will, dann komme ich mit .story img {...} nicht weit.
Von daher ist meine Methode wahrscheinlich die aufwendigste. Da es sich aber um grundlegendestes CSS handelt (einfache Klasse ohne Verschachtelung/Vererbung/Schnickschnack), dafür auch die "einfachste". Bitte auch nicht vergessen das man bei verschiedenen Browsern (IE6.0; IE5.5 for Mac; Opera; FireFox; Safari; Avant-Browser; Mosaik; usw) schnell mal ins schleudern kommt wenn man was anderes verwendet als eine einfache Klasse.
.story img { .. }auch drumrum bekommen.. die positionierung geht nicht automatisch wenn mich nich alles taeuscht.. das muss in der tat irgendwie anders gemacht werden.. koennte aber theoretisch auch direkt am bild mit float:right und float:left gemacht werden.. ich weiss aber nich obs da auch ne einstellung fuer mittig gibt ;)beim IE muss man bei den rahmen uebrigens darauf achten, dass man im standardscompliancemode ist.. sonst macht er bei bildern kein padding.. ob da noch ein objekt dazwischen is, is voellig egal.. da muesste man
.story > img { .. }angeben - nur dann wird vorrausgesetzt, dass die beiden objekte direkt ineinander verschachtelt sind.. ohne was dazwischen.