✔ 2 Spalten gleiche Höhe und keine Lösung

Status
Nicht offen für weitere Antworten.
T

TripleM

Mitglied
Hallo miteinander!

Ich habe ein schweres Problem und finde einfach keine Lösung, vielleicht ist hier ein Crack der mir vielleicht helfen kann - Google hat bisher jedenfalls noch nichts brauchbares ausgespuckt.

Mein Layout soll zweispaltig sein UND die beiden Spalten sollen immer gleich hoch sein. Wenn jetzt die Spalten nur durch ein Hintergrundbild optisch in die Länge gezogen werden sollten wäre das ja kein Problem, ich weiß, wie das mit faux columns funktioniert.

ABER: ich habe in beiden Spalten "echten" Inhalt. Jedoch nur der linke ist wirklich relevant, das bedeutet, wenn dieser endet, soll der Inhalt in der zweiten Spalte einfach auf gleicher Höhe abgeschnitten werden! Damit Ihr das versteht: in der rechten Spalte ist ein Flash-Film der eine Bildergalerie zeigt. Links sind die eigentlichen Texte der Seite. Wenn diese Texte enden ist es also völlig ok, wenn das Movie an der Stelle dann auch aufhört/ausgeblendet wird/abgeschnitten ist.

----------------- container -----------------
----links----- ----rechts---
ganz genauso
viel viel
text galerie
ganz genauso
viel viel
text galerie
ganz genauso
viel viel
text galerie
----/links---- ----/rechts--
----------------- /container -----------------

aber

----------------- container -----------------
----links----- ----rechts---
ganz genauso
wenig wenig
text galerie
----/links---- ----/rechts--
----------------- /container -----------------

Meine bisherigen Ansätze:

- ich habe probiert den umgebenden Container auf 100% zu setzen, dann lappt bei zu langem Text links und "overflow:visible" dieser einfach über, und das ist ja gut, aber wenn dadurch das Scrollen einsetzt endet die rechte Spalte am unteren Bildschirmrand, da sich die 100%Höhe ja auf den Bildschirm und leider nicht auf das übergeordnete Element beziehen.

- ich habe probiert den Container in der Höhe flexibel zu lassen und die beiden Spalten mit height:100% dazu in Beziehung zu setzen, dann ist der Container immer auf die größte der beiden Inhalte ausgedehnt, und das will ich nicht (bei wenig Text soll die Galerie nicht die Höhe der Seite bestimmen!)

- ich habe probiert die rechte Spalte mit position:fixed und height:100% und overflow:hidden als Hintergrund zu simulieren, so bleibt bei längerem Text die Galerie einfach von Oberkante Viewport bis Unterkante Viewport stehen und nur der linke Inhalts-Teil scrollt - das sieht aber auch e aus, weil die Galerie auch in der horizontalen Balken hat die sich an der Gliederung der Inhalte links orientieren und bei dieser Lösung verschiebt sich dann alles gegeneinander.

Hat irgendjemand noch einen Geistesblitz welchen Ansatz man hier nehmen könnte oder sitze ich gerade nur auf meiner Leitung und die Lösung ist einfacher als ich denke?

Für Nachdenkanschübe wäre ich echt dankbar!
 
Hi,
ich habe in beiden Spalten "echten" Inhalt. Jedoch nur der linke ist wirklich relevant, das bedeutet, wenn dieser endet, soll der Inhalt in der zweiten Spalte einfach auf gleicher Höhe abgeschnitten werden! Damit Ihr das versteht: in der rechten Spalte ist ein Flash-Film der eine Bildergalerie zeigt. Links sind die eigentlichen Texte der Seite. Wenn diese Texte enden ist es also völlig ok, wenn das Movie an der Stelle dann auch aufhört/ausgeblendet wird/abgeschnitten ist.
Zum Vergrößern anklicken....
Was soll denn das bitte für ein Seitenkonzept sein, bei dem der Seitenbesucher erst bei ausreichend Inhalt in der linken Spalte, in den Genuß kommt, im rechten Spaltenblock die Flash-Bildergalerie in ihrer vollständigen Höhe zu sehen? Oder darf ich mir das Modell als eine Art "Peepshow" vorstellen? :eek: :suspekt:

mfg Maik
 
Vor lauter Verwunderung hab ich doch glatt vergessen, dich nach deinem bisherigen Stand im HTML- u. CSS-Code zu fragen, damit dort ein Blick reingeworfen werden kann. Vielen Dank :)

mfg Maik
 
Das ist ein Seitenkonzept, bei dem die Bildergalerie so ähnlich aussieht wie die Anzeige der Bildchen in einem einarmigen Banditen: das "Hauptbild" ist in der vertikalen Mitte zu sehen, ein halbes Bild darüber ist ausgefadet und ein ganzes darunter ist ebenso ausgefadet - eher wie ein dezentes Hintergrundbild. Wenn man jetzt zum Beispiel den "hoch"-Pfeil im Hauptbild anklickt, rutscht dieses nach oben, ist nur noch halb und mit 50% Deckkraft zu sehen, das Bild, was zuvor unten mit 50%iger Deckkraft war rutscht hoch ins Hauptbild-Fenster und ist 100%ig sichtbar und unten rutscht aus dem Off sozusagen ein neues halbtransparentes Bild nach.

Da also die halbtransparenten Bilder unten einerseits als Vorschaubild für das nächste Bild von unten verwendet werden aber optisch eher nur wie ein Hintergrund wirken ist es nicht so schlimm, ob man die nun ganz, halb wie das obere oder auch mal nur zu einem Drittel sieht....

Verständlich?

50%50%50%50%50%50%50%50%
50%50%50%50%50%50%50%50%
50%50%50%50%50%50%50%50%
................................ /\...............................
| 100%100%100%100%100%100% |
| 100%100%100%100%100%100% |
| 100%100%100%100%100%100% |
| 100%100%100%100%100%100% |
| 100%100%100%100%100%100% |
| 100%100%100%100%100%100% |
................................ \/...............................
50%50%50%50%50%50%50%50%
50%50%50%50%50%50%50%50%
50%50%50%50%50%50%50%50%
.
.
.
 
Maik hat gesagt.:
Vor lauter Verwunderung hab ich doch glatt vergessen, dich nach deinem bisherigen Stand im HTML- u. CSS-Code zu fragen, damit dort ein Blick reingeworfen werden kann. Vielen Dank :)

mfg Maik
Zum Vergrößern anklicken....

Tja, das ist schwierig zu sagen welchen Stand der Quellcode hat - da bislang jeder Versuch sich als untauglich erwiesen hatte gibt es nichts wirklich Brauchbares. Hier mein letzter Versuch:

HTML: 
<div id="container">

  <div id="rechts"><img src="upload/projekte/platzhalter.jpg" class="galerie" alt="Flash-Galerie"/>
  <!-- end #rechts -->
</div>

  <div id="links">
	<div id="menu">MENÜ</div>
        <div id="text">TEXT</div>
  <!-- end #links -->
  </div>
  
<p><br class="clearfloat" /></p>
<!-- end #container -->

</div>

Und das aufs Wesntliche reduzierte CSS dazu:

Code: 
/* HAUPTCONTAINER */
#container {
	position:relative;
	width: 1017px;
	background: #a0bbc6;
	z-index:2;
}
/* LINKE SPALTE */
#links {
	position:relative;
	width: 425px;
       background-color:#0b1e25;
	padding:0;
	height:100%;
	margin-right:10px;
}
#menu {
	width:425px;
	height:240px;
	border-bottom:10px solid #0b1e25;
	padding-top:213px;
}
#text {margin:10px; font-size:10px; color:#a0bbc6;}

/* GALERIE */
#rechts {
	float:right;
	margin:0px 9px 0px 0px;
	padding:0px;
	width:573px;
	height:100%;
	overflow:hidden;
}

Das ist jetzt die Version wo die Galerie die komplette Seitenhöhe bestimmt. Setze ich bei container ein height:100% hinzu, hackt es mir die Galerie beim Scrollen am unteren Rand des Viewports ab. Setze ich beim container noch ein overflow:hidden dazu, siehts super aus, nur daß mein armer Text, sodenn länger als der Viewport, natürlich nicht mehr sichtabr wird, weils gar keine Scrollbars mehr gibt.

Ich bin am Verzweifeln!
 
Ist die Höhe der Flash-Bildergalerie absolut oder relativ?

Ich frag nur, weil dann zumindest für #container mit min-height eine Mindesthöhe festgelegt werden könnte, damit die rechte Spalte die Höhe des Spaltenlayouts erst garnicht vorgeben kann ;)

mfg Maik
 
Die Galerie ist eigentlich fest in den Maßen, da ansonsten das Berechnen des Scrollens der Bilder nicht funktioniert.

Wenn ich dann dem Container min-height mitgebe, kann der IE7 mit der Angabe aber doch nichts anfangen, oder?

Wie wäre dann außerdem da Dein Ansatz? Eine prozentuale Angabe? Größer oder kleiner 100%? Oder auch eine statische? Und dann größer oder kleiner als die Galerie? Komme gerade nicht ganz hinter die Logik, befürchte, ich habe mir die Hinrwindugen schon etws zu sehr verknotet... warum kann man nicht einfach ein Flash-Movie als Hintergrund festlegen, dann wäre das ganze schon lange gelöst...HEUL!
 
Ok, damit kann ich mich ja dann zu gegebener Zeit noch herumschlagen, der Doctype-Switch ist mir zwar geläufig, wußte aber nicht, daß der IE7 damit schon min- und max-Angaben versteht.

In erster Linie wäre mir jetzt FF wichtig, die ganzen Hacks und Tralala für IE-eigene Macken kommen dann immer später. Aber was genau soll jetzt der Einsatz von min-height bei meinem Problem helfen?

Galerie ist insgesamt 1200 Pixel hoch.
Wichtig ist für mich also nur der Fall wenn der Inhalt (links) kürzer als die Galerie (rechts) aber länger als der Viewport ist:

beim Scrollen des Inhaltes links soll die Galerie rechts mitscrollen und bis zum Ende des Inhaltes auch tatsächlich sichtbar sein, jedoch nicht darüber hinaus reichen.

Alle anderen Fälle wenn der Inhalt kürzer als der Viewport ist: kein Problem, da kein Scrollen. Wenn der Inhalt länger als der Viewport und länger als die Galerie ist: auch kein Problem, denn dann gibt der Text ja die Höhe des Containers vor.

Maik hat gesagt.:
Wenn du dir ein Layout vorstellst, das im Viewport eine 100%-Höhe einnimmt, und bei zunehmenden Spalteninhalt in der Höhe wächst, dürfte dir da mein CSS-Tutorial CSS-Layout mit 100%-Höhe weiterhelfen.
mfg Maik
Zum Vergrößern anklicken....

Habe gerade in Dein Tut reingeguckt - das war mir auf der Suche nach Lösungen auch schon begegnet, das löst aber nicht mein Problem. Der Punkt ist es ja nicht, die kürzere Spalte auf Höhe der längeren zu ziehen, sondern eher, die längere Spalte (Galerie mit 1200 Pixeln Höhe) auf Höhe der kürzeren (Text-Inhalt ist vielleicht nur 1000 Pixel hoch, kann aber auch mehr oder weniger sein!) zu kappen!
 
TripleM hat gesagt.:
Galerie ist insgesamt 1200 Pixel hoch.
Wichtig ist für mich also nur der Fall wenn der Inhalt (links) kürzer als die Galerie (rechts) aber länger als der Viewport ist:

beim Scrollen des Inhaltes links soll die Galerie rechts mitscrollen und bis zum Ende des Inhaltes auch tatsächlich sichtbar sein, jedoch nicht darüber hinaus reichen.
Zum Vergrößern anklicken....
Wenn die Flash-Galerie eine feste Höhe von 1200px besitzt, dann richte eben für die linke Spalte eine Mindesthöhe von 1200px ein. So kann die Galerie auch nicht mehr über sie hinausreichen.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück