Sky.NET (23.08.2013), xOneDirectionx (23.08.2013)
Thema: width 100% Browser Scrollbar
-
23.08.2013, 00:28 #1
- Registriert seit
- 18.03.2013
- Beiträge
- 481
Thanked 264 Times in 168 Postswidth 100% Browser Scrollbar
Guten Abend U-Hacks'ler.
Ich bin aktuell am rumexperimentieren mit CSS. Das habe ich noch nie so wirklich beherscht und wollte das jetzt mal angehen.
Dabei folgendes:
Ich habe mir die CSS-Klasse body angelegt.
Darin ist ein Div-Container, dessen verknüpfte CSS-Klasse ich ganz stumpf mal wrapper genannt habe.
In diesem Content ist eine Liste, meine topnav. Dort liegen 5 ListItems drin, bei denen passt alles. Allerdings, sobald die ungeordnete Liste (<ul id="topnav">) definiert wurde, erscheint eine vertikale Scrollbar in jedem Browser. Scrolle ich diese ganz nach rechts, stell ich auch fest, dass es auch nicht komplett zentriert ist, wie es eigentlich sein sollte.
Ich hänge mal meine ganzen Dateien einfach mal an und hoffe, ihr könnt das nachvollziehen und mir helfen.
body
{
background-color: #D3D3D3;
height: 100%;
width: 100%;
min-width: 800px;
}
#wrapper
{
margin-left: auto;
margin-right: auto;
width: 90%;
background-color: #000;
}
#topnav
{
width: 100%;
overflow: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
list-style-type: none;
}
#topnav a
{
font-family: Verdana;
font-size: 14px;
font-weight: bold;
text-decoration: none;
width: 100%;
height: 25px;
display: block;
color: #000;
background-color: #fff;
text-align: center;
line-height: 25px;
}
#topnav a:visited
{
color: #696969;
}
#topnav a:hover
{
background-color: #000;
color: #fff;
}
#topnav li
{
width: 20%;
float: left;
}
#pagecontent
{
width: 100%;
min-height: 600px;
background-color: #000;
margin-top: -5px;
}
HTML-Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Startseite</title> <link rel="stylesheet" href="styles/main.css" type="text/css"/> </head> <body> <div id="wrapper"> <ul id="topnav"> <li><a href="index.html">Startseite</a></li> <li><a href="register.html">Registrieren</a></li> <li><a href="login.html">Login</a></li> <li><a href="demo.html">Demo</a></li> <li><a href="impressum.html">Impressum</a></li> </ul> <div id="pagecontent"> </div> </div> </body> </html>
-
23.08.2013, 00:48 #2
AW: width 100% Browser Scrollbar
Hallo,
habs mir eben angeschaut. Liegt am im body definierten width:
body
{
background-color: #D3D3D3;
height: 100%;
width: 100%;
min-width: 800px;
}
Entfernst du es, wird der "wrapper" und die "topnav" zentriert dargestellt. Zusätzlich kannst du nicht mehr nach rechts scrollen, was ja dein eigentliches Problem war. Elemente zentrieren ginge auch mit folgender Lösung:
margin:0 auto;
Würde ich dir bei deiner topnav auch noch raten, also einfach die margins mit der oberen Lösung ersetzen und tada, kein Scrollen mehr nach unten möglich:
#topnav
{
width: 100%;
overflow: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
list-style-type: none;
}
-
The Following 2 Users Say Thank You to Devon For This Useful Post:
Ähnliche Themen
-
divs übereinanderlegen mit width 100%
Von ThunderStorm im Forum WebentwicklungAntworten: 3Letzter Beitrag: 01.03.2014, 20:44 -
Guten Browser
Von Luii im Forum Internet und TechnikAntworten: 11Letzter Beitrag: 15.08.2013, 15:37 -
Win7 Browser stürzen immer ab
Von Sinan im Forum WindowsAntworten: 11Letzter Beitrag: 10.07.2013, 15:38 -
Win7 Lästige werbung im Browser
Von Bazs im Forum WindowsAntworten: 14Letzter Beitrag: 22.05.2013, 13:44 -
Browser Games
Von ShinjiKagawa im Forum Sonstige GamesAntworten: 6Letzter Beitrag: 08.05.2012, 14:27
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.