Beiträge von Anthony89

Anthony89

Hier noch das Bild zu der HP, die ich gerade versuche aufzubauen: https://www.dropbox.com/s/duh3cj8k2v8x…282%29.jpg?dl=0
Einen Videovergleich zur Menüliste zwischen Weebly und Microsoft Expression Web findet ihr hier: https://www.dropbox.com/s/dxilnnzcjbvg…173156.mp4?dl=0

Anthony89

Hallo zusammen,

ich baue gerade aus diversen Gründen meine Baukasten-HP (http://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 http://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 http://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 http://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>&copy; 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>

Alles anzeigen

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; }

Alles anzeigen

Im Anhang ist ein Bild wie mein Nachbau aktuell aussieht.

Beiträge von Anthony89

Horizontale Navigation mit Dropdown-Menü

Horizontale Navigation mit Dropdown-Menü