mitwachsender Menüblock AUF mitgewachsenen Spalten

Fips01 · #1 (**permalink**) 14.04.2008, 09:34

Ich bin dabei, mich in CSS einzuarbeiten und eine Website zu gestalten. Um dem Ganzen ein bisschen ein professionelleres Aussehen zu geben als nur "glatte Flächen", habe ich den Hintergrund unter dem Kopfbereich in 3 Spalten aufgeteilt, die einen Hintergrund enthalten, auf welchen die einzelnen Blöcke platziert werden sollen. Problem ist, dass zwar der Hintergrund in allen Spalten bis zum Ende mitläuft wie gewünscht, wenn ich aber darauf die einzelnen Blöcke platziere, sind diese immer nur so groß wie der Text, eine Hintergrundgrafik zu kacheln funktioniert hier nicht. Dasselbe Problem habe ich auch ohne CSS mit einer Tabelle in der bestehenden Tabellenzelle.

Hier nochmal genauer:

Die linke und rechte Spalte haben einen von oben nach unten verlaufenden Farbverlauf als Hintergrund, der Mittelblock einen von links nach recht verlaufenden Farbverlauf. Da dies alles gekachelte Hintergrundgrafiken sind, hat es nie ein Problem gegeben, dass die Blöcke nicht bis zum Ende durchgehen. Dieser Hintergrund sollte aber nur als Randbereich im Bereich "margin" sichtbar sein.

Auf den linken Block käme erst der Menüblock in einer konstanten Farbe, auf der sich der Text gut lesen lässt, und damit dieser farblich nach dem Menü nicht einfach aufhört, wollte ich die Spalte mit dieser Hintergrundfarbe bis zum Ende durchziehen, aber der ursprüngliche Hintergrund sollte an den Ränder (margin 10px) noch durchkommen - also der Farbverlauf sollte quasi als Rand noch sichtbar bleiben - deshalb will ich nicht einfach die konstante Farbe statt dem Farbverlauf über die ganze Box ziehen.

Im breiteren Mittelblock wird der Inhalt ausgegeben, da sollte es genauso funktionieren.

Ich hab um die 3 Spalten einen wrapper gelegt, aber auch so funktioniert es nicht.

Das Prinzip mit der gekachelten Hintergrundgrafik hab ich schon verstanden, aber es scheint in verschachtelter Form nicht mehr zu funktionieren. Eine Hintergrundgrafik, die schon den Hintergrund für alle Spalten enthält und dann gekachelt wird, ist deshalb nicht möglich, weil die linke und rechte Spalte einen vertikalen, die mittlere Spalte einen horizontalen Farbverlauf beinhalten. Der horizontale wüde dann zwar korrekt gekachelt, der vertikale aber eben nur innerhalb eines dünnen Streifens und hätte dann bis zum Seitenende mehr oder weniger die selbe Farbe.

Das Menü selber ist Nebensache, die Website ist für Typo3 gedacht und das Menü wird später dynamisch mit TypoScript und gifbuilder gestaltet (kriegt automatisch neue Buttons und Untermenüs, wenn die entsprechenden Seiten angelegt werden), aber auch dort gibt es keine Funktion, dass der Block nach Ende des Menüs bis zum Seitenende weitergeht.

Ich hab das Projekt leider noch nicht online, ich hoffe, ich habe es ausfürhlich genug beschrieben, dass man versteht, was ich meine.

lg
Fips

cgdesign · #2 (**permalink**) 14.04.2008, 11:37

Ähm, sollen wir deinen CSS-Code raten? Ohne Online-Beispiel, ohne nichts, können wir dir da auch kaum was dazu sagen...
Dafür gibt es auch diesen Link: http://xhtmlforum.de/40080-f-r-frage...twortende.html

Insbesondere der Abschnitt wird dich interessieren:

Zitat:

Stell einen kompletten, lauffähigen Code ein, der einen das Problem sicher nachvollziehen lässt und der dabei auf Überflüssiges verzichtet. Selten, sehr selten sind dazu mehr als ein paar Handvoll Zeilen notwendig. Viele Probleme lösen sich dabei auch von selbst.

Gib zusätzlich eine URL an: Niemand hat Zeit, Archive auszupacken und Codefragmente zusammenzusetzen. Manche Probleme sind lokal gar nicht nachvollziehbar. Die Tools der Antwortenden, die bei der Fehlersuche helfen, funktionieren nicht mit Schnipseln. Ein "relevanter Ausschnitt" hat dir selbst den Fehler auch nicht offenbart und mag für den Nächsten gar nicht so relevant sein.

Fips01 · #3 (**permalink**) 14.04.2008, 13:09

Nein, selbstverständlich sollt ihr nicht raten, ich hatte die Seite nur noch nicht online und vom Büro aus den Code auch nicht zur Hand. Also dachte ich, dass mit der genauen Beschreibung des Problems vielleicht zu sagen wäre, ob sowas überhaupt machbar ist oder es an die Grenzen von CSS stößt.

Aber ich hab die halbstündige Mittagspause jetzt dazu verwendet, die Datei hochzuladen und gleich anschließend kommt der Code des externen Stylesheets.

Alles ist händisch (hauptsächlich nach dem Buch Little Boxes) geschrieben, kein Editor. Durch das viele herumprobieren kann aber schon sein, dass vielleicht einige Sachen aufscheinen, die nicht sein müssten.

Bei der html-Datei ist es so, dass der Bereich "Inhalt" eigentlich noch in den Rahmen sollte (ich hab versucht, denselben Effekt hinzukriegen wie mit einer Tabelle in einer Tabelle), hab's aber noch nicht geschafft.

Was ich in meiner Frage angesprochen habe sind die Balken ###Menu_links### und ###RECHTS###, die sich an die Länge des Inhaltes (oder eben der längsten Spalte) anpassen sollten. Dasselbe gilt natürlich auch für das Inhaltsfenster, sollten die äußeren Balken länger sein.

Ich hoffe, damit könnt ihr jetzt was anfangen? Danke schon mal!

lg
Fips

Code:

/* ===================================================
Stylesheet für die CSS-Vorlage der Samtpfoten-Homepage
Datei: styles2.css
Datum: 13.04.2008
Autor: Karin Hillebrand
Aufbau:	1. Kalibrierung und allgemeine Styles
		2. Styles für Layoutbereiche
		3. Sonstige Styles
==================================================== */

/* ===============================
Kalibrierung und allgemeine Styles
================================== */

/* Kalibrierung der wichtigsten Abstände */

* {padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin-bottom: 1em; }

/* Allgemeine Selektoren */

html { height: 101%; } /* erzwingt Scrollbar im Firefox */
body {
	color: black;
	background-color: lime;
	background-image: url(fileadmin/images/grau-gekoernt.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }

/* =======================
Styles für Layoutbereiche
========================== */

#wrapper {
	color: black;
	background-color: red;
	background-image: url(fileadmin/images/farbverlauf-senkr-r-o-r-2.jpg);
	width: 920px; /* Breite des Inhaltsbereichs */
	margin: 10px auto /* oben/unten 10px, rechts/links auto => zentriert */
}

#header {
	background-color: #FF0000;
	padding: 10px 10px 20px 10px;
	margin-bottom: 0;  /* war 1em */
	}
	
#navigationszeile {
	height: 20px;
	background-color: #FF0000;
	background-image: url(fileadmin/images/farbverlauf-unten-o-g-1000p.jpg);
	padding-bottom: 0px;
	padding-top: 3px;
	padding-right: 10px;
	padding-left: 10px;
	margin-top: 10px;
	margin-bottom: 0;
}

#klickpfad {
	color: #BE0207;
	font-weight: bold; 
	float: left;
}

#navi2 {
	color: #BE0207;
	font-weight: bold; 
	float: right;
}

#wrapper-textbereich {
	color: black;
	background-color: red;
	background-image: url(fileadmin/images/farbverlauf-senkr-r-o-r-2.jpg);
	width: 900px; /* Breite des Inhaltsbereichs */
	margin: -10px auto; /* oben/unten 0px, rechts/links auto => zentriert */
	padding: 10px;
}

#navi1 {
	width: 185px;
	height: auto;
	background-color: #FEAC1D;
	background-image: url(fileadmin/images/farbverlauf-schmal-o-g.jpg) repeat-y top left;
	padding: 10px;
	float: left;
}

#mittelblock {
	
	width: 420px;
	height: auto;
	background-image: url(fileadmin/images/farbverlauf-schmal-o-g.jpg);
	padding: 25px;
	float: left;
	margin: 0 10px 0 10px;
}
	
#rahmen {
	border: 1px solid #FDF1C0;
	padding: 25px;
}


#rechts {
	width: 185px;
	height: auto;
	background-color: #FEAC1D;
	padding: 10px;
	float: left;
}

#footer {
	height: 25px;
	width: 880px;
	background-color: #FF0000;
	background-image: url(fileadmin/images/farbverlauf-unten-o-g-1000p.jpg);
	padding-right: 10px;
	padding-left: 10px;
	margin-top: 20px;
	margin-bottom: 0;
	clear: both;
}

#inhalt {
	background-color: #FDF1C0;
	padding: 15px;
	margin: 3px;
}

/* =============
Sonstige Styles
================ */

fricca · #4 (**permalink**) 14.04.2008, 13:41

Du schreibst in dem Einstiegsroman, du hättest die Technik der Faux Columns verstanden. Dann wende sie doch erstmal an.
Ein Verlauf, wie er jetzt in der mittleren Spalte zu sehen ist (du nennst das einen horizontalen Verlauf), kann problemlos in einem vertikal gekachelten Faux-Column-Bild enthalten sein.
Das, was du vertikalen Verlauf nennst und im Moment niemand sehen kann, kann in jede Spalte zusätzlich gelegt werden. Das Ende des Verlaufs muss mit der Farbe des Faux-Columns-Bildes übereinstimmen.

cgdesign · #5 (**permalink**) 14.04.2008, 14:01

Zitat:

Zitat von Fips01

Bei der html-Datei ist es so, dass der Bereich "Inhalt" eigentlich noch in den Rahmen sollte (ich hab versucht, denselben Effekt hinzukriegen wie mit einer Tabelle in einer Tabelle), hab's aber noch nicht geschafft.

Was ich in meiner Frage angesprochen habe sind die Balken ###Menu_links### und ###RECHTS###, die sich an die Länge des Inhaltes (oder eben der längsten Spalte) anpassen sollten. Dasselbe gilt natürlich auch für das Inhaltsfenster, sollten die äußeren Balken länger sein.

Also, das DIV "inhalt" ist ja auch nicht im DIV "rahmen". Schieb das DIV in das andere DIV und dann wäre die Sache schon vom Tisch.

Das andere hatte ja fricca schon angesprochen. Faux Columns werden anders angewendet.

Trotzdem solltes du vielleicht mal deine Seite validieren. Nur als Tipp.

Fips01 · #6 (**permalink**) 14.04.2008, 16:31

Erst mal danke für die Antworten. Oooops,ass das Inhalts-Div nicht im Rahmen ist, hatte ich doch glatt übersehen. Da war es wohl gestern schon ziemlich spät und die Augen schon viereckig. *peinlich* Danke für den Hinweis.

Zitat:

Das, was du vertikalen Verlauf nennst und im Moment niemand sehen kann, kann in jede Spalte zusätzlich gelegt werden. Das Ende des Verlaufs muss mit der Farbe des Faux-Columns-Bildes übereinstimmen.

Der Verlauf geht allerdings von rot nach gelb und dann wieder nach rot, um keine sichtbaren Übergänge zu bekommen, wenn der Text auf der Seite mal länger ausfallen sollte, aber den Farbverlauf auch bei kürzeren Texten schon bei Bildschirmhöhe deutlich sichtbar zu machen. Lässt sich das auch realisieren?

Verstehe ich es richtig, dass die faux columns Grafik dann so aussehen würde: 920px breit wie der komplette wrapper, einige wenige Pixel hoch und würde folgende Spalten beinhalten:

10px rot für jetziges margin OHNE Verlauf
185px Menüblock links in der Menüfarbe
10px rot ohne Verlauf
420px für den Mittelblock mit Farbverlauf horizontal
10px rot ohne Verlauf
185px Block rechts in der Menüfarbe
10px rot ohne Verlauf

Und das Ganze käme dann als Hintergrund gleich in den Wrapper, weil es für den ganzen Bereich gilt. Hab ich es diesmal richtig verstanden?

Wie kommt der Verlauf dann nachträglich drauf? Sorry, wenn ich blöd frage, aber ich fang ja gerade erst an und frage deshalb, weil ich besser werden will.

Und wenn das dann alles realisiert wäre, wären wir wieder beim eigentlichen Problem. Die rechte und linke Spalte fielen ja dann weg, die wären mit der Farbe schon erledigt. Aber im Mittelblock käme ja wieder eine andere Spalte auf den Hintergrund, die sich auch vergrößern sollte, wenn der Inhalt mal kürzer ist als der rechte oder linke Block.

Ist es grundsätzlich überhaupt möglich eine Box AUF eine Hintergrundgrafik mit faux columns zu setzen, die sich trotzdem ebenfalls der längsten Spalte anpassen?

lg
Fips

fricca · #7 (**permalink**) 14.04.2008, 16:46

