I am having trouble with Live View and viewing in web browser
Aug 27, 2012 4:44 PM
Tags:I am following a tut on lynda.com for making a rotating banner using JQuery and CSS, but I got a bit hung up with the html, Anyone willing to lend a helping hand?
My div containers and images show up fine in design view, but when I try to preview it in Safari or live view it is blank!
I uploaded the project to http://nelsongifts.com/animated_banner/index.html
Here's the code I an using for the body.
<body>
<div class="marquee_container">
<div class="marquee_photos">
<img src="images/photos/Facebook.jpg" class="marquee_panel_photo" alt="Facebook" width="625" height="400"/>
</div>
<div class="marquee_caption">
<div class="marquee_caption_content">
<img src="images/template/logo_facebook.png" class="marquee_logo" width="20" height="13"/>
<h2> Join Us on Facebook</h2>
<p> Test caption <br/> more tests </p>
<p> <a href="#"> Check it out! </a></p>
</div>
</div>
<div class="marquee_nav">
<a class="marquee_nav_item"></a>
<a class="marquee_nav_item selected"></a>
<a class="marquee_nav_item"></a>
</div>
</div>
<div class="marquee_panels"></div>
</body>
And Here's the css.
@charset "UTF-8";
/* CSS Document */
.marquee_container {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 0px;
overflow: hidden;
position: relative;
}
.marquee_photos {
position: absolute;
left: 0px;
top: 0px;
}
.marquee_caption {
color: #FFF;
background-image: url(../images/template/marquee_caption.png);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
width: 625px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
position: absolute;
left: 0px;
top: 390px;
}
.marquee_caption_content {
width: 410px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
}
.marquee_caption h2 {
font-size: 1.25em;
font-weight: normal;
text-transform: uppercase;
color: #FFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 12px;
margin-left: 0px;
}
.marquee_caption_content p {
color: #FFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 12px;
margin-left: 0px;
}
.marquee_caption_content a {
color: #FC0;
}
.marquee_caption_content a:hover {
color: #FFF;
}
.marquee_caption_content .marquee_logo {
float: left;
margin-right: 10px;
}
.marquee_nav {
text-align: right;
position: absolute;
width: 240px;
top: 390px;
right: 321px;
}
.marquee_nav a {
background-image: url(../images/template/buttons.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: inline-block;
height: 20px;
width: 20px;
margin-left: 15px;
cursor: pointer;
}
