✔ Layoutproblem FF / IE

Status
Nicht offen für weitere Antworten.
D

DocHentai

Mitglied
Hallo zusammen,

nach etlichem Rumprobieren suche ich jetzt halt doch mal wieder hilfe hier Hilfe hier.

So sollte es sein: Box die in der horizontalen und verticalen Mitte plaziert ist. In der Box ein Kopf. Darunter auf der linken Seite das Menu. Rechts das Unter-Menü nebeneinander darunter der Inhalt. Im FF zeigt es bei mir alles so an wie ich mir das auch gedacht habe im IE setzt es mir das Unter-Menü und den Inhalt unter das Menü... :confused:

Hoffe auf Hilfe. Danke schon mal.

Und hier der Code:

HTML: 
<html>
<head>
<title>IBA Hartmann GmbH</title>
<style type="text/css">

body { margin:0px; padding:0px; background-image: url("allgemein/bilder/hg_logoline.jpg"); }

#inhaltsbox { width:800px; height:600px; background-color:white; border:1px solid black; text-align:left; }

#kopf { width:800px; height:50px; background-image:url("allgemein/bilder/kopf_logoline.jpg"); }

#inhalt { border-right:1px solid black; border-left:1px solid black; border-bottom:1px solid black; overflow:auto; height:500px; float:left; width:630px; margin-left:10px; }

#links        { float:left; list-style:none; margin:10px 0px 0px 10px; padding:0px; background: url("bg.gif") bottom; width:630px; }
#links li     { float:left; margin:0px; padding:0px; background:url("tab_rechts.gif") no-repeat right top; }
#links a      { display:block; padding:5px 15px; text-decoration:none; background:url("tab_links.gif") no-repeat left top; font: bold 11px verdana; color:black; }
#links span   { display:block; padding-bottom:1px; background:url("tab_rechts_aktuell.gif") no-repeat right top; }
#links span a { text-decoration:none; background:url("tab_links_aktuell.gif") no-repeat left top; font: bold 11px verdana; color:red; }

#abstand1 { margin-left:155px; margin-top:5px; }

#menu            { margin:0px; padding:0px; height:550px; width:150px; background-color:silver; float:left; }
#menu li         { list-style: none; margin:0px; padding:0px; margin-bottom:2px; }
#menu li a       { margin:0px; padding:3px 0px; background-color:red; width:150px; text-decoration:none; display:block; font:11px verdana; color:white; }
#menu li a:hover { background-color:black; }

#links_inhalt { float:left; }

.klein { font:9px verdana; color:white; }

</style>

</head>
<body scroll="auto">
<table width="100%" height="100%" border="0">
<tr>
<td align="center" valign="middle">

<div id="inhaltsbox">

<!-- ANFANG DES KOPFES -->
<div id="kopf">
&nbsp;
</div>
<!-- ENDE DES KOPFES -->

<!-- ANFANG MENU -->

<ul id="menu">
<li><a href="#">&nbsp; Link1</a></li>
<li><a href="#">&nbsp; Link2</a></li>
<li><a href="#">&nbsp; Link3</a></li>
<li><a href="#">&nbsp; Link4</a></li>
</ul>


<!-- ENDE MENU -->

<div id="links_inhalt">
<ul id="links">
<li><a href="#">Link 1.1</a></li>
<li><span><a href="#">Link 1.2</a></span></li>
<li><a href="#">Link 1.3</a></li>
</ul>


<div id="inhalt">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
</div>
</div>

<!-- ENDE der Inhaltsbox -->
</div>

</td>
</tr>
</table>
</body>
</html>
 
Hier die erweiterte und überarbeitete Fassung des Quellcodes:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>IBA Hartmann GmbH</title>
<style type="text/css">
body { margin:0px; padding:0px; background-image: url("allgemein/bilder/hg_logoline.jpg"); }

#inhaltsbox { width:800px; height:600px; background-color:white; border:1px solid black; position:absolute; left:50%; margin-left:-400px; top:50%; margin-top:-300px;}

#kopf { width:800px; height:50px; background-image:url("allgemein/bilder/kopf_logoline.jpg"); }

#leftCol { float:left; width: 150px; }

#menu            { margin:0px; padding:0px; height:550px; width:150px; background-color:silver; }
#menu li         { list-style: none; margin:0px; padding:0px; margin-bottom:2px; }
#menu li a       { margin:0px; padding:3px 0px; background-color:red; width:150px; text-decoration:none; display:block; font:11px verdana; color:white; }
#menu li a:hover { background-color:black; }

#links_inhalt { float:right; width: 630px; margin-right:10px !important; margin-right:5px; }

#inhalt { border-right:1px solid black; border-left:1px solid black; border-bottom:1px solid black; overflow:auto; height:500px;  width:630px; clear:left; }

#links        { list-style:none; margin:10px 0px 0px 0px; padding:0px; background: url("bg.gif") bottom; width:630px; }
#links li     { float:left; margin:0px; padding:0px; background:url("tab_rechts.gif") no-repeat right top; }
#links a      { display:block; padding:5px 15px; text-decoration:none; background:url("tab_links.gif") no-repeat left top; font: bold 11px verdana; color:black; }
#links span   { display:block; padding-bottom:1px; background:url("tab_rechts_aktuell.gif") no-repeat right top; }
#links span a { text-decoration:none; background:url("tab_links_aktuell.gif") no-repeat left top; font: bold 11px verdana; color:red; }

.klein { font:9px verdana; color:white; }
</style>

</head>
<body>

<div id="inhaltsbox">

     <!-- ANFANG DES KOPFES -->
     <div id="kopf">&nbsp;</div>
     <!-- ENDE DES KOPFES -->

     <!-- ANFANG MENU -->
     <div id="leftCol">
          <ul id="menu">
              <li><a href="#">&nbsp; Link1</a></li>
              <li><a href="#">&nbsp; Link2</a></li>
              <li><a href="#">&nbsp; Link3</a></li>
              <li><a href="#">&nbsp; Link4</a></li>
          </ul>
     </div>
     <!-- ENDE MENU -->

     <div id="links_inhalt">
          <ul id="links">
              <li><a href="#">Link 1.1</a></li>
              <li><span><a href="#">Link 1.2</a></span></li>
              <li><a href="#">Link 1.3</a></li>
          </ul>

          <div id="inhalt">
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
          </div>
     </div>
     <!-- ENDE der Inhaltsbox -->
</div>

</body>
</html>
 
Hallo,

danke für die Hilfe und die Schönheitskorrekturen :-) Eine Frage noch dazu, da bei minimiertem Fenster die Navigation irgendwo links verschwindet und man sie nicht wieder herscrollen kann, würde ich das gerne ändern... aber ich weiß keinen Weg das auch zu tun.

Danke schon mal und Gruß
 
Mit dieser alternativen Möglichkeit der Positionierung bleibt die linke Navigation im minimierten Fenster "verfügbar":

Code: 
html, body {
height: 100%;
}

#inhaltsbox { width:800px; height:600px; background-color:white; border:1px solid black;  position:relative; top:50%; margin:-300px auto auto auto; }
 
Nachdem ich mich jetzt seit ne ganzen Weile damit befasse einen Layer zu zentrieren stelle ich fest, nachdem alle Recherchen immer zum selben Resultat führen, es gibt hier wohl keine zufriedenstellende Lösung nur durch css? Bei minimiertem Fenster (ie) wird immer ein Teil abgeschnitten und das lässt sich nicht vermeiden, sei es an der Seite oder oben, wie es im aktuellen Lösungsvorschlag der Fall ist.

Einzige Lösung die ich hier gefunden habe ist wieder mit Tabelle, was zwar unschön ist aber es funktioniert.

Sollte mir jetzt einer sagen das ist falsch mit css kann man auch ne Box mittig ausrichten und bei minimiertem Fenster wird dennoch nichts abgeschnitten und ist komplett scrollbar dann Beginne ich meine Suche gerne von vorne, wäre aber dankbar für einen Tipp!

Gruß Doc
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück