CSS Floats und Margen Probleme in WordPress

Question

Ich habe zwei CSS Float-Probleme auf dieser Website (http://melisayavas.com/web), die ich nicht herausfinden kann. Der erste ist direkt auf der Homepage. Ich habe zwei Javascript-Folien und einen großen leeren Raum unter ihnen. Warum?

Das zweite Problem ist auf der News-Seite - http://melisayavas.com/web/?page_id=30 - wo die Sidebar einfach nicht dahin schwimmt, wo es sollte. Auch hier habe ich keine Ahnung, welches Element den Schwimmer stoppt.

Dies ist der HTML-Code in header.php:

<article class="post" id="post-<?php the_ID(); ?>"> 
     <div class="homepage"> 
      <div class="testimonials"><?php slidedeck(58, array('width' => '500px', 'height' => '550px')); ?> 
      </div> 
      <div class="images"><?php slidedeck(66, array('width' => '400px', 'height' => '550px')); ?> 
      </div> 
     </div> 
    </article> 

Dies ist der entsprechende CSS:

article, aside, figure, footer, header, hgroup, nav, section { 
display: block; 
overflow: hidden; 
clear: both; 
} 

.post { 
border: 2px solid; 
border-radius: 10px; 
clear: both; 
overflow: hidden; 
padding: 20px; 
margin-top: 28px; 
} 

.testimonials {position: relative;} 
.images {position:relative;margin-left: 543px; top: -556px; width: 100%;} 

Der HTML-Code für die News-Seite:

<div class="news-page"> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class="news"> 
    <article <?php post_class() ?> id="post-<?php the_ID(); ?>"> 
     <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> 
     <?php include (TEMPLATEPATH . '/_/inc/meta.php'); ?> 
     <div class="entry"> 
      <?php the_content(); ?> 
     </div> 
    </article> 
</div> 
<?php endwhile; ?> 
<?php include (TEMPLATEPATH . '/_/inc/nav.php'); ?> 
<?php else : ?> 
    <h2>Not Found</h2> 
<?php endif; ?> 
</div> 

Und die CSS:

.news-page { 
width: 100%; 
    } 

    .news { 
float: left; 
width: 60%; 
    } 
    #sidebar {float: right; width: 30%;} 

Answer 1

Zuerst schlage ich vor, Firebug (für firefox) oder Chrome zu verwenden, weil es Entwicklertools eingebaut hat. IE hat eine Alternative, die IE-Entwicklerwerkzeug auch genannt wird.

Ich verwende Chrome-Entwickler-Tools, als ich die Homepage-Klasse auf Ihrer Website überprüft, sah ich, dass es berechnete Breite und Höhe 976px bzw. 1100px ist. Ich habe mir Ihre .css-Dateien angeschaut und gesehen, dass die Höhe für die .homepage-Klasse nirgendwo festgelegt ist. Mit anderen Worten, das div-Element hat eine Höhe von 1100px, weil es einen Inhalt hat, der es auf 1100px dehnt.

Ihre div.homepage enthält diese:

<div class="slidedeck_frame skin-fullwidth-sexy-black"> 
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px"> 
... 
</dl> 
</div> 

<div class="slidedeck_frame skin-fullwidth-sexy-black"> 
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px"> 
... 
</dl> 
</div> 

Diese beiden Elemente der Höhe 550px jeweils die .homepage Elementhöhe von 1100px geben.

Möglicher Fehler ist Einstellung der Höhe von .homepage direkt (z. B. auf 700px).

Wie für den zweiten Teil Ihrer Frage, haben Sie derzeit dies:
div.news-Seite hat Breite: 100%, und ist nicht auf float gesetzt.
div.news sind in div.news-page.
div.news hat eine Breite von 60%.
div # sidebar liegt direkt zu schweben und hat eine Breite von 30%

Lösung:

.news-page 
{ 
width: 70%; // takes 70% of it's parent element, page-wrap 
float: left; 
} 

.news 
{ 
width: 100%; // takes all space available by it's parent 
} 

#sidebar 
{ 
width: 30%; // takes 30% of it's parent element, page-wrap 
float: right; 
margin-top: 30px; // so it does not cover your navigation bar 
}