✔ Erneut Problem mit div Layout

[matzseesi]

Hi Leute,

Es geht um gewisse inkompatibilitäten zwischen Opera + Mozilla und dem Internet Explorer.

Ich habe ein Layout entworfen, welches nur mit divs aufgebaut ist. Ganz einfach erklärt ganz oben eine Zeile für den Head dann direkt darunter eine Zeile wo der Content rein kommt und ganz unten eine Zeile für den Footer.

Die mittlere Zeile die ja den Content darstellt, wird mit 2 divs nochmals unterteilt in 1.) links einer Navigation und 2.) rechts dem eigentlichen Content.

Ich habe von beidem einen Screenshot gemacht (wies im Mozilla dargestellt wird und im IE)

Das Hauptdiv für den Content (also die ganze Zeile) wird beim Mozilla (meines erachtens falsch dargestellt) da er den Rahmen nicht auseinander zieht! So wie es der Internet Explorer macht sollte es eigentlich sein!

Ich hoffe ihr könnt euch aus den beiden Bildern vorstellen wie ich das meine!

Meine Frage nun: Wie kann ich das machen dass es bei beiden Browsern gleich dargestellt wird! dh. der Rahmen soll auseinandergezogen werden (ansonsten könnte ich zb auch keine Hintergrundfarbe für die gesamte Zeile machen)

Das witzige an der ganzen Geschichte ist dass der Mozilla den Rahmen zwar reserviert aber nur ganz oben darstellt!

Hier noch der CSS Teil des Grundaufbaus:

#root a { color:#000000;
          text-decoration:none;
          font-weight:bold; }
#root a:hover { color:#FF0000; }
#head { border:0px solid #000000;
        background-color:#BBBBBB;
        height:100px;
        margin:0px; }
#content { border-width:4px;
           border-color:#FF0000;
           border-style:solid;
           background-color:#BBBBBB;
           width:100%;
           margin-top:1px; }
#footer { border:0px solid #000000;
          background-color:#BBBBBB;
          height:20px;
          clear:left;
          margin-top:1px; }

Danke schon mal für alle Antworten

Gruß

Matthias

 

[akel]

Poste mal Deinen HTML-Code und die CSS für Navi- und Inhalts-Divs. Mir scheint, Du hast position:absolute verwendet?

Grüße
akel

 

[Maik]

Hi!

Nachdem bei meinem letzten Post niemand geantwortet hat, musste ich mich wohl oder übel selber durchkämpfen auch wenn es mir nicht ganz klar ist!

Bevor du hier unbegründete Vorwürfe in den Raum stellst, solltest du besser vorher in den Thread reinschauen -> http://www.tutorials.de/forum/css/283011-seitenlayout-mit-divs.html#post1465110

Zu deinem neuen Problem.

Wie es aussieht, handelt es sich bei den beiden Spalten um eine Floatumgebung, die zum Abschluss gecleart werden muss, damit das umschliessende Element #content seine tatsächliche Höhe annimmt, und den roten Rahmen vollständig um die beiden Spalten legt.

In dem Artikel http://positioniseverything.net/easyclearing.html findest du den gewünschten Lösungsansatz.

Sollte ich mit meiner Vermutung falsch liegen, dann poste mal den vollständigen HTML- und CSS-Code, denn den relevanten Teil hast du hier unter den Tisch gekehrt.

 

[matzseesi]

Habe es im selben Atemzug (als ich auf Posten gedrückt habe) gesehen dass gestern geantwortet wurde...

Habe allerdings keine E-Mail erhalten => sofort editiert !!

=> somit Sorry!

Danke für die Antworten werde mich gleich ranmachen!

Gruß Matze

 

[matzseesi]

Hi Leute,

Es funktioniert! => Danke vielmals! NUR ich verstehs nicht!

was genau macht der clearfix? normalerweiße (so kenn ich es von den Tables) wenn eine Zelle einen Inhalt hat dann wird die Zelle auch auseinandergezogen (um dem Inhalt Platz zu machen) nur warum macht es das div nicht? Wenn ich in das div einen Buchstaben reinschreibe dann zieht es den Rahmen genau auf die Größe des Buchstaben auseinander!

Erkennt das Hauptdiv (des Content) die beiden Divs darin nicht? Oder kann es mit der Float Umgebung nicht umgehen?

Gruß Matze

//EDIT

Ein kleines Problem habe ich noch!

Auf den Bildern habe ich die Überschrift rausgelöscht! Sie ist ganz oben mit der Schriftgröße 22px; mittig positioniert, obwohl er sie eigentlich in der Mitte des Divs anzeigen sollte! Funktioniert das vertical-align Attribut nicht bei divs?

          <div class="head">
            <div class="headline_main">Testueberschrift</div>
          </div>

.headline_main {
  text-align:center;
  vertical-align:middle;
  color:#898989; 
  font-family:Verdana; 
  font-size:22px;
  border:1px solid #FF0000;
}

.head { border:0px solid #000000;
        background-color:#BBBBBB;
        height:100px;
        margin:0px; }

Genauso werden auch links bei der Navigation die Überschriften oben ausgerichtet obwohl das vertical-align auf middle gestellt wurde!

Warum macht er das? Da sind sich die Browser übrigens einig!

Gruß und Danke Matthias

 

[Maik]

Wie ich es vorhin schon kurz angedeutet habe, sorgt die clear-Eigenschaft dafür, die float-Eigenschaft aufzuheben, und im Dokument wieder den normalen Textfluss herzustellen. Erst dann nimmt die umschliessende Box ihre tatsächliche Höhe an, und wird nicht am unteren Elementrand von den floatenden Spalten überlappt.

Richtig, die vertical-align-Eigenschaft funktioniert nicht bei Blockelementen, wie beispielsweise dem div-Element.

Die Überschrift liesse sich aber mit Hilfe der line-height-Eigenschaft vertikal zentrieren.

.headline_main {
  text-align:center;
  line-height:100px; /* entspricht der Höhe von #head */
  color:#898989; 
  font-family:Verdana; 
  font-size:22px;
  border:1px solid #FF0000;
}

 

[matzseesi]

Noch einmal danke! Funktioniert ebenfalls!

Noch eine Kurze Frage!

Wenn das Content Div auseinandergezogen wird (in der höhe), dann bleibt das Navigations div gleich hoch. Wieso kann ich die Spalten im Content div nicht auch automatisch auf die selbe Höhe anpassen lassen, wie das Content div auseinandergezogen wird mit z.B.: height:100% ?

Im Bild sieht man dass der Hintergrund weiß ist obwohl ich das Navigationsdiv auf 100% height eingestellt habe und der Hintergrund somit hellgrau sein sollte!

Danke Gruß Matze

 

[Maik]

Der Artikel http://positioniseverything.net/thr.col.stretch.html beschäftigt sich zwar mit einem dreispaltigen Layout, dessen Spaltenhöhen sich automatisch angleichen, aber die Technik lässt sich ebenso auf einen "Zweispalter" anwenden.

Der Gimmick ist hier ein Hintergrundbild (browncol.gif), das im übergeordneten Elternelement in der Vertikalen wiederholt wird, und so den Hintergrund für die linke Spalte erzeugt.