• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Titelzeile/Menü soll nicht scrollen

B

Bratwurst

New member
Hallo erst mal :icon6: !

Hab meine kleine Webpage in mehrere <div> Abschnitte unterteilt:

(Titel/Menu/Content)

Das Design ist das Übliche - links das Menü und oben die Titelzeile und Content eben in der Mitte davon.

Nun möchte ich, dass man Content mit den Bildschirmlaufleisten verschieben kann ohne dass das andere mitscrollt.

Wenn ich allerdings position: fixed benutze scrollt es zwar aber Teile der Titelleiste verschwinden.

Gibt es dabei Besonderheiten zu beachten oder gibt es ggf. auch andere Lösungen?

Wer weiß Rat?
 
Hmm, wäre schön wenn der Herr Nicholls auch noch was ausführlich dazu geschrieben hätte :D .

Bin da nicht so der Freak in CSS. Also hab mir das mal angeschaut.

Habe dann den Titel Bereich um folgendes erweitert:

Code: 
width : 100%;
position : fixed;
z-index : 1000;

Durch width 100% wird jetzt die Titelzeile fast statisch angezeigt :cool: .

Nur im linken Bereich wo die Navigation ist - eben nicht.

Sieht aus als wenn alles nach recht geschoben wäre.

Wenn ich den obigen Code in den Navigationsbereich einfüge schiebt sich
die Navigation auch weiter nach rechts (eher mittig) -
und nach ganz oben -
bleibt aber dann dort und scrollt aber auch nicht mehr mit. So weit so gut.

Woran kann das liegen?

Nachtrag: die Titelzeile habe ich jetzt zumindest mit left : 0; auf die ganze Länge gekriegt.
Das funktioniert. Aber beim Menü funktioniert das nicht.
 
Zuletzt bearbeitet:
Warum so kompliziert?
Dem Content-div eine feste Höhe geben und dann mit overflow:auto scrollbar machen...
 
So hab es jetzt mit position:fixed hingekriegt (in IE und Firefox).
Das ließ mir doch keine Ruhe :icon7: .

Allerdings gibt es jetzt noch das kleine Problem, dass Content
beim Start nicht unter der Titelleite anfängt sondern dahinter (oder oben :sad:).

Mit Content height X oder Content top X hat es nicht funktioniert.

Wenn ich absolute top nehme ist es zwar an der richtigen Stelle, aber trotz
overflow hidden läuft es über die Titelzeile.

Woran könnte das liegen?
 
Zuletzt bearbeitet:
Ohne Link kann man nur raten: Headbereich oben, darunter Menü und Inhalt, Inhalt soll scrollen?

So was in dieser Richtung?
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Content scrollen</title>

<style type="text/css">
body, html
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#nav {
height: 99%;
width: 300px;
background: #0086d7;
float: left;
padding: 20px 20px;
}

#content {
height: 99%;
overflow: auto;
background: #efefef;
width: auto;
padding: 20px 20px;
}
</style>

</head>
<body>
<p align="center">Head, der sich der Größe des Logos anpasst.<a href="http://www.deinestartseite.de"><img 

src="logo.gif" alt="" width="xxx" height="xxx" border="0" /></a></p>
<div id="nav">
Navipunkt<br>Navipunkt<br>Navipunkt<br>Navipunkt
</div>

<div id="content">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>
</div>

</body>
</html>
 
Ja so wäre das schon passend - hab es mittlerweile auch so hingekriegt,
allerdings sind bei mir die Rollbalken am Content-Bereich dran und nicht am Rand
(wie ich es gern hätte) - werde es noch mal probieren damit ich es ebenso hinzukriege
(ggf. an der Größe mal schrauben).

Hätte die HP auch schon gepostet aber mein Freespace-Provider läßt sich nocht etwas Zeit
mit der Beantwortung einer E-Mail Anfrage :mad: .

Falls es nicht klappt - poste ich es den Link in den nächsten Tagen.
 
Bratwurst schrieb:
allerdings sind bei mir die Rollbalken am Content-Bereich dran und nicht am Rand...
Zum Vergrößern anklicken....

Hm, ich dachte, die sollten an den Content. Hier sind sie am Rand:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Content scrollen</title> 

<style type="text/css">
body, html {
height: 100%; 
max-height: 100%;  
padding: 0; 
margin: 0; 
border: 0; 
overflow: hidden; 
}

#head {
position: fixed; 
margin: 0; 
top: 0; 
right: 18px; 
display: block; 
width: 100%; 
height: 100px; 
background: url(deinlogo.jpg) #ddd; 
font-size: 4em; 
z-index: 5; 
color: #fff;
text-align: center;
}

#content {
display:block; 
height:100%; 
max-height:100%; 
overflow:auto; 
padding-left:300px; 
position:relative; z-index:3;
}

#nav {
height: 100%;
max-height: 100%;
width: 250px;
background: #0086d7;
position: fixed; 
left: 0; 
top: 0;
padding: 20px 20px;
} 

* html #head, html #nav {
position: absolute;
}

#content p, #nav p {
padding: 120px 20px 20px;
}
</style>
</head>

<body>

<div id="head">Hier kommt der Header rein
</div>

<div id="nav">
<p>Navipunkt<br>Navipunkt<br>Navipunkt<br>Navipunkt
</p> 
</div>

<div id="content">
<p>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>
</p>
</div> 
</body>
</html>
 
Nix für Ungut, aber eventuell solltest Du Dich erstmal mit den Grundlagen beschäftigen.
Nicht bös' gemeint...
Zum Vergrößern anklicken....

@dkdenz

Kein Problem :cool: . Wie oben geschrieben bin ich ja gerade erst dabei wieder tiefer in CSS einzusteigen.
Allerdings gehe ich da eher nach dem Prinzip "learning by doing" vor -
sprich ich lerne in der Reihenfolge was ich gerade brauche.

Hab mich jetzt anhand der Beispiele und Hilfen die ich hier gekriegt habe "weitergebildet"
und hab die jeweiligen Befehle auf SelfHTML/Google und anderen Seiten nachrecherchiert,
um zu schauen "wie es funktioniert".

@anna55

Danke für die Beispiele. Haben mir sehr geholfen.
Jetzt funktioniert es wie gewünscht.

Wenn es soweit ist zeige ich es mal - ist aber zur Zeit nur auf der Festplatte.
Muß noch etwas verschönert werden.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben