• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Layout 100% Breite

Comet

Comet

Administrator
Hallo Leute,

Habe wiedermal ein CSS-technisches Proplemchen und komm da gerade nicht ganz zu einem Ergebnis:
Folgender Code, sollte meiner Meinung nach den schwarzen Kasten rechts auf gleicher Höhe anzeigen wie die beiden linken "Kästschen".
Was habe ich hier vergessen, oder ist der Ansatz falsch ?

Hier sieht man das Ergebnis des Codes.


HTML: 
<html>
  <head>
    <title>CSS Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
html, body {
  height      : 100%;
  width       : 100%;
  font-family : Verdana, Arial, Helvetica;
  color       : #000000;
  margin      : 0px;
  padding     : 0px;
}

#main {
  width    : 100%;
  position : relative;
  margin   : 0px;
  padding  : 0px;
}

#topleft {
  margin-right : 406px;
  height       : 216px;
}

#bluebg {
  height     : 166px;
  background-color : #909090;
}

#menu {
  height     : 50px;
  background-color : #ACACAC;
}

#menu a {
  float           : left;
  padding         : 15px;
  font-family     : Verdana, Arial, Helvetica;
  font-size       : 12px;
  font-weight     : bold;
  color           : #000000;
  text-decoration : none;
}

#menu a:hover {
  color : #0963A1;
}

#logo {
  width      : 406px;
  height     : 216px;
  background-color : #000000;
  float      : right;
  margin     : 0px;
  padding    : 0px;
}
    </style>
  </head>
  <body>
    <div id="main">
      <div id="topleft">
        <div id="bluebg"></div>
        <div id="menu">
          <a href="#">Menu 1</a>
          <a href="#">Menu 2</a>
        </div>
      </div>
      <div id="logo"></div>
      <!-- Rest der Seite -->
      <!-- 3 Spalten Layout 100% -->
    </div>
  </body>
</html>

Vielen Dank für eure Hilfe
 
Guten Morgen :)

man muss eigentlich nur den nach rechts gefloateten Container im Quelltext umstellen:
HTML: 
<div id="main">
<!-- hier: -->  <div id="logo"></div>
      <div id="topleft">
        <div id="bluebg"></div>
        <div id="menu">
          <a href="#">Menu 1</a>
          <a href="#">Menu 2</a>
        </div>
      </div>
     
      <!-- Rest der Seite -->
      <!-- 3 Spalten Layout 100% -->
    </div>
dann wird er rechts gefloatet, anschließend werden die anderen Container angeordnet. Wenn man es anders herum macht, wird er in eine neue Zeile gesetzt, daher der Absatz.

schönen 3. Oktober noch,
planet4.
 
Hi,

ein kleiner Schönheitsfehler zeigt sich noch im IE6 ( im IE7 passt es )

Wenn man sich die Seite CSS Layout jetzt im IE6 anschaut erkennt man zwischen den float:right - DIV und dem restlichen Zeug auf der linken Seite einen Abstand von ungefähr 3px ( geschätzt ), den bekomm ich irgendwie nicht weg.

Eine Idee dazu ??
 
Wahrscheinlich gibt's mehr Möglichkeiten, aber damit ginge es:

#logo {
...
margin: 0 0 0 -3px;
...
}

und hier

#topleft {
margin-right : 403px;
...
}

Allerdings frage ich mich, was topleft hier macht. Ohne ginge das doch auch, oder?
 
Zuletzt bearbeitet:
Hi anna, topleft ist variabel und füllt die Weite auf 100%, logo hat eine fixe Breite.
Was der IE6 hier wieder rummeckert ist mir schleierhaft, werde aber wohl oder übel per * html diese Settings für den IE6 reinbasteln.

Dankeschön !
 
Comet schrieb:
Abstand von ungefähr 3px ( geschätzt ),
Zum Vergrößern anklicken....
Gut geschätzt :)
es handelt sich wohl um den "3px-Gap-Bug" :(
du kannst sicher gut englisch und kannst hier bei haslayout.net Einiges dazu lesen.

Ich würde es so lösen:

im Container #topleft das hier:
margin-right: 406 !important;
margin-right: 403px;

und im Container #logo das:
margin-left : 0 !important;
margin-left : -3px;

ich glaube, es klappt so, hab allerdings keine weiteren Browser getestet

planet4.
 
Das Layout ist im Quirksmodus, du solltest lieber einen DOCTYPE verwenden der die Browser in den Standardmode versetzt. So wirkt z.b. beim IE 6 der Boxmodelbug.

EDIT: was zumindest bei mr für die Beseitigung des Fehlers (den ich auch im IE 7 hatte) führt.
 
War auch meine erste Idee. Aber auch mit unterschiedlichen DOCTYPEs hat der IE6 sich nicht überreden lassen, die Lücke zu füllen.

@Comet: Du kannst das mit *html lösen. Ich hatte die Angaben bei meinem Test allerdings einfach mit in den Style reingeschrieben und nicht wirklich einen Unterschied im FF, Opera und IE7 gesehen.
 
Ich kann mir nicht vorstellen, dass es der 3 Pixel Bug ist, da die Elemente ja ein Layout haben. Und zumindest der IE7 zeigt die Lücke im Quirksmodus an und im Standardmode nicht. Und seltsame workarounds würde ich erst dann anwenden wenn ich wirklich sicher bin, dass es nicht an etwas anderem liegt. (Mangels IE 6 im Augenblick kann ich das nicht testen)
 
ich hab den Code jetzt mal zuhause verwendet und dort sieht die gnaze Sache komplett anders aus (s. Anhang) sowohl im FF 2.0.0.7 als auch im IE 6. Keine Spur von einer Lücke dafür ist der schwarze Block rechts unten.

[EDIT] Ach so, die kleine Lücke auf dem Bild kommt daher, weil ich die Breite von #logo Testweise auf 400px gesetzt hatte.
 

Anhänge

  • Bild2.gif
    Bild2.gif
    60,9 KB · Aufrufe: 6
dkdenz schrieb:
Wer ist Struppi? ;) :D
Zum Vergrößern anklicken....
na, der von Tim :D

um das Ganze noch zu verkomplizieren, zum Thema Vergeben-von-HasLayout für den IE:

"Die Allerdings korrigiert der IE dabei nicht den fehlerhaften Versatz, sondern verschiebt alle Elemente des Containers #col3 um den gleichen Betrag von 3 Pixeln. Daher ist es anschließend möglich, diesen Versatz Hilfe zweier negativer Margins zu korrigieren."

siehe: .../ie_hacks.html, wo es um eben diesen Hack geht.

planet4.
 
Hi,

Dankeschön, mit dem Hack mehr kann ich sehr gut leben !
( in dem Stylsheet sind mehr Hacks als sonstwas drin :-/ )
 
nein, das ist überhaupt keine Lösung. Bei relativ positionierten Containern, die von ihrer ursprünglichen Position verschoben werden, verhalten sich die nachfolgenden so, als wäre der Container immer noch an seiner ursprünglichen Position, der Platz wird quasi freigehalten. Das gäbe ein Chaos mit noch folgenden Inhalten.

planet4.
 
Sehe ich kein ernsthaftes Problem drin:
Code: 
#allesWasUntersLogoUswKommt{
clear:both;
position:relative;
top:-216px;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben