zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden doppelt floaten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.12.2006, 12:47
Benutzerbild von Aro
Aro Aro ist offline
Code-Katze
neuer user
Thread-Ersteller
 
Registriert seit: 10.08.2006
Beiträge: 12
Aro befindet sich auf einem aufstrebenden Ast
Standard doppelt floaten

Hi,

in einem dreispaltigen Menü mit Kopf- und Fusszeile möchte ich im mittleren Bereich, noch einmal ähnlich einer Tabelle drei Bereiche definieren, die mehrmals untereinander in diesem Mittelbereich auftreten können.

Die äußeren Boxen, welche die Navigation (links) , Infobox (rechts) und die Inhaltsbox (Mitte) darstellen, werden ordnungsgemäß durch die Fusszeile gecleart.

Wenn ich jetzt aber im Inhaltsbereich erneut drei oder zwei Boxen nebeneinander floate und dann durch eine weitere Fusszeile darunter cleare, verschiebt Modzilla diese Fußzeile nach unten und zwar genau dorthin, wo der linke Navigationsbereich endet. Der IE, alle Achtung stellt es richtig da.

Mache ich das Spiel darunter weiter, also noch einmal eine linke und rechte Box mit anschließender Fusszeile und so weiter und so fort, sind diese wieder aneinandergerückt.

Hier der Code, tut mir leid, das alte Problem, das ich die Dinge dank unserer Sicherheitsbestimmungen nicht direkt on stellen kann besteht leider immer, helft mir dennoch, wenn ihr Zeit habt.

Code:
<html>
<head>
<title></title>
<meta name="author" content="ROCHERAI">

<style type="text/css">
<!--
body {min-width:41em;font-size:100.01%;margin:0;padding:0;background:#fff;}
*html div#mitte {height:1em;}

div#content {width:59.5em;}

ul#navi_01 {text-align:right;background:#AFAFAF;margin:0;padding:0;}
ul#navi_01 li {list-style:none;display:inline;margin:0;padding:0;background:#DFDFDF;}

div#logo_01 {float:left;margin:0;padding:0;background:#0090E0;}
div#logo_02 {margin:0;padding:0;background:#009F00;}

div#ident {clear:both;margin:0;padding:0;background:#FF7F7F;}

ul#navi_02 {float:left;margin:0;padding:0;width:15em;background:#AFAFAF;text-align:left;}
ul#navi_02 li {list-style:none;margin:0;padding:0;background:#BF0000;}

div#rechts {float:right;margin:0;padding:0;width:15em;background:#C00040;}
div#mitte {margin:0 15em 0em 15em;padding:0;background:#fff;}
div#fuss {clear:both;margin:0;padding:0;background:#009090;}

div#kopf_01 {margin:0;padding:0;background:#009090;}
div#links_01 {float:left;margin:0;padding:0;width:5em;background:green;}
div#rechts_01 {margin:0 0 0em 5m;padding:0;background:green;}
div#fuss_01 {clear:both;margin:0;padding:0;background:#FF7F00;}
-->
</style>

</head>
<body>
<div id="content">

	<ul id="navi_01">
   	<li>link 01</li>
   	<li>link 02</li>
   	<li>link 03</li>
   	<li>link 04</li>
   </ul>

	<div id="logo_01">
	   Logo_klein
	</div>

	<div id="logo_02">
	   Logo_gross
	</div>

	<div id="ident">
	   Identifikationszeile
	</div>

	<ul id="navi_02">
	   <li>link 01</li>
      <li>link 02</li>
      <li>link 03</li>
      <li>link 04</li>
	</ul>

	<div id="rechts">
	   rechts
	</div>

	<div id="mitte">
	   <div id="kopf_01">
	      Kopf
	   </div>
	   <div id="links_01">
	      links
	   </div>
	   <div id="rechts_01">
	      rechts
	   </div>
	   <div id="fuss_01">
	      Fuss
	   </div>

      <div id="kopf_01">
	      Kopf
	   </div>
	   <div id="links_01">
	      links
	   </div>
	   <div id="rechts_01">
	      rechts
	   </div>
	   <div id="fuss_01">
	      Fuss
	   </div>
	</div>

	<div id="fuss">
	   Fusszeile
	</div>

</div>

</body>
</html>
Gruß

ARO
__________________
Voraussetzung für Grundsatzdiskussionen sind vor allem Grundsätze. - Hans Jürgen Quadbeck-Seeger -
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.12.2006, 16:03
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

Schöne Div-Suppe mit Denkfehler:
Der IE machts vielleicht so wie dus haben möchtest, aber trotzdem ist die Darstellung falsch!

Lösungsansatz:

Den Container div#mitte brauchts Du nicht. Raus damit!
Dafür dm div#kopf_01 den margin geben und div#links_01, div#rechts_01 und div#fuss_01 damit umgeben.

Erwa so:
Code:

CSS:

* { margin: 0; padding: 0;}

...

div#rechts {
   float: right;
   width: 15em;
   background: #C00040;
}
div#fuss {
   clear: both;
   background: #009090;
}

div#kopf_01 {
   margin: 0 15em;
   background: #009090;
}
div#links_01 {
   float:left;
   width: 5em;
   background:green;
}
div#rechts_01 {
   margin:0 0 0em 5m;
   background:green;
}
div#fuss_01 {
   clear:both;
   background: #FF7F00;
}

HTML:

...

<div id="rechts">
   rechts
</div>

<div id="kopf_01">
    Kopf

    <div id="links_01">
      links
    </div>

    <div id="rechts_01">
      rechts
    </div>

    <div id="fuss_01">
      Fuss
    </div>
</div>  <!--ende kopf_01 -->

<div id="kopf_01">
    Kopf

    <div id="links_01">
      links
    </div>

    <div id="rechts_01">
      rechts
    </div>

    <div id="fuss_01">
      Fuss
    </div>
</div>  <!--ende kopf_01 -->

...
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Debug: Wechselseitig floaten, Auseinanderlaufen newcoder CSS 7 20.02.2011 20:15
Problem beim Floaten im IE. Cervantes CSS 2 29.05.2008 19:01
floaten SKVler CSS 4 26.03.2008 15:25
Text links unten - Bild rechts floaten - geht nicht cross_site_script CSS 7 11.06.2007 17:14
floaten zum positionieren lernen sirrpa CSS 10 21.11.2005 19:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:10 Uhr.