Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Layout problem, div scrollen

  1. #1
    HTML Newbie
    Registriert seit
    24.02.2010
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Layout problem, div scrollen

    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

    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;
       }
    Code:
    <div id="haupt">
      <div id="navi">
         <div id="content">content</div>
      </div>
    </div>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Layout problem, div scrollen

    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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    24.02.2010
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layout problem, div scrollen

    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?!

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    24.02.2010
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layout problem, div scrollen


  5. #5
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Layout problem, div scrollen

    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-Code:
    <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>
    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;
    }

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    24.02.2010
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layout problem, div scrollen

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

  7. #7
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Layout problem, div scrollen

    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

  8. #8
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Layout problem, div scrollen

    Zitat Zitat von lukasn Beitrag anzeigen
    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:
    Angehängte Grafiken Angehängte Grafiken

  9. #9
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Layout problem, div scrollen

    =P Logo ned, wollt ihn nur dran erinnern

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    24.02.2010
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layout problem, div scrollen

    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?

Ähnliche Themen

  1. layout problem
    Von Fatal1ty im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 31.07.2009, 03:33
  2. Layout-Problem
    Von Bandit im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 01.10.2008, 20:25
  3. Problem mit Div, Layout, ...???
    Von crusader19 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 13.04.2007, 19:25
  4. Antworten: 0
    Letzter Beitrag: 03.02.2005, 12:37
  5. Problem mit CSS-Layout
    Von Dynamix im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 16.12.2004, 10:34

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •