PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS: Kleines Problem mit der Höhe bei div

WarSlash
2007-12-09, 22:44:07
Hier die Seite:

http://abiads08.ab.funpic.de/index/index.php?site=news

http://abiads08.ab.funpic.de/index/php/warstyle.css <-- CSS File

Wie man erkennen kann, sind die einzelnen <div> Elemente (Menü und Center) unterschiedlich lang.

Wie bekomme ich das ganze auf die Höhe des Menüs?

Kann man es überhaupt richtig mit CSS lösen? Ansonsten muss ich das per Window-Größe des Clients unter Javascript lösen.

Und schön wäre es, wenn ihr mal Verbesserungsvorschläge zum Design sagen könntet. Ich bin selbst einwenig unzufrieden.
DanMan
2007-12-09, 23:57:14
Wie bekomme ich das ganze auf die Höhe des Menüs?
Kurze Antwort: Gleiche (Minimal-)Höhe vergeben.
WarSlash
2007-12-10, 00:43:04
Kurze Antwort: Gleiche (Minimal-)Höhe vergeben.

Löst das Problem nicht wirklich. Ich möchte, dass sich diese beiden Bereiche an die Fensterhöhe des Browser anpassen.

Mit Javascript kann ich aber nicht den Höhe an den Parameter height des Div-Tags weiterleiten. Das klappt so irgendwie nicht.

Hat jemand noch andere Ideen?
Gast
2007-12-10, 00:59:49
Löst das Problem nicht wirklich. Ich möchte, dass sich diese beiden Bereiche an die Fensterhöhe des Browser anpassen.

Mit Javascript kann ich aber nicht den Höhe an den Parameter height des Div-Tags weiterleiten. Das klappt so irgendwie nicht.

