I am having problems getting my CSS design to show on my browser. When I am in dreamweaver i can see the design perfectly but when I try to view it in firefox or safari there is absolutely no design, just the basic layout. This is the first time using a program like this and I am so confused!
Here is the HTML & CSS....please help!
Expand|Select|Wrap|Line Numbers
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>About Me</title>
- <link href="/main.css" rel="stylesheet" type="text/css">
- <style type="text/css">
- a:link {
- text-decoration: none;
- }
- a:visited {
- text-decoration: none;
- }
- a:hover {
- text-decoration: none;
- }
- a:active {
- text-decoration: none;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <header id="top">
- <h1 class="thispage">Jana Chanelle</h1>
- <nav id="mainnav">
- <ul>
- <h2><a href="home.html" class="thispage">HOME</a></h2>
- <h2><a href="about_me.html">BIO</a></h2>
- <h2><a href="portfolio.html">MUSIC</a></h2>
- <h2><a href="gallery.html">GALLERY</a></h2>
- <h2><a href="contact me.html">CONTACT ME</a></h2>
- </ul>
- </nav>
- <article id="mainarticle">
- <p><img src="/Jana Mustang.jpg" alt="" width="612" height="413" id="jana"/></p>
- <p style="font-size: x-large; text-align: center; font-weight: 500; color: #4AAAD6; margin-top: 50px;"><br>
- BIO</p>
- <p>TEXT
- <p>Jana is currently working on an original album which she plans to release late 2015. </p>
- <p> </p>
- <p> </p>
- <p> </p>
- </article>
- </header>
- <footer>© Jana Chanelle 2014 </footer>
- </div>
- </body>
- </html>
- CSS
- @charset "UTF-8";
- body {
- margin-top: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- margin-left: 10px;
- color: #151515;
- font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
- background-color: #EFF5F8;
- text-decoration: none;
- }
- #wrapper {
- background-color: #FFFFFF;
- width: 100%;
- min-width: 740px;
- max-width: 1000px;
- margin-top: auto;
- margin-right: auto;
- margin-bottom: auto;
- margin-left: auto;
- clear: both;
- text-decoration: none;
- color: #FF6500;
- top: 5%;
- }
- #hero {
- clear: left;
- }
- #hero article {
- width: 36%;
- padding-right: 10px;
- padding-left: 10px;
- clear: left;
- border-radius: 15px;
- }
- #hero img {
- max-width: 100%;
- background-color: #314137;
- }
- h1, h2 {
- color: #3399CC;
- font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
- font-style: normal;
- font-weight: 600;
- margin-top: auto;
- text-decoration: none;
- background-color: #FFFFFF;
- }
- h1 {
- font-size: 72px;
- margin-top: -15px;
- text-align: center;
- clear: both;
- text-decoration: none;
- height: 20%;
- min-height: 20px;
- max-height: 20%;
- top: 0%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- margin-right: -15px;
- margin-bottom: -15px;
- margin-left: -15px;
- }
- #main {
- width: 323px;
- float: left;
- margin-left: 2%;
- text-decoration: none;
- position: absolute;
- left: 588px;
- top: 283px;
- height: 148px;
- color: #FFFFFF;
- background-color: #4AAAD6;
- font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
- font-size: xx-large;
- text-align: center;
- border-radius: 15px;
- display: block;
- }
- #sidebar {
- width: 34%;
- margin-left: 4%;
- float: left;
- }
- #footer {
- clear: left;
- padding-top: 2%;
- padding-bottom: 2%;
- }
- #wrapper footer {
- padding-top: 2%;
- padding-bottom: 2%;
- clear: left;
- background-color: #43A6CB;
- color: #FFFFFF;
- text-align: center;
- }
- A:link {
- color: #F86300;
- }
- A:hover, A:focus, A:active {
- color: #7F3300;
- }
- #mainnav ul {
- list-style-type: none;
- margin-top: 0px;
- margin-right: 0px;
- margin-bottom: 0px;
- margin-left: 0px;
- padding-top: 0px;
- padding-right: 0px;
- padding-bottom: 0px;
- padding-left: 0px;
- }
- #mainnav a {
- width: 20%;
- display: block;
- padding-top: 0px;
- padding-right: 0px;
- padding-bottom: 0px;
- padding-left: 0px;
- margin-top: 0%;
- margin-right: 0%;
- margin-bottom: 0%;
- margin-left: 0%;
- background-color: #4D4D4D;
- height: 20%;
- max-height: 5%;
- float: left;
- color: #FFFFFF;
- text-align: center;
- }
- #top {
- background-color: #FFFFFF;
- max-height: 20%;
- min-height: 10%;
- bottom: 90%;
- -webkit-box-sizing: inherit;
- -moz-box-sizing: inherit;
- box-sizing: inherit;
- }
- #mainnav a:hover, #mainnav a:active, #mainnav a:focus #mainnav a.thispage {
- text-decoration: none;
- background-color: #43A6CB;
- }
- #mainnav a:active, a.thispage {
- background-color: #43A6CB;
- }
- #mainarticle {
- background-color: #EFF5F8;
- color: #000000;
- font-size: large;
- }
- #mainarticle p img {
- margin-top: 5px;
- margin-right: 5px;
- margin-bottom: 5px;
- margin-left: 5px;
- float: right;
- }
- #top #mainarticle p {
- margin-left: 15px;
- margin-top: 15px;
- margin-right: 15px;
- margin-bottom: 15px;
- }
- #mainarticle p img {
- float: right;
- }
- #mainarticle p .milhouse {
- float: left;
- }
- #mainarticle p #jana {
- }