Höhe festlegen und DOCTYPE

[Stanload]

Hallöchen,

da der andere Beitrag leider schon geschlossen wurde, geht's hier nun hoffentlich weiter *g*.

Ich habe links meine Boxen und daneben mein Text-Content. Da manchmal das Textfeld vielleicht nicht so viel Inhalt hat, kann es nun passieren, dass meine Boxen an der linken Seite weiter laufen (was sie ja auch sollen), aber irgendwie in der Luft hängen:
http://test.stanload.de/test02.2.htm

Wenn ich nun im Content ein _height:540px;_ definiere, überlappen die linken Boxen nicht mehr mit dem Textfeld:
http://test.stanload.de/test02.2.1.htm

Wisst Ihr, wie man dies lösen kann, dass das Textfeld immer mind. soweit nach unten geht, wie auf der linken Seite Boxen sind oder zumindest bis zum Browserende?

Für meine Tests nutze ich derzeit (auf der Arbeit) nur IE55.

Und dann noch etwas zum DOCTYPE:
Ich verstehe die Meldung mit dem _</head> -> which is not finished_ nicht. Desweiteren verstehe ich die Sache mit dem _<div id="mcontent"> -> " already/first defined_ nicht:
http://validator.w3.org/check?uri=http%3A%2F%2Ftest.stanload.de%2Ftest02.2.htm

Bis denn

Stanload

[Heiner]

Hallo,

Eine ID darf dokumentweit nur einmal existieren. Wenn Du mehrere DIVs gleich formatieren willst, dann solltest Du Ihnen eine Klasse verpassen. Hierzu .klasse { Eigenschaften } (vorne mit Punkt!) ins CSS schreiben und <div class="klasse"> (vor klasse hier kein Punkt!) ins HTML.

Heiner

[Stanload]

Hallöchen,

Eine ID darf dokumentweit nur einmal existieren. Wenn Du mehrere DIVs gleich formatieren willst, dann solltest Du Ihnen eine Klasse verpassen. Hierzu .klasse { Eigenschaften } (vorne mit Punkt!) ins CSS schreiben und <div class="klasse"> (vor klasse hier kein Punkt!) ins HTML.

Besten Dank und behoben.

Bis denn

Stanload

[Stanload]

Hallöchen,

Hallo,

Eine ID darf dokumentweit nur einmal existieren. Wenn Du mehrere DIVs gleich formatieren willst, dann solltest Du Ihnen eine Klasse verpassen. Hierzu .klasse { Eigenschaften } (vorne mit Punkt!) ins CSS schreiben und <div class="klasse"> (vor klasse hier kein Punkt!) ins HTML.

Heiner

Bis denn

Stanload

[Stanload]

Ups, da ging wohl was schief *g*.

Bis denn

Stanload

[MudGuard]

Hi,

Und dann noch etwas zum DOCTYPE:
Ich verstehe die Meldung mit dem _</head> -> which is not finished_ nicht.

head MUSS ein title-Element enthalten. Du beendest den head, ohne ein title darin zu haben, also ist der head noch nicht beendet.

Desweiteren verstehe ich die Sache mit dem _<div id="mcontent"> -> " already/first defined_ nicht:

eine ID dient zum Identifizieren eines einzigen Elements. Eine ID darf also im Dokument genau ein einziges Mal vergeben werden.
Du willst mehrere div gleich per CSS formatieren. Dafür gibt es das class-Attribut, die Klassennamen dürfen beliebig oft verwendet werden.

cu,
Andreas

[Stanload]

Hallöchen,

head MUSS ein title-Element enthalten. Du beendest den head, ohne ein title darin zu haben, also ist der head noch nicht beendet.

Und wie schaut's aus, wenn ich kein <titel> angeben möchte?

eine ID dient zum Identifizieren eines einzigen Elements. Eine ID darf also im Dokument genau ein einziges Mal vergeben werden.
Du willst mehrere div gleich per CSS formatieren. Dafür gibt es das class-Attribut, die Klassennamen dürfen beliebig oft verwendet werden.

Besten Dank, da war Heiner einen Tick schneller*g*.

Bis denn

Stanload

[MudGuard]

Hi,

Und wie schaut's aus, wenn ich kein <titel> angeben möchte?

Ein <titel> darfst Du nicht angeben.
Ein <title> dagegen mußt Du angeben. Über die Länge des darin enthaltenen Texts wird nichts gesagt.

cu,
Andreas

[Stanload]

Hallöchen,