Fips, bitte, es ist kaum möglich, dir zu folgen. Niemand außer dir weiß, was du dir eigentlich vorstellst und von welchen Verläufen du sprichst. Deine ellenlangen Schilderungen und Bildbeschreibungen sind nicht nötig. Mach einen Versuch der Umsetzung. Zeig deinen Versuch. Stell konkrete Fragen dazu, wenn du nicht weiterkommst.

Zitat:

Ist es grundsätzlich überhaupt möglich eine Box AUF eine Hintergrundgrafik mit faux columns zu setzen, die sich trotzdem ebenfalls der längsten Spalte anpassen?

Nebeneinander gefloatete Element passen sich nicht in der Länge an ihre Nachbarn an.
Aber umgebende Elemente können immer so lang sein, wie die längste darin gefloatete Spalte. Also müssen alle Hintergründe, die so lang wie die längste Spalte sein sollen, in einem umgebenden Element sein.
Nimm bitte folgenden Code, wirf deine Bilder dazu und schau dir das Ergebnis an.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>xxx</title>

  <style type="text/css">

    div {
      background:url(farbverlauf-senkr-r-o-r-2.jpg) 0 50% repeat-x;
    }
    div div {
      background:url(farbverlauf-schmal-o-g.jpg) 50% 0 repeat-y;
      }
    </style>
</head>
<body>
  <div>
    <div>
      .<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />
    </div>
  </div>
</body>
</html>

Ich hoffe, das ist Denkansatz genug.

Fips01 · #8 (**permalink**) 14.04.2008, 17:09

Ja, den Hintergrund ab der Kopf bis zur Fußzeile stelle ich mir genauso vor, so hatte ich ihn ja auch schon hinbekommen. Ich hab jetzt mal ein bisschen Inhalt eingefügt, um es besser zu zeigen. Scheinbar bin ich mit Umschreiben nicht wirklich gut.

Auf die Frage "Was willst du eigentlich?" kann ich jetzt kurz antworten: Dass der Hintergrund der 3 Textblöcke jeweils bis zur Fußzeile geht bzw. dass alle 3 Textblöcke gleich lang sind. Ich finde, es sieht einfach edler aus (sicher Geschmackssache) als das klassische 3-Spalten-Layout ohne Trennung der 3 Blöcke.

Und auch das war mit meiner Frage gemeint:

Zitat:

Nebeneinander gefloatete Element passen sich nicht in der Länge an ihre Nachbarn an.

Ok, das geht also nicht. Gibt es eine andere Möglichkeit als floaten oder muss ich mich generell davon verabschieden?

lg
Fips

fricca · #9 (**permalink**) 14.04.2008, 17:13

Du hast jetzt einen Satz aus meiner Antwort zitiert. Die Antwort auf deine Frage findest du in den Sätzen, die auf den zitierten Satz folgen. Diese umschreiben nichts anderes als die Faux-Columns-Technik, von der hier schon mehrmals die Rede war.

Fips01 · #10 (**permalink**) 14.04.2008, 17:22

Ja, und ich habe in meinem vorigen Beitrag mit dieser Frage bereits versucht herauszufinden, ob ich die Technik richtig verstanden habe.

Zitat:

Verstehe ich es richtig, dass die faux columns Grafik dann so aussehen würde: 920px breit wie der komplette wrapper, einige wenige Pixel hoch und würde folgende Spalten beinhalten:

10px rot für jetziges margin OHNE Verlauf
185px Menüblock links in der Menüfarbe
10px rot ohne Verlauf
420px für den Mittelblock mit Farbverlauf horizontal
10px rot ohne Verlauf
185px Block rechts in der Menüfarbe
10px rot ohne Verlauf

Darin wären dann alle Spalten (auch die Inhaltsblöcke) bereits in der Hintergrundgrafik definiert. Deine Beispielgrafik entspricht ja meiner jetzigen Hintergrundgrafik, deshalb war ich ja der Meinung, das wären faux columns. Ich weiß nur nicht, wie ich die Inhaltsblöcke auch als faux columns unterbringe.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Drei spaltige webseite: Spalten mit opacity highlighten.	sepp88	Javascript & Ajax	2	16.11.2009 14:10
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript	chrisol_76	CSS	2	21.07.2008 17:37
3 dynam. Spalten mit Inhaltsüberlauf	spacegaier	CSS	6	12.10.2007 00:24
mysql: kann man count() in select Anfragen nicht mit anderen Spalten kombinieren?	braindead	Serveradministration und serverseitige Scripte	5	13.03.2007 22:53
3 Spalten immer gleich hoch. Wie mach ich das?	Fanello	CSS	7	21.02.2006 15:39