Ok,
I completed my site in dreamweaver cc and I moved my CSS files outside of dreamweaver (big mistake). That messed everything up. I moved the files back to the original folder and relinked everything. Most of the pages work as I originally designed them. However, my index page shows some of my css styling but no image. I looked at the code and everything is written in the code the way I intended, but my background image isn't showing up in browser preview. I'm getting all my text, navigation tool bar and no images except for a facebook link. I'm running Mac Mavericks too.
Here is my html code.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>vacancyart</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script>
<link href="index.css" rel="stylesheet" type="text/css">
<header id="top">
<nav id="mainNav">
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="art.html">Art</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="https://www.etsy.com/shop/VacancyArt">Etsy</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
<div id="main2">Vacancy Art is for all art and design. Check back frequently for updates!</div>
</nav>
</header>
<body>
<div id="igImage"><a href="http://instagram.com/vacancy_art"></a></div>
<div id="fbimg"><a href="https://www.facebook.com/vacancyart"><img src="Images/FB-f-Logo__blue_50.png" width="50" height="50" alt=""/></a></div>
</body>
<footer>
<p>© All rights reserved. Vacancy Art.</p>
</footer>
</html>
CSS code.
header {
text-transform: uppercase;
list-style-type: none;
list-style-position: outside;
width: 115%;
bottom: 1px;
max-height: 0%;
text-decoration: none;
}
#main2 {
display: block;
color: #FFFFFF;
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
position: fixed;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
text-align: center;
text-decoration: none;
text-transform: none;
line-height: 200px;
margin: auto;
position: absolute;
top: 70%;
width: 50%;
background-color: #000000;
opacity: 1;
background-repeat: no-repeat;
right: 0px;
}
#mainNav ul {
list-style-type: none;
display: block;
padding-bottom: 2px;
}
#mainNav a {
width: 14%;
display: block;
color: #FCFCFC;
text-decoration: none;
background-color: #010101;
text-align: center;
line-height: 100%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
opacity: 0.9;
box-sizing: content-box;
float: left;
text-shadow: 0px 0px;
background-repeat: no-repeat;
}
#mainNav {
text-align: center;
vertical-align: baseline;
list-style-type: none;
list-style-position: inside;
display: inline;
color: #000000;
opacity: 0.9;
}
body {
background-color: #000000;
color: #F9F8F8;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 200;
text-align: center;
padding-top: auto;
padding-bottom: 0px;
max-width: none;
background-image: url(../Images/Still%20life6bg.jpg);
background-size: 100px
%;
background-repeat: no-repeat;
display: inherit;
width: 100%;
height: 100%;
padding-right: 0%;
position: static;
background-size: 1000px 901px;
background-position: 150%
%;
background-position: 150%
%;
}
#igImage {
right: 100px;
position: absolute;
background-color: #FFFFFF;
top: 7%;
}
#fbimg {
position: absolute;
right: 165px;
opacity: 0.9;
top: 7%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
padding-left: 10px;
Everything appears to be there, but all I get is basically a blank page even after I relink everything. Any ideas?
Thanks!