Weisser Bilderrahmen - Die olle Kamelle - aber ich kann nix finden dazu :(

[Ogi]

Nabend allerseits.

Folgendes: Ich möchte gerne auf meiner Seite um alle Bilder im Content-Bereich so eine 10 px starke weisse Kante und um die rum nochmal ne graue 1px-Linie - soll halt so die Foto-Optik simulieren ein wenig.

Hab momentan im css:

img {
   padding: 5px;
   background: #fff;
  border: 1px solid #ccc;
  border-style: solid;
   margin: 10px;
  max-width: 100%;
}

Aber das verursacht irgendwie nur, dass alle Bilder jetzt zwar eine 1px starke Linie haben und jeweils 10 px eingerückt sind, aber weiss is da nix. Ausgemittelt sind die auch nich.

Hat vermutlich was mit dem restlichen Stylesheet zu tun... bin da nicht so fit...
Hier reinposten wäre etwas viel ....

Irgendjemand eine Idee? Zu finden ist die Seite im Rohbau momentan hier:

www.mightymaks.de/wp

O.

[Bevan]

Hallo!

img {
   padding: 5px;
   background: #fff;
  border: 1px solid #ccc;
  border-style: solid;
   margin: 10px;
  max-width: 100%;
}

"border-style: solid" ist da zweimal vorhanden (wenn auch einmal nur in Kurzform). naja, macht ja nix :-P

Am besten wird sein du bindest das Bild in einen weiteren Tag ein. Ich halte einen <span>-Tag für geeignet.

Also z.B. so:
<span style="border: 1px solid #C0C0C0">
<img src="Bild.jpg" alt="" style="border: 10px solid #FFFFFF" />
</span>

die Angabe eines Wertes für margin hat keinen Einfluss auf den Rahmen.

Michael

[Ashura]

Hallo Bevan.

Am besten wird sein du bindest das Bild in einen weiteren Tag ein.

Wozu?

Wenn er das überflüssige border-style: solid; entfernt, funktioniert es einwandfrei.

Auch ohne zusätzliches Element. ;)

Gruß, Ashura

[Bevan]

Wenn er das überflüssige border-style: solid; entfernt, funktioniert es einwandfrei.

Ja, ein Rahmen wird dann angezeigt aber doch nur der dünne und darum ist ein Abstand von 10 Pixeln festgelegt. Wenn ich es richtig verstanden habe möchte er erst um das Bild einen weißen Rahmen und darum dann noch den dünnen, grauen.

[Ashura]

Hallo Bevan.

Ja, ein Rahmen wird dann angezeigt aber doch nur der dünne (...)

Richtig, ein padding von 5px.

und darum ist ein Abstand von 10 Pixeln festgelegt.

Das margin hat an sich hiermit nichts zu tun.

Wenn ich es richtig verstanden habe möchte er erst um das Bild einen weißen Rahmen

-> padding

und darum dann noch den dünnen, grauen.

-> border

Gruß, Ashura

[Ogi]

Wenn ich es richtig verstanden habe möchte er erst um das Bild einen weißen Rahmen

-> padding

und darum dann noch den dünnen, grauen.

-> border

Richtig verstanden. :) Beide.

O.

[Ogi]

Ok, also ich poste mal...

  
body {  
 font-size: 62.5%; /* Resets 1em to 10px */  
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;  
 color: #333333;  
 text-align: center;  
 margin: 0;  
 padding: 0;  
 }  
  
h1, h2, h3 {  
 font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;  
 font-weight: bold;  
 }  
  
h1 {  
 font-size: 4em;  
 text-align: center;  
 padding-top: 70px;  
 margin: 0;  
 }  
  
h2 {  
 font-size: 1.6em;  
 margin: 35px 0 0;  
 }  
  
h2.pagetitle {  
 font-size: 1.6em;  
 margin-top: 30px;  
 text-align: center;  
 }  
  
h3 {  
 font-size: 1.3em;  
 padding: 0;  
 margin: 30px 0 0;  
 }  
  
h3.comments {  
 padding: 0;  
 margin: 40px auto 20px ;  
 }  
  
small {  
 font-family: Arial, Helvetica, Sans-Serif;  
 font-size: 0.9em;  
 color: #444444;  
 line-height: 1.5em;  
 }  
  
code {  
 font: 1.1em 'Courier New', Courier, Fixed;  
 }  
  
#sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {  
 color: #777;  
 }  
  
acronym, abbr, span.caps {  
 font-size: 0.9em;  
 letter-spacing: .07em;  
 }  
  
