Frage zu CSS und div

joe23 · 19. Dezember 2005 22:08

Hallo zusammen,

ich bin gerade dabei meine erste Typo3-basierte Web Site zu erstellen und komm' in einem CSS Thema nicht weiter.
Die Seite wurde korrekt angezeigt, so lange sie innerhalb des Browserfensters am linken Bildrand ihren Ursprung hatte.
Ich wollte sie allerdings im Fenster mittig zentrieren und habe deshalb folgende Änderung vor genommen:

In meinem HTML Template habe ich um alle div-Container einen weiteren definiert, der die bisherigen umschließt ("outer-wrapper").
Das Ganze sieht dann so aus:

</div>

In meinem CSS File hatte ich ursprünglich innerhalb des body Statements folgenden Eintrag:

background: url(../img/backfauxVerlaufX.gif) repeat-Y;

Das hat bewirkt, dass mein linkes Menü (d.h. genauer gesagt, der Hintergrund des Menüs) immer so weit nach unten verlängert wurde, wie auf der rechten Seite Content vorhanden war.

Da nun mein Content von meinem neuen Outer-Wrapper umschlossen wird, dachte ich, dass ich dies nun einfach innerhalb des neuen outer-wrappers in meinem CSS-Template entsprechend eintragen muss.

Das Ergebnis ist leider:
Mein linkes Menü ist nun immer genau ein Browser Fenster lang. Es findet keine Anpassung an die Gesamtlänge (durch den unterschiedlich langen Content verursacht) statt.

Ich habe mir die Seite im Firefox mit der Web-Developer Extension angeschaut (Outline Block-Level Elements und Outline Selected Element) und habe folgendes (für mich Überaschendes) festgestellt:

Mein outer-wrapper umschließt auf der rechten Seite (des Content Bereiches) tatsächlich alle weiteren (sozusagen inneren) Elemente.
Im linken Bereich endet er jedoch genau nach meinem Menü, nach einer Browserfensterlänge (unabhäbgig davon, dass mein Content rechts noch weiter geht...

Wenn ich das etwas umständlich ausgedrückt haben sollte:
Unter www.hochstetten.feg.de/t3 könnt Ihr Euch die Baustelle anschauen. Probiert mal mit Firefox und o.g. Outline-Einstellungen, dann seht Ihr, was ich meine...

Ich hätte jedenfalls erwartet, dass mein outline-wrapper Element ein Rechteck darstellt, das eine absolute Breite und eine vom Content getriggerte dynamische Länge hat. (Aber nicht, dass es links kürzer ist, als rechts - also gar kein Rechteck!

Weiß hier jemand Rat? Oder wo ist hier mein Gedankenfehler?

Vielen Dank vorab und viele Grüsse,
Joachim

just2b · 20. Dezember 2005 05:37

Hallo Joachim,

sorry ich hab das ganze jetzt nicht so wirklich durchgelesen, aber wenn du willst, dass die divs links und rechts jeweils bis zum Boden gehen, dann geht das so nicht!
das musst du anders lösen und das Stichwort für weitere Suchen ist faux columns

lg georg

joe23 · 20. Dezember 2005 15:41

Hallo Georg,

genau das ist ja der Punkt.
Ich habe mir eine Doku zu Gemüte geführt, die ich über den Suchbegriff "faux columns" gefunden hatte.
Die einfachste Möglichkeit die hier beschrieben wird, ist genau das, was ich ursprünglich hatte:
Ein Menü am linken Rand des Browserfensters und die Verlängerung nach unten (je nach Content Länge) durch ein entsprechendes Backround Image das so oft vertikal wiederholt wird, bis das Browserfenster bis ganz unten aufgefüllt ist.
Nun ist mein "Mutterelement" jedoch nicht mehr das Browserfenster, sondern mein all umschließendes neues div Element (outer-wrapper).
Aber genau damit funktioniert's bei mir eben nicht....

Kann mir sonst jemand vielleicht auf die Sprünge helfen?

Viele Grüsse,
Joachim

seve1980 · 20. Dezember 2005 17:02

Hallo Joe23,
dieses Problem hatte ich auch schon, es kann an 2 Dingen liegen, zum einen, das du in einem deiner Seiteninhalte am anfang ein paar lehrzeichen oder so was hast, so blöd wie das klingt, aber das war bei mir schon mal der grund. Oder deine css datei stimmt nicht. könntest du mal deine css datei reinstellen? Vielleicht kann ich dir dann wieterhelfen. Ich würde an deiner stelle mal nach dem overflow: auto; in selfhtml schaun. dort sind eigentlich alle css sachen beschrieben.

hoffe es hilft dir weiter, wenn nicht einfach code reinstellen

Grüße
seve1980

joe23 · 20. Dezember 2005 22:32

Hallo seve1980,

nein so richtig weiter gekommen bin ich immer noch nicht.
Tatsache ist - und dass scheint der Knackpunkt zu sein - mein div Element, das alle anderen umschließt (outer-wrapper), wird nicht grösser, wenn im Content-Bereich das Tochter-div-Element (content-wrapper) größer wird.
Mein Background-Image des outer-wrappers wird schon dargestellt, aber eben immer nur genau so gross wie das Browser Fenster.
Verkleinere ich das Browser Fenster, wird auch das Hintergrund-Image des Outer-Wrappers entsprechend verkürzt.

Ich würde daher mal auf Dein Angebot zurück kommen und mein CSS File mal mit anhängen. Vielleicht fällt Dir (oder jmd. anders) ja etwas auf...

Vielen Dank schon mal im vorraus,
Joachim

@import url (content.css);

body, html {
border: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
text-align: center;
font: normal 100.01% Arial, Helvetica, Verdana; sans-serif;
}

#outer-wrapper {
text-align: left;
margin: 0 auto 0 auto;
width: 845px;
position: relative;
height: 100%;
background: url(../img/backfaux.gif) repeat-y;
}

#header {
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 845px;
height: 85px;
background: #ffffff;
}

