Problem mit Div-Höhe

Computer: Software & Programmierung HTML & CSS
#1

Hallo Experten! Ich hab ein kleines Problem mit der Verlängerung eines Div-Tags auf meiner neuen Homepage. hier erstmal der link:

robware.merseburgpunx.de

und zwar meine ich den Verlauf auf der linken Seite, dieser wird durch eine Spacer-Grafik bis zu der unteren Leiste verlängert. Das Problem ist nun, dass der Verlauf viel zu lang gemacht wird, und ich weiß nicht warum, eigentlihc sollte das gesamte Layout nur so groß wie das Browserfenster sein (ist zur Zeit noch nicht für kleinere Auflösungen als 1024x768 angepasst) aber seltsamerweise wird der Verlauf weit darüber hinaus nach unten hin verlängert. Wäre wirklich nett wenn mir jemand dabei helfen könnte, den Quellcode poste ich hier jetzt nicht, kann ja jeder im Browser einsehen.
mfg Robin

#2

Hallo Robin,

und zwar meine ich den Verlauf auf der linken Seite, dieser
wird durch eine Spacer-Grafik bis zu der unteren Leiste
verlängert. Das Problem ist nun, dass der Verlauf viel zu lang
gemacht wird, und ich weiß nicht warum

wenn ich das richtig sehe, erbt der spacer seine Höhe im Endeffekt von .main. Ist .main defacto z.B. 800px hoch, ist der Spacer ebefalls 800px hoch. Daher der lange Verlauf.

Ich verstehe allerdings ohnehin nicht so recht, warum Du das Hintergrundbild nicht einfach mit einer Höhe von 1px als gekachelten body-background einstellst. Oder übersehe ich, was dagegen spräche?

Schöne Grüße
Yasmin

#3

Keine Kacheln

Ich verstehe allerdings ohnehin nicht so recht, warum Du das Hintergrundbild nicht einfach mit einer Höhe von 1px als gekachelten body-background einstellst. Oder übersehe ich, was dagegen spräche?

Dachte ich auch erst, aber wenn mein Monitor mich nicht veräppelt hat, verändert der Verlauf nicht nur horizontal, sondern auch vertikal die Farbe. Das ist mit Kacheln schwer zu machen :wink:

Kristian

#4

Weißt Du was ich nicht verstehe: Du arbeitest mit CSS und verwendest immernoch spacer-GIFs. Das ist eine Unart von Tabellenlayouts.

Ich habe die Seite mal schnell mit ganz einfachen Mitteln nachgebaut. Ohne die Grafiken. Es geht ja eigentlich nur um den Code.

http://freenet-homepage.de/Ringer/

Gruß Marcus

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#5

Dachte ich auch erst, aber wenn mein Monitor mich nicht
veräppelt hat, verändert der Verlauf nicht nur horizontal,
sondern auch vertikal die Farbe. Das ist mit Kacheln schwer zu
machen :wink:

tatsächlich. Augentomaten… aber so oder so - ein Teil der Grafik ist ein Kandidat für eine gekachelten body-background, nämlich der, dem die Flexibilität entspringt. Im Prinzip so, wie Robin es schon gemacht hat, nur an anderer Stelle.

Schöne Grüße
Yasmin

#6

Finde ich eigentlich nicht. Schau mal in meine Antwort oben und folge dem Link.

Wie meinst Du das, das solche Verläufe mit kacheln schlecht zu machen sind?

Gruß Marcus

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#7

Wie meinst Du das, das solche Verläufe mit kacheln schlecht zu
machen sind?

man kann durch eine einfache Kachel keinen vertikalen und horizontalen Verlauf erzeugen. Es geht nur entweder das eine oder das andere. Um beides zu erreichen braucht man mehrere Grafiken.

Gruß
Yasmin

#8

man kann durch eine einfache Kachel keinen vertikalen
und horizontalen Verlauf erzeugen. Es geht nur entweder
das eine oder das andere. Um beides zu erreichen braucht man
mehrere Grafiken.

Gruß
Yasmin

Ich sehe zwei. Einen Hintergundverlauf, und einen der drüber gelegt wird. Sollte kein großes Problem sein.

Gruß Marcus

#9

Also erstmal vielen dank für die rege Beteiligung! Find ich echt klasse von euch :smile:
Also wie bereits schon erkannt wurde ist der Verlauf sowohl vertikal als auch horizontal. Im oberen Teil soll der vertikale Verlauf (von blau nach grün) immer die gleiche Höhe besitzen, wenn das Browserfenster aber größer ist soll dann das untere Grün bis zu der unteren Leiste verlängert werden. Darum denke ich, dass an dieser Stelle ein Spacer nötig ist, sonst könnte man ja nur den oberen Verlauf (Blau nach grün) entweder zerren oder aneinanderreihen, was beides nicht meinen wünschen entspricht.
Ich denke auch, dass die Länge vom Main-Div geerbt wird, und darum der Verlauf so lang ist, nur wie lässt sich das umgehen? Der gesamte Verlauf soll ledigilich zwischen der oberen und der unteren Leiste sein, und damit nicht der ganze Verlauf gezerrt werden muss, muss sich ja irgendwie der Spacer in der Höhe anpassen.
Naja, ich hoffe mir kann geholfen werden und nochmal vielen Dank für die rege Diskussionsbeteiligung.
mfg Robin

#10

Achja, da ein paar mal der Tipp kam, den Verlauf als Hintegrund vom Body zu machen wollte ich darauf hinweisen, dass der Verlauf links ein abgetrennter Bereich später sein soll, der Content der Seite soll nur in dem wirklich weißen Bereich dargestellt werden.
mfg Robin

#11

Vielen Dank für die Mühe. Ich werde versuchen dein Beispiel mal auf meine Seite umzusetzen. Die Spacer werden aber meiner Meinung gebraucht, da der Verlauf links nicht gleichmäßig ist, sondern im oberen Teil der vertikale Verlauf von Blau nach Grün stattfindet und bei entsprechender Höhe des Browserfensters soll quasi nur die letzte „Zeile“ also das unterste Grün bis zu der unteren Leiste verlängert werden.
Aber ich verushc es erstmal umzusetzen.
Sorry, dass ich noch ein wenig die Unarten von Tabellen-Layouts nutze, das ist meine erste Seite, die ich komplett mit CSS mache. :wink:
mfg Robin

#12

Hallo Robin,

Der gesamte Verlauf soll ledigilich zwischen der oberen und
der unteren Leiste sein, und damit nicht der ganze Verlauf
gezerrt werden muss, muss sich ja irgendwie der Spacer in der
Höhe anpassen.

Du brauchst den Spacer wirklich nicht. Wenn Du die Grafik „aufgabenleiste_spacer.jpg“ als body-background einbindest, wird sie flexibel über die gesamte Höhe der Seite gekachelt. Du mußt Dir also keine Gedanken mehr über irgendwelche Höheanpassungen machen.
Den vertikalen Verlauf (also „aufgabenleiste_main.jpg“) bindest Du als ungekachelten Hintergrund eines weiteres Elements (z.B. .main oder .content_main) ein. Er wird so den horizontalen Verlauf des bodys über seine gesamte Länge überlagern und dort, wo er aufhört, findet ein nahtloser (optischer) Übergang zum body-Verlauf statt.

Schöne Grüße
Yasmin

#13

Um beides zu erreichen braucht man mehrere Grafiken.

Ich sehe zwei.

und ist „zwei“ jetzt was anderes, als „mehrere Grafiken“? Oder wolltest Du uns einfach nur noch mal mitteilen, dass Du auch was weißt?

Gruß
Yasmin

#14

Ich glaube du hast die Lösung gefunden! *freu*
vielen Dank für den Hinweis, daran hab ich garnicht gedacht.
ich probiers gleich mal aus, dürfte aber das Problem beheben, soweit ich das in Gedanken nachvollziehen kann.
Ich werd dann gleich bescheid sagen obs die Lösung war!
mfg Robin

#15

Also dein Tipp hat mich meinem Ziel schonmal sehr viel weiter gebracht. Jetzt ist nurnoch das Problem, dass das gesamte Layout insgesamt ein kleines bisschen zu groß ist (ich denke mal, dass werden genau die 41px sein, die diese Leiste oben hoch ist) aber ich sehe grad nicht, wo da die Ursache im Code dafür liegt. Ich hab die aktuellste Version auf den Server geladen.
Hier nochmal der Link: robware.merseburgpunx.de

Es kann sein, dass die Seite nochmal neu geladen werden muss, da ansonsten ja noch die alte Version aus dem Cache gelesen wird.
Hoffe da kann mir noch jemand beim Auspüren des Fehlers helfen.
Ich bin allen, die mir geholfen haben seh dankbar :smile:

mfg Robin

#16

OK, also mein letztes Problem hat sich nun erledigt, aber jetzt hab ich noch ein letztes Problem.
Und zwar hab ich den Content-Bereich jetz auf overflow:scroll gestellt, damit man darin dann scrollen kann. Jedoch werden die Scrollbalken jetzt immer angezeigt. Weiß jemand bescheid, wie die Scrollbalken nur angezeigt werden wenn sie auch wirklich benötigt werden?

mfg Robin

#17

Für die ersten Gehversuche ist es ja nicht mal schlecht.

Ich bin nicht der Meinung, dass Du den Spacer brauchst. Mein Beispiel war ein einfacher Verlauf. Es geht aber auch Mehrfarbig, so wie bei dir. Da muss man ein wenig tiefer in die Trickkiste greifen. Aber das bekommst Du noch raus. Nicht schlapp machen, und weiter mit CSS arbeiten!

Gruß Marcus

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#18

Kannste dich heute wohl selber nicht leiden oder?

Eigentlich wollte ich deine Meinung hören. Vollkommen neutral. Könnte ja sein dass jemandem noch eine andere Möglichkeit eingefallen ist.

Wenn Du allerdings derart respektlos zynisch reagierst, spar ich mir in Zukunft jeden Versuch, eine Fachsimpelei mit dir zu beginnen. Für solche Leute ist mir meine Zeit zu kostbar.

Diskussion Ende

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#19

Danke für deinen Zuspruch, ist manchmal ziemlich frustrierend mit CSS, da der IE6 da ja ziemlich eigen in der Darstellung ist, aber ich geb nicht auf, versprochen! :smile:
Achja, und nich mit Yasmin in meinem Thread zanken, sonst fühl ich mich so schuldig :wink: ihr habt mir beide weitergeholfen, und ich danke euch beiden dafür!
mfg Robin

#20

Schön dass es bei dir voran geht.

Keine Angst, ich habe nicht vor mich zu zanken. Wer meint er müsste seinen privaten Frust an mir auslassen, der wird von mir ganz einfach ignoriert. Dann können sie den Quatsch einer Parkuhr erzählen, oder einem Deppen der sich das gefallen lässt :wink:

Noch vor kurzem dachte ich da anders. Jetzt habe ich gemerkt, dass mir meine Zeit für solche Menschen zu kostbar ist.

Gruß Marcus :smile:

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]