ich überarbeite gerade meine Seite. Im neuen Design kommt es dabei zu folgendem unschönen Effekt (gelb markiert, in Echt auch rot):
Dieser tritt jedoch nur, wenn sich ein Bild im "post-thumb" befindet. Bei anderem Content, beispielsweise einem Video in post-thumb tritt dieser Effekt nicht auf. Der Rand ist dann 6px breit an allen Seiten. Auch das Entfernen des Hyperlinks hat keinen Einfluss auf den Rand. Daher schließe ich, dass es etwas mit dem img zu tun haben muss. Daher folgend alle style-Anweisungen, die Einfluss auf "img" nehmen könnten.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-sizing:border-box;
}
/* -------------------------------- Allgemeines */
img {
max-width: 100%;
height: auto;
border:0;
margin:0;
padding:0;
outline: 0;
line-height:0;
}
img.right
{
float:right;
margin:5px;
margin:0 1em 1em;
}
img.left
{
float:left;
margin-right:33px;
margin-bottom:20px;
margin-top:5px;
}
img.leftge
{
float:left;
margin-right:15px;
margin-bottom:5px;
margin-top:5px;
}
img.rightge
{
float:right;
margin-left:15px;
margin-bottom:5px;
margin-top:5px;
}
/* //// Kleiner als 350*/
@media only screen and
(max-width:450px) and
(orientation:portrait), only screen and
(max-width:450px) and
(orientation:landscape) {
img.right, img.left, img.leftge, img.rightge
{
width: 35%;
height: auto;
}
}
/*------*/
img.center
{
display: block;
text-align:center;
}
/* ------------------ Thumb im Post */
.post-thumb {
background-image:url(images/red.png);
[B]padding:6px;[/B]
margin: 0 auto;
text-align:center;
margin:15px 0;
}
.wp-post-image {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
.post-thumb a {
margin:0;
padding:0;
line-height:0;
border:0;
}
Alles anzeigen