Ein <titel> darfst Du nicht angeben.
Ein <title> dagegen mußt Du angeben. Über die Länge des darin enthaltenen Texts wird nichts gesagt.

Ups, da hatte ich mich wohl verschrieben *g*.
Nun ja, wollte dort eigentlich nichts hinschreiben, aber wenn der Validator es so haben möchte, soll er es doch bekommen ;-).

Bei der anderen Sache mit der Höhe des Feldes kannst Du mir aber nicht weiterhelfen, oder?

Bis denn

Stanload

[Jeena Paradies]

Hallo ,

Wisst Ihr, wie man dies lösen kann, dass das Textfeld immer mind. soweit nach unten geht, wie auf der linken Seite Boxen sind oder zumindest bis zum Browserende?

Nach meinen erfahrungen geht es mit diesem Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
!Wichtig ohne die URL. Ich glaube aber dass da als einziger Browser der IE einen unnützen vertikalenBalkenmacht, was aber nicht weiter stört.

Ürigens hängen bei meinem Opera 7.21/Linux die linken kleinen Boxen immer noch in der großen Text Box drin.
<img src="http://jeenaparadies.servebeer.com/open/stan.png" border="0" alt="">

Grüße
Jeena Paradies

[Stanload]

Hallöchen,

Nach meinen erfahrungen geht es mit diesem Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
!Wichtig ohne die URL. Ich glaube aber dass da als einziger Browser der IE einen unnützen vertikalenBalkenmacht, was aber nicht weiter stört.

Verstehe ich nicht wirklich, was das mit dem DOCTYPE zu tun hat, damit ich das Textfeld bis unten hin habe :-(.
Hm, mich stört dieser Balken schon, da ich die Boxen in einander haben möchte *g*.

Ürigens hängen bei meinem Opera 7.21/Linux die linken kleinen Boxen immer noch in der großen Text Box drin.
<img src="http://jeenaparadies.servebeer.com/open/stan.png" border="0" alt="">

Hm, ich weiss da leider nicht weiter.
Die Boxen sollen in das Textfeld hineingehen, aber eigentlich nicht so, dass der Text dort im Hintergrund schon beginnt.

Die Boxen sind 135px breit, ebenso die Menü-Box, in der die kleinen gepackt sind. Das Textfeld fängt nach 130px an und hat ein padding von 15px. Demnach sollte es eigentlich ein Padding von 10px geben.

Bis denn

Stanload

[Maxx]

Hallo,

Die Boxen sollen in das Textfeld hineingehen, aber eigentlich nicht so, dass der Text dort im Hintergrund schon beginnt.

Die Boxen sind 135px breit, ebenso die Menü-Box, in der die kleinen gepackt sind. Das Textfeld fängt nach 130px an und hat ein padding von 15px. Demnach sollte es eigentlich ein Padding von 10px geben.

im IE passt's? Dann ist es vermutlich der IE BOX-Model Bug.
http://www.fabrice-pascal.de/artikel/ie5boxmodel

für die Höhe empfehle ich dir:
.html    {height:100%;}
.body    {height:100%;}
.content {height:100%;}

Wobei es nicht 100% klappt, da die obenliegende Navigation nicht innerhalb des content liegt. Wenn du deren Höhe prozentual angibst, könntest die diese wiederum vom content abziehen.

Wie auch immer, viel Spaß

Jochen

[Maxx]

Hi,

für die Höhe empfehle ich dir:
.html    {height:100%;}
.body    {height:100%;}

^
ist natürlich völliger Quatsch. html und body (ohne .)

Grüße,

Jochen

[Stanload]

Hallöchen,

im IE passt's? Dann ist es vermutlich der IE BOX-Model Bug.
http://www.fabrice-pascal.de/artikel/ie5boxmodel

Werde ich mir noch einmal genauer ansehen.

für die Höhe empfehle ich dir:
.html    {height:100%;}
.body    {height:100%;}
.content {height:100%;}

Wobei es nicht 100% klappt, da die obenliegende Navigation nicht innerhalb des content liegt. Wenn du deren Höhe prozentual angibst, könntest die diese wiederum vom content abziehen.

Das klappt leider beim IE55 nicht

Bis denn

Stanload

[Maxx]

Hallöchen,

.html    {height:100%;}
.body    {height:100%;}
.content {height:100%;}

Das klappt leider beim IE55 nicht

Das liegt daran, dass das Elternelement von content nicht body ist. Du hast noch ein center dazwischen geklemmt.

html     {height:100%;}
body     {height:100%;}
.center  {height:100%;}
.content {height:100%;}

Grüße,

Jochen

[Stanload]

Hallöchen,

Das liegt daran, dass das Elternelement von content nicht body ist. Du hast noch ein center dazwischen geklemmt.

html     {height:100%;}
body     {height:100%;}
.center  {height:100%;}
.content {height:100%;}

Leider auch nicht, es entsteht wieder eine vertirkale Spalte.

Bis denn

Stanload

[Maxx]

Hmmmm,

Leider auch nicht, es entsteht wieder eine vertirkale Spalte.

Eine vertikale? Ja, gibt es denn auch horizontale Spalten, und womöglich vertikale Zeilen? Uiuiui, und ich dachte immer, dass im europäischen Sprachraum Spalten grundsätzlich vertikal sind. Und warum wieder? Unter welchen Umständen entsteht sie nicht? Und wo entsteht sie? Rechts, links, in der Mitte? Und stört sie denn überhaupt? Und weit breit ist selbige? Von oben bis unten, teilweise? Nur ein bischen Spalte oder viel Spalte? Hast du es schon mit einem .vertikaleSpalte {display:none} versucht? Oder visibility:hidden. Und in welchem Browser unter welchem Betriebssytem tritt das auf? Warum färbst du die Spalte nicht ein und benutzt sie als Designelement? Ändere das Thema deiner Seite und berichte über Gletscherspalten ;-)

Grüße,

Jochen

[Stanload]

Hallöchen,

Eine vertikale? Ja, gibt es denn auch horizontale Spalten, und womöglich vertikale Zeilen? Uiuiui, und ich dachte immer, dass im europäischen Sprachraum Spalten grundsätzlich vertikal sind. Und warum wieder? Unter welchen Umständen entsteht sie nicht? Und wo entsteht sie? Rechts, links, in der Mitte? Und stört sie denn überhaupt? Und weit breit ist selbige? Von oben bis unten, teilweise? Nur ein bischen Spalte oder viel Spalte? Hast du es schon mit einem .vertikaleSpalte {display:none} versucht? Oder visibility:hidden. Und in welchem Browser unter welchem Betriebssytem tritt das auf? Warum färbst du die Spalte nicht ein und benutzt sie als Designelement? Ändere das Thema deiner Seite und berichte über Gletscherspalten ;-)

*lol* nimm es mir nicht übel, aber auf alle Fragen kann ich Dir nicht antworten.
Ich nutze MS und IE55. Nur, wenn ich im _Content_ eine feste Höhe mitgebe, entsteht zwischen den linken Boxen und dem Textfeld eine Spalte, obwohl die linken Boxen eigentlich ein wenig in das Textfeld überlappen sollten. Gebe ich die Höhe nicht an, dann schaut's richtig aus.

ohne Spalte:
http://test.stanload.de/test02.2.htm

mit Spalte:
http://test.stanload.de/test02.2.1.htm

Bis denn

Stanload

[Maxx]

Hallöchen,

ohne Spalte:
http://test.stanload.de/test02.2.htm

mit Spalte:
http://test.stanload.de/test02.2.1.htm

sorry, aber da wirst du dich alleine durchbeissen müssen. Auf die Schnelle sehe ich auch keinen Zusammenhang zwischen der Angabe height:nnpx und der Verschiebung der margin.

Grüße,

Jochen

[molily]

Hallo Stanload,

Ich nutze MS und IE55. Nur, wenn ich im _Content_ eine feste Höhe mitgebe, entsteht zwischen den linken Boxen und dem Textfeld eine Spalte, obwohl die linken Boxen eigentlich ein wenig in das Textfeld überlappen sollten. Gebe ich die Höhe nicht an, dann schaut's richtig aus.

Das scheint insgesamt ein MSIE-Fehler zu sein. Du versuchst die Überlappung mit kleinerem margin-left als beim normalen Nebeneinanderfließen nötig zu realisieren. Das ist meines Wissens so nicht bzw. nur eben im MSIE möglich.

Die Überlappung im Opera kommt daher, dass du komplett nach dem MSIE-Boxmodell arbeitest.

#menu {width:135px;}
.mcontent {width:135px; padding: 3px 3px 3px 3px;}

Bei einem solchen Konstrukt etwa ist die Gesamtbreite des Elements mit der Klasse mcontent dem W3C-Boxmodell zufolge 141px (3+135+3). Es wäre also breiter als das Elternelement #menu, daher die fließt es im Mozilla und Opera aus diesem rechts heraus. Das wird besonders ersichtlich, wenn #menu einen Rahmen hat.
Nach dem MSIE-Boxmodell wäre das Element genauso breit wie das Elternelement, da sich das padding-left und padding-right nicht nur width hinzuaddiert, sondern der Inhalt entsprechend auf beiden Seiten um 3px gestaucht wird.

Eine einigermaßen einheitliche Überlappung lässt sich nur anders lösen, beispielsweise durch eine Kombination von position:relative, einer vertikalen Verschiebung mittels left, einem kompensierenden negativen margin-left und einer entsprechenden höheren Gesamtbreite:

#center {
 margin:auto; /* Zentrierung in MSIE 6 standardkonformer Modus, Mozilla/Gecko, Opera und anderen Browsern */
 width:770px;
 text-align:left;
}

#menue {
 width:130px;
 float:left;
}

.mcontent {
 margin-top:20px;
 padding:3px;
 width:144px; /* Ergibt nach dem W3C-Boxmodell zusammen mit dem padding und border eine Gesamtbreite von 1+3+144+3+1=152px, nach dem MSIE-Boxmodell nur 146px. Hier müsste zwischen MSIE 4/5 und 6 unterschieden werden, damit die Überlappung gleich ist, siehe Tanteks Box Modell Hack bzw. Conditional Comments. Der Wert kann natürlich auch kleiner sein. */
 position:relative; left:20px; margin-left:-20px; /* Nach rechts verschieben und über margin-left wieder nach links ziehen */
 color:#464c64; background-color:#a7aeb8;
 border:1px solid #1c3b63;
 font-size:10px;
 -moz-border-radius:5px;
}

#content {
 margin:0 0 0 135px; /* Minimum wäre 130px, dann müssten die Boxen direkt aneinander anschließen als ob kein margin-left gesetzt wäre. MSIE 6 macht trotzdem immer einen Abstand, da bewirkt margin-left erst ab 134 oder 135px eine Verschiebung nach rechts. */
 padding:10px 10px 10px 20px;
 height:440px;
 background-color:#bfc4cb;
 border:1px solid #606060;
}

Allerdings wirst du mit einer festen Höhe in anderen Browsern als MSIE Probleme bekommen, weil dort der Text aus der Box fließen wird und die Höhe nicht automatisch vergrößert wird. Eigentlich ist für eine nach oben offene und anpassungsfähige Mindesthöhe die Eigenschaft min-height http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#min_height gedacht, welche jedoch nicht breit unterstützt wird. Man könnte mit Selektorhacks arbeiten, um unterschiedlichen Browsern unterschiedliche Styles zuzuordnen:

#content {height:450px;}
body>#content {height:auto; /* Mache vorige Regel rückgängig */ min-height:450px;} /* Der MSIE kann kein Kindselektor, daher ignoriert er diese Regel. Man hofft darauf, dass Browser, die den Kindselektor verstehen, auch min-height umsetzen. */

Eine weitere Möglichkeit wäre das Einfügen eines leeren Elements am Ende von #content, welches clear:left erhält. Dadurch hat #content im MSIE und Opera immer mindestens die Höhe von #menue: link:http://home.t-online.de/home/dj5nu/fanhost/sl/. Mozilla macht das offenbar nicht, wenn margin-left für #content einen bestimmten Wert erreicht (keine Ahnung, woran das liegt, ich dachte immer, Mozilla hätte damit keine Probleme).

Mathias

[molily]

Korrektur des Links:

...

Eine weitere Möglichkeit wäre das Einfügen eines leeren Elements am Ende von #content, welches clear:left erhält. Dadurch hat #content im MSIE und Opera immer mindestens die Höhe von #menue: http://home.t-online.de/home/dj5nu/fanhost/sl/. Mozilla macht das offenbar nicht, wenn margin-left für #content einen bestimmten Wert erreicht (keine Ahnung, woran das liegt, ich dachte immer, Mozilla hätte damit keine Probleme).

Mathias

[Stanload]

Hallöchen,

OK, nun habe ich die Vorschläge von mobility eingearbeitet und beim IE55 funzt alles:
http://test.stanload.de/test02.2.2.htm

Könntet Ihr mal schauen, wie es nun im IE4, IE5, IE6, NN, Opera und Mozilla läuft?
Würde mich über weiteren Feedback freuen *g*.

Bis denn

Stanload