I'm not sure why I can't load any images on this page. I've tried using multiple different images. When I remove the css I still can't load the images. I'm not sure what's causing it. I'm just looking to set the background image. Any help is greatly appreciated!
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Control Panel Main</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link rel="stylesheet" href="http://ift.tt/1ybHS57"/>
</head>
<body>
<nav class="nav-main">
<div class="logo">Wisconsin Dairy Farmers</div>
<ul>
<li>
<a href="#" class="nav-item">Amazing </a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="1">About Us</a></li>
<li><a href="2">Css is cool!</a></li>
<li><a href="3">Test</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav-item">Cool information!</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="4">About Us</a></li>
<li><a href="5">Css is cool!</a></li>
<li><a href="6">Test </a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="http://google.com" class="nav-item">Link to an external site!</a>
</li>
</ul>
</nav>
<div class="content">
This is some filler content.<br/>
This is some filler content.<br/>
This is some filler content.<br/>
This is some filler content.<br/>
This is some filler content.<br/>
This is some filler content.<br/>
</div>
</body>
</html>
Here is the CSS
body, html {
margin:0;
font:1em "Open Sans", sans-serif;
}
.content{
padding:30px;
}
.nav-main{
width:100%;
background-color:#ff0000;
height:70px;
color:#fff;
}
.nav-main .logo{
float:left;
height:40px;
padding:15px 30px;
font-size:1.4em;
line-height:40px;
}
.nav-main > ul{
margin:0;
padding:0;
float:left;
list-style-type:none;
}
.nav-main > ul > li{
float:left;
}
.nav-item{
display:inline-block;
padding:15px 20px;
height:40px;
line-height:40px;
color:#fff;
text-decoration:none;
}
.nav-item:hover{
background-color:#bb0000;
}
.nav-content{
position:absolute;
top:70px;
overflow:hidden;
background-color:#bb0000;
max-height:0;
}
.nav-content a{
color:#fff;
text-decoration:none;
}
.nav-content a:hover{
text-decoration:underline;
}
.nav-sub{
padding:20px;
}
.nav-sub ul{
padding:0;
margin:0;
list-style-type:none;
}
.nav-sub ul li a{
display:inline-block;
padding:5px;
}
.nav-item:focus{
background-color:#bb0000;
}
.nav-item:focus ~ .nav-content{
max-height:400px;
-webkit-transition:max-height 0.4s ease-in;
-moz-transition:max-height 0.4s ease-in;
transition:max-height 0.4s ease-in;
}
Aucun commentaire:
Enregistrer un commentaire