XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   dynamische Webseite nach Aussen hin verlängern möglich? (http://xhtmlforum.de/showthread.php?t=62056)

keinplan 12.08.2010 20:24

dynamische Webseite nach Aussen hin verlängern möglich?
 
Liste der Anhänge anzeigen (Anzahl: 3)
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 13.08.2010 18:36

Keiner ne Idee? :)

emti 13.08.2010 20: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 13.08.2010 20: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 14.08.2010 06: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 15.08.2010 03: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 15.08.2010 14:20

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

firehorse 15.08.2010 14: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 15.08.2010 15:12

Zitat:

3 Divs nebeneinander zu packen ist nicht das Problem.
Dann weiß ich nicht was Du willst. Testcase

keinplan 15.08.2010 19:13

Liste der Anhänge anzeigen (Anzahl: 1)
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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:10 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023