zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden dynamische Webseite nach Aussen hin verlängern möglich?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.08.2010, 20:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2009
Beiträge: 38
keinplan befindet sich auf einem aufstrebenden Ast
Standard dynamische Webseite nach Aussen hin verlängern möglich?

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
Angehängte Grafiken
Dateityp: png is.png (40,7 KB, 15x aufgerufen)
Dateityp: png soll.png (41,5 KB, 15x aufgerufen)
Angehängte Dateien
Dateityp: zip test.zip (8,7 KB, 0x aufgerufen)

Geändert von keinplan (12.08.2010 um 20:30 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.08.2010, 18:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2009
Beiträge: 38
keinplan befindet sich auf einem aufstrebenden Ast
Standard

Keiner ne Idee?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.08.2010, 20:25
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 703
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
  #4 (permalink)  
Alt 13.08.2010, 20:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 888
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.08.2010, 06:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2009
Beiträge: 38
keinplan befindet sich auf einem aufstrebenden Ast
Standard

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 ...
Mit Zitat antworten
  #6 (permalink)  
Alt 15.08.2010, 03:07
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 703
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
  #7 (permalink)  
Alt 15.08.2010, 14:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2009
Beiträge: 38
keinplan befindet sich auf einem aufstrebenden Ast
Standard

3 Divs nebeneinander zu packen ist nicht das Problem. Trotzdem Danke für den Versuch zu helfen
Mit Zitat antworten
  #8 (permalink)  
Alt 15.08.2010, 14:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.04.2007
Beiträge: 123
firehorse befindet sich auf einem aufstrebenden Ast
Standard

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!!!
Mit Zitat antworten
  #9 (permalink)  
Alt 15.08.2010, 15:12
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 703
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
3 Divs nebeneinander zu packen ist nicht das Problem.
Dann weiß ich nicht was Du willst. Testcase
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.08.2010, 19:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2009
Beiträge: 38
keinplan befindet sich auf einem aufstrebenden Ast
Standard

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.
Angehängte Dateien
Dateityp: zip test_neu.zip (10,3 KB, 4x aufgerufen)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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 12:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:41 Uhr.