Hi,
I want to insert various images (slideshow) as a banner, here's the code: (i think it's ok)
<?PHP
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
$dbname = 'destaques';
mysql_select_db($dbname);
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slide_fotos').cycle({
fx: 'fade',
pager: '#pager'
});
});
</script>
<style type="text/css">
* {
list-style: none;
margin: 0;
padding: 0;
}
body {
font: 12px Verdana, sans-serif;
color: #000;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#slideshow {
width: 640px;
height: 270px;
position: relative;
}
#slide_fotos p {
position: absolute;
right: 0;
top: 210px;
z-index: 3;
padding: 10px 20px;
background: url('images/over_white.png');
}
#slide_fotos {
height: 100%;
overflow: hidden;
}
#pager {
position: absolute;
z-index: 10;
top: 20px;
right: 20px;
}
#pager a {
color: #000;
width: 17px;
height: 17px;
line-height: 15px;
text-align: center;
display: inline-block;
font-size: 10px;
margin: 2px;
color: #fff;
}
#pager a.activeSlide {
color: #000;
background: url('images/over_white.png');
}
</style>
</head>
<body>
<div id="slideshow">
<ul id="slide_fotos">
<?PHP
?>
</ul><!-- /fotos -->
<p id="pager">
</p><!-- /pager -->
</div><!-- /slideshow -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7671312-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>But the banner is in the "default.css":
body {
background:#FBFAF5 repeat-x top left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
color: #666666;
margin:0 auto;
}
h1 {
}
h2, h3 {
margin-top: 0px;
}
h4, h5, h6 {
}
p, ol, ul, dl, blockquote {
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #235510;
}
/* Header */
#header {
width: 950px;
height:100px;
margin: 0px auto;
}
#header h1 {
text-align: left;
margin: 0px;
padding-top: 40px;
font-size: 32px;
color: #000000;
padding-left: 10px;
}
#header h2 {
margin: 0px;
text-align: center;
font-size: 11px;
}
#header a {
text-decoration: none;
color:#000000;
}
/*banner*/
#banner {
width: 950px;
height: 346px;
margin: 0px auto;
background:url(images/bann_menu.png) no-repeat left top;
}
/* Post */
.latest-post {
padding: 0 0 1em 0;
}
.latest-post h2 {
margin-bottom: 0.5em;
padding: 8px 10px 2px 10px;
text-transform: uppercase;
font-size: 16px;
color: #75C210;
border-bottom: 1px solid #cccccc;
}
.post {
padding: 2em 0 1em 0;
}
.post h3 {
margin-bottom: 0.5em;
font-size: 1.2em;
color: #000000;
}
.file * {
color: #5B5B5B;
}
/** Forms */
form {
margin: 0px;
padding: 0px;
}
.input1 {
width: 110px;
background-color: #2A2A2A;
border: 1px solid #363636;
color: #FFFFFF;
}
/* Content */
#content {
width: 950px;
margin: 0 auto 10px auto;
padding: 0px 0px 0px 0px;
}
#colTwo {
margin: 0px;
padding: 0px 15px 15px 15px;
background-color: #FFFFFF;
}
#colTwo p {
line-height: 25px;
}
#colTwo img{
padding-right:10px;
padding-top:10px;
}
#colTwo h3{
padding: 10px 10px 2px 10px;
text-transform: uppercase;
color: #000000;
}
/* Footer */
#footer {
width: 100%;
margin: 0px auto;
padding: 15px 0px;
height: 200px;
}
#footer a{
text-decoration:none;
color: #38831E;
}
#footer p {
margin: 0px;
text-align: center;
color: #38831E;
}
.devider{height:20px;}
.services{
padding:10px;
border:#E2F9BD 1px solid;
background-color:#FFFFFF;
margin-top:30px;
}
.button{
display:block;
width:80px;
height:25px;
background:#38831E;
color:#FFFFFF;
float:right;
margin-bottom:5px;
padding-left:15px;
}I'm not imagining an easier way to do that. Can someone help me?