Das hat ja auch nichts mit CSS oder HTML zu tun. Wenn du da mal ein Bild kopierst und dir das in einem Grafikprogramm anschaust, dann wirst du feststellen das der Rahmen in der Grafik drin ist:
Das mit den Padding ist richtig. Zumindest funktioniertt das bei mir so. Guck:
CSS: border:1px solid Black; padding:10px
Versuch 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;
}
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.
Cebra - 7. Mai. 2005, 11:19
Danke für den Tip !! Das mit dem Speichern und wieder Öffnen habe ich natürlich nicht probiert *mmh* Naja, dann werde ich da noch einmal rumprobieren. Kannst du mir auch weiterhelfen, wie ich die mittig bekomme?
Muh-Tiger - 7. Mai. 2005, 11:22
Hab den Kommentar noch mal erweitert. War noch nicht fertig mit tippen ;)
hmm.. das muesste durch verschachtelten klassen doch auch mit einer zu erreichen sein oder?
das da oben sieht etwas wie mit kanonen auf spatzen geschossen aus.. vor allem mit dem extra div um jedes bild aussenrum auchnoch..
Muh-Tiger - 7. Mai. 2005, 22:06
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.
[ohne jetzt nachzusehen, wie die in dem fall wirklich verwendeten klassen heißen] - nehmen wir einfach an, alle beiträge hätte die klasse "story". Also definierst du die eigenschaften für story wie gewohnt:
.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.
Muh-Tiger - 8. Mai. 2005, 13:56
Ich denk nicht zu kompliziert, ich drück mich nur schei... viel zu kompliziert aus ;)
.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.
ah - links/rechts/mitte hatte ich glatt uebersehen.. die rahmen alleine haette man mit
.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.
Cebra - 9. Mai. 2005, 13:45
Hallo, nochmals vielen lieben Dank für eure Hilfe. Das mit den Rahmen habe ich nun hinbekommen - zwar die "konventionelle" Methode, aber das geht fix nachdem ich es einmal raus hatte und mit dem anderen probiere ich noch ein bissel rum.
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.