Layout problem, div scrollen

dj-giver

Hallo Leute,
leider finde ich keine passende lösung um nur ein Div zu scrollen. Die Divs befinden sich übereinander, weil sie mit hintergrundbildern aus gestattet sind. Ich habe das mal versucht zu skizzieren [Blockierte Grafik: http://www.css-info.de/forum/images/smilies/icon_mrgreen.gif]

Wie gesagt, es soll nur das contentDIV gescrollt werden. Der Scrollbalken soll der große ganz rechts sein und nicht am DIV selbst.

Könnt Ihr mir helfen???

Hier mein bisherriger Code:

Code

* {margin:0; padding:0;}
html, body {height:100%;  overflow:hidden;
}
img {border:0;}
a:link {  color: #707070; } 
a:visited  {  color: #707070; } 
a:hover { color: #000000; } 
a:active {   color: #707070; } 
p,a,h2,h3,h4,ul,ol,li,div,td,th,input,select,textarea,address,blockquote,nobr  {
   font-family: verdana, arial, helvetica, sans-serif;
    font-weight:normal;
   font-size: 11px; 
   line-height: 17px;
    color: #707173;
   text-decoration:none; 
   }

h1,h2,h3,h4  {
   font-family: verdana, arial, helvetica, sans-serif;
    font-weight:bold;
   font-size: 14px; 
   line-height: 17px;
    color: #a21a41;
   text-decoration:none; 
   }


ul,li  {padding-left:5px; 
line-height: 2; 
list-style-image:  url(pics/haus.gif);
}


body {   position: center; 
background-image:  url(../pics/back1.jpg);
background-repeat:repeat-x;
}


#haupt  {   
   background-image: url(../pics/back2.jpg);   
    background-color:#ffffff;
   background-repeat:repeat-x;
    border: #000000 1px solid;
   margin:0 auto;
    position:relative;  
   width:950px;
   height: 100%;
   }


#navi  {border: red 0px dashed ;
   width:700px;
   float:right;
    height: 100%;
   }


#content {
   height: 100%;
    border:0px solid #3399ff;
   background-image:  url(../pics/back3.jpg);
   background-repeat:repeat-y;
    width:475px;
   }

Alles anzeigen

Code

<div id="haupt">
  <div id="navi">
     <div id="content">content</div>
  </div>
</div>

lukasn

Hm, du könntest die beiden äusseren Spalten mit position: fixed; positionieren. Das würde dann allerdings heissen, dass du deine Hintergrundbilder möglicherweise anpassen musst. Eine andere Möglichkeit wäre, nur das Hintergrundbild mit background-attachment: fixed; zu positionieren, hängt halt etwas von der Situation ab.

-Lukas

dj-giver

mmm, Danke für deine Antwort.
Da die divs auf 3 Ebenen liegen, geht das mit position: fixed; nicht oder ich binn zu dösig ;o)

Ich habe hier eine Seite gefunden, die es ähnlich gemacht hat. Ich glaube, die haben das mit iframe gelöst. Nicht so toll oder?!

dj-giver

http://www.orange-cube.de/

lukasn

Hab dir mal ein sehr grobes Grundgerüst gemacht, wie eine Seite, in der Art wie du sie verlinkt hast, aufgebaut sein kann. Ich hab den Quellcode von orange-cube nicht genauer untersucht, mit iframes isses aber nicht gemacht.
Der unten stehende Code ist natürlich noch nicht komplett, aber er sollte dich in die passende Richtung drehen

HTML

<body>
	<div id="navi">
		<ul>
			<li><a href="#">Punkt1</a></li>
			<li><a href="#">Punkt2</a></li>
			<li><a href="#">Punkt3</a></li>
			<li><a href="#">Punkt4</a></li>
			<li><a href="#">Punkt5</a></li>
		</ul>
	</div>
	<div id="content_wrapper">
		<div id="content">				
		</div>
	</div>
</body>

Alles anzeigen

Code

#navi {
	float: left;
	width: 200px;
	background: #CCC;
}


#content_wrapper {
	margin-left: 200px;
	background: url(...) fixed;
}


#content {
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	background: #FFF;
}

Alles anzeigen

dj-giver

Hallo Lukas,
Vielen Dank, das hilft schon. Wie bekomme ich es jetzt noch hin, das sich alle anderen divs (zb. navi) nicht mit scrollen???

lukasn

Gibt 2 möglichkeiten, Entweder gibst du der Navi ein position: fixed; besser wäre allerdings, dem #content_wrapper ein overflow: scroll; zu geben, dann braucht er allerdings eine fixe höhe.

-Lukas

Grevas

Zitat von lukasn

Gibt 2 möglichkeiten, Entweder gibst du der Navi ein position: fixed; besser wäre allerdings, dem #content_wrapper ein overflow: scroll; zu geben, dann braucht er allerdings eine fixe höhe.

-Lukas

Da allerdings 100% auch eine fixe Höhe ist, sollte das kein Problem sein

Hier mal 2 Beispiele:

lukasn

=P Logo ned, wollt ihn nur dran erinnern

dj-giver

mmm, habe jetzt das nächste Problem.
Da ich alles im Browser zentriet ausrichten möchte, kann ich die bei position:fixed; die Divs nicht mehr anständig ausrichten.

..die Positionierung orientiert sich am Viewport (dem sichtbaren Browserfenster) und nicht am übergeordneten Element.

Schade eigentlich

Habt Ihr noch ne Idee?

lukasn

Na, eben nicht mit fixed, steht doch oben. Gib deinem equivalent de #content_wrapper ein overflow: scroll, dann sollte es gehen. Oder zeig uns mal deinen bisherigen quelltext, ist dann einfacher zu helfen.

-Lukas

Tobse

die anderen elemente auch fixed; und alle in den gelichen z-Index-schmeissen, dann müssten sie sich auch voneinander ausrichten.

Tags