dynamische Webseite nach Aussen hin verlängern möglich?

keinplan · #1 (**permalink**) 12.08.2010, 19:24

Guten Abend zusammen.

Das nimmt mich schon länger wunder, vielleicht weiß ja jemand eine sinnvolle Lösung. Szenario:

Sich dynamisch verlängernde Webseite mit unterschiedlichem Verlauf links und rechts. Der Verlauf wird nach unten hin verlängert, wenn sich die Webseite verlängert, indem der unterste Streifen gekachelt wird.

Nun möchte ich gerne das die Webseite zusätzlich nach links und rechts jeweils bis an den Bildschirmrand raus läuft. Entsprechend würde ich auch links und rechts wieder einen 1px breiten Streifen schneiden und diesen dann nach außen hin verlängern. Mir fehlt da noch ein sinnvoller Ansatz. Es sollte nicht nur der Contentbereich, sondern auch der Header und Footer nach aussen hin verlängert werden ...

Mag jemand helfen? Im Anhang das Testszenario, möglichst einfach gehalten.

Gruss,
kp

keinplan · #2 (**permalink**) 13.08.2010, 17:36

Keiner ne Idee?

emti · #3 (**permalink**) 13.08.2010, 19:25

Zitat:

Zitat von keinplan

Das nimmt mich schon länger wunder, ...

Da die Verläufe unterschiedlicher Art sind, klappt das wohl leider nicht mit einer großen Hintergrundgrafik.

Mir fällt jetzt spontan nur eine Lösung ein, in dem du links und rechts ein eigenes div setzt, dem du dann die jeweilige Grafik zuweist.
Ähnlich wie hier: Flexi Floats - Multi Column CSS-P Layout nur die divs ebenfalls flexibel gestalten.

threadi · #4 (**permalink**) 13.08.2010, 19:27

Oder 2 aufeinanderliegende div's die beide absolut positioniert sind und die gesamte Höhe und Breite des Fensters einnehmen. Beide haben dann je ein Hintergrundbild: das eine für links, das andere für rechts. Mit background-position noch die Position bestimmen - fertig. Und dran denken, dass das eine links und das andere rechts transparent sein muss um das darunterliegende auch anzeigen zu lassen.

keinplan · #5 (**permalink**) 14.08.2010, 05:53

Ich bekomm das einfach nicht hin. Kann das jemand in mein Beispiel einbauen damit ich das nachvollziehen kann? Gerne auch einfach einfarbig ohne Grafik. Im Moment raucht einfach nur noch der Kopf. Links und rechts jeweils ein DIV der sich bis an den Browserrand streckt und dynamisch mit verlängert ...

emti · #6 (**permalink**) 15.08.2010, 02:07

Ich habe sie damals auch nicht bekommen, "fertige" Vorschläge, denn nur so lernt man es in dem man mit den Hinweisen selber zum Ziel kommt.
Mal kann ja mal ne Ausnahme machen und ich hatte grad Zeit und Lust das mal eben auszuprobieren.

Vorschlag:

HTML-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" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="de" />

<title>Testcase</title>

<style type="text/css">
* {
   margin:           0;
   padding:          0;
}

#links {
   background-color: #DDD;
   float:            left;
   width:            25%;
}

#content {
   background-color: #EEE;
   float:            left;
   width:            50%;
}

#rechts {
   background-color: #CCC;
   float:            left;
   width:            25%;
}
</style>

</head>
<body>
   <div id="links">Links</div>
   <div id="content">Content</div>
   <div id="rechts">Rechts</div>
</body>
</html>

Jetzt schön die Hintergrundgrafiken zuweisen und mit repeat-y arbeiten.

keinplan · #7 (**permalink**) 15.08.2010, 13:20

3 Divs nebeneinander zu packen ist nicht das Problem. Trotzdem Danke für den Versuch zu helfen

firehorse · #8 (**permalink**) 15.08.2010, 13:50

setze einen Container als Platzhalter.

HTML-Code:

<div id="egal">
       <div id="left">
              <div class="leftcontent"></div>
       </div>
       <div id="right">
              <div class="rightcontent"></div>
       </div>
       <div id="center">
              <div class="maincontent"></div>
       </div>
</div>

Diese nimmste als index.css Datei.

Code:

@import url(css/style.css);

/* B O D Y
====================================*/
html, body {

height: 101%;
width: auto;
text-align: center;
overflow: hidden-x;

}
/* alle Elemente auf Null setzen !
====================================*/
* {

margin: 0px;
padding: 0px;
border: none;
outline: 0;
line-height: 140%;
text-decoration: none;
list-style-type: none;
list-style-position: outside;
overflow: hidden-x;

}
/* unterstrichene Verweise im Text
====================================*/
p a {

text-decoration: underline;
outline: none;

}
/* Standardauszeichnung Fonts
====================================*/
textarea, pre, tt, code {

font-family: "Courier New", Courier, monospace;

}
/* font-size Bug im Opera
====================================*/
body {

font-size: 100.01%;

}
/* dynamic-imagelink for IE
====================================*/
a:hover img {

font-weight: bold;

}
/* keine ungewollten Selectboxen
====================================*/
option {

padding-left: 0.4em;

}
/* Safari-Fix (100% sind zu groß)
====================================*/
input, textarea, select {

font-size: 99%;

}



/* Platzhalter für vertikalen Spaltenbereich
------------------------------------
Dieser Eintrag MUSS gesetzt sein !!!
====================================*/
#egal {

display: block;
overflow: hidden;
text-align: left;
clear: both;

}
/* Spalte links
------------------------------------
innerhalb von id="egal"(Platzhalter)
====================================*/
#left {

float: left;
display: block;
overflow: hidden;
height: 1%;

}
/* Spalte rechts
------------------------------------
innerhalb von id="egal"(Platzhalter)
====================================*/
#right {

float: right;
display: block;
overflow: hidden;
height: 1%;

}
/* Spalte mitte (maincontent)
------------------------------------
innerhalb von id="egal"(Platzhalter)
====================================*/
#center {

display: inline;
width: auto;
overflow: hidden;

}
/* undefinierte innere Box
------------------------------------
innerhalb von #center
====================================*/
#center div {

display: block;
width: auto;
height: 100%;
overflow: hidden;

}

Die eigentlichen Auszeichnungen erfolgen dann in einer weiteren importierten CSS-Datei.

In etwa so:

Code:

/* platzhalter
==================================*/
#egal {

margin: 0px 0px 16px 0px;

}
/* left
==================================*/
#left {

margin: 0px;

}
#left div.leftcontent {

width: 23%;

}
/* right
==================================*/
#right {

margin: 0px;

}
#right div.rightcontent {

width: 23%;

}
/* center (content)
==================================*/
#center {

margin: 0px;

}
#center div.maincontent {

width: auto;

}

Wirst wahrscheinlich etwas probieren müssen. Aber den Ansatz haste schon einmal. Ich habe das jetzt aus dem Kopf gemacht. Hatte aber schon einige Sites so gemacht.

Vorsicht bei den ollen IE's !!!! Testen!!!

emti · #9 (**permalink**) 15.08.2010, 14:12

Zitat:

3 Divs nebeneinander zu packen ist nicht das Problem.

Dann weiß ich nicht was Du willst. Testcase

keinplan · #10 (**permalink**) 15.08.2010, 18:13

Im Anhang der aktuelle Stand. Da sind jetzt noch genau 2 Probleme zu lösen. Die Divs links und rechts ändern ihre Höhe nicht und ich müsste links und rechts auch noch einen blauen Streifen für den Footer drunterhängen.

Auch Dir danke firehorse, aber zu einer Lösung für mein spezifisches Problem komme ich mit Deinem Code auch nicht.

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
CSS-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen	Fools	(X)HTML	3	13.09.2010 11:57