jeudi 26 mars 2015

Why can't I load any kind of image on this page?

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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