Einzelnen Beitrag anzeigen
  #9 (permalink)  
Alt 25.06.2009, 14:38
infernalshade infernalshade ist offline
creativ.handwerk
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2008
Ort: 94357 Konzell
Beiträge: 79
infernalshade befindet sich auf einem aufstrebenden Ast
Standard

Also...kopier das mal 1:1 in ein HTML Dokument:
HTML-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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
div#wrapper { margin:0 auto; width: 950px; position:relative; }

div#header { width:946px; height:100px; border:2px solid #00CC33; color:#00CC33;}

div#inhalt { border:2px solid #CCCCCC; width:850px; height:500px; position:absolute; left:50%; margin-left:-425px; top:50px; background-color:#FFFFFF; }

div#links-zeile1 { float:left; clear:left; width:200px; height:15px; border:2px solid #0066FF; }
div#links-zeile2 { float:left; clear:left; width:100px; height:15px; border:2px solid #0066FF; }

div#rechts-zeile1 { float:right; clear:right; width:200px; height:15px; border:2px solid #FF0000; }
div#rechts-zeile2 { float:right; clear:right; width:140px; height:15px; border:2px solid #FF0000; }
div#rechts-zeile3 { float:right; clear:right; width:90px; height:15px; border:2px solid #FF0000; }
div#rechts-zeile4 { float:right; clear:right; width:50px; height:15px; border:2px solid #FF0000; }
-->
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">Header...</div>
    <div id="inhalt">
         <div id="links-zeile1"></div>
         <div id="links-zeile2"></div>
         <div id="rechts-zeile1"></div>
         <div id="rechts-zeile2"></div>
         <div id="rechts-zeile3"></div>
         <div id="rechts-zeile4"></div>
         <div id="eigentlicherinhalt">
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
         </div>
    </div>
</div>
</body>
</html>
Dann schau dir die Seite im IE an und im FF...im IE funktionierts genau so wie ich meinte, im FF fangen die rechten floats erst ab dem letzten linken an!

Aber mit einem hattest recht, die floatenden elemente müssen alleine stehen da ein eltern-div drum rum, sonst wie ein normaler floatender div fungiert!


EDIT: HA, und es funktioniert doch!! Man darf nur nicht erst alle links ausgerichteten und dann alle rechts ausgerichteten sondern von zeile zu zeile, in meinem beispiel also so:
HTML-Code:
         <div id="links-zeile1"></div>
         <div id="rechts-zeile1"></div>
         <div id="links-zeile2"></div>
         <div id="rechts-zeile2"></div>
         <div id="rechts-zeile3"></div>
         <div id="rechts-zeile4"></div>
anstatt so:
HTML-Code:
         <div id="links-zeile1"></div>
         <div id="links-zeile2"></div>
         <div id="rechts-zeile1"></div>
         <div id="rechts-zeile2"></div>
         <div id="rechts-zeile3"></div>
         <div id="rechts-zeile4"></div>
EDIT 2: Hier der Beweis in Screenshot-Form:
Angehängte Grafiken
Dateityp: jpg beweis.jpg (60,3 KB, 19x aufgerufen)

Geändert von infernalshade (25.06.2009 um 15:05 Uhr)
Mit Zitat antworten
Sponsored Links