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

Seite kann mann weiter scrollen als mann soll!

Z

ZyklonOne

Neues Mitglied
Hallo liebe Community,

ich habe folgendes Problem.

Auf meiner Seite die recht Simple ist soll unter dem footer schluss sein, jedoch der scrollbalken lässt sich noch ein ganzes stück weiter nach unten Scrollen.

Ich bin noch neu und weiß echt nicht mehr weiter.

Das ist meine Seite!

Hier mal die HTML:

Code: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Achten Sie auf --> Ts-Killer.com <-- !</title>
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css"></style>
<div class="logo"></div>
<div id="header"></div>
<a href="file:///C:/Users/Arbeitstier/Desktop/Ts-Killer.com/index.html" style="text-decoration:none"> <div id="button1"><center><font color="#FFFFFF" size="+2" face="Calibri">Startseite</font></center></div> </a>
<a href="file:///C:/Users/Arbeitstier/Desktop/Ts-Killer.com/index.html" style="text-decoration:none"> <div id="button2"><center><font color="#FFFFFF" size="+2" face="Calibri">TeamSpeak³</font></center></div> </a>
<a href="file:///C:/Users/Arbeitstier/Desktop/Ts-Killer.com/index.html" style="text-decoration:none"> <div id="button3"><center><font color="#FFFFFF" size="+2" face="Calibri">Support</font></center></div> </a>
<div id="header-deko1"></div>
<div id="content"></div>
<div id="starter"><center><font color="#FFFFFF" size="+2" face="Calibri">Starter</font></center><font color="#666666"><BR />&nbsp;&nbsp;16 Slots<BR />&nbsp;&nbsp;Werbung<BR />&nbsp;&nbsp;-Button<BR />&nbsp;&nbsp;-Small Banner</font></div>
<div id="medium"><center><font color="#FFFFFF" size="+2" face="Calibri">Medium</font></center><font color="#666666"><BR />&nbsp;&nbsp;32 Slots<BR />&nbsp;&nbsp;Werbung<BR />&nbsp;&nbsp;-Button<BR />&nbsp;&nbsp;-Medium Banner<BR />&nbsp;&nbsp;Nachricht im Chat</font></div>
<div id="business"><center><font color="#FFFFFF" size="+2" face="Calibri">Business</font></center><font color="#666666"><BR />&nbsp;&nbsp;64 Slots<BR />&nbsp;&nbsp;Werbung<BR />&nbsp;&nbsp;-Button<BR />&nbsp;&nbsp;-Large Banner<BR />&nbsp;&nbsp;Nachricht im Chat<BR />&nbsp;&nbsp;PopUp Meldung</font></div>
<div id="infopanel-rechts-u">Infopanel</div>
<div id="info-links"><font color="#0066FF" size="+1"><b>Kostenlos!<B></font><BR /><BR /><BR /><font color="#0066FF" size="+1"><b>Finanziert durch Werbung<b></font></div>
<div id="info-rechts"><font size="-1">Ohne Umweg zum eigenen TeamSpeak³ mit Ts-Killer.com!<BR /><BR />
Im Normalfall steht hier das kleingedruckte und die Haken an der ganzen Sache.<BR /><BR />
Das gibt es bei uns nicht. Die TeamSpeak³-Server sind kostenfrei und haben (je nach Slot Anzahl) eine Werbeeinblendung.</font></div>

<div class="footer"></div>


</head>

<body>
</body>
</html>

Und hier die CSS:

Code: 
#header {
    background-image:url(./images/Ts-Killer_02.png);
    background-repeat:repeat-x;
    position:relative;
    margin:auto;
    height:121px;
    top:-92px;
}

.logo {
    background-image:url(./images/Ts-Killer_04.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:1316px;
    height:84px;
    right:0px;
    top:-8px;
    z-index:50;
}

#header-deko1 {
    background-image:url(./images/Ts-Killer_10.png);
    width:1316px;
    height:3px;
    position:relative;
    top:-203px;
    margin:auto;    
}

#button1 {
    background-image:url(./images/Ts-Killer_08.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    padding-top:4px;
    width:172px;
    top:-126px;
    height:32px;
    right:417px;
}

#button1:hover {
    background-image:url(./images/Ts-Killer_08.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:172px;
    top:-126px;
    height:32px;
    right:417px;
}

#button1:active {
    background-image:url(./images/Ts-Killer_08.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:172px;
    top:-126px;
    height:32px;
    right:417px;
}

#button2 {
    position:relative;
    margin:auto;
    padding-top:4px;
    width:172px;
    top:-162px;
    height:32px;
    right:230px;
}

#button2:hover {
    background-image:url(./images/Ts-Killer_08.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:172px;
    top:-162px;
    height:32px;
    right:230px;
}

#button2:active {
    background-image:url(./images/Ts-Killer_08.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:172px;
    top:-163px;
    height:32px;
    right:230px;
}

#button3 {
    position:relative;
    margin:auto;
    padding-top:4px;
    width:172px;
    top:-198px;
    height:32px;
    right:40px;
}

#button3:hover {
    background-image:url(./images/Ts-Killer_08.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:172px;
    top:-198px;
    height:32px;
    right:40px;
}

#button3:active {
    background-image:url(./images/Ts-Killer_08.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:172px;
    top:-198px;
    height:32px;
    right:40px;
}

#content {
    background-image:url(./images/Ts-Killer_16.png);
    position:relative;
    margin:auto;
    width:1001px;
    height:328px;
    right:0px;
    top:-203px;
}

#starter {
    background-image:url(./images/Ts-Killer_19.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:160px;
    height:239px;
    right:420px;
    top:-180px;
    padding-top:3px;
}

#medium {
    background-image:url(./images/Ts-Killer_21.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:160px;
    height:239px;
    right:252px;
    top:-422px;
    padding-top:3px;
}

#business {
    background-image:url(./images/Ts-Killer_23.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:160px;
    height:239px;
    right:83px;
    top:-664px;
    padding-top:3px;
}

#infopanel-rechts-u {
    background-image:url(./images/Ts-Killer_25.png);
    background-repeat:no-repeat;
    position:relative;
    margin:auto;
    width:494px;
    height:239px;
    right:-253px;
    top:-906px;
}

#info-links {
    position:relative;
    margin:auto;
    width:503px;
    height:137px;
    top:-850px;
    right:240px;
}

#info-rechts {
    position:relative;
    margin:auto;
    width:903px;
    height:137px;
    top:-985px;
    right:-268px;
}

.footer {
    background-image:url(./images/Ts-Killer_31.png);
    background-repeat:repeat-z;
    margin:auto;
    position:relative;
    height:64px;
    top:-1010px;
}
 
Du musst einfach die voreingestellten Werte des Browsers überschreiben. Dann musst du auch den Header nicht mehr positionieren und dein Dokument sollte einen DOCTYPE haben, damit der Browser nicht im Quirksmodus rendert.

Also body {margin:0; padding:0}
 
struppi schrieb:
Du musst einfach die voreingestellten Werte des Browsers überschreiben. Dann musst du auch den Header nicht mehr positionieren und dein Dokument sollte einen DOCTYPE haben, damit der Browser nicht im Quirksmodus rendert.

Also body {margin:0; padding:0}
Zum Vergrößern anklicken....

Habe dies so gemacht, jetzt gehen die images auch bist zum seitenrand.

Mit dem scrollen ist es immer noch das selbe.

Wie bekomm ich es hin das man nur bis zum ende des Footers scrollen kann?
 
Hmm.., muss leider nochmal nerven.

Jetzt bereiten mir die Buttons ein problem, ich habe die relative position rausgenommen und nun behalten die Buttons ihr Position nicht mehr wenn man die Seite zoomt.
 
Okay, habe den fehler mal noch schnell ausgebessert.

Code: 
background-repeat:repeat-z;

Lautet nun..

Code: 
background-repeat:repeat-x;

Hoffe das es der fehler war.
 
Fehler sind alle weg. Aber dein HTML Code ist schon altertümlich. Mit <font> und <center> Tags, obwohl du CSS benutzt? Die vielen <br> müssten auch nicht sein.
 
struppi schrieb:
Fehler sind alle weg. Aber dein HTML Code ist schon altertümlich. Mit <font> und <center> Tags, obwohl du CSS benutzt? Die vielen <br> müssten auch nicht sein.
Zum Vergrößern anklicken....

Danke für dein Feedback, ich hoffe ich darf dich Dutzen?

Wie kann ich es besser machen, damit mein HTML Code nicht mehr so altertümlich ist?

Ich habe das Webdesignen nie i-wo als Beruf gelernt, alles was ich weiß habe ich aus Tutorials ect.
 
ZyklonOne schrieb:
Wie kann ich es besser machen, damit mein HTML Code nicht mehr so altertümlich ist?
Zum Vergrößern anklicken....

