Problem mit Floats: Inhaltsbox zieht zu lang von ChrisB, 10.04.2008 01:27

Problem mit Floats: Inhaltsbox zieht zu lang

steve77 09.04.2008 22:59

Hallo,

ich bastel gerade ein neues Wordpress-Theme und komme an einer Stelle partout nicht weiter, ein reines CSS-Problem:

Das Dokument hat folgende Struktur: Container, inkl. Sidebar, Main (inkl. Content mit Margin nach rechts für Sidebar, rechts floatende Sidebar und clearendem Footer) und absolut positionierten Navigationselementen im Anschluß.

Das Problem: Auf der Startseite hab ich den Wordpress-Loop mit Vorschauen, in den Postings tauchen jeweils nach rechts gefloatete Bilder auf. Egal, ob ich im post-div oder im entry-div cleare: die standardkonformen Browser (z.B. Firefox 2 und Opera 9) ziehen mir die erste Inhaltsbox so lang wie die Sidebar hoch ist. An der Stelle komme ich nicht weiter :-/

Alternativ hab ich auch schon die clearfix-Methode versucht und die clearfix-Klasse wahlweise dem post-div und beitrag-div mitgegeben, aber ohne Erfolg.

Woran liegt es? Die gefloatete Sidebar ist doch aus der Struktur raus und die rechts gefloateten Bilder löse ich doch auch per clear-div auf!? Ab der zweiten Box klappt es ja auch einwandfrei ...

Wäre schön, wenn mir wer weiterhelfen könnte. Ist mein erstes float-Layout :-/

Danke!!

Viele Grüße,

Steve

Hier mal der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Seitentitel</title>
<style type="text/css">
<!--

/* Allgemeines */

* {
margin: 0;
padding: 0;
}
body {
font: 95% Arial, Helvetica, sans-serif;
color: #333;
text-align: center;
background: navy;
background-position: bottom center;
padding-bottom: 20px;
}

a img {
border: 0;
}

small {
color: #666;
background: transparent;
}

/* Schriftkonzept */

h1, h2, h3, #navoben li {
font-family: Georgia, "Times New Roman", Times, serif;
}
h1, h2, h3, h1 a, h2 a, h3 a {
color: #a12121;
background: transparent;
font-weight: normal;
font-style: italic;
text-decoration: none;
}
h1, h1 a {
font-size: 1.1em;
}
h2, h2 a {
font-size: 1em;
}
h3, h3 a, #navoben li a {
font-size: 0.9em;
}
p, #menu li a, #menu li li a, small {
font-size: 0.8em;
}
#menu li li a {
font-size: 80%;
}

/* Grundstruktur */
#container {
color: #000;
width: 760px;
position: relative;
margin: 0 auto;
background: red;
text-align: left;
}
#header {
width: 760px;
height: 90px;
position: absolute;
top: 0;
left: 0;
display: block;
color: #404040;
background: #404040;
}
#logo {
display: block;
width: 220px;
height: 90px;
color: #fff;
background: transparent;
position: absolute;
top: 0;
left: 540px;
}
#main {
color: #000;
line-height: 1.2em; /* gegen Peekaboo Bug */
background: transparent;
padding-top: 110px;
}
p.footer {
clear: both;
height: 68px;
color: #666;
background: #666;
}
#sidebar {
float: right;
display: inline;
width: 210px;
color: #000;
background: white;
}
#content {
margin: 0 240px 0 25px;
color: #000;
background: transparent;
}

/* Navigation oben */

#navoben {
position: absolute;
top: 55px;
left: 25px;
height: 25px;
width: 495px;
list-style-type: none;
}
#navoben li {
display: inline;
}
#navoben a {
display: block;
float: left;
color: #fff;
background: transparent;
text-decoration: none;
padding: 1px 10px;
}

/* Navigation Sidebar */

#menu {
width: 200px;
padding: 46px 0 0 0;
background: yellow;
}

.scotch {
display: block;
height: 46px;
width: 205px;
background: transparent; /* die Navigation hat im Original oben und unten ein Klebeband. Unten gings nur per Span einzubinden */
}

#menu li {
display: inline;
}
#menu li a {
display: block;
width: 187px; /* Tan Hack vs. Box Modell IE 5.5: 175px + 10px padding-left + 2px border */
wid\th: 175px;
color: #666;
background: transparent;
text-decoration: none;
padding: 0px 0px 2px 10px;
}

#menu h2 {
padding: 5px;
border-top: 1px dashed #666;
width: 187px; /* Tan Hack vs. Box Modell IE 5.5: 185px + 2px border */
wid\th: 175px;
position: relative;
font-weight:bold;
}

#menu li a, #menu h2, #menu div {
border-left: 1px solid #e2c8a7;
border-right: 1px solid #e2c8a7;
}

#searchform div {
width: 187px; /* Tan Hack vs. Box Modell IE 5.5: 175px + 10px padding-left + 2px border */
wid\th: 175px;
padding: 0px 0px 2px 10px;
}

#searchsubmit, #searchform #s {
border: 1px solid #e2c8a7;
color: #a12121;
background-color:#fff;
padding:1px;
line-height:1.2em;
}

#searchform #s {
width: 95px;
padding: 3px;
paddin\g: 2px;
}

/* Formatierungen im content-Bereich */

.post {
padding: 5px;
margin:20px 0;
border: 1px solid red;
width:492px;
widt\h:480px;
background-color: #fff;
}

img.beitrag_re,
img.beitrag_li {
padding: 3px;
border: 1px solid #8b928a;
background-color: #fff;
}

img.beitrag_re {
float: right;
margin: 3px 0px 0px 10px;
}

.home .quer {
width:120px;
height: 80px;
}

.home .hoch {
height: 120px;
width: 80px;
}
-->
</style>
</head>

(der Part ab <body> folgt in der Antwort, da das Posting zu lang ist. Bitte zusammensetzen)

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem mit Floats: Inhaltsbox zieht zu lang
Steve77 09.04.2008 23:01

css
– Informationen zu den Bewertungsregeln
(ab Body, Teil 2. Am besten mal in dne Texteditor ziehen, durch die Umbrüche sieht es hier wilder aus, als es ist und wenn man es im Browser sieht, wird die Struktur direkt klar):

<body>
<div id="container">
<div id="header">
<a id="logo" href="http://www.domain.de" title="zur Startseite"></a>
</div>

<div id="main">

<div id="sidebar">

<ul id="menu">
   <li id="search" class="widget widget_search">
   <form id="searchform" method="get" action="http://domain.de">

<div>
    <input type="text" name="s" id="s" size="15" />
    <input type="submit" id="searchsubmit" value="Suchen" />
   </div>
   </form>
   </li>
   <li id="flexi-pages-1" class="widget flexipages_widget">
    <h2 class="widgettitle">Seiten</h2>

<ul>
                           <li class="page_item current_page_item"><a href="http://domain.de" title="domain.de">Home</a></li><li class="page_item page-item-7"><a href="http://domain.de/berufliches" title="Berufliches">Berufliches</a></li>
                          <li class="page_item page-item-34"><a href="http://domain.de/privates" title="Privates">Privates</a></li>
                           <li class="page_item page-item-6"><a href="http://domain.de/kontakt" title="Kontakt">Kontakt</a></li>
                           <li class="page_item page-item-5"><a href="http://domain.de/impressum" title="Impressum">Impressum</a></li>
     </ul>

</li>
             <li id="categories-83408751" class="widget widget_categories">
               <h2 class="widgettitle">Kategorien</h2>
                   <ul>
      <li class="cat-item cat-item-137"><a href="http://domain.de/category/blog" title="Alle unter blog abgelegten Artikel ansehen">blog</a></li>
      <li class="cat-item cat-item-4"><a href="http://domain.de/category/blog1" title="Alle unter blog1 abgelegten Artikel ansehen">blog1</a></li>
      <li class="cat-item cat-item-138"><a href="http://domain.de/category/blog2" title="Alle unter blog2 abgelegten Artikel ansehen">blog2</a></li>
      <li class="cat-item cat-item-6"><a href="http://domain.de/category/blog3" title="Alle unter blog3 abgelegten Artikel ansehen">blog3</a></li>
     </ul>
   </li>
              <li id="archives" class="widget widget_archive">
               <h2 class="widgettitle">Archiv</h2>
                   <ul>
      <li><a href='http://domain.de/2008/04' title='April 2008'>April 2008</a></li>
                           <li><a href='http://domain.de/2008/03' title='März 2008'>März 2008</a></li>
                           <li><a href='http://domain.de/2008/02' title='Februar 2008'>Februar 2008</a></li>
                           <li><a href='http://domain.de/2007/12' title='Dezember 2007'>Dezember 2007</a></li>
     </ul>
   </li>
              <li id="meta" class="widget widget_meta">
               <h2 class="widgettitle">Login/ Adminbereich</h2>
                   <ul>
      <li><a href="http://domain.de/wp-login.php?action=register">Registrieren</a></li>
                           <li><a href="http://domain.de/wp-login.php">Anmelden</a></li>
      <li><a href="http://domain.de/feed" title="Abonniere diese Seite via RSS 2.0">Einträge <abbr title="Really Simple Syndication">RSS</abbr></a></li>
      <li><a href="http://domain.de/comments/feed" title="Die neuesten Kommentare zu allen Beiträgen als RSS">Kommentare als <abbr title="Really Simple Syndication">RSS</abbr></a></li>
      <li><a href="http://wordpress.org/" title="Powered by WordPress - die zeitgemäße Plattform zum Veröffentlichen persönlicher Artikel.">WordPress.org</a></li>
     </ul>

</li>
  </ul>
  <span class="scotch"></span>
</div>

<div id="content" class="home">

<div class="post" id="post-44">
    <h1><a href="http://domain.de/permalink" rel="bookmark" title="%s">Postingtitel</a></h1>
    <small>Veröffentlicht am 04. April 2008 um 20.38 Uhr.</small>
    <div class="beitrag">
     <p><a title="Linktitel" href="http://www.domain.de/images/bildquelle.jpg"><img class="beitrag_re quer" src="http://www.domain.de/images/bild_s.jpg" alt="Bildtitel - zum Vergrößern klicken" /></a>Ich bin Fliesstext, ich bin Fliesstext, usw. usw. <a href="http://domain.de/live-in-concert/permalink#more-44" class="more-link">weiter lesen »</a></p>
     <div style="clear:both;"></div>
    </div>
    <p class="postmetadata">Kategorie <a href="http://domain.de/category/blog1" title="Alle Artikel in blog1 ansehen" rel="category tag">live in concert!</a> | <a href="http://domain.de/blog1/permalink/#respond" title="Kommentiere Beitrag">0 Kommentare »</a> </p>
   </div>

<div class="post" id="post-43">
    <h1><a href="http://domain.de/permalink" rel="bookmark" title="%s">Postingtitel</a></h1>
    <small>Veröffentlicht am 04. April 2008 um 20.38 Uhr.</small>
    <div class="beitrag">
     <p><a title="Linktitel" href="http://www.domain.de/images/bildquelle.jpg"><img class="beitrag_re quer" src="http://www.domain.de/images/bild_s.jpg" alt="Bildtitel - zum Vergrößern klicken" /></a>Ich bin Fliesstext, ich bin Fliesstext, usw. usw. <a href="http://domain.de/live-in-concert/permalink#more-44" class="more-link">weiter lesen »</a></p>
     <div style="clear:both;"></div>
    </div>
    <p class="postmetadata">Kategorie <a href="http://domain.de/category/blog1" title="Alle Artikel in blog1 ansehen" rel="category tag">live in concert!</a> | <a href="http://domain.de/blog1/permalink/#respond" title="Kommentiere Beitrag">0 Kommentare »</a> </p>
   </div>

<div class="post" id="post-42">
    <h1><a href="http://domain.de/permalink" rel="bookmark" title="%s">Postingtitel</a></h1>
    <small>Veröffentlicht am 04. April 2008 um 20.38 Uhr.</small>
    <div class="beitrag">
     <p><a title="Linktitel" href="http://www.domain.de/images/bildquelle.jpg"><img class="beitrag_re quer" src="http://www.domain.de/images/bild_s.jpg" alt="Bildtitel - zum Vergrößern klicken" /></a>Ich bin Fliesstext, ich bin Fliesstext, usw. usw. <a href="http://domain.de/live-in-concert/permalink#more-44" class="more-link">weiter lesen »</a></p>
     <div style="clear:both;"></div>
    </div>
    <p class="postmetadata">Kategorie <a href="http://domain.de/category/blog1" title="Alle Artikel in blog1 ansehen" rel="category tag">live in concert!</a> | <a href="http://domain.de/blog1/permalink/#respond" title="Kommentiere Beitrag">0 Kommentare »</a> </p>
   </div>

<div class="navigation">
   <div class="alignleft">« Ältere Beiträge<a href="http://domain.de/page/2"></a></div>
   <div class="alignright">Neuere Beiträge »</div>
  </div>

</div>

<p class="footer">#footer</p>
</div>

<ul id="navoben">
<li><a href="http://www.domain.de/">Home</a></li>
<li class="page_item page-item-7"><a href="http://domain.de/rubrik1" title="Berufliches">Berufliches</a></li>
<li class="page_item page-item-34"><a href="http://domain.de/rubrik2" title="Privates">Privates</a></li>
<li class="page_item page-item-11"><a href="http://domain.de/rubrik3" title="Fotogalerien">Fotogalerien</a></li>
<li class="page_item page-item-6"><a href="http://domain.de/rubrik4" title="Kontakt">Kontakt</a></li>
</ul>

</div>
</body>
</html>
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Problem mit Floats: Inhaltsbox zieht zu lang
  
  ChrisB 09.04.2008 23:53
  
  css
  – Informationen zu den Bewertungsregeln
  Hi,
  
  (ab Body, Teil 2. Am besten mal in dne Texteditor ziehen
  
  Am besten Mal ein Online-Beispiel bereitstellen, anstatt von potentiellen Helfern Copy&Paste-Orgien zu erwarten.
  
  MfG ChrisB
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Problem mit Floats: Inhaltsbox zieht zu lang
    
    Steve77 10.04.2008 00:08
    
    css
    
    – Informationen zu den Bewertungsregeln
    Am besten Mal ein Online-Beispiel bereitstellen, anstatt von potentiellen Helfern Copy&Paste-Orgien zu erwarten.
    
    MfG ChrisB
    
    Sorry...
    
    hier ist mal eine Online-Demo:
    http://home.arcor.de/hochzeit_casi/struktur_blog.htm
    
    Viele Grüße,
    
    Steve
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
Problem mit Floats: Inhaltsbox zieht zu lang
ChrisB 10.04.2008 00:12

css
– Informationen zu den Bewertungsregeln
Hi,

OK, mit dem Online-Beispiel wird's doch gleich klarer.

Egal, ob ich im post-div oder im entry-div cleare: die standardkonformen Browser (z.B. Firefox 2 und Opera 9) ziehen mir die erste Inhaltsbox so lang wie die Sidebar hoch ist.

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

MfG ChrisB
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Problem mit Floats: Inhaltsbox zieht zu lang
  
  Steve77 10.04.2008 01:21
  
  css
  – Informationen zu den Bewertungsregeln
  Hi Chris,
  
  danke :-)
  
  Hab jetzt etwas gemogelt: Das Problem trat eh nur bei einer Übersichtsseite auf wie der musterhaft hochgeladenen, also hab ich dem main-div eine zusätzliche Klasse zugewiesen, über die ich explizit für das eine Template die Navigation absolut positioniere. Übersichtsseiten sind ja eh etwas länger, daher ist die Footer-Überlappung, die es sonst gäbe, nicht zu erwarten.
  
  Das Kernproblem stand hier, ging aus deinem Link hervor:
  http://www.1ngo.de/web/clear.html
  
  Alternativ hätte ich auch die Bilder auf der Übersichtsseite alle links floaten lassen können als und dann auch nur partiell links clearen können, aber warum so einschränken?
  
  Für Inhaltsseiten wiederum ists egal, weil ich im Beitrag selbst ja nicht clearen muß.
  
  Das Clear-Div hab ich auch wieder galanter gelöst durch die clearfix-Lösung auf das letzte Element im Block:
  
  http://jassesnee.de/easyclear/
  
  Danke nochmal :-)
  
  Und spätestens der Text von Ingo (s.o.) zeigt mal wieder, daß das Floaten scheinbar immer wieder neue Herausforderungen bringt... nicht einfach ...
  
  Viele Grüße,
  
  Stefan
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Problem mit Floats: Inhaltsbox zieht zu lang
    
    ChrisB 10.04.2008 01:27
    
    css
    
    – Informationen zu den Bewertungsregeln
    Hi,
    
    Hab jetzt etwas gemogelt: Das Problem trat eh nur bei einer Übersichtsseite auf wie der musterhaft hochgeladenen, also hab ich dem main-div eine zusätzliche Klasse zugewiesen, über die ich explizit für das eine Template die Navigation absolut positioniere.
    
    1. Ihh, und
    2. Warum?
    
    Hilft ein overflow:hidden fuer die Divs mit der Klasse "post" denn etwa nicht ...?
    
    MfG ChrisB
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Problem mit Floats: Inhaltsbox zieht zu lang
      
      Steve 10.04.2008 09:10
      
      css
      
      – Informationen zu den Bewertungsregeln
      
      Hilft ein overflow:hidden fuer die Divs mit der Klasse "post" denn etwa nicht ...?
      
      *schmunzel* danke :-)
      
      Viele Wege führen nach Rom, ich hab mich wohl an falscher Stelle fest gelesen, waren ja auch nicht gerade wenig Ansätze zur Lösung ;-) Habs im Original jetzt auf overflow:hidden abgeändert und es klappt. Viel einfacher zu handeln mit overflow und kein Kompromiss.
      
      Ich arbeite zwar schon recht viel mit CSS, bin aber im Bereich kompletter Layouts noch praktischer Frischling und irgendwann stößt man daher immer das erste Mal auf solche Probleme ;-)
      
      Danke nochmal.
      
      Viele Grüße,
      
      Steve
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

steve77: Problem mit Floats: Inhaltsbox zieht zu lang