Hat jemand noch andere Ideen?
Bei dem Event onload (http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload) und onresize (http://www.w3schools.com/jsref/jsref_onresize.asp) die Höhe berechnen und dann die Elemente anpassen (http://de.selfhtml.org/javascript/objekte/style.htm).
darph
2007-12-10, 01:30:39
Vermutlich geht es dir nur um den Hintergrund?

Gib dem Body ein ein-Pixel-hohes Hintergrundbild, das du nur nach unten wiederholst. Dann ist es egal, wie hoch die Elemente wirklich sind.
WarSlash
2007-12-10, 02:05:12
Vermutlich geht es dir nur um den Hintergrund?

Gib dem Body ein ein-Pixel-hohes Hintergrundbild, das du nur nach unten wiederholst. Dann ist es egal, wie hoch die Elemente wirklich sind.

Genau! Also für die einzelen div-Kontäner (menu und center) jeweils ein 1px Bild und dann wiederholen wird also helfen?

edit: klappt nicht.

Die div-kontäner sollen die maximale Höhe bekommen, sodass sie auf die Höhe des Browserfensters gestreckt werden. Hierbei gehts es mir um die Farbe.
DanMan
2007-12-10, 02:21:57
Genau! Also für die einzelen div-Kontäner (menu und center) jeweils ein 1px Bild und dann wiederholen wird also helfen?
Ne, eines für beide, und das dann als BG für den body.
WarSlash
2007-12-10, 02:28:27
<script type="text/javascript">
function SetSize() {

document.all.sidebar.style.height = "800";
document.all.content.style.height = "800";
}
</script>



Ich brauche eigentlich jetzt nur noch die Höhe des Browserfenster zu errechnen.
Nur keine Ahnung wie die Variable heißt um an die aktuelle Höhe des Browserfensters zu kommen. Das würde ich dann anstatt der 800 schreiben.

Dummerweise läuft das nur mit IE. FF ist außenvor.
DanMan
2007-12-10, 14:09:34
<script type="text/javascript">
function SetSize() {

document.all.sidebar.style.height = "800";
document.all.content.style.height = "800";
}
</script>



1. Ich brauche eigentlich jetzt nur noch die Höhe des Browserfenster zu errechnen.
Nur keine Ahnung wie die Variable heißt um an die aktuelle Höhe des Browserfensters zu kommen. Das würde ich dann anstatt der 800 schreiben.

2. Dummerweise läuft das nur mit IE. FF ist außenvor.
1. http://developer.mozilla.org/en/docs/DOM:window.innerHeight
2. Weil document.all eine Microsoft-Erfindung ist.
Scream
2007-12-10, 14:14:22
hmm irgendwie gehen die links oben nicht

ich würde von JS abraten wenn es auch anderst zu lösen möglich ist
darph
2007-12-10, 14:51:32
Genau! Also für die einzelen div-Kontäner (menu und center) jeweils ein 1px Bild und dann wiederholen wird also helfen?
Nein. Ich meine sowas: http://www.alistapart.com/articles/fauxcolumns/
WarSlash
2007-12-10, 18:43:41
hmm irgendwie gehen die links oben nicht

ich würde von JS abraten wenn es auch anderst zu lösen möglich ist

Jetzt gehen sie. Ich hatte das Verzeichnis geändert!
Scream
2007-12-10, 18:47:59
http://abiads08.ab.funpic.de/index/index.php?site=klsplan

das sieht im Firefox nicht gut aus, nach 1000px ist kein hintergrund mehr da
das kommt daher dass du mit height: 1000px arbeitest...das würde ich noch ändern
die höhe würde ich dynamisch erzeugen lassen, also je nachdem wie viel inhalt im content div steht...
WarSlash
2007-12-11, 00:03:58
http://abiads08.ab.funpic.de/index/index.php?site=klsplan

das sieht im Firefox nicht gut aus, nach 1000px ist kein hintergrund mehr da
das kommt daher dass du mit height: 1000px arbeitest...das würde ich noch ändern
die höhe würde ich dynamisch erzeugen lassen, also je nachdem wie viel inhalt im content div steht...

Darum geht es mir doch hier im Thread. Die Höhe der div-tags soll sich an die Höhe des Browserfensters anpassen.
Scream
2007-12-11, 08:08:33
ach ok ich dachte immer es geht dir nur um den hintergrund, nicht um die höhe

also du musst für dein vorhaben min-height nehmen, das problem ist jedoch dass der IE 6 das nicht darstellen kann, aber dafür gibts auch ne abhilfe

probiere mal folgendes:
-erstelle ein weiteres div, welches das #sidebar und #content umfasst
-lösche height: 1000px; aus #sidebar und #content heraus
-lösche die komplette "html {width:100%;height:100%;}"
-geb dem neuen div min-height:600px; height:auto !important; height:600px;


Ich denke jetzt siehts schon besser aus, aber es könnte noch was fehlen.
Am besten machst du mal die Änderungen und lässt mich dann nochmal schauen
WarSlash
2007-12-11, 16:02:59
ach ok ich dachte immer es geht dir nur um den hintergrund, nicht um die höhe

also du musst für dein vorhaben min-height nehmen, das problem ist jedoch dass der IE 6 das nicht darstellen kann, aber dafür gibts auch ne abhilfe

probiere mal folgendes:
-erstelle ein weiteres div, welches das #sidebar und #content umfasst
-lösche height: 1000px; aus #sidebar und #content heraus
-lösche die komplette "html {width:100%;height:100%;}"
-geb dem neuen div min-height:600px; height:auto !important; height:600px;


Ich denke jetzt siehts schon besser aus, aber es könnte noch was fehlen.
Am besten machst du mal die Änderungen und lässt mich dann nochmal schauen


Ich habe deine Ansatz genommen. Jetzt passt sich die Höhe von Content dem Inhalt der weiligen eingestellten Browserfensterhöhe an, aber auch nur wenn man über die 600 Pixel geht.
Dummerweise bleibt ja der Inhalt von Sidebar immer gleich, weshalb man die 600 Pixel nicht überschreitet. Kann man diese min-height irgendwie dynamisch der aktuellen Browserfensterhöhe anpassen?
Scream
2007-12-11, 18:31:25
du magst also nur noch dass das menü links auch länger wird?
ich schaus mir morgen oder am Donnerstag nochmal an, hab heute keine zeit mehr

es ist jetzt aber schon besser wie früher?
WarSlash
2007-12-11, 20:50:07
du magst also nur noch dass das menü links auch länger wird?
ich schaus mir morgen oder am Donnerstag nochmal an, hab heute keine zeit mehr

es ist jetzt aber schon besser wie früher?

Fast! Jetzt sind beide Div-Elemente, Sidebar und Content gleich lang.


Am liebsten wäre mir ein Verhalten wie bei Tabellen. Wenn ich eine normale Tabelle einsetze, die Höhe auf 100 % und den Hintergrund färbe, passt sich diese Tabelle der aktuellen Höhe des Browserfensters an. Genauso sollen sich auch die beiden div-tags verhalten.
DanMan
2007-12-11, 20:57:26
Am liebsten wäre mir ein Verhalten wie bei Tabellen. Wenn ich eine normale Tabelle einsetze, die Höhe auf 100 % und den Hintergrund färbe, passt sich diese Tabelle der aktuellen Höhe des Browserfensters an. Genauso sollen sich auch die beiden div-tags verhalten.
Das werden sie nicht tun, weil sie eben keine Tabellen sind. Meistens braucht man das auch nicht, weil man es (so auch hier) mit Faux Columns hinbekommt. Schließlich kommts nur aufs Aussehen an, und nicht ob die Divs jetzt 100% Höhe haben. Aber du lässt ja nicht locker...
WarSlash
2007-12-11, 23:12:43
Das werden sie nicht tun, weil sie eben keine Tabellen sind. Meistens braucht man das auch nicht, weil man es (so auch hier) mit Faux Columns hinbekommt. Schließlich kommts nur aufs Aussehen an, und nicht ob die Divs jetzt 100% Höhe haben. Aber du lässt ja nicht locker...

So ich habe wieder dran gebastelt. Auf 1280x1024 sieht es jetzt passend aus. Ich habe einfach noch einen Div-Tag um die anderen beiden gemacht und den so gefärbt wie die Sidebar inklusive der Border-Left.

Nun liegt aber eine Diskrepanz zwischen div-Content und div-masterdiv vor. Wenn height:100% bei div-masterdiv ist, dann ist zwar der div-Content maximal an die Höhe angepasst, aber wenn jetzt der Content sehr lang wird, wird die Sidebar sich später nicht mehr an die Höhe anpassen.

Lasse ich Height:100% bei div-masterdiv nun weg und geben bei div-content nur eine absolute Höhe, für 1280x1024 wäre das passend 700px, läuft das ganze. Bei kleineren Auflösungen entstehen ungewollte Scrollbalken oder fehlt es etwas an weißer Farbe unten.

Tja, jetzt bin ich fast an der Lösung... aber noch so fern.