nicht angemeldet
<div> immer auf gesamter Seitenhöhe?
Hi,
ich bin gerade dabei, ein Layout per CSS zu basteln.
Dabei habe ich auf der Linken Seite einen Kasten „Menü“, der zurzeit folgende Eigenschaf-ten hat:
#menu {
position: absolute;
width: 180px;
height: auto;  hier liegt wahrscheinlich der Fehler
left: 0px;
top: 90px;
background:#FF0000;
z-index:4;
}
Desweiteren habe ich für den Text der Seite einen Kasten in der Mitte der Website.
Ich möchte, dass der linke Kasten bzw. das Menü immer auf gesamter Höhe der Seite ange-zeigt wird, egal wie hoch diese Seite ist! Dies funktioniert allerdings nicht mit der Eigenschaft „height: auto“. Setze ich „height“ auf „100%“, dann wird lediglich 100% des Browserfensters genommen, und nach unten hin angezeigt, d.h. weil das gesamte Menü um 90 Pixel von oben herunter gerutscht ist, werden diese 90 Pixel nach unten hin angehängt. (und das funk-tioniert nicht mal im IE)
Steht nun in der Mitte ein Text, welcher von der Höhe noch größer ist als das Menü selbst, so wird dieses ebenfalls nicht nach unten „verlängert“
Wisst ihr, wie ich dieses Problem lösen kann?
*g* Ich hoffe, ihr versteht, was ich meine. Wenn nicht, sagt es bitte…
Ich bedanke mich schon mal für die Hilfe.
Vielen Dank und Viele Grüße
Erri
-
Hallo!
Ich möchte, dass der linke Kasten bzw. das Menü immer auf gesamter Höhe der Seite ange-zeigt wird, egal wie hoch diese Seite ist! Dies funktioniert allerdings nicht mit der Eigenschaft „height: auto“. Setze ich „height“ auf „100%“, dann wird lediglich 100% des Browserfensters genommen, und nach unten hin angezeigt, d.h. weil das gesamte Menü um 90 Pixel von oben herunter gerutscht ist, werden diese 90 Pixel nach unten hin angehängt. (und das funk-tioniert nicht mal im IE)
Höhenproblem: Verwende diese CSS-Eigenschaften:
html,body {
height: 100%;
}
Bestimmte Browser stellen diesen Elementen per default eben nicht die gesamte Höhe zur Verfügung.
Außerdem: Warum absolute Positionierung?Beste Grüße
Viennamade-
Diese Moeglichkeit hab ich auch schon ausprobiert...
nur funktioniert das bei mir nicht...sobald mehr text drin ist...das es zum scrollen anfaengt.. bricht das menue...*bei mir war der fall mit background kachel* einfach ab-
Hi,
Diese Moeglichkeit hab ich auch schon ausprobiert...
nur funktioniert das bei mir nicht...sobald mehr text drin ist...das es zum scrollen anfaengt.. bricht das menue...*bei mir war der fall mit background kachel* einfach abgenauso ists bei mir auch...
Viele Grüße
Erri-
tja...musst wohl doch zum table...
wobei div auch manchmal ziehmlich hilfreich ist...
das benutz ich immer wenn ich mal was frei im raum auf einer seite positionieren muss ;)-
Hi,
tja...musst wohl doch zum table...
Da habe ich eigentlich keine Lust mehr zu...
Jetzt wo ich mich vom CSS-Layout überzeugen lassen habe. *fggg*
Das hat lang genug gedauert.Dann werde ich mein Layout eben so anpassen, dass ich mit den jetzigen Möglichkeiten des Divs klarkomme.
Viele Grüße und nocheinmal vielen Dank für eure schnelle Hilfe
Erri-
Hi,
Dann werde ich mein Layout eben so anpassen, dass ich mit den jetzigen Möglichkeiten des Divs klarkomme.
das finde ich ist eine sehr sinnvolle Entscheidung. Aber bitte setze jetzt nicht "div" als Alternative zum Tabellenlayout. Div ist nichts weiter als ein bedeutungsloses blocklevel-Element, welches zum Gruppieren von anderen Elementen verwendet wird. Eine Seite mit lauter - womöglich mehrfach ineinander verschachtelter - Divs ist nicht besser als ein Tabellenlayout, manchmal sogar schlechter.
Und vielleicht noch zur Eingangsfrage:
'height:auto' ist nicht falsch, aber überflüssig, da dies der Default für Div-Elemente ist. Die Höhe richtet sich dann nach dem Inhalt, was für die meisten Fälle ja auch sinnvoll ist.freundliche Grüße
Ingo
-
-
-
-
-
Hi Viennamade,
Höhenproblem: Verwende diese CSS-Eigenschaften:
html,body {
height: 100%;
}Wie muss ich dann die height-Eigenschaft im Menü angeben?
auto oder auch 100% ?Außerdem: Warum absolute Positionierung?
Wenn ich relativ verwendet habe, hat es das Menü ganz nach oben verzogen.
Äh Moment, ich habe es gerade noch einmal mit relative versucht und jetzt gehts auf einmal. Ich verstehe das nicht...Viele Grüße
Erri-
Hallo!
Wie muss ich dann die height-Eigenschaft im Menü angeben?
auto oder auch 100% ?Außerdem: Warum absolute Positionierung?
Wenn ich relativ verwendet habe, hat es das Menü ganz nach oben verzogen.
Äh Moment, ich habe es gerade noch einmal mit relative versucht und jetzt gehts auf einmal. Ich verstehe das nicht...Also gehts jetzt?
Hiermit ...
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
html,body {height:100%;}
-->
</style>
... werden den Elementen html (das Überdrüber-Element) und body (das Kommt-Gleich-unter-HTML-Element) Platz für 100 % des Browserfensters frei gemacht. Damit haben Deine HTML-Objekte (Menü und der Textkasten) überhaupt erst 100% der Browserfensterhöhe zur Verfügung.
Wie Du das festlegst kannst Du dem Beispiel oben entnehmen, ich empfehle Dir aber es auch nachzulesen: http://de.selfhtml.org/css/formate/zentrale.htm#topBeste Grüße
Viennamade-
Hi,
Also gehts jetzt?
Wenn ich im body und html style height=100% setzte... kommt das hier heraus:
https://forum.selfhtml.org/?t=89354&m=533872Viele Grüße
Erri
-
-
-
-
Das Problem hatte ich auch mal...
Div kann das irgendwie nicht so wies mir vorkommt...
man konnte mir hier keine loesung anbieten......Mir wurde zu <table> geraten...was ich gemacht hab und einwandfrei funktioniert hat ...
deswegen rate ich es dir auch ;)das div kann das nicht...
und wenn jemand weiss wie das doch geht...
mich wuerds auch interessieren.-
Hi,
das div kann das nicht...
und wenn jemand weiss wie das doch geht...
mich wuerds auch interessieren.das verstehe ich nicht, wozu sollen dann diese div`s gut sein?
Ich habe mich doch gerade erst davon überzeugen lassen, dass ich CSS zum Seitenlayout verwende, und jetzt stoße ich schon an die Grenzen? *heul*Hast du Tables verwendet und trotzdem dein Seitenlayout mit CSS bzw. Div`s aufgebaut?
Viele Grüße
Erri-
CSS ist trozdem das beste was ich da brauchen kann ;)
Mit css kannst du ja auch table definieren...;)Beispiel (letztes projekt)
http://salomo.altmuehlnet.de/stuff/layout/blue/blue/ich hab das davor mit div aufgebaut was nicht funktioniert hat weil das menue links einfach stehen bleibt...
wobei ich dann wie gesagt table genommen hab...
Nichts gegen css oder so da ist absolut nicht zu meckern nur machen die browser...(wie ich denke) das noch nicht so richtig mit...
-
Hi,
Beispiel (letztes projekt)
http://salomo.altmuehlnet.de/stuff/layout/blue/blue/Ich habe mir das gerade einmal angeschaut... Erstmal muss ich sagen, das gefällt mir sehr gut!
Du hast auf der Linken Seite unter dem Menü ein Feld mit grauem Rahmen, welcher immer so hoch ist, wie die Seite, weil die Höhe der Seite nun mal vom Text vorgegeben ist.Das ist genau das, was ich brauche. Darf ich fragen, wie du das gemacht hast? Im Quelltext habe ich das nicht so richtig gefunden.
Viele Grüße und vielen Dank
Erri-
Wie du hier siehst hab ich das mit normalem table gemacht..
und dem abschnitt fuer das menue einfach eine classe gegeben<td class="menue">
dann im css code...der extern in einer anderen datei liegt ;)
http://salomo.altmuehlnet.de/stuff/layout/blue/blue/css/default.csseinfach diese class menue definiert ...was natuerlich mit den anderen classn auch zusammenspielen muss.. *wobei ich auf das layout stolz bin weil da endlich der ie und der moz das gleiche anzeigt ;)*
und da sieht die class von menue dann so aus.menue {
background-image:url(./../pic/menuelinks.jpg);
background-repeat: repeat-y;
width: 173px;
}wo du siehst das ich da nicht viel gemacht hab ..wie gesagt ist das zusammenspiel da ziehmlich wichtig...
wobei hier jetzt wieder der tag table auch definiert ist...
hmm ich glaub ich erklaer das jetzt ziehmlich kompliziert...:|also das spielt auch noch eine rolle
.big_table {
top: 0px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
border-collapse: collapse;
}lies dir den html und css mal durch...ist ja auch n bisschen dokumentiert wo was is dann kennst dich n bisschen aus ;)
-
Hallo die Herren!
Igitt! Tabellen-Layout. Ich gebe ja zu, daß es hin und wieder einfacher ist, aber es hat einfach keinen Stil und ist in diesem Fall vollkommen zweckentfremdet.
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations
-
-
Hallo.
Ich habe mir das gerade einmal angeschaut... Erstmal muss ich sagen, das gefällt mir sehr gut!
Das kannst du beheben, indem du die Standard-Hintergrundfarbe deines Browsers auf #00ff00 setzt. Und die Tabelle ist absolut unnötig.
MfG, at
-
-
-
-
-
Hallo wiederum!
ich bin gerade dabei, ein Layout per CSS zu basteln.
Dabei habe ich auf der Linken Seite einen Kasten „Menü“, der zurzeit folgende Eigenschaf-ten hat:#menu {
position: absolute;
width: 180px;
height: auto;  hier liegt wahrscheinlich der Fehler
left: 0px;
top: 90px;
background:#FF0000;
z-index:4;
}Ich möchte, dass der linke Kasten bzw. das Menü immer auf gesamter Höhe der Seite ange-zeigt wird, egal wie hoch diese Seite ist!
Habe scheinbar nicht ganz verstanden was Du willst, aber wenn Du schreibst: »immer auf gesamter Höhe der Seite angezeigt wird« dann frage ich mich, warum Du top auf 90px "einstellst".
Beste Grüße
Viennamade-
Hi,
Habe scheinbar nicht ganz verstanden was Du willst, aber wenn Du schreibst: »immer auf gesamter Höhe der Seite angezeigt wird« dann frage ich mich, warum Du top auf 90px "einstellst".
Top habe ich auf 90px eingestellt, weil über dem Menu noch so ne Art Banner hinkommt.
Wenn in dem mittigem Kasten der Text der Homepage nun größer ist als die 100% des Menüs, sodass dieser gescrollt werden muss, soll das Menü automatisch nach unten hin größer werden.Ich hoffe, ich habe es nun deutlicher erklären können *ggg*
Viele Grüße
Erri-
Hallo!
Habe scheinbar nicht ganz verstanden was Du willst, aber wenn Du schreibst: »immer auf gesamter Höhe der Seite angezeigt wird« dann frage ich mich, warum Du top auf 90px "einstellst".
Top habe ich auf 90px eingestellt, weil über dem Menu noch so ne Art Banner hinkommt.
Wenn in dem mittigem Kasten der Text der Homepage nun größer ist als die 100% des Menüs, sodass dieser gescrollt werden muss, soll das Menü automatisch nach unten hin größer werden.
Also das Menü-Div wird nie und nimmer automatisch seine Größe verändern, nur weil ein anderes Div mehr Inhalt bekommt. Es sei denn, das Text-Div wird vom Menü-Div umschlossen, aber das ist sicher nicht elegant.
Denke über eine andere Lösung nach! Vielleicht ein Text-Div mit Scrollbalken, oder eine andere Layoutierung für das Menü.
Beste Grüße
Viennamade-
Hi,
Denke über eine andere Lösung nach! Vielleicht ein Text-Div mit Scrollbalken, oder eine andere Layoutierung für das Menü.
Ich habe mein Menü so angepasst, sodass ich die Möglichkeiten von Divs nutzen kann *ggg*
Vielen Dank nocheinmal für die gute und schnelle Hilfe.
Viele Grüße
Erri-
kannst du mir einen link schicken damit ich mir das mal anschaun kann?
^^
-
Hi,
kannst du mir einen link schicken damit ich mir das mal anschaun kann?
Wenn ich daheim bin, leg ich das mal auf meinen Webspace und schicke dir den Link, ok?
Viele Grüße
Erri
-
-
-
-
-
-
Hallo!
Ein ähnliches Problem gab's schonmal: http://forum.de.selfhtml.org/archiv/2004/8/88126/#m525000
Denk dir die dritte Spalte weg und du solltest es genauso lösen können.
Eine andere Alternative ist, das Menü mit einer float-Eigenschaft zu versehen und dem Element daneben eine linke Rahmenbreite in Breite des Menüs und mit der gewünschten Hintergrundfarbe zu geben. So liegt das Menü auf dem Rahmen des Hauptelements, und der Rahmen hat natürlich immer die Höhe des Inhalts. Ein Problem gibt es nur dann, wenn das Inhaltselement mal kürzer als das Menü sein sollte.
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations -
Tach
Also rein technisch läßt sich das Problem sicherlich lösen.
Möglichkeit Nummer 1: Menü- und Text-Div verschachteln.
So ungefähr:
+----------------------------+
| Menü +-----------------+ |
| | Text | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| +-----------------+ |
+----------------------------+Möglichkeit Nummer 2: Wenn es nur um ein Hintergrundbild geht, versuche doch einfach, das Bild per CSS in den <body> zu schreiben.
Was die Beantwortung der Frage so schwer macht: Niemand weiß, wie Deine Seite aussieht. Rein optisch meine ich jetzt. Möglich, daß keine der beiden Optionen infrage kommt, weil es aus "grafischen" Gründen nicht paßt. Möglich auch, daß genau aus diesen Gründen andere Lösungsmöglichkeiten in betracht kommen.
Also mach doch wenigsten mal eine Beispielseite, die man sich anschauen kann.Thomas J.
-
Hallo!
Ich habe mir das nochals angesehen, dieser Test sieht ganz gut aus:
<html>
<head>
<title>test</title>
<style type="text/css">
!--
body,html {height:100%;}
div.menu {height:100%;width:180px;border:1px red solid;float:left;padding-top:19px;}
div.inhalt {height:100%;border:1px blue solid;padding-left:180px;}
-->
</style>
</head>
<body>
<div class="menu">menü</div>
<div class="inhalt">viel inhalt</div>
</body>
</html>
Nur das Logo mußt Du noch als background-image in das Menu-Div reintun.Beste Grüße
Viennamade -
Hi,
Hallo Erri,
das imo zentrale Problem für dich ist wohl, das der IE kein Position:fixed; beherrscht.
Mit Mozilla/Firebird und Opera lässt sich das nämlich wunderbar umsetzen.
<style type="text/css">
html, body {height:100%}
body {background-color:yellow;margin:0;padding:0}
#dv3 {background-color:green;top:90px;left:0px;bottom:0px;width:180px;position:fixed;float:left;border:1px solid white;}
#inhalt {border:1px solid blue;margin-left:180px;}
</style>
<!--[if gte IE 5]>
<style type="text/css">
#dv3 {background-color:green;top:90px;height:100%;position:absolute;}
</style>
<![endif]-->anzusehen mit viel Text:
http://ziegenmelker.bechlingen.net/test/dv_test.html
und mit weniger Text:
http://ziegenmelker.bechlingen.net/test/dv_test2.htmlcu,
ziegenmelker-
Hi,
<!--[if gte IE 5]>
wozu gte 5? 4er kennen das ohnehin nicht.
anzusehen mit viel Text:
http://ziegenmelker.bechlingen.net/test/dv_test.htmlund was soll das darstellen? Ich sehe im IE eine ganz normale Seite und im Mozilla einen fixierten Randbereich, der bei zu niedrigem Browserfenster ohne Scrollmöglichkeit unten abgeschnitten wird.
freundliche Grüße
Ingo-
Hi,
Hi,
<!--[if gte IE 5]>
wozu gte 5? 4er kennen das ohnehin nicht.schon klar, und was wäre dann besser?
anzusehen mit viel Text:
http://ziegenmelker.bechlingen.net/test/dv_test.html
und was soll das darstellen? Ich sehe im IE eine ganz normale SeiteNein. Im IE ist das Menü-div um 90px länger (durch top=90px) weil der IE mit bottom=0 nicht klarkommt. Außerdem bietet der IE aus diesem Grund einen hässlichen scrollbalken an, egal wie lang das Content-div ist. Hättest du dir den anderen Link auch angesehen, wäre dir das sicher auch aufgefallen. Ergo ist die Seite nicht so, wie Erri sie gerne hätte.
und im Mozilla einen fixierten Randbereich, der bei zu niedrigem Browserfenster ohne Scrollmöglichkeit unten abgeschnitten wird.
<i>Der OP schrieb nichts davon, daß die Seite für einen PDA sein soll.</i> Mal im Ernst, wo ist da das Problem? Man macht das Menü eben so lang, daß es in Auflösungen >= 800 x 600 oder 1024 x 768 eben noch zu sehen ist. Wenn du dein Browserfenster auf 50 x 50px verkleinerst, kannst du auch bei skalierenden divs nichts mehr sehen, von völlig verstümmelten Menüs mal ganz abgesehen.
Summa summarum kann ich an deiner Kritik nichts finden, vor allem keine konstruktiven Gegenvorschläge.freundliche Grüße
IngoMit freundlichen Grüßen,
ziegenmelker-
Hi,
<!--[if gte IE 5]>
wozu gte 5? 4er kennen das ohnehin nicht.
schon klar, und was wäre dann besser?<!--[if IE]>
und was soll das darstellen? Ich sehe im IE eine ganz normale Seite
Nein. Im IE ist das Menü-div um 90px länger (durch top=90px) weil der IE mit bottom=0 nicht klarkommt. [...] Ergo ist die Seite nicht so, wie Erri sie gerne hätte.genau. Das meinte ich auch.
und im Mozilla einen fixierten Randbereich, der bei zu niedrigem Browserfenster ohne Scrollmöglichkeit unten abgeschnitten wird.
<i>Der OP schrieb nichts davon, daß die Seite für einen PDA sein soll.</i> Mal im Ernst, wo ist da das Problem? Man macht das Menü eben so lang, daß es in Auflösungen >= 800 x 600 oder 1024 x 768 eben noch zu sehen ist. Wenn du dein Browserfenster auf 50 x 50px verkleinerst, kannst du auch bei skalierenden divs nichts mehr sehen, von völlig verstümmelten Menüs mal ganz abgesehen.Nunja, weisst Du aber, wie hoch das Menü nun tatsächlich wird und ob es in ein womöglich durch diverse Bars verkürztes 800er Fenster noch passt? Ich finde zumindest einen Hinweis auf dieses Problem für sinnvoll.
Summa summarum kann ich an deiner Kritik nichts finden, vor allem keine konstruktiven Gegenvorschläge.
Ein konstruktiver Gegenvorschlag wäre die Zweckentfremdung einer Tabelle, wenn dieser Layoutwunsch tatsächlich so wichtig ist ;-)
freundliche Grüße
Ingo-
Hi,
<!--[if gte IE 5]>
wozu gte 5? 4er kennen das ohnehin nicht.
schon klar, und was wäre dann besser?
<!--[if IE]>Ja, das ist besser. Imo wäre es schön gewesen, du hättest es gleich geschrieben. Ist sinnvoll, wenn die Posts dann im Archiv stehen ;)
und was soll das darstellen? Ich sehe im IE eine ganz normale Seite
Nein. Im IE ist das Menü-div um 90px länger (durch top=90px) weil der IE mit bottom=0 nicht klarkommt. [...] Ergo ist die Seite nicht so, wie Erri sie gerne hätte.
genau. Das meinte ich auch.Ich wollte einzig nur herausstellen, daß man mit modernen Browsern auch zu anderen Lösungen finden kann. zu diesem Thema noch ein paar interessante Links.
http://www.fabrice-pascal.de/artikel/posfixedie6/
http://dean.edwards.name/IE7/Nunja, weisst Du aber, wie hoch das Menü nun tatsächlich wird und ob es in ein womöglich durch diverse Bars verkürztes 800er Fenster noch passt? Ich finde zumindest einen Hinweis auf dieses Problem für sinnvoll.
So formuliert ist das sicherlich richtig. Es ist sicher eine Frage die jeder Developer selbst etscheiden muß, nur er kennt die Länge der Menüs, etc.
Mit Hilfe der oben angegebenen Links kann man jedoch zu einem halbwegs Cross-Browser kompatiblen Design kommen, und zwar _mit_ Position:fixed, wenn man denn möchte.Summa summarum kann ich an deiner Kritik nichts finden, vor allem keine konstruktiven Gegenvorschläge.
Ein konstruktiver Gegenvorschlag wäre die Zweckentfremdung einer Tabelle, wenn dieser Layoutwunsch tatsächlich so wichtig ist ;-)Das hast du ja weiter unten im Thread schon erwähnt und das ist sicher eine Möglichkeit, aber eben nicht die einzige ;-)
freundliche Grüße
IngoSchönes WE
ziegenmelker
-
-
-
-