#logo {
position: absolute;
right: 5px;
top: 21px;
width: 238px;
height: 45px;
}

#topmenu {
position: absolute;
left: 22px;
bottom: 10px;
}

#header2 {
position: absolute;
z-index: 5;
top: 85px;
left: 0;
width: 845px;
height: 100px;
background: url(../img/h2BlueX.gif) repeat-x;
}

#header-corner {
position: absolute;
z-index: 9;
top: 55px;
left: 195px;
width: 45px;
height: 45px;
background: url(../img/eck.gif);
}

#header-text {
position: absolute;
bottom: 15px;
right: 35px;
font: normal 20px Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
}

#content-wrapper {
position: absolute;
top: 200px;
left: 280px;
width: 527px;
}

#content {
position: relative;
}

#copyright {
padding: 20px 0 0 0;
clear: both;
font: normal 11px Arial,Helvetica, Verdana, sans-serif;
color: #999999;
}

#left {
position: absolute;
z-index: 2;
top: 0;
left: 0;
background: url(../img/leftBgVerlaufX.gif) repeat-y;
width: 240px;
height: 100%;
}

#leftmenu {
margin: 340px 0 0 20px;
}

#topmenu ul {
margin: 0;
padding: 0;
}

#topmenu li {
float: left;
display: block;
color: #000000;
padding: 0 10px 0 0;
font: normal 14px Verdana,Arial,Helvetica,sans-serif;
}

#topmenu li a {
text-decoration: none;
color: #000000;
}

#topmenu li a:hover {
color: blue;
}

#topmenu li.ACT,
#topmenu li.CUR {
font-size: 18px;
position: relative;
top: -4px;
}

#leftmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#leftmenu li {
text-decoration: none;
font: normal 13px Arial, Helvetica, Verdana, sans-serif;
padding: 5px 0 5px 30px;
}

#leftmenu li a {
text-decoration: none;
}

#leftmenu li a:hover {
color: red;
}

#leftmenu li a {
color: #000000;
}

#leftmenu li.ACT,

#leftmenu li.CUR {
background: url(../img/leftmenu-bg_80.gif) no-repeat;
font-weight: bold;
color: #000000;
}

ttb · 21. Dezember 2005 23:19

