Übereinanderliegende Divs mit Hintergrundgrafik, größenabhängig gestalten

Mephi · #1 (**permalink**) 02.08.2016, 21:39

Hallo ich hab folgendes Problem, sichtbar im angehängten Bild.

Wie schaffe ich es dass, die graue Hintergrundgrafik mit meinem Ausgabefenster in der Mitte "mitwächst", aber unten ca. 100px übersteht. Der Überstand soll immer gleich bleiben, egal wie lange der Textausgabeteil wird. Beide Teile sind jeweils in einem DIV definiert.

Alle möglichen Varianten mit float usw. hab ich ausprobiert. Auch den Punkt im FAQ mit den 1) Container sollen "mitwachsen" - Faux Columns hab ich getestet.
Wobei meine Container ja nicht gleich hoch sein sollen.

Kann mir da jemand helfen?

MrMurphy · #2 (**permalink**) 02.08.2016, 21:49

Hallo

Ich sehe weder eine graue Hintergrundgrafik noch verstehe ich was du erreichen willst. Warum sollen welche Container nicht gleich hoch sein?

Am sinnvollsten wäre wohl ein Link zu der Seite.

Gruss

MrMurphy

Mephi · #3 (**permalink**) 02.08.2016, 22:00

Danke schonmal für die Antwort.

Ich habe die Seite leider lokal auf meinem Rechner mit XAMPP, aber ich kann Dir den Link zur Ursprungsseite geben, die ich grade neu zu bauen versuche.

Honor et Fides - Ehre und Treue

Die wurde aber wenn ich das recht sehe mit Tabellen gemacht, mein Nachbau besteht aus Containern.

Die Menüs und das Ausgabefenster in der Mitte haben dort ein graues Fenster im Hintergrund, dass mit dem Ausgabefenster in der Mitte größenabhängig mitwächst, mit einem bestimmtem Abstand am unteren Ende.

Hänge mal meinen Code mit an.

Code:

@charset "utf-8";

*{ margin: 0px; padding: 0px; border: 0px; }
html	{ height: 100.2%;
		background: url(../images/background2.png); no-repeat center center fixed;
		-webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover; }

/**** GRUNDGERÜST ****/

div#haupthintergrund { position: absolute; min-width: 54%; min-height: 1000px; margin-top: -27.5%; margin-left: 23%;
	 	background-image: url(../images/contenthintergrund.png); no-repeat center center fixed; z-index: 0;
  		-webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
		border-radius: 5px; }


/**** kopfbereich ****/

div#head { width: 100%; height: 700px; margin-top: 2%; background-image: url(../images/background.jpg); background-position: center top; }

/**** contentbereich ****/

div#menulinks { position: absolute; width: 5.5%; margin-top: -26%; margin-left: 24.5%; height: 150px; float: right; border: 1px solid #A0522D; 	
	background-image: url(../images/background2.png); no-repeat center center fixed; z-index: 1;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; 
	border-radius: 5px;
 	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #999;
	line-height: 115%;
  	font-size: 15px;
	padding: 1%; }

div#hauptseite { position: absolute; width: 33%; margin-top: -26%; margin-left: 32.5%; min-height: 800px; border: 1px solid #A0522D;
	background-image: url(../images/background2.png); no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; 
	border-radius: 5px; 
	 	color: rgb(153, 153, 153);
		font-family: Helvetica,Arial,FreeSans,sans-serif;
		font-size: 12px;
		line-height: 16.2px;
		text-align: left;
		padding: 1%; }

div#menurechts { position: absolute; width: 5.5%; margin-top: -26%; margin-left: 68%; height: 150px; float: left; border: 1px solid #A0522D;
	background-image: url(../images/background2.png); no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; 
	border-radius: 5px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #999;
	line-height: 115%;
  	font-size: 15px;
	padding: 1%; 
	list-style: none }

div#suche { position: absolute; width: 5.5%; margin-top: -15%; margin-left: 24.5%; height: 50px; float: right; border: 1px solid #A0522D;
	background-image: url(../images/background2.png); no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; 
	border-radius: 5px;
  	color: #999;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	padding: 1%; }

div#besucher { position: absolute; width: 5.5%; margin-top: -15%; margin-left: 68%; height: 50px; float: left; border: 1px solid #A0522D;
	background-image: url(../images/background2.png); no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; 
	border-radius: 5px;
  	color: #999;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
	padding: 1%; }


/**** fusszeile ****/

div#fusszeile { position: fixed; width: 100%; margin-left: 20%; margin-top: 50%; height: 75px;
  				background-image: url(../images/fusszeile.jpeg); no-repeat center center fixed;
  				-webkit-background-size: cover;
    			-moz-background-size: cover;
   				background-size: cover;
				z-index: 3; }

PHP-Code:


			
<div id="content">

         <div id="menulinks"><jdoc:include type="modules" name="menulinks" style="xhtml" /></div><!--#menulinks-->

        <div>

        <div id="haupthintergrund"><jdoc:include type="modules" name="haupthintergrund" style="xhtml" /></div><!--#haupthintergrund-->

         <div id="hauptseite">

        <jdoc:include type="component" name="hauptseite" style="xhtml" />

        <jdoc:include type="modules" name="breadcrumb" style="xhtml" />

        <jdoc:include type="component" />

        <jdoc:include type="message" />

        <jdoc:include type="modules" name="debug"/>

        </div><!--#hauptseite-->

          </div>

        <div id="menurechts"><jdoc:include type="modules" name="menurechts" style="xhtml"/></div><!--#menurechts-->

        <div id="suche"><jdoc:include type="modules" name="suche" style="xhtml" /></div><!--#suche-->

        <div id="besucher"><jdoc:include type="modules" name="besucher" style="xhtml" /></div><!--#besucher-->

         <div id="fusszeile"><jdoc:include type="modules" name="fusszeile" style="xhtml" /></div><!--#fusszeile-->

      </div><!--#content-->

MrMurphy · #4 (**permalink**) 02.08.2016, 22:09

Hallo

Zitat:

Hänge mal meinen Code mit an.

Mit dem können wir leider überhaupt nichts anfangen.

Gruss

MrMurphy

Mephi · #5 (**permalink**) 02.08.2016, 22:21

Was braucht Ihr denn dann noch, damit Ihr mir helfen könnt?

Ich versuch nochmal zu erklären, ich habe zwei übereinanderliegende DIV-Container, die ich von einander Größenabhängig machen will, mit einem bestimmten Abstand unten zueinander.

MrMurphy · #6 (**permalink**) 03.08.2016, 07:28

Hallo

Zitat:

Was braucht Ihr denn dann noch, damit Ihr mir helfen könnt?

Du gibst uns keine Informationen und erwartest Lösungen - wie soll das bitte funktionieren?

Du schreibst etwas von Hintergrundbildern, die wir aber nicht kennen, da du sie uns vorenthälst. Wie wissen weder wie groß sie sind noch was sie anzeigen.

Du gibst uns einen HTML-Quelltextschnipsel. Statt Inhalt nur Platzhalter. HTML-Version? Keine Information.

Wenn wir aus deinem Quelltext eine Datei erstellen erhalten wir eine leere Seite mit einem Rahmen. Daran können wir überhaupt nichts nachvollziehen.

Um die Seite wie gewünscht gestalten zu können müsstest du dich zudem von vielen veralteten und immer schon unsinnigen Lösungen trennen.

Damit wirst du wohl überfordert sein. Mit ein paar Änderungen / Anpassungen im CSS ist dein Problem jedenfalls nicht zu lösen.

Die Seite basiert, soweit ich das nachvollziehen kann, auf XHTML. XHTML wurde bereits vor 8 Jahren offiziell begraben und sollte seitdem nicht mehr für neue Seiten oder nach grundsätzlichen Änderungen weiter verwendet werden.

Du solltest also auf HTML5 umsteigen. Das hätte wiederum zur Folge dass statt der div aktuelle Container wie header, footer, main, article, section, aside und so weiter verwendet werden sollten.

Gleichzeitig würden dann die (nur farbigen) Raster-Hintergrundbilder entfallen und durch linear-gradient ersetzt werden.

Die absolute Positionierung der Container war schon immer falsch. Absolut positionierte Container waren nie für ein Gesamtlayout gedacht. Darauf solltest du für das Grundlayout auf position:absolute verzichten.

Aktuell und zukunftsträchtig ist die Gestaltung des Grundlayouts mit Flexbox.

Die aktuelle Lösung sieht also so aus:

1. Du verwendest HTML5 und CSS3.

2. Du verzichtest auf die Rasterhintergrundbilder (jpg, png, gif).

3. Du verwendest für das Grundlayout drei Container, die mit Flexbox und ohne position angeordnet werden. Durch Flexbox erhalten sie alle die gleiche Höhe.

4. Du füllst den Hintergrund mittels linear-gradient.

5a. Du kannst so problemlos den unteren Bereich der beiden äußeren Container so gestalten, dass sie optisch 100px vor dem mittleren Container aufhören.

oder

5b. Du gibst den Containern mittels CSS3 wirklich unterschiedliche Höhen. Wobei height-Angaben eigentlich so weit irgend möglich vermieden werden sollten. Statt dessen kannst du den beiden äußeren Containern eventuell ein margin-bottom mit auf den Weg geben.

Das kann ich ohne konkretes Beispiel aber nicht testen.

Gruss

MrMurphy

dazzle89 · #7 (**permalink**) 03.08.2016, 09:38

Ich verstehe das Problem auch nicht ganz.

Möchtest du, dass der Inhaltsbereich (#maincol) mit dem dunklen Hintergrund immer 100px höher ist als der etwas hellere Hintergrund von #main?

cloned · #8 (**permalink**) 03.08.2016, 09:42

Ja, man kann hier wirklich nur Raten. So ohne Informationen. Informiere dich auch, ob es nicht möglich ist, den Hintergrund mit CSS zu generieren, Transparenz und Verläufe sind ohne weiteres damit möglich.
Ob die background2.png so was enthält kann ich natürlich nicht sagen

Bezüglich "gleich hoher Spalten": Ja, entweder faux-columns oder eben flexbox Suche auch nach flexbox equal height.

MrMurphy · #9 (**permalink**) 03.08.2016, 12:38

Hallo

Ich habe mal ein Beispiel erstellt, wie eine Lösung aussehen könnte.

Zur Anordnung der Container reichen Flexbox und für die seitlichen Container ein margin-bottom.

Der mittlere Container ist immer 100px höher als die beiden seitlichen, egal welcher Container am meisten Inhalt enthält.

Für die Farbgebung habe ich einfache Farben ohne Verlauf gewählt. Was anderes gibt die Originalseite auch nicht her.

Ansonsten habe ich aktuelles HTML5 und CSS3 verwendet und einen Sticky Footer eingebaut. Dadurch kann die Seite später ohne weitere Anpassungen Responsive gestaltet werden.

Nachfolgend der Link zu der Testseite:

Honor et Fides

Gruss

MrMurphy

Mephi · #10 (**permalink**) 03.08.2016, 17:17

Servus, danke für die Antworten.

Ich konnte mein Problem einfach nicht besser beschreiben, ich mach das Ganze zum ersten mal und bin noch am reinfuchsen. Von daher sorry, wenn Infos fehlten.

So wie dazzle89 schrieb, wäre mein Ziel, nur dass es andersrum ist.
#inner soll immer 100px kleiner sein, als #main3

Zum Verständniss, die Seite die ich gepostet habe, ist unsere Alte, ich baue eine Neue, die vom Design ähnlich aussieht. Das habe ich auch mit CSS gemacht, Grafiken z.B. mit backgroundimage eingefügt, das ist der erste Code, den ich gepostet habe. Ich kann die neue Seite eben nicht zeigen, da ich die lokal, mit Hilfe von XAMPP, erstelle.

Danke Euch, aber schon mal für die Vorschläge, ich probiere die aus!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Script nur für Inhalt eines bestimmten DIVs	Kipperdesign	Javascript & Ajax	8	11.02.2013 13:03
DIVs wollen nicht in Container	Echnotron	CSS	4	22.02.2012 08:46
n Div's in eine Zeile	Mustangore	CSS	9	20.08.2009 15:19
IE verschluckt Hintergrundgrafik eines divs	cabotine	CSS	2	30.08.2008 17:29
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32