a:hover {  
 color: #CC0000;  
 border-bottom: 1px dashed #CC0000;  
 }  
  
h1, h1 a, h1 a:hover, h1 a:visited, .description {  
 text-decoration: none;  
 color: white;  
 }  
  
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {  
 color: #333;  
 }  
  
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {  
 text-decoration: none;  
 }  
  
a, h2 a:hover, h3 a:hover {  
 color: #993333;  
 text-decoration: none;  
 }  
/*  
img {  
 padding: 5px;  
 background: #fff;  
 border: 1px;  
 border-color: #666666;  
 border-style: solid;  
 margin: 10px;  
 max-width: 95%;  
}  
*/  
a img {  
 border: none;  
 }  
  
p img {  
 padding: 0;  
 max-width: 100%;  
 }  
  
img.centered {  
 display: block;  
 margin-left: auto;  
 margin-right: auto;  
 }  
  
img.alignright {  
 padding: 4px;  
 margin: 0 0 2px 7px;  
 display: inline;  
 }  
  
img.alignleft {  
 padding: 4px;  
 margin: 0 7px 2px 0;  
 display: inline;  
 }  
  
html>body .entry ul {  
 margin-left: 0px;  
 padding: 0 0 0 30px;  
 list-style: none;  
 padding-left: 10px;  
 text-indent: -10px;  
 }  
  
html>body .entry li {  
 margin: 7px 0 8px 10px;  
 }  
  
ol li, #sidebar ul ol li {  
 list-style: decimal outside;  
 }  
  
select {  
 width: 130px;  
 }  
  
acronym, abbr, span.caps {  
 cursor: help;  
 }  
  
acronym, abbr {  
 border-bottom: 1px dashed #999;  
 }  
  
blockquote {  
 margin: 15px 30px 0 10px;  
 padding-left: 20px;  
 border-left: 3px dashed #666666;  
 }  
  
blockquote cite {  
 margin: 5px 0 0;  
 display: block;  
 }  
  
hr {  
 display: none;  
 }  
  
  
  
  
/* #header, #headerimg und #footer sowie alle bilder sind in der header.php definiert */  
  
#page {  
 text-align: left;  
 margin: 0px auto 0px 92px;;  
 padding: 0;  
 width: 760px;  
 }  
  
#content {  
 font-size: 1.2em  
 }  
  
#sidebar {  
 font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;  
 padding: 20px 0 10px 0;  
 margin-left: 545px;  
 width: 190px;  
 }  
  
#sidebar form {  
 margin: 0;  
 }  
  
#sidebar h2 {  
 font-family: 'Lucida Grande', Verdana, Sans-Serif;  
 font-size: 1.6em;  
 margin: 5px 0 0;  
 padding: 0;  
 }  
  
#sidebar ul, #sidebar ul ol {  
 margin: 0;  
 padding: 0;  
 }  
  
#sidebar ul li {  
 list-style-type: none;  
 list-style-image: none;  
 margin-bottom: 15px;  
 }  
  
#sidebar ul p, #sidebar ul select {  
 margin: 5px 0 8px;  
 }  
  
#sidebar ul ul, #sidebar ul ol {  
 margin: 5px 0 0 10px;  
 }  
  
#sidebar ul ul ul, #sidebar ul ol {  
 margin: 0 0 0 10px;  
 }  
  
#sidebar ul ul li, #sidebar ul ol li {  
 margin: 3px 0 0;  
 padding: 0;  
 }  
  
#sidebar #searchform #s {  
 width: 115px;  
 padding: 2px;  
 }  
  
#sidebar #searchsubmit {  
 padding: 1px;  
 }  
  
#commentform p {  
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;  
 }  
  
#searchform input {  
 border: 1px dashed;  
 border-color: #999999;  
 background-image:url(images/form_bg.gif)  
 }  
  
#commentform input {  
 width: 170px;  
 padding: 2px;  
 margin: 5px 5px 1px 0;  
 border: 1px dashed;  
 border-color: #999999;  
 background-image:url(images/form_bg.gif)  
 }  
  
#commentform textarea {  
 width: 100%;  
 padding: 2px;  
 border: 1px dashed;  
 border-color: #999999;  
 background-image:url(images/form_bg.gif)  
 }  
  
#commentform #submit {  
 margin: 0;  
 float: right;  
 }  
  
#commentform p {  
 margin: 5px 0;  
 }  
  