Nun ja, deine CSS-Datei ist, vorsichtig ausgedrückt, ziemlich verkorkst - kein Wunder, dass die Seite da aus den Fugen gerät.

1. solltest du dich entscheiden, ob absolute oder relative Positionierung verwendet werden soll
2. prüfe mal, ob die Abstände auch passen (margin/padding)
3. solltest du lieber mit float arbeiten - dann klappts auch mit dem korrekten Umfluss

seve1980 · 22. Dezember 2005 16:17

dann sehen wir uns den patienten mal an:

body, html {
border: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;

wenn du die Position mit relative angibst, dann brauchst du ein referenz element und das kannst du nicht haben denn der body geht um alles drum rum,=> würde ich rauslöschen

text-align: center;
font: normal 100.01% Arial, Helvetica, Verdana; sans-serif;
}

deine font anweisung verstehe ich nicht, sagt mir nix. Aber würde gerne wissen was das ding macht

#outer-wrapper {
text-align: left;
margin: 0 auto 0 auto;
width: 845px;
position: relative;
height: 100%;
background: url(../img/backfaux.gif) repeat-y;
}

ich denke hier solltest du noch einen Befehl einfügen der heißt:

overflow: auto;

dann macht er automatisch an der seite einen scroll balken hin wenn der Inhalt zu groß wird. hoffe das löst dein Problem

Ansonsten sieht dein css code nicht schlecht aus. Du kannst es ja mal versuchen, wenn es nicht klappt, dann einfach nochmal posten, dann bekommen wir das schon hin ;-)

wünsche euch allen schöne Weinachenten

grüße

joe23 · 22. Dezember 2005 22:04

Hi seve1980,

ganz herzlichen Dank für Deine Unterstützung! 🙂

Der entscheidende Hinweis war das Einfügung von "overfloew: auto".

Zur Font Anweisung kann ich nur sagen: Ich hab den Tip mal von einer kleinen Doku übernommen. Darin stand aber keine Erklärung explizit zu dieser Font Anweisung.
Ich hab' mal recherchiert und bin auf unten anhängende Erklärung gestossen.

Vielen Dank nochmals und Dir und auch allen andern im Forum ein gesegnetes und schönen Weihnachtsfest!

Joachim

Microsoft Internet Explorer - Ein Bug bei der Anwendung relativer Schriftgrössen

Wenn man im Internet Explorer unter Windows die 5 Default-Schriftgrössen durchschaltet auf einer Seite, die relative Schriftgrössen verwendet, aber für das body-Element entweder keine oder die Eigenschaft font-size: 1em setzt, werden grosse Schriftgrössen beim Vergrössern gigantisch, kleine Schriftgrössen beim Verkleinern mikroskopisch.

Zusätzlich machen manche Installationen des IE die Verwendung relativer Fontgrößen sogar fast unmöglich: seine eigenen Voreinstellungen für die Schriftgröße (im Menü "Ansicht") werden immer wieder auf "Sehr klein" (zurück)gesetzt. Das Verstellen des Wertes zeigt keine Wirkung - beim nächsten Neustart tritt der Fehler wieder auf.

Zur Umgehung dieses Bugs gibt es eine einfache Lösung:

Man setzt für das body-Element eine Schriftgrösse von 100.01% und nicht 1em und vermeidet möglichst für alle Elemente unterhalb body Schriftgrössen kleiner als 0.8em oder 80%.

Update:
100.01% (und nicht 100% oder 101%) deswegen, weil Opera (zumindest bis Version 6.x) durch einen internen Bug beim Kalkulieren der Schriftgröße diese im Vergleich zu den anderen üblichen Browsern zu klein darstellt. Deshalb muß die Schriftgröße größer als 100% sein. Bei der bisher üblichen Methode, die Schriftgröße auf 101% zu setzen, fällt aber Safari mit einem Bug auf: er vergrößert die Schrift überproportional. Deshalb sollte man 100.01 % oder 99% nutzen. (Danke an Thomas Scholz für diesen Hinweis)

Dadurch werden die Grössenunterschiede beim Durchschalten der Schriftgrössen gut ausgeglichen, und auch kleine Schriftgrössen bleiben lesbar, zumindest bis 0.8em bzw. 80%.