Ich habe dir mal alle Elemente entfernt die du nicht brauchst.
Was übrig bleibt nach der Reinigung siehst du hier:
HTML: 
<!DOCTYPE html>
<html>              
    <head>                          
        <meta charset="utf-8">                          
        <title>Achten Sie auf --> Ts-Killer.com                       
        </title>                                  
        <link rel="stylesheet" type="text/css" href="index.css">              
    </head>              
    <body>                          
        <div id="header">                 
        </div>                 
        <div class="logo">                 
        </div>                 
        <a id="button1" href="http://ts-killer.com/">Startseite</a>                 
        <a id="button2" href="http://ts-killer.com/">TeamSpeak³</a>                 
        <a hid="button3" ref="http://ts-killer.com/">Support</a>                 
        <div id="header-deko1">                 
        </div>                 
        <div id="content">                 
        </div>                 
        <div id="starter">16 Slots                          
            <BR>Werbung                          
            <BR>-Button                          
            <BR>-Small Banner                  
        </div>                 
        <div id="medium">32 Slots                          
            <BR>Werbung                          
            <BR>-Button                          
            <BR>-Medium Banner                          
            <BR>Nachricht im Chat>                  
        </div>                 
        <div id="business">64 Slots                          
            <BR>Werbung                          
            <BR>-Button                          
            <BR>-Large Banner                          
            <BR>Nachricht im Chat                          
            <BR>PopUp Meldung>                  
        </div>                 
        <div id="infopanel-rechts-u">                 
        </div>                 
        <div id="info-links">Kostenlos!                           
            <br>Finanziert durch Werbung                  
        </div>                 
        <div id="info-rechts">                         Ohne Umweg zum eigenen TeamSpeak³ mit Ts-Killer.com!                                  
            <BR>Im Normalfall steht hier das kleingedruckte und die Haken an der ganzen Sache.                                  
            <BR>Das gibt es bei uns nicht. Die TeamSpeak³-Server sind kostenfrei und haben (je nach Slot Anzahl) eine Werbeeinblendung.>                                           
        </div>                 
        <div class="footer">                 
        </div>              
    </body>
</html>
Statt den Tag center zu benutzen nimmst du im CSS das Attribut Text-align mit dem Wert center.
Statt des Font-Tags nimmst du im CSS das Attribut Font mit entsprechenden Werten.
Statt des Leerzeichen und der BR-Tags am Anfang und Ende, nimmst du im CSS die Attribute für Padding und Margin.
Um deine A-Tags im Menü wieder zu formatieren, sprichst du sie mit a#button1 usw. an und verwendest dafür das Attribut Color für die Farbe, Text-Align für die Ausrichtung.
Alles dazu findest erklärt bei Doku:CSS/Eigenschaften
 
ZyklonOne schrieb:
Wie kann ich es besser machen, damit mein HTML Code nicht mehr so altertümlich ist?
Zum Vergrößern anklicken....
Das was du machst ist schon ein guter Weg. Wohlmeinende Kritik annehmen und den Willen zeigen, sich zu verbessern.
Die Meisten hier haben das nie als Beruf gelernt und sich durch Try and Error kontinuierlich verbessert ;)

Als kleine Faustregel gilt: alles was mit CSS zu gestalten geht, sollte nicht mit Tags gemacht werden.
Beispielsweise <i>, <u>, <b>, <center>, align="", width="", height="", etc. sind zu vermeiden.
Logische Ausnahmen bestätigen die Regel!
Beispiel für eine logische Ausnahme wäre Höhe und Breite eines Bildes. Jedem darzustellenden Bild per CSS Höhe und Breite zuzuweisen, wenn sonst keine Attribute vergeben werden müssen, wäre ziemlich mühselig und unsinnig. Dass der Browser aber schon vor dem Laden die die Abmessungen kennt, ist aber sehr wohl sinnig, damit er den benötigten Platz gleich reserviert und "Layoutzappeln" wärend dem Ladevorgang vermieden wird.
Ergo ist es ratsam, dass bei Bildern die width und height inline gegeben werden.

Es ist in etwa wie mit deinem anfangs gewählten Weg.
Positionierungen haben durchaus ihre Daseinsberechtigung, werden aber, wie in deinem Fall, oftmals völlig überstürzt angewendet, obwohl es einen einfacheren besseren Weg zum Ziel gibt und verursachen dann mehr Probleme als Nutzen.

Der langen rede kurzer Sinn.
Das Netz ist voll von Tutorials. Die meisten davon sind für Einsteiger zwar sehr nützlich, um einen Fuß in die Tür zu bekommen, sind aber in der Tiefe meist gnadenlos veraltet!
Das erschwert natürlich gezieltes Lernen.
Bleib am Ball. Baue vielleicht eine Website zum Spaß und probiere alles, was du neu lernst. Bitte in Foren wie diesem um Meinungen und lies auch sonst viel mit.

Fürs gezielte Lernen, bietet dieses Forum, unter dem Menüpunkt Wiki, zusammengetragenes Grundwissen, das ziemlich auf der Höhe der Zeit ist
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben