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

CSS/HTMlL Drop Down Menü verschieben

M

Maase

Neues Mitglied
Hallo,
Ich bin gerade dabei mir eine HP zu erstellen, bisher klappt auch alles den Umständen entsprechend gut :mrgreen:
Meine Frage jetzt:
Wie verschiebe ich ein Drop Down Menü??

Hier das Bild:

c3v7bvtjjwv93th1j.jpg

Und hier der bisherige Code:
Auf der Html Seite:
HTML: 
<html><head>
<title> FSXPilotofy </title>
<link rel="stylesheet" type="text/css" href="DEI.css" />
<body style="background-image:url(Homepage/Hintergrund.jpg); background-repeat: repeat-x;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="o">
<center>
<img src="Homepage/mum.png" height="231" width="900" style="padding: 50px 0px 0px 0px;">
</center>
<ul id="navigation">


    <li class="home">Home
        <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
        </ul>
    </li>


    <li class="about">About
        <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
        </ul>
    </li>


</body>
</head>
</html>
auf der Css Seite:
Code: 
l#navigation
{


}


ul#navigation
{
    color:#FFF;
    text-decoration: underline;
    font-weight: bold;
}


ul#navigation li
{
    float: left;
    position: relative;
    height: 25px;
    width: 150px;
    list-style-type: none;
    background-color: #DF0101;
}


ul#navigation li:hover
{
   background-color: #000;
}


ul#navigation li ul
{
    position: absolute;
    top: 9px:
    left: 0px;
}


ul#navigation li ul li
{
    display: block;
    float: none;
    width: 100px;
    background-color: #000;
    border-top: solid 1px #000;
    }


    
    ul#navigation li ul li
    {
    background-color: #FF0040;
    }
    
ul#navigation li>ul
{
    display: none;
}


ul#navigation li:hover>ul
{
    display: block;
}



Danke =)

Gruß
Thies
 
Zuletzt bearbeitet von einem Moderator:
Guten Tag Maase,

wie ich sehe hast du deinen Header mittels eines center-Tags (deprecated) dauerhaft horizontal mittig positioniert. Das Navigationsmenü hingegen wird nicht gleich mit dem Header positioniert, sondern mittels eigener Definition (position:relative). An deiner Stelle würde ich einen so genannten Wrapper um Header und Menü machen, dann fangen beide immer von der gleichen Position (i.e. äußere Kante links) an.

Informationen hierzu:

* auf Englisch: How To Build a Basic CSS Layout
* auf Deutsch: CSS Div height: 100% | CSS Tutorials

Viele Grüße
w7
 
Hallo,
Ich habe ein kleines Problem!!
Denn wenn ich das Bild verschiebe sind die Seiten so verschnörkelt :((siehe Bild)
Und ich habe nicht ganz kapiert wie man das Bild nach links und rechts verschieben kann :(
Das Bild:
Zum vergrößern klicken!!

Gruß

Danke für erneute Hilfe!!
 
Code:
ul#navigation
{


}


ul#navigation
{
color:#FFF;
text-decoration: underline;
font-weight: bold;
}


ul#navigation li
{
float: left;
position: relative;
height: 25px;
width: 150px;
list-style-type: none;
background-color: #DF0101;
margin: auto;
margin-top: -16px;
white-space: nowrap;
}


ul#navigation li:hover
{
background-color: #000;
}


ul#navigation li ul
{
position: absolute;
top: 34px;
left: -1px;

}


ul#navigation li ul li
{
display: block;
float: none;
width: 100px;
background-color: #000;
border-top: solid 1px #000;
}



ul#navigation li ul li
{
background-color: #FF0040;
}

ul#navigation li>ul
{
display: none;
}


ul#navigation li:hover>ul
{
display: block;
}

Das ist der von der CSS Datei ;)
 
Ich habe es jetzt hinbekommen, das die Seiten im Drop Down Menü wieder gut lesbar sind, aber ich weiß immer noch nicht wie man ds ganze Menü nach links und rechts verschiebt ;)

Bitte Helft mir!!

Gruß
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben