Hallo zusammen,
ich baue gerade aus diversen Gründen meine Baukasten-HP (www.fr*nzisk*-h*ering.weebly.com, aus Suchmaschinengründen bitte * durch a ersetzen) nach und habe bei meinem Nachbau mit Microsoft Expression Web noch ein paar Probleme:
- die Schrift des Dropdown-Menüs wird beim Aufklappen (sprich, wenn man über "Galerie" fährt) hellgrau #b0b0b0 angezeigt. Die Schrift soll allerdings dunkelgrau #464646 sein und erst wenn man über das jeweilige Dropdown-Element fährt, hellgrau #b0b0b0 erscheinen
- wie richte ich das Dropdown-Menü wie unter www.fr*nzisk*-h*ering.weebly.com aus? Das Dropdown-Menü fängt zu weit unten nach Galerie an, die Schrift steht nicht genau unter Galerie und den weißen Abstand, der links und rechts neben Portrait bis Tiere ist, hätte ich gerne ein bisschen kleiner
- wenn man bei meinem Nachbau von Galerie nach Kontakt fährt sind zwischen Galerie, Preise, Über mich und Kontakt immer Verlinkungen (Hand-Symbol). Unter www.fr*nzisk*-h*ering.weebly.com sind immer Leerräume dazwischen (Pfeil-Symobl), in denen man nichts anklicken kann.
Ich weiß nicht, ob ich dafür ein neues Thema aufmachen muss: Wie kann ich die Navigationsleiste inkl. Linie beim Scrollen fixieren (siehe auch www.fr*nzisk*-h*ering.weebly.com)?
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>FFFotografie</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="top">
<div id="logo">
<img src="http://xhtmlforum.de/images/Logo WS.png" />
</div>
<div id="nav">
<ul>
<li><a href="index.html">Galerie</a>
<ul>
<li><a href="portrait.html">Portrait</a></li>
<li><a href="paare.html">Paare</a></li>
<li><a href="freunde.html">Freunde</a></li>
<li><a href="schwangerschaft.html">Schwangerschaft</a></li>
<li><a href="babys.html">Babys</a></li>
<li><a href="kinder.html">Kinder</a></li>
<li><a href="familie.html">Familie</a></li>
<li><a href="hochzeit.html">Hochzeit</a></li>
<li><a href="tiere.html">Tiere</a></li>
</ul>
</li>
<li><a href="preise.html">Preise</a></li>
<li><a href="about.html">Über mich</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="content">
<a href="portrait.html"><img src="http://xhtmlforum.de/images/Galerie Portrait.png" width="280px" height="229px"></a>
<a href="babys.html"><img src="http://xhtmlforum.de/images/Galerie Babys.png" width="280px" height="229px"></a>
<a href="hochzeit.html"><img src="http://xhtmlforum.de/images/Galerie Hochzeit.png" width="280px" height="229px"></a>
<a href="tiere.html"><img src="http://xhtmlforum.de/images/Galerie Tiere.png" width="280px" height="229px"></a>
<a href="paare.html"><img src="http://xhtmlforum.de/images/Galerie Paare.png" width="280px" height="229px"></a>
<a href="freunde.html"><img src="http://xhtmlforum.de/images/Galerie Freunde.png" width="280px" height="229px"></a>
<a href="schwangerschaft.html"><img src="http://xhtmlforum.de/images/Galerie Schwangerschaft.png" width="280px" height="229px"></a>
<a href="kinder.html"><img src="http://xhtmlforum.de/images/Galerie Kinder.png" width="280px" height="229px"></a>
<a href="familie.html"><img src="http://xhtmlforum.de/images/Galerie Familie.png" width="280px" height="229px"></a>
</div>
<div id="footer">
<div id="footer-links">
<ul>
<li> Gutscheine</li>
<li> </li>
<li>Impressum</li>
<li>Datenschutzerklärung</li>
<li>© 2014 - FFFotografie</li>
</ul>
</div>
<div id="footer-social-media">
<ul>
<li><a href=“http://www.facebook.com/fffotografie“><img src=”Bild Facebook auswählen” /></a></li>
<li><a href=“mailto:f@ff.de“><img src=”Bild E-Mail auswählen” /></a></li>
</ul>
</div>
</div>
</body>
</html>CSS
/* Reset */
html, body {
margin:0;
padding:0;
border:0;
background:transparent;
font-size:10px;
}
div,span, article, aside, footer, header, hgroup, nav, section,
h1, h2 h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody,tfoot, thead {
margin:0;
padding:0;
border:0;
background: transparent;
}
img {
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input, select, textarea, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
article, aside, dialog, figure, footer, header; hgroup, nav, section {
display: block;
}
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family:"Open Sans";
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #464646;
}
ol, ul {
list-style: none;
}
/* Global */
html { }
body { background-color: #ffffff; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #464646; }
h1 { font-size: 22px; }
h2 { font-size: 14px; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img h1 { margin: 0; }
/* Text Elements */
p { color: #464646; font-size: 14px; line-height: 100%; }
p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right { margin:1.5em 0 1.5em 1.5em; padding: 0; }
a { }
a:link { color: #464646; }
a:visited { color: #464646; }
a:active { color: #b0b0b0; }
a:focus { color: #b0b0b0; }
a:hover { color: #b0b0b0; }
blockquote { color: #000; font-size: 12px; }
strong { font-weight: bold; }
em { font-style: italic; }
/* Containers */
#top { background-color: #ffffff; width: 100%; border-bottom: 1px #e7e7e7 solid; height:200px; text-align:center; z-index:20; }
#logo { margin:0px auto; }
#nav {
font-family:"Open Sans";
font-size:18px;
color:#464646;
}
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
#nav ul {
padding:0 20px;
list-style:none;
position: relative;
display:inline-table;
}
#nav ul:after {
content: ""; clear:both; display:block;
}
#nav ul li {
float:left;
}
#nav ul li:hover {
color:#b0b0b0;
}
#nav ul li:hover a {
color:#b0b0b0;
}
#nav ul li a {
display:block;
padding: 20px 40px;
color:#464646;
text-decoration:none;
}
#nav ul ul {
background:#fff;
padding:0;
position:absolute;
top:100%;
}
#nav ul ul li {
float:none;
position:relative;
}
#nav ul ul li a {
padding:8px 20px;
left:50px;
color:#464646;
}
#nav ul ul li a:hover {
color:#b0b0b0;
}
#nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
#content { float: left; width: 900px; padding: 15px; }
#content h1 { margin: 0 0 20px 0; font-size: 22px; padding: 20px 0; }
#content p { margin: 5px 0; line-height: 160%; text-align:justify; }
#content h2 { margin: 20px 0 0 0; }Im Anhang ist ein Bild wie mein Nachbau aktuell aussieht.
