✔ Problem mit Containeranordnung

Status
Nicht offen für weitere Antworten.
mR.fLopPy

mR.fLopPy

Erfahrenes Mitglied
Hallo Leute und einen schönen guten Abend!

Ich bin am verzweifeln. Ich versuche gerade ein Layout zu entwerfen und scheitere gerade an einem zusätzlichen div-Container den ich nachträglich einbauen muss, da ich sonst auf einigen Seiten ein Problem haben werde.

Ich habe einen header, navi, links drei divs, rechts zwei divs und einen footer.

Sobald ich links den 3. div-Tag "divSpacer hinzufüge, versetzt es meinen Footer im IE6. Die Darstellung unter FF konnte ich leider noch nicht testen.

Hier der Code:
Code: 
@charset "utf-8";
/* CSS Document */

html, body { margin-top: 0px; margin-bottom: 0px; height: 100%; background-color: #cccccc; }

table {}

#wrapper { position:relative; margin: 0 auto; width: 750px; min-height: 100%; height: auto !important; height: 100%; background-color: #FFFFFF; border-left: 1px solid #000000; border-right: 1px solid #000000; }

#header { height: 190px; background-color:#999999; }

#navigation { height: 49px; background: url(../NaviBackgr.gif); } /* Eventuell auf 50px Höhe erhöhen*/
#navigation .Spacer { float: left; width: 17px; }
#navigation .Home { float: left;}
#navigation .Produkte { float: left;}
#navigation .Termine { float: left;}
#navigation .PcSoftware { float: left;}
#navigation .Kontakt { float: left;}
/* Da das Flashintro beschnitten wurde, muss ein Teil vom Arm nachgeladen werden */
#navigation .PieceOfIntro { float: left; width: 300px; height: 49px; background: url(../../bilder/ph2.jpg); }

#content, #infobox {x padding-bottom: 45px; }

#content { float: left; display: block; width: 435px; height: auto; background-color: #333333; }
#content .divFade { height: 8px;x background: url(../images/FadeTopContent.gif) repeat-x; background-color:#003399; }
#content .divSpacer { height: 20px; background-color:#000066; }
#content .divMain { }

#infobox { float: right; width: 315px; height: auto;x background-color: #006633; }
#infobox .divTop { height: 35px; background: url(../images/h.gif); }
#infobox .divInfo { }

#footer { clear: both; position: absolute; bottom: 0px; width: 750px; height: 35px; background: url(../../images/nav_bottom.jpg); }

Ich bin mit meinem Latein am Ende, ich habe display block bzw. floats versucht u. nichts hat geklappt.

Ich hoffe ihr könnt mir weiter helfen.

Mit besten Grüßen
floppy
 
Zuletzt bearbeitet:
Hi,

kannst du bitte auch den dazugehörigen HTML-Code posten, damit man einen Einblick in den Aufbau der Seite gewinnt, und sich das Dokument direkt in den Browsern betrachten kann?

mfg Maik
 
Hallo Maik!

Hier ist der HTML Code:

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>*ALPHA</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
  <div id="wrapper">
	<div id="header">
	  <script src="Scripts/intro.js" type="text/javascript"></script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="750" height="190" title="Flash Header">
        <param name="movie" value="flash/0267_intro.swf" />
        <param name="quality" value="high" />
        <embed src="flash/0267_intro.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="750" height="190"></embed>
      </object>
	</noscript></div>
    <div id="navigation"><div class="Spacer">&nbsp;</div>
      <div class="Home"><img src="../bilder/home.jpg" alt="Home" /></div>
      <div class="Produkte"><img src="../bilder/produkte.jpg" alt="Produkte" /></div>
      <div class="Termine"><img src="../bilder/termine.jpg" alt="Termine" /></div>
      <div class="PcSoftware"><img src="../bilder/software.jpg" alt="Software" /></div>
      <div class="Kontakt"><img src="../bilder/kontakt.jpg" alt="Kontakt" /></div>
      <div class="PieceOfIntro"></div>
    </div>
    <div id="content">
      <div class="divFade"></div>
      <div class="divSpacer">xx</div>
      <div class="divMain">blablabla</div>
    </div>
    <div id="infobox">
      <div class="divTop"></div>
      <div class="divInfo">blabla</div>
      <div class="divSpacer"></div>
    </div>
    <div id="footer">e</div>
  </div>
</body>
</html>

Edit: Die Farben für die Hintergründe waren doch ein wenig ungünstig gewählt *räusper*. Die Anordnung beim Content ist Fade (hier ist ein kleiner verlauf für die Navigation), Spacer (hier sollte ein Bild hinein kommen, dass mit dem rechten Balken abschließt, aber nur auf gewissen Seiten und nicht in der Startseite - deswegen ist es mir erst nachträglich eingefallen), Main (Hier kommt dann der Text).

Beste Grüße
floppy
 
Zuletzt bearbeitet:
Hi,

bei mir wird der Footer im IE6 überhaupt nicht verschoben.

Dafür hab ich hier jeweils Syntax-Fehler im Stylesheet entdeckt:

Code: 
#content, #infobox {x padding-bottom: 45px; }

#content .divFade { height: 8px;x background: url(../images/FadeTopContent.gif) repeat-x; background-color:#003399; }

#infobox { float: right; width: 315px; height: auto;x background-color: #006633; }
mfg Maik
 
Oh.. du hast recht. Im Header befindet sich aber eine Flash Datei u. beim IE6 ploppt ja zunächst immer so eine Warnung bezüglich ActiveX und wenn man diese dann aktiviert um die Flash Datei anzuzeigen, verzieht es den Footer nach rechts.

Der Syntaxfehler ist (für mich) normal. Ich verwende das "x" zum Deaktivieren. Tut mir Leid. Ich hätte das rausnehmen sollen. :)
 
Zuletzt bearbeitet:
Meines Wissens erfolgt diese Abfrage aber nur auf dem System, nicht aber, wenn das Dokument über das HTTP-Protokoll aufgerufen wird.

mfg Maik
 
Okay, ich werde mal die Seite auf den Server hoch laden und testen.

EDIT: Der Fehler erscheint auch nachwievor auf, unter dem IE6. Firefox 3 und IE7 interpretieren die Webseite korrekt. Es ist so als hätte der IE6 ein Floating Problem mit Flash oder etwas dergleichen. :(
 
Zuletzt bearbeitet:
Also beim Firefox gib es da keine Probleme.

Das einzige was ehr an stylesheets noch inzufuegt ist display: block;

Schnapp dir mal den Firefox und FireBug, das sind nen paar starke Helferlein bei Formatirungsproblemen.

Dispaly: block solltest du aber so oder so hinzufuegen fuer den Footer, das macht durchaus Sinn und koennte dein Problem loesen auch wenn das schon mit float: clear geschehen sollte.

LG John
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück