1. #1

    Registriert seit
    18.03.2013
    Beiträge
    481
    Thanked 264 Times in 168 Posts

    Standard width 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>
    Ist ein evtl. wenig unsauber, mache das am Ende alles raus.



    [www.piratenpartei.de]
    "Krieg ist Frieden; Freiheit ist Sklaverei; Unwissenheit ist Stärke"

  2. #2
    Avatar von Devon
    Registriert seit
    18.11.2011
    Beiträge
    2.188
    Thanked 1.574 Times in 1.023 Posts

    Standard 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;
    }

  3. The Following 2 Users Say Thank You to Devon For This Useful Post:

    Sky.NET (23.08.2013), xOneDirectionx (23.08.2013)

Ähnliche Themen

  1. divs übereinanderlegen mit width 100%
    Von ThunderStorm im Forum Webentwicklung
    Antworten: 3
    Letzter Beitrag: 01.03.2014, 20:44
  2. Guten Browser
    Von Luii im Forum Internet und Technik
    Antworten: 11
    Letzter Beitrag: 15.08.2013, 15:37
  3. Win7 Browser stürzen immer ab
    Von Sinan im Forum Windows
    Antworten: 11
    Letzter Beitrag: 10.07.2013, 15:38
  4. Win7 Lästige werbung im Browser
    Von Bazs im Forum Windows
    Antworten: 14
    Letzter Beitrag: 22.05.2013, 13:44
  5. Browser Games
    Von ShinjiKagawa im Forum Sonstige Games
    Antworten: 6
    Letzter Beitrag: 08.05.2012, 14:27
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.