• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Es scrollt- soll es aber nicht.

R

rudka

Neues Mitglied
Hallo zusammen,

ich sage direkt vorab: Ich bin kein Experte in Html & CSS.
Den Code habe ich mit Hilfe von mehreren Tutorials zusammengebaut.

Aber nun zu meinem Problem:

HTML: 
<html>
      <head>
        <title>Gruppe A</title>
        <link rel="stylesheet" type="text/css" href="style2.css" />
      </head>
      <body>
        
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div class="content">
 <div class="contenttext">

<div class="silver">
<div id="nav">
<ul>
<li><a href="http://www.hv-designs.co.uk" title="Home" class="current">Home</a></li>
<li><a href="http://www.hv-designs.co.uk" title="Button 2">Button 2</a></li>
<li><a href="http://www.hv-designs.co.uk" title="Button 3">Button 3</a></li>
<li><a href="http://www.hv-designs.co.uk" title="Button 4">Button 4</a></li>
<li><a href="http://www.hv-designs.co.uk" title="Button 5">Button 5</a></li>
</ul>
</div>
</div>
 
 
      </body>
    </html>

HTML: 
body {
     background-color: #FFCC66;
     background-image: url("bgb.png");
     background-repeat: repeat;
    background-attachment: fixed;
    margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
    }
h1 {
      color: #000000;
         font-family: arial, verdana, sans-serif;
         text-align: center;
    }
    h2 {
      font-family: "Times New Roman", serif;
          text-align: center;
    }
p {
      font-family: Trebuchet, verdana, sans-serif;
    text-align: center;
    }

.content {
 background-image: url(button.png);
 background-repeat: no-repeat;
 float: left;
 height: 500px;
 width: 1200px;
 margin-right: center;
 margin-left: center;
 margin-top: 0px;
}
.contenttext {
 float: none;
 height: auto;
 width: auto;
 margin-top: 90px;
 margin-left: 60px;
 font-family: "Cooper Black";
 font-size: 30px;
 color: #FFF;
}
/* ---------------------- silver nav ---------------------- */
.silver #nav{
text-align:center;
position:relative;
display:block;
height:50px;
font-size:11px;
font-weight:normal;
background:transparent url(images/silver-nav-background.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
text-transform:uppercase;
}
.silver #nav ul{
text-align:center;
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}


.silver #nav ul li{
text-align:center;
display:block;
float:left;
margin:0 1px 0 0;
}
.silver #nav ul li a{
text-align:center;
display:block;
float:left;
color:#3A3A3A;
text-decoration:none;
padding:14px 22px 0 22px;
height:28px;
}

.silver #nav ul li a:hover,.silver #nav ul li a.current{
text-align:center;
color:#333333;
background:transparent url(images/silver_nav_mouseover.gif) no-repeat top center;
}
/* ---------------------- END silver nav ---------------------- */

So ich habe hier nun mein "Werk". Nun habe ich das Problem, wenn ich die Seite aufrufe und scrolle, bewegt sich nur der Content, der Contenttext und die Navigation.
Aber eigentlich sollte es gar nicht scrollen und ich weiß ehrlich gesagt auch nicht wieso es das tut.

Ich hoffe ihr könnt mein Problem verstehen und mir einen Rat geben. :)
 
Zuletzt bearbeitet:
Weil es einfach nicht nötig ist.
Weißt du denn wieso nur der Content usw. gescrollt wird?^^
 
Klar, das ist das normale Verhalten jedes Browsers. Wenn das Scrollen nicht möglich wäre, könnte jemand der einen sehr kleinen Viewport hat schlimmstenfalls nur einen Teil der Seite sehen ohne per Scrollen an den Rest zu kommen. Die Seite wäre dann unbedienbar.

Wenn du folglich das Scrollen unterbindest, erreichst Du quasi das viele Besucher nie mehr wiederkommen, weil sie deine Seite nicht bedienen konnten.
 
Na gut.
Versuch's ich es anders herum :)
Jetzt habe ich aber ein anderes Problem, denn jetzt scrollt die Navigation nicht mit. Wie erreiche ich es denn, dass diese doch mit scrolt?
Ich habe es mit attachment = scroll versucht, aber dann habe ich sozusagen den Hintergrund unten noch einmal.
 
Ich sehe aktuell keinen Grund wieso auf deiner Webseite ein HTML-Element nicht mitscrollen sollte. Einzig der Hintergrund vom <body> ist fixiert positioniert und scrollt somit nicht mit. Wenn Du meinst, dass der Hintergrund dennoch mitscrollen soll, nimm diese Eigenschaft raus. Wenn Du dann verhindern willst, dass der Hintergrund sich wiederholt, ergänze beim body

Code: 
background-repeat: no-repeat;

Siehe:
SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder
 
Hatte vor kurzem etwas ausprobiert und es nicht zurückgestellt, deswegen hat es nicht so funktioniert wie es sollte.
Jetzt klappt es aber!
danke ;)
 
Nur eine Frage: Im content hast du eine Höhe von 500px eingestellt?

Meines wissens nach reagiert der Browser auf solche Einstellungen nach mit Scrollbalken.

Oder nicht?

Was war denn der "Fehler" in deinem Quellcode?

LG Toby
 
Hallo rudka,

willst du vielleicht ein Frameset?
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Testseite</title>
    <style type="text/css">

* {
 margin:0;
 padding:0;
}

html,body {
 overflow:hidden;  
}


#content{
 position:absolute;
 top:100px;
 left:0;
 right:0;
 bottom:50px;
 background:#09c;
 color: #FFF;
 overflow:auto;
}

#header {
 background:#ede;
 height:80px;
 }

#navi {
 float:left;
 width:100%;
 background:#aaa;
 list-style:none;
 height:20px;
}

#footer {
 position:absolute;
 bottom:0;
 right:0;
 left:0;
 height:50px;
 background:#daa;
}

</style>
</head>
<body> 

<div id="header">Homepage</div>
<div id="navi">Navigation</div>
<div id="content">
<p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p>
</div>
<p id="footer">Footer</p>
 </body>
</html>
 
Wieso benutzt du nicht margin bzw margin-top anstatt der vielen <br /> Tags?

Um dein Problem zu lösen, erstellst du in deinem CSS-Teil der Website

HTML: 
html {
  overflow-y: hidden;
}

bzw

HTML: 
html {
  overflow: hidden;
}

Wenn du gar keine Scrollbalken haben möchtest. Somit wären nur die Div-Boxen, sofern diese 'überfüllt' sein sollten, einen Scrollbalken anzeigen.



lascaux
 
overflow kann in vielen Situationen wunderbar eingesetzt werden. Hier wäre es aber nur zur Verschleierung des Problems - also nicht geeignet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben