✔ Navigation: Problem mit Aufhebung der Floatumgebung

[Chosi]

Hallo zusammen,

habe gerade ein kleines Problem mit dem Aufheben einer Floatumgebungen. Also ich denke zumindest, dass es damit zusammenhängt.
Ich habe eine via float:left vertikal ausgerichtete Liste. Darunter soll nun eine weitere Box platziert werden. Der Inhalt dieser Box beginnt jedoch erst am Ende der darüberliegenden linksgefloateten Elemente.

Habe bereits versucht, ein weiteres Listenelement mit clear:both an das Ende zu hängen oder ein weiteres div mit clear:both zwischenzuschieben. Beides leider ohne Erfolg.

Hier mal die Struktur:

        <div class="head_navigation">
          <ul class="mainnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Shoppen</a></li>
            <li><a href="#">Verkaufen</a></li>
            <li><a href="#">take a Tour</a></li>
            <li class="last"><a href="#">Anmelden</a></li>
            <li class="clear"></li>  <-- klappt nicht?
          </ul>
          <div class="clear"></div> <-- klappt nicht?
          <div class="searchtest">asas asas as as as as</div>
        </div>

Hab' mal einen Screenshot angehängt, der pinke Rahmen dient nur zu Veranschaulichung ...

 

[Maik]

Hi,

ohne den dazugehörigen CSS-Code, lässt sich anhand eines Screenshots und dem Markup zu der Ursache nichts sagen.

mfg Maik

 

[Chosi]

Hi,

stimmt auch wieder. Der zugehörige CSS-Code schaut wie folgt aus:

ul.mainnav
{
  display: block;

  height: 52px;

  list-style-type: none;

  border: 0px;
  margin: 0px;
  padding: 0px;
}

ul.mainnav li
{
  display: block;
  float: left;
}

ul.mainnav li.last
{
  display: block;
  float: right;

  height: 52px;
}

div.searchtest
{
  display: block;
}

ul.mainnav li a
{
  display: block;
  height: 37px;
  width: 80px;

  color: #FFF;
  font-size: 12px;
  font-family: Arial, Verdanan, sans-serif;
  text-align: center;

  text-decoration: none;

  padding-top: 18px;
}

ul.mainnav li a:hover
{
  font-weight: bold;

  text-decoration: none;

  background-image: url(../media/layout/head_bg_nav_highlight.gif);
  background-repeat: repeat-x;
}

div.searchtest
{
  display: block;
  border: 1px solid #F0F;
}

 

[Maik]

Ich weiß ja nicht, was du für die Klasse .clear deklariert hast, da sie im obigen CSS-Code überhaupt nicht auftaucht, aber

.clear { clear:left; }

in Verbindung mit

        <div class="head_navigation">
          <ul class="mainnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Shoppen</a></li>
            <li><a href="#">Verkaufen</a></li>
            <li><a href="#">take a Tour</a></li>
            <li class="last"><a href="#">Anmelden</a></li>
          </ul>
          <div class="clear"></div>
          <div class="searchtest">asas asas as as as as</div>
        </div>

oder

        <div class="head_navigation">
          <ul class="mainnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Shoppen</a></li>
            <li><a href="#">Verkaufen</a></li>
            <li><a href="#">take a Tour</a></li>
            <li class="last"><a href="#">Anmelden</a></li>
          </ul>
          <div class="searchtest clear">asas asas as as as as</div>
        </div>

führt bei mir zu keiner Verschiebung des nachfolgenden Textes.

mfg Maik

 

[Chosi]

.clear hatte ich so definiert:

.clear
{
  display: none;
  clear: both;
}

Mit clear: left funktioniert es, dankschön