Hey everyone. I am finally getting back up on web design, and I am working on this site for friend of mine. Here are the screenshots of the desired siteplan and what I have now. I’m sure this is a minor problem, but if someone could please help me find where I am going wrong that would be great. The image slider script is nivo-slider. I am basically trying to push that image slider script back up to the top on the right side, then be able to add more on the right side at the bottom. Also, the logo and the header nav are two separate images, and the only way I have found to arrange them like that is with absolute positioning. However, this obviously changed within different resolutions. I was wondering if any of you all had any idea about that either. Thank you all so much for the help in advance.
Desired
http://www.rocksouprecords.com/siteplan.jpg
Current
http://www.rocksouprecords.com/tofix.jpg
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="js/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<title>
RockSoupRecords.com
</title>
</head>
<body>
<div id="bgtex">
<div class="logo">
<img src="images/logo.png" />
</div>
<div id="navbar">
<img src="images/navbar.jpg" />
</div>
<div class="news">
<img src="images/news.png" alt="NEWSBAR" />
</div>
<div id="newsbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a tortor ut mauris rutrum volutpat. Sed nec nibh lorem. Donec lacinia condimentum nibh, vitae suscipit nisl dictum sed. Etiam bibendum, neque id fermentum pellentesque, ipsum ipsum imperdiet erat, ut dignissim neque nunc non erat. Curabitur nisi odio, blandit et varius vel, dignissim eget nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam in neque tellus. Mauris mattis est sit amet magna aliquam at convallis nisl hendrerit. Vivamus consequat nibh non dui lobortis pulvinar. Proin auctor odio eget lorem faucibus in pellentesque nulla aliquet. Morbi a magna odio, eu pharetra purus.
</div>
<div id="slider">
<img src="images/slide1.jpg" alt="Nate Austin" title="Caption 1" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="Nate Austin Again" title="Caption 2" /></a>
<img src="images/slide3.jpg" alt="Nate Austin AGAIN" title="Caption 3" />
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:1500, //Slide transition speed
pauseTime:5000,
startSlide:0, //Set starting Slide (0 index)
directionNav:false, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.6, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
</div>
</div>
</body>
</html>
CSS
/*RockSoupRecords.com CSS Stylesheet
© KossaeProductions
*/
body { margin: 0;
background-image: url("tile.jpg");
background-repeat: repeat;
background-color: red;
}
#bgtex { background-image: url("images/bgtex.jpg");
margin-top: 10%;
margin-left: auto;
margin-right: auto;
height: 655px;
width: 916px;
}
#navbar { width: 100%;
height: 90px;
}
#newsbox { clear: both;
width: 398px;
margin-left: 1px;
height: 404px;
float: left;
background-color: red;
}
#slider { margin-top: 0; }
.logo { position: absolute;
top: 5%;
left: 9%;
}
.news {
float: left;
margin-top: 6%;
width: 399px;
height: 70px;
overflow: hidden;
}