如何将menulogo放置在导航框内,位于菜单项上方的顶部中心?我试图将img src放在#navigation中,但它一直出现在它之外。任何帮助将不胜感激。感谢。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="Desktop\website\vines.css"/>
<title>Puppy Power</title>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="wrap">
<div id="page">
<div id="dog logo">
</div>
<ul id="navigation">
<img src="menulogo.jpg">
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a>
<ul class="sub">
<li><a href="vines.html">Vines</a></li>
<li><a href="#">Pugs</a></li>
<li><a href="#">Failing Dogs</a></li>
<li><a href="#">Crazy Dogs</a></li>
<li><a href="#">Funny Dogs</a></li>
</ul>
</li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="hero"><div id="cf">
<img class="bottom" src="sad.jpg"/>
<img class="top" src="puppy.jpg">
</div></div>
<div id="topvideo"></div>
<div id="topphoto"><img src="not.jpg"></div>
<div id="toparticles"><img src="article.jpg"></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>©</b></h1></div>
<div>
</body>
</html>
CSS:
#wrap {
width: 900px;
margin: 0 auto;
}
#page {
max-width: 850px;
min-width: 900px;
min-height: 1550px;
max-height: 1600px;
}
#navgation img {
width: 250px;
height: 300px;
position: absolute;
top: 500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #F5FFFA;
}
#top, #bottom, #left, #right {
background: #7EB6FF;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
margin-bottom: 0px
}
#navigation li {
text-align: center;
float: left;
list-style-type: none;
top: 159px;
left: 80px;
border: none 0px;
}
#navigation ul li a {
font: Calibri;
}
#navigation , .sub {
list-style-type: none;
}
.sub {
display: none;
}
ul.sub {
position: absolute;
bottom: 15px;
right: 79px;
}
#navigation li {
text-align: center;
float: left;
list-style-type: none;
position: relative;
}
#navigation li a {
text-decoration: none;
padding: .2em 3em;
font: Verdana;
background-color: ##F5FFFA;
}
#navigation a {
text-decoration: none;
display: block;
}
#navigation li:hover > a {
background-color: #89cFF0;
}
#navigation li:hover > ul.sub{
display: block
}
© {
float: left;
}
#hero .bottom {
width: 813px;
height: 408px;
}
#hero .top {
width: 813px;
height: 408px;
}
#cf {
position:relative;
height:408px;
width:813px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 0px 5px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 5px;
}
#topphoto img {
width: 267px;
height: 370px;
}
#topvideo img {
width: 267px;
height: 370px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles img {
width: 267px;
height: 370px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 5px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 5px;
text-align: center;
}