schakal1337
Threadersteller
Dabei seit: 03.07.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 03.07.2013 13:54
Titel Probleme mit der Navigation, es soll Drop-Down Menü werden |
|
|
Moin Moin,
ich bin im 2ten Semester 1 Kurs Web-Publishing.
Wir sollen nun eine Homepage nachbauen, ich habe mich für eine Drop-Down Naiv entschieden.
Leider ist habe ich einen Fehler den ich einfach nicht beheben kann, bei Inseln bleibt das Untermenü nicht sichtbar obwohl es den Befehl dazu habe und die Unterpunkte werden nicht zentriert im Block angezeigt.
Ich arbeite in Dreamweaver Cs6.
Wahrscheinlich habe ich einfach einen kleinen dämlichen Fehler eingebaut, aber ich bin noch überhaupt nicht vertraut mit Web-Publishing.
Danke schon einmal für eure Hilfe.
So sieht die Html aus:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Amazing Grace</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Alegreya' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Magra' rel='stylesheet' type='text/css'>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
</head>
<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img src="images/logo" width="960" height="145"></a></div>
<div id="nav">
<ul>
<li class="ver_line"><a href="#">Startseite</a></li>
<li class="ver_line"><a href="#" onMouseOver="MM_showHideLayers('burgen','','show')">Burgen</a></li>
<li class="ver_line"><a href="#" onMouseOver="MM_showHideLayers('inseln','','show')" onMouseOut="MM_showHideLayers('inseln','','hide')">Inseln</a></li>
<li><a href="kontakt/kontakt.html">Kontakt</a></li>
</ul>
<div id="burgen" onMouseOver="MM_showHideLayers('burgen','','show')" onMouseOut="MM_showHideLayers('burgen','','show')">
<ul>
<li><a href="ardvreck/ardvreck.html">Ardvreck</a></li>
<li><a href="#">Cawdor</a></li>
<li><a href="#">Dunnottar</a></li>
<li><a href="#">Eilean Donan</a></li>
<li><a href="#">Glamis</a></li>
<li><a href="#">Urquhart</a></li>
</ul>
</div>
<div id="inseln">
<ul>
<li><a href="#" onMouseOver="MM_showHideLayers('inseln','','show')" onMouseOut="MM_showHideLayers('inseln','','hide')">Islay</a></li>
<li><a href="#">Jura</a></li>
</ul>
</div>
</div>
<div id="content">
<img src="images/schottland.jpg" width="866" height="360" alt="Scotland Castle">
<h1>Welcome to Scotland</h1>
<p>Schottland ist ein Land im Nordwesten Europas und ein Landesteil des Vereinigten Königreichs </p>
<p>Großbritannien und Nordirland. Schottland besteht aus dem nördlichen Teil der größten europäischen Insel Großbritannien sowie mehreren Inselgruppen. Bis 1707 war es ein eigenständiges Königreich, in jenem Jahr wurde es mit dem Königreich England – mit dem es bereits seit 1603 in Personalunion regiert wurde – vereinigt. Die Hauptstadt von Schottland ist Edinburgh.</p>
</div>
</div>
</body>
</html>
und so die css Datei:
@charset "UTF-8";
#logo {
width: 960px;
height: 147px;
}
#nav {
background-color: #FFF;
width: 960px;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #00336e;
border-bottom-color: #00336e;
height: 40px;
}
#content {
background-color: #FFF;
width: 960px;
}
#wrapper {
background-color: #FFF;
width: 960px;
margin-right: auto;
margin-left: auto;
border: 1px solid #7d7b78;
box-shadow: 3px 3px 5px #b6bfc9;
}
body {
margin: 0px;
background-color: #ccd6e2;
}
#wrapper #nav ul {
list-style-type: none;
text-align: center;
margin-top: 9px;
margin-bottom: 9px;
}
#wrapper #nav ul li {
padding-right: 25px;
padding-left: 25px;
display: inline;
}
.ver_line {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #00336e;
}
a {
font-family: 'Magra', sans-serif, 'Trebuchet MS';
font-size: 20px;
color: #00336e;
text-decoration: none;
text-transform: uppercase;
font-weight: lighter;
}
#wrapper #content img {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 47px;
}
#burgen {
width: 255px;
visibility: hidden;
margin-top: 0px;
top: 183px;
height: 179px;
background-color: rgba(255,255,255,0.4);
margin-left: 430px;
padding: 0px;
left: 0px;
position: absolute;
}
#burgen ul li {
display: block;
}
#inseln {
width: 170px;
visibility: hidden;
margin-top: 0px;
top: 181px;
height: 61px;
background-color: rgba(255,255,255,0.4);
margin-left: 500px;
padding: 0px;
position: absolute;
}
#inseln ul {
list-style-type: none;
}
#burgen ul {
list-style-type: none;
}
h1 {
font-family: 'Magra', sans-serif, 'Trebuchet MS';
;
;
;
font-size: 38px;
color: #00336e;
text-transform: uppercase;
font-weight: normal;
padding-left: 243px;
}
a:hover {
text-decoration: underline;
text-align: center;
}
p {
font-family: 'Alegreya', serif, 'Times New Roman';
font-size: 16px;
padding-right: 169px;
padding-left: 243px;
}
Zuletzt bearbeitet von schakal1337 am Mi 03.07.2013 14:00, insgesamt 1-mal bearbeitet
|
|