#searchform {  
 margin: 10px auto;  
 padding: 5px 3px;  
 text-align: center;  
 }  
  
#wp-calendar #prev a {  
 font-size: 9pt;  
 }  
  
#wp-calendar a {  
 text-decoration: none;  
 }  
  
#wp-calendar caption {  
 font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;  
 text-align: center;  
 }  
  
#wp-calendar {  
 empty-cells: show;  
 margin: 10px auto 0;  
 width: 155px;  
 }  
  
#wp-calendar th {  
 font-style: normal;  
 text-transform: capitalize;  
 }  
  
#wp-calendar #next a {  
 padding-right: 10px;  
 text-align: right;  
 }  
  
#wp-calendar #prev a {  
 padding-left: 10px;  
 text-align: left;  
 }  
  
#wp-calendar a {  
 display: block;  
 }  
  
#wp-calendar caption {  
 text-align: center;  
 width: 100%;  
 }  
  
#wp-calendar td {  
 padding: 3px 0;  
 text-align: center;  
 }  
  
#wp-calendar td.pad:hover { /* Doesn't work in IE */  
 background-color: #fff; }  
  
  
  
  
.widecolumn {  
 line-height: 1.6em;  
 padding: 10px 0 20px 45px;  
 margin: 0px 0 0 0;  
 width: 450px;  
 }  
  
.widecolumn .entry p {  
 font-size: 1.05em;  
 }  
  
.widecolumn .post {  
 margin: 0;  
 }  
  
.widecolumn .postmetadata {  
 margin: 30px 0;  
 }  
  
.narrowcolumn {  
 float: left;  
 padding: 0 0 20px 45px;  
 margin: 0px 0 0;  
 width: 450px;  
 }  
  
.narrowcolumn .postmetadata {  
 text-align: left;  
 padding-top: 5px;  
 }  
  
.narrowcolumn .entry, .widecolumn .entry {  
 line-height: 1.4em;  
 }  
  
.alt {  
 border-top: 1px dashed #999999;  
 border-bottom: 1px dashed #999999;  
 margin: 0;  
 padding: 10px;  
 }  
  
.description {  
 font-size: 1.2em;  
 text-align: center;  
 }  
  
.entry p a:visited {  
 color: #000066;  
 }  
  
.commentlist li, #commentform input, #commentform textarea {  
 font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;  
 }  
  
.commentlist li {  
 font-weight: bold;  
 }  
  
.commentlist cite, .commentlist cite a {  
 font-weight: bold;  
 font-style: normal;  
 font-size: 1.1em;  
 }  
  
.commentlist p {  
 font-weight: normal;  
 line-height: 1.5em;  
 text-transform: none;  
 }  
  
.commentmetadata {  
 font-weight: normal;  
 }  
  
.post {  
 margin: 0 0 35px;  
 text-align: justify;  
 }  
  
.description {  
 text-align: center;  
 }  
  
.alignright {  
 float: right;  
 }  
  
.alignleft {  
 float: left  
 }  
  
.entry ul li:before, #sidebar ul ul li:before {  
 content: "\00BB \0020";  
 }  
  
.entry ol {  
 padding: 0 0 0 35px;  
 margin: 0;  
 }  
  
.entry ol li {  
 margin: 0;  
 padding: 0;  
 }  
  
.postmetadata ul, .postmetadata li {  
 display: inline;  
 list-style-type: none;  
 list-style-image: none;  
 }  
  
.entry form { /* This is mainly for password protected posts, makes them look better. */  
 text-align:center;  
 }  
  
.commentlist {  
 padding: 0;  
 text-align: justify;  
 }  
  
.commentlist li {  
 margin: 15px 0 3px;  
 padding: 5px 10px 3px;  
 list-style: none;  
 }  
  
.commentlist p {  
 margin: 10px 5px 10px 0;  
 }  
  
.nocomments {  
 text-align: center;  
 margin: 0;  
 padding: 0;  
 }  
  
.commentmetadata {  
 margin: 0;  
 display: block;  
 }  
  
.center {  
 text-align: center;  
 }  
  
.navigation {  
 display: block;  
 text-align: center;  
 margin-top: 0px;  
 margin-bottom: 50px;  
 }  
  

[Mathias Bigge]

Hi Ogi,

bitte nicht einfach den ganzen Code posten, sondern die relevanten Bestandteile.

Viele Grüße
Mathias Bigge

[MudGuard]

Hi,

Ok, also ich poste mal...

/* Kiloweise irrelevanter Sourcecode */

  
Sieh Dir nur die Rulesets an, deren Selektoren img-Elemente auswählen - alle anderen sind irrelevant.  
Und dann guck, wo Du das Padding auf 0 setzt.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)  
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)  
  
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[Bevan]

Das margin hat an sich hiermit nichts zu tun.

Ja, das habe ich unten ja geschrieben...

-> padding

Das hab ich total übersehen ;-)

Aber trotzdem funktioniert es meines Erachtens nicht.
Wenn ich den folgenden Tag in ein HTML-Dokument einbinde, sehe ich NUR einen dünnen Rahmen:

<img src="Bild.jpg" alt="" style="padding: 5px;background: #fff;border: 1px solid #ccc" />

[Ashura]

Hallo Bevan.

Wenn ich den folgenden Tag in ein HTML-Dokument einbinde, sehe ich NUR einen dünnen Rahmen:

Bitte?
Ich verwende _den selben_ Code und sehe einen -- wenn auch recht schmalen -- Innenabstand (padding).

<img src="Bild.jpg" alt="" style="padding: 5px;background: #fff;border: 1px solid #ccc" />

Setze einmal die Hintergrundfarbe deines body auf #000 oder was auch immer.

Gruß, Ashura

[Bevan]

Ich habe schwarzen Hintergrund. Aber des Rätsels Lösung:

Im Internet-Explorer ist kein weißer Rahmen zu sehen. Im Opera, FireFox und Netscape aber schon. Mal wieder Microsoft schuld ;-)

[Ashura]

Hallo Bevan.

Im Internet-Explorer ist kein weißer Rahmen zu sehen. Im Opera, FireFox und Netscape aber schon. Mal wieder Microsoft schuld ;-)

*g* Also _darauf_ bin ich nun wirklich nicht gekommen...

Gruß, Ashura

[Bevan]

Noch ein kleiner Nachtrag:
Ich bin durch Zufall darauf gestoßen, dass es wohl an einer fehlenden DOCTYPE-Angabe lag. Der InternetExplorer ist daher in den Quirks-Modus gewechselt. Infos dazu hier:
http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch

[Ogi]

Genau. UM das Bild einen weissen dicken Rand, um den weissen dicken Rand eine dünne graue Linie. Und das ganze soll dann einen Schatten werfen.

Kann ich das komplette CSS mal hier posten?

[Ogi]

Hallo Michael,

also es sollte dann schon über CSS funktionieren.
Und eben auch nur für die Bilder im Content, wie z.B. das Muränenbild da jetzt ganz oben. Sollte ein Bild mal kleiner sein, dann müsste sich das halt auch anpassen... variabel sozusagen.

Und nochwas: Es gibt scheinbar zig Möglichkeiten, einen DropShadow für Bilder zu machen. Auch einen via Filter im IE. Gibt's da einen anderen der in allen (aktuellen) Browsern läuft?  Das hätt ich dann nämlich gern da drunter ... ;)

O.

[Bevan]

Und eben auch nur für die Bilder im Content, wie z.B. das Muränenbild da jetzt ganz oben. Sollte ein Bild mal kleiner sein, dann müsste sich das halt auch anpassen... variabel sozusagen.

Also variabel anpassen, da wüsste ich nicht wie das gehen soll.
Bei dem Code, den ich eben gepostet habe, gibst du den Rahmen ja bei jedem Bild einzeln mit dem style-Attribut an. Das kannst du dann manuell auch an jedes Bild anpassen. Wenn du das nicht möchtest, sondern das ganze im Header haben willst, benutz doch einfach Klassen.

[tritt]

Nabend allerseits.

tach

img {
   padding: 5px;
   background: #fff;
  border: 1px solid #ccc;
  border-style: solid;
   margin: 10px;
  max-width: 100%;
}

Warum solid zwei mal? Die Zeile "border-style: solid;" ist überflüssig, die kannst du löschen.

Aber hier ist nichts, was die Linie 10 Pixel dick macht. "margin" rückt das img ein, aber macht keinen Rahmen. Du musst "border: 1px solid #ccc;" durch "border: 10px solid #ccc;" ersetzen. Das macht den Rahmen 10 Pixel dick, margin hat damit nichts zu tun...

Ich hoffe, ich konnte dir helfen...

[Ashura]

Hallo tritt.

Aber hier ist nichts, was die Linie 10 Pixel dick macht.

Das hat Ogi auch nie bezwecken wollen, siehe seine Bestätigung.

Gruß, Ashura