EXAN
Lt. Junior Grade
- Registriert
- Juli 2009
- Beiträge
- 448
Hallo!
Ich muss für die Schule eine kleine Homepage aufbauen mit CSS und HTML (divs). Um dem ganzen bisschen was einzuhauchen, hab ich dann ein Dropdown Menü mit Css estellt und dieses dann auf meine Seite importiert.
Nun habe ich allerdings das Problem, dass wenn ich übder die Navigation mit dem Cursor fahr, sich das Dropdown Menü unter dem anderen Div öffnet, dass den Inhalt beinhaltet. Somit geht es auf, allerdings kann man es nicht anklicken! Außerdem öffnet sich das Dropdown Menü, seit ich die Navigationspunkte nach links verschoben hab, daneben, was ich ja auch nicht haben will.
Ein anderes Problem ist, dass die Navigationspunkte blau sind, obwohl ich das nirgendwo angegeben hab!
Ich hoff Jemand von euch kann mir helfen
Danke im Vorraus!
Hier ein Bild davon:
http://s14.directupload.net/file/d/3078/qsc44ivk_png.htm
Hier ist der HTML-code:
Hier der CSS-code:
Ich muss für die Schule eine kleine Homepage aufbauen mit CSS und HTML (divs). Um dem ganzen bisschen was einzuhauchen, hab ich dann ein Dropdown Menü mit Css estellt und dieses dann auf meine Seite importiert.
Nun habe ich allerdings das Problem, dass wenn ich übder die Navigation mit dem Cursor fahr, sich das Dropdown Menü unter dem anderen Div öffnet, dass den Inhalt beinhaltet. Somit geht es auf, allerdings kann man es nicht anklicken! Außerdem öffnet sich das Dropdown Menü, seit ich die Navigationspunkte nach links verschoben hab, daneben, was ich ja auch nicht haben will.
Ein anderes Problem ist, dass die Navigationspunkte blau sind, obwohl ich das nirgendwo angegeben hab!
Ich hoff Jemand von euch kann mir helfen
Danke im Vorraus!Hier ein Bild davon:
http://s14.directupload.net/file/d/3078/qsc44ivk_png.htm
Hier ist der HTML-code:
Code:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<div id="website">
<div id="header">
<h1>Test</h1>
</div>
<div id="Bild">
</div>
<div id="Navigation">
<ul>
<li><a href="#">Home</a>
<ul>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
</ul>
</li>
<li><a href="#">Infos</a>
<ul>
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
</ul>
</li>
<li><a href="#">Videos</a>
<ul>
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
</ul>
</li>
<li><a href="#">Bilder</a>
<ul>
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
</ul>
</li>
</div>
<div id="main">
<div id="Schlagzeilen"></div>
<div id="News"></div>
<div id="Links"></div>
<div id="Impressum"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>Hier der CSS-code:
Code:
body {
background-color:white;
text-align:center;
padding-top:100px;
padding-bottom:100px;
background-image: url('images/bg.png');
float:left;
margin-left:100px;
}
#website {
width:980px;
margin:0 auto;
}
#header {
width:980px;
height:75px;
background:Black;
border-radius: 3px;
margin-top:3px;
margin-bottom:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
opacity:0.75;
}
#header h1 {
font-size:60px;
font-weight:bold;
color:white;
font-family:calibri;
}
#Bild {
width:980px;
height:300px;
background:blue;
margin-top:1px;
margin-bottom:1px;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
-o-border-radius: 1px;
opacity:0.75;
background-image: url('images/header.png');
}
#Navigation {
width:980px;
height:30px;
background:black;
border-radius: 3px;
margin-top:1px;
margin-bottom:1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
opacity:0.75;
}
#Navigation ul{ /*Dropdown Menue */
padding:0px;
margin:0px;
line-height:30px;
background: black;
opacity:0.75;
margin-left:50px;
}
#Navigation li{
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
margin-left:50px;
}
#Navigation ul li a{ /* Aussehen Dropdown Menue */
font-family:Calibri;
text-decoration:none;
font-size:25px;
display:block;
}
#Navigation ul ul{ /* Innen (Dropdown-Liste */
position:absolute;
top:30px;
visibility:hidden;
}
#Navigation ul li:hover ul{ /* bei drüberfahren sichtbar machen */
visibility:visible;
}
#Navigation ul ul li:hover { /* Aussen Dropdown-Menue */
background-color:white;
}
#main {
width:980px;
}
#Schlagzeilen {
float:left;
width:680px;
height:507px;
background:grey;
margin-top:1px;
margin-bottom:1px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
opacity:0.75;
}
#News{
float:right;
width:298px;
height:200px;
background:grey;
margin-top:1px;
margin-bottom:1px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
opacity:0.75;
margin-left:2px;
}
#Links{
float:right;
width:298px;
height:200px;
background:grey;
margin-top:2px;
margin-bottom:2px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
opacity:0.75;
margin-left:2px;
}
#Impressum{
float:right;
width:298px;
height:100px;
background:grey;
margin-top:2px;
margin-bottom:2px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
opacity:0.75;
margin-left:2px;
}
#footer {
width:980px;
height:30px;
background:black;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
-o-border-radius: 1px;
margin-top:20px;
clear:both;
opacity:0.75;
}
