PF2G 0 Junior Poster in Training

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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.