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

Die Navigation verschiebt sich nach rechts?

D

deflox

Neues Mitglied
Guten Abend,

Ich habe eine vertikale Navigation in der Sitebar erstellt. Ich habe dabei mit CSS gearbeitet und bringe es einfach nicht fertig, dass die Navigation in der Sitebar erscheint. Sie verschiebt sich immer nach rechts. (Hier ein Bild dazu|Der rote Bereich ist in der CSS Datei #left, die Navigation ist in der CSS Datei mit #left nav... deklariert nicht #mini nav, das ist die horizontale)

Kann mir jemand weiterhelfen?

Der CSS-Code:

Code: 
body {text-align:left;
background-image:url("bg.jpg");
background-repeat:repeat;
background-attachment:fixed;
}


#webseite {
width:980px;
margin:0 auto;
}


#main2 {
width:980px;
}


#left2 {
font-family:helvetica;
float:left;
width:600px;
height:100px;
background:transparent;
margin-top:0px;
margin-bottom:0px;
}


#right2{
font-family:helvetica;
float:right;
text-align:right;
font-size:10pt;
width:360px;
height:100px;
background:transparent;
margin-top:0px;
margin-bottom:0px;
}


#mini{
float:left;
height: 58px;
z-index: 1;
width:980px;
font-family:times new roman;
background: #424242;
margin-top:0px;
margin-bottom:40px;
box-shadow: 0px 3px 10px black;
}


#main {
width:980px;
}


#left {
float:left;
width:200px;
height:370px;
background:red;
font-family:helvetica;
margin-top:0px;
margin-bottom:0px;
}


#right{
float:right;
font-family:helvetica;
width:760px;
background:transparent;
margin-top:0px;
margin-bottom:0px;
}


#footer{
background:transparent;
height:60px;
width:980px;
margin-top:10px;
clear:both;
}


#mini nav {
text-align: left;
height:30px;
margin-top: 20px;
margin-bottom: 20px;
background-color: transparent;
}


#mini nav ul {
list-style-type: none;
}


#mini nav li {
display: inline;
padding-right: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
font-family:arial,helvetica;
background-color: transparent;
}


#mini nav a {
text-decoration: none;
color: white;
text-shadow: black 0px 0px 4px;
}


#mini nav li:hover {
background-color: #151515;
-webkit-transition-duration: 0.5s;
}


#mini nav a:hover {
text-shadow: gray 0px 0px 4px;
-webkit-transition-duration: 0.5s;
}


#left nav , #left nav li  {
 margin:0;
 padding:0;
 list-style:none;
}


#left nav ul {
  width:200px;
}


#left nav li a {
 background-color:#444;
 color:#fff;
 font-weight:bold;
 text-decoration:none;
 display:block;
 padding:10px;
}


#left nav a:hover {
 background-color:#a33;
 color:#fff;
 -webkit-transition-duration: 0.2s;
}

Ich habe auch noch den HTML - Code eingefügt:

Code: 
<!DOCTYPE html><html>
<head>
    <title>Impressium</title>
    <link rel="stylesheet" type="text/css" href="design.css">
</head>
<body link="black" vlink="black" alink="black">
<div id="webseite">
    <div id="main2">
        <div id="left2">
        <h1><span style="text-shadow: 5px 10px 15px black;">Hardware und Software</span></h1>
        </div>
        <div id="right2">
        <a href="javascript:window.print()">Druckversion</a> | <a href="impressium.html" target="_blank">Impressium und Datenschutz</a>
        </div>
    </div>
        <div id="mini">
            <nav>
                <ul>
                    <a href="index.html"><li>Home</li></a>
                    <a href="software.html"><li>Software</li></a>
                    <a href="hardware.html"><li>Hardware</li></a>
                    <a href="#"><li>Chat</li></a>
                    <a href="videos.html"><li>Videos</li></a>
                </ul>
            </nav>


        </div>
        <div id="main">
        <div id="left">
        <nav>
            <ul>
                <li><a href="indes.htm">Startseite</a></li>
                <li><a href="impressum.htm">Impressum</a></li>
                <li><a href="kontakt.htm">Kontakt</a></li>
            </ul>
        </nav>
        </div>
            <div id="right">
            <h2><span style="text-shadow: 1px 1px 2px black;">Impressium und Datenschutz</span></h2>
            </div>
        <div id="footer">
        </div>
    </div>
</div>
<script type="text/javascript" id="fbzScript" src="http://feedeebuzz.de/widget/js/feedeebuzz.js?to=leo.rudin%40gmx.ch&amp;p=l&amp;c=b&amp;l=de"></script>
</body>
</html>
 
Hallo,

also was soll das ul wenn keine li machst wie sich das gehört für ein Menü.

mach das erstmal valide bevor weiter machst, sonst hast nach her 1000 fehler und weist nicht wo anfangen sollst.
The W3C Markup Validation Service

Zweitens mach das Online das hilft den helfer sehr.

und das ist auch nicht gut, richtiger per css
<body link="black" vlink="black" alink="black">
Zum Vergrößern anklicken....

Cheffchen
 
Hängt eventuell mit den floats und fehlendem .clearfix zusammen. Ich würde die Sitebar mit dem darinliegenden Menü mal in eine neue Datei extrahieren.

Noch was, falls du nicht weisst, worin der Unterschied zwischen

Code: 
#left, #right {
  float: left;
}

und

Code: 
#left {
  float: left;
}
#right {
  float: right;
}

besteht, verwende lieber den oberen Code.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben