Hallo,
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
<!-- Beginn des Beitragsbildes -->
<?php if ( has_post_thumbnail()) : ?>
<section class="post-thumb"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a></section>
<?php endif; ?>
<!-- Ende des Beitragsbildes -->Code
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;
}Woran könnte es liegen?