vertical geteiltes Design

emmis · #1 (**permalink**) 23.11.2009, 22:10

... nicht so heikel aber mal interessant ob es elegante Lösungen gibt.

... in diesem Stil möchte ich ein Design ausprobieren. Vertical zweigeteilt. die Grenze der beiden Farben (grün/weiss) soll immer zentriert sein. Mit Tabellen ist es mir schon gelungen. Wie läuft das aber mit DIV und/oder CSS?

Ich gebe dem BODY mit, dass die Hintergrundfarbe "grün" sein soll, einem zentrierten wrapper-div gebe ich ein geteiltes grün-weissen hintergrund mit (in meinem Fall 1000px insg.).

Nun ist das Problem rechts neben der blauen Linie. Da ja die Farbgrenze aimmer zentriert sein soll wächst der bereich rechts neben der blauen linie, je nachdem wie breit der browser gezogen wird. Wie gibt man diesem Bereich einen unendlichen weissen hintergrund mit?

Vielen Dank!!

Hashishin · #2 (**permalink**) 23.11.2009, 22:31

Du hast ein Div und sagst 100% Breite, text-align: center.
Darin hast du ein Div mit 80(?)% Breite, dieses wird zentriert dargestellt durch textalign center. Darin packst du einfach 2 weitere divs, gibst beiden 50%breite (Achtung falls du Border, Margin, ... definierst kommst du auf 50%+50%+paar pixel) und gibst beiden divs die eigenschaft float left. Meinetwegen dem Linken auch left, dem Rechten right, wenn du in der Mitte noch etwas platz willst.
Und schon solltest du soweit sein, dass du die Bereiche fertig hast um Content reinzupacken

greetz Hashi

Smartsoul · #3 (**permalink**) 23.11.2009, 22:35

Edit: Hashishin war schneller und besser

emmis · #4 (**permalink**) 23.11.2009, 23:38

... nur ist das scrollen, wenn die seite vertical zusammen-gestaucht wird nicht ganz "sicher". Ich bin da noch nicht ganz so firn. Muss weitertesten. Vielleicht habe ich da ja auch was übersehen. Toll wäre eine Lösung mit einem zentralen wrapper "unter" dem sich die optische Teilung vollzieht und die technische im Wrapper.

EDIT: Antwort bezog sich auf Smartsoul

emmis · #5 (**permalink**) 24.11.2009, 06:58

na klar, für eine vertikale Teilung funktioniert das auch aber doch nicht für das gezeigte Beispiel. Wie willst Du damit erreichen, dass beide Farben (rechts und links) ins "unendliche" laufen. 2 100% hohe streifen nebeneinander zentriert setzen: das ist schon klar und eine der beiden Farben durch Vergabe an ein darunterliegendes Element (BODY), damit wenigstens eine der beiden Seiten schon rechts oder links ins unendliche Laufen ...ist auch klar. Aber eine Seite bleibt so ein jedem Fall unerledigt.

Geht aller höchstens mit einem sehr sehr breiten Hintergrundbild ... ??

hubspe · #6 (**permalink**) 24.11.2009, 07:57

Moin,

Beispiel:

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" />
    <title>Beispiel</title>
    <style type="text/css">
*{
margin:0px;
padding:0px;
}
body  {
	background:url(body-hg.png) repeat-y 50% 0;
	font:100%/1.4 calibri, arial, sans-serif;
}
#umhang  {
	width:900px;
	padding:3em;
	margin:0 auto;
}
</style>
</head>
<body>
<div id="umhang">
<p>Das erste, was ich sagen möchte, ist ein herzliches Wort des Dankes an meine Freunde im Evangelischen Arbeitskreis, 
die in diesen Jahrzehnten - in diesem Jahr begehen wir noch ein wichtiges Erinnerungsdatum an Hermann Ehlers - eine grossartige
Arbeit für unsere Sache geleistet haben. Der Evangelische Arbeitskreis hat in schwierigen Zeiten unserer Partei vor allem einen 
wichtigen Dienst geleistet, er hat immer wieder darauf hingewiesen, dass es wichtig ist, die Herausforderung des Tages zu begreifen,
dass aber Politik, die hinführt zur Staatskunst, immer auch eine prinzipielle Begründung haben muss, dass sie standhalten muss den 
Anfragen nicht zuletzt aus der jungen Generation nach der Grundordnung, nach den Wertmassstäben, an denen sich Politik ausrichtet.</p>
</div>
</body>
</html>

die HG-Grafik ist 3000x21px was auch für große Bildschirme ausreichen sollte.

Klappt problemlos im FF, IE8, Opera, Safari.

Im IE6/7 wird beim verkleinern des Browserfensters der HG nicht mehr flexibel zentriert sondern bleibt stehen. Aber das ist wohl zu verschmerzen.

emmis · #7 (**permalink**) 24.11.2009, 09:13

... letztendlich habe ich es auch jetzt so gemacht gehabt. NUR!! ... aufgepasst beim vertikalen stauchen (so dass man vertikal scrollen muss).

Es benötigt 2 aufeinander abgestimmte Hintergrundbilder: eines, dass de Hintergrund durch BODY definiert (das Riesen-Teil) und eines dass hinter den content-wrapper (z.B. 1000px breit) kommt. Letzteres ist in der Position und Ausmass absolut und unter einem nicht veränderlichen DIV/TABELLE (was auch immer) und verändert seine POSITION auch beim vertikalen Scrollen nicht unter dem CONTENT.

Der BODY-Hintergrund rutscht fein unter dem CONTENT-Hintergrund durch und die Kombination liefert ein beständiges Ergebnis.

Code:

html {
height: 100%;
} 

*{
padding: 0;
margin: 0;
}

body{ 
	background-color: #b6d4e3;
	Width: 100%;
	Height: 101%;
	min-height 100%;
	background-image:url(main_hg.gif);
	background-position:center;
	background-repeat:repeat-y;
}

#content_container{
	width:1000px;   
	margin-left:auto; 
	margin-right:auto;
	min-height: 100%;
	height:100%;
}

#wrapper {
/* für 1000px breites DIV */
	min-height: 100%;
	width:1000px;   
	margin: 0 auto;
	text-align:center;
	
	background-image:url(mainmiddle_hg.gif);
	background-repeat:repeat-y;
}


<div id="wrapper">
<div id="content_container">
content
</div>
</div>

... so funktioniert es erst mal. Hoffe, habe keine Fehler gemacht und es hilft auch mal jemand anderes ... so funktionieren auch Teilungen mit 60/40 u.ä.

hubspe · #8 (**permalink**) 24.11.2009, 09:42

Zitat:

Zitat von emmis

NUR!! ... aufgepasst beim vertikalen stauchen (so dass man vertikal scrollen muss).

was ist denn beim vertikalen scrollen? Funktioniert doch auch problemlos.

Erst wenn ich im #wrapper auch ein HG-Bild mit der vertikalen Teilung reinsetze gibt's Probleme.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Design Darstellung	dessauer	CSS	22	03.05.2010 15:46
Was haltet ihr von Design?	tobik999	Offtopic	10	28.11.2008 23:03
Sitecheck: Barrierearm - Design - Ajax	Schmidt	Site- und Layoutcheck	16	21.08.2008 20:06
Design fertig aber welche Herangehensweise	JanW1989	(X)HTML	12	28.08.2006 18:06
problem mit tableless design und breiter Tabelle im IE	horizons	CSS	14	06.04.2005 10:39