probleme bei floaten von links

hedges

Tach auch.

Ich will 2 div's nebeneinander darstellen. Dazu benutze ich den float Befehl um die div's nicht absolut positionieren zu müssen. Um den float zu deaktivieren benutze ich den clear Befehl. Der Funktioniert auch wenn das nächste Element ein div ist, aber nich wenn es ein Link (a) ist..
Hier der Quellcode einer Vereinfachung.. was mach ich falsch?

HTML

<html>
  <head>
    <link href="format.css" rel="stylesheet" type="text/css" /> 
  </head>
  <body>
      <div id="navileft">
        [url=''][/url]
        [url=''][/url]
        [url=''][/url]
        [url=''][/url]
        [url=''][/url]
      </div>

      <div id="naviright">
        [url=''][/url]
        [url=''][/url]
        [url=''][/url]
        [url=''][/url]
      </div>

      [url='stuff.htm']der link soll nicht gefloated werden[/url]
  </body>
</html>

Alles anzeigen

und hier die entsprechene css:

Code

#navileft
{
background-color:#ccc;
width:100px;
height:80px;
margin:0;
padding:0;
float:left;
}


#naviright
{
background-color:#888;
width:100px;
height:80px;
margin:0;
padding:0;
float:left;
}


#stuff
{
background-color:#ccc;
margin:0;
padding:0;
clear:left;
color:000;
}

Alles anzeigen

danke für eure mühe.
cya hedges

Modula

So besser?

HTML

<html>
  <head>
    <style type="text/css">
      #navileft
      {
      background-color:#ccc;
      border: 1px solid black;
      width:100px;
      height:80px;
      margin:0;
      padding:0;
      float:left;
      }

      #naviright
      {
      background-color:#888;
      border: 1px solid black;
      width:100px;
      height:80px;
      margin:0;
      padding:0;
      float:right;
      }

      #stuff
      {
      background-color:#ccc;
      margin:0;
      padding:0;
      color:000;
      }    
    </style>
  </head>
  <body>
      <div id="navileft">
        [url='#']1[/url]


        [url='#']2[/url]


        [url='#']3[/url]


        [url='#']4[/url]


        [url='#']5[/url]
      </div>

      <div id="naviright">
        [url='#']1[/url]


        [url='#']2[/url]


        [url='#']3[/url]


        [url='#']4[/url]
      </div>

      <div id="stuff">



Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>



</p>



[url='stuff.htm']der link soll nicht gefloated werden[/url]</p>



</p>



</p>



</p>



</p>



</p>



Text</p>
      </div>
  </body>
</html>

Alles anzeigen

Wenn du jetzt noch die höhenangaben weglässt schaut das ganze nochmal besser aus (ich hab den Rahmen eingefügt damit du dir deutlich machen kannst was ich meine)

HTML

<html>
  <head>
    <style type="text/css">
      #navileft
      {
      background-color:#ccc;
      border: 1px solid black;
      width:100px;
      margin:0;
      padding:0;
      float:left;
      }

      #naviright
      {
      background-color:#888;
      border: 1px solid black;
      width:100px;
      margin:0;
      padding:0;
      float:right;
      }

      #stuff
      {
      background-color:#ccc;
      margin:0;
      padding:0;
      color:000;
      }    
    </style>
  </head>
  <body>
      <div id="navileft">
        [url='#']1[/url]


        [url='#']2[/url]


        [url='#']3[/url]


        [url='#']4[/url]


        [url='#']5[/url]
      </div>

      <div id="naviright">
        [url='#']1[/url]


        [url='#']2[/url]


        [url='#']3[/url]


        [url='#']4[/url]
      </div>

      <div id="stuff">



Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>



</p>



[url='stuff.htm']der link soll nicht gefloated werden[/url]</p>



</p>



</p>



</p>



</p>



</p>



Text</p>
      </div>
  </body>
</html>

Alles anzeigen

hedges

hm... nee so mein ich das nicht.
Mir ist allerdings grad aufgefallen das der Code im IE richtig und nur in Firefox falsch angezeigt wird. Wenn du dir das Ergebniss mal im IE angucken könntest...so soll es aussehen...allerdings in Firefox. Ich geh mal stark davon aus das wenn der Code richtig ist das es dann auch Firefox richtig anzeigt.
Komisch ist das, wenn ich den link in ein Div packe alles klappt. Aber mit dem float clearen auf einem a-tag hat Firefox anscheind Probleme, oder es gibt dafür nen eigenen Befehl.
(?)

Modula

Zitat von hedges

Komisch ist das, wenn ich den link in ein Div packe alles klappt.

Warum packst du den Link denn dann nicht in ein <div>?

hedges

Hab ich ja schon längst, aber es gibt bestimmt nen Befehl womit ich das nicht machen muss. Sind immerhin 11 Zeichen weniger code.

^^Optimierungsfanatiker...

Ausserdem hing ich da bestimmt 2 Stunden dran...und ich will gegen meinen Code gewinnen.

cya

Modula

Zitat von hedges

Hab ich ja schon längst, aber es gibt bestimmt nen Befehl womit ich das nicht machen muss. Sind immerhin 11 Zeichen weniger code.

^^Optimierungsfanatiker...

Ausserdem hing ich da bestimmt 2 Stunden dran...und ich will gegen meinen Code gewinnen.

cya

Optimal ist immer die Lösung die überall gleich ausschaut, oder?

Und 11 Zeichen, na, hm - auf die kannst du heutzutage vielleicht noch beim SMS schreiben rücksicht nehmen, aber sonst?

Warum gegen deinen Code gewinnen?

Wenn du aufgibst kannst du dir viel Ärger und Zeit erspaaren

hedges

Naja ist halt unsinniger code den man unterbinden kann...
ich werd die Lösung posten wenn ich sie hab...
cya

baloo

vllt mit display: block;

hedges

so das Problem hat sich gelöst.

- das a-tag ist kein blockelement
- clear funktioniert nur bei blockelementen

ergo das <a> in ein <div> packen dem die Eigenschaft clear zuweisen --->fertig

thx für die Hilfen...cya hedges

--------
closed

probleme bei floaten von links

Tags

Benutzer online in diesem Thema