Formating for a slideshow

No replies
Sun, 2012-12-09 23:39
samuvk
Offline
newbie
Last seen: 9 years 20 weeks ago
Timezone: GMT-6
Joined: 2012-12-09
Posts: 7
Points: 11
Hi All,
I'm totally new at this and I do not know anything about CSS.
I have seen a slideshow that I would love to use in my blog and I have the HTML code do to the slideshow, however I do not have the CSS to assign the appropriated format.
The image attached is how I would like the slideshow to look like:
Can please anyone help me out?
Thanks so much
My HTML code
<head profile="http://gmpg.org/xfn/11">
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 
<!-- WP Head -->
<link rel='stylesheet' id='commentluv_style-css'  href='http://www.25travels.com/wp-content/plugins/commentluv/css/commentluv.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='socialize-css'  href='http://www.25travels.com/wp-content/plugins/socialize/frontend/css/socialize.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp_greet_box_style-css'  href='http://www.25travels.com/wp-content/plugins/wp-greet-box/css/style.css?ver=3.4.2' type='text/css' media='all' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://www.25travels.com/wp-content/themes/ribbons/js/sliding_effect.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://www.25travels.com/wp-content/themes/ribbons/js/superfish.js?ver=3.4.2'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var cl_settings = {"name":"author","url":"url","comment":"comment","email":"email","infopanel":"on","default_on":"on","default_on_admin":"on","cl_version":"2.92.2","images":"http:\/\/www.25travels.com\/wp-content\/plugins\/commentluv\/images\/","api_url":"http:\/\/www.25travels.com\/wp-admin\/admin-ajax.php","_fetch":"f7fba9887f","_info":"4a7ea312b8","infoback":"white","infotext":"black","template_insert":"","logged_in":"","refer":"http:\/\/www.25travels.com\/2012\/08\/the-2012-olympics-in-manchester\/","no_url_message":"Please enter a URL and then click the CommentLuv checkbox if you want to add your last blog post","no_http_message":"Please use http:\/\/ in front of your url","no_url_logged_in_message":"You need to visit your profile in the dashboard and update your details with your site URL","no_info_message":"No info was available or an error occured"};
/* ]]> */
</script>
 
 
<!-- Featured Slider -->
<script src="http://www.25travels.com/wp-content/themes/ribbons/js/jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#slides').cycle({
				timeout: 5000,
				fx: 'fade',
				speed: 800,
				speedIn: 700,
				next:   '#next', 
	    		prev:   '#prev'
			});
		});
</script>
 
 
 
<style>
#nav ul {padding: 0; margin:;0; list-style-type:none;}
#nav li {display: inline;}
#nav li a {font-family: Arial;font-size:15px;text-decoration: none;float:left;padding: 15px;background-color: #333;color: #fff; border-bottom:2px solid #000;}
#nav li a:hover {background-color: #9B1C26; padding-bottom:12px; border-bottom:2px solid #000; margin:-1px;}
</style>
 
 
<style>
#nav2 ul {padding: 0; margin:;0; list-style-type:none;}
#nav2 li {display: inline;}
#nav2 li a {font-family: Arial;font-size:15px;text-decoration: none;float:left;padding: 10px;background-color: #FBB117;color: #fff; border-bottom:2px solid #000;}
#nav2 li a:hover {background-color: #9B1C26; padding-bottom:12px; border-bottom:2px solid #000; margin:-1px;}
</style>
 
</head>
 
 
 
<body bgcolor="white">
 
<center>
<table bgcolor=white>
<tr>
<td bgcolor=white>
<img src="https://lh4.googleusercontent.com/-Lf91OJzehtk/ULpd3P6tEZI/AAAAAAAAB_8/fXBFworhj0g/s516/Logo%2520500%2520Wonders-2.png" height=40 width=250>
</td>
<td>
<ul id="nav" style="clear:both;">
<li><a href="#">Home</a></li>
<li><a href="#">Places</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</td>
<td>
<img src="https://lh6.googleusercontent.com/-TVVXgEf-NEw/ULpIJrV50uI/AAAAAAAAB_I/eciCwNvhIwo/s400/bandera%2520espania.jpg" height=15 width=20>
<img src="https://lh6.googleusercontent.com/-R2pHG7auPl0/ULpIJxMk2GI/AAAAAAAAB_M/M2IEVnN5q0E/s594/bandera-brasil-3.jpg" height=15 width=20>
<img src="https://lh6.googleusercontent.com/-9VmSKizTV6Q/ULpIJ0m4MVI/AAAAAAAAB_Q/uENJuVXmGOo/s450/Bandera_de_Alemania.png" height=15 width=20>
<img src="https://lh6.googleusercontent.com/--NyQkbJZIBc/ULpIKXjmapI/AAAAAAAAB_Y/unlsJVdwmkI/s466/bandera_usa.gif" height=15 width=20>
<img src="https://lh4.googleusercontent.com/-gUfmrPcTUtc/ULpIKWCoCmI/AAAAAAAAB_U/416bt3aLrBs/s434/francia_bandera.gif" height=15 width=20>
 
</td>
 
</table>
 
 
</center>
 
 
 
 
	<div id="header">
 
 
                <div id="header-ad">
                            </div><!-- /header-banner -->
<div class="clear"></div>
<!-- /nav-social -->
     </div><!-- /header -->
 
 
 
 
	<div id="slider">
		<div id="slides">
	    					<div class="slide">
						<div class="slide-content">			
						<h2>This will be the First Post</h2>	
							<p>Aqui va el testo;</p>
<a class="slider-read-more" href="http://www.25travels.com/2012/08/the-2012-olympics-in-manchester/" title="First Post">Read More</a>
						</div><!-- /slide-content -->
							<div class="slide-image">
							<a href="http://www.25travels.com/2012/08/the-2012-olympics-in-manchester/" title="First Post"><img src="http://lh4.ggpht.com/_sIFcB4A_jT4/SniZNpxZOjI/AAAAAAAABVs/tB86CRnt3ZA/s512/3.jpg&amp;h=190&amp;w=315" height="190" width="315" alt="The 2012 Olympics in Manchester?!" title="The 2012 Olympics in Manchester?!" /></a>
							</div><!-- /slide-image -->  
						</div><!-- /slide -->
								<div class="slide">
						<div class="slide-content">			
						<h2>Seond Post</h2>	
							<p>Testo Second Post;</p>
<a class="slider-read-more" href="http://www.25travels.com/2012/04/crazy-nights-in-the-ruin-bars-of-budapest/" title="Crazy Nights in the Ruin Bars of Budapest">Read More</a>
						</div><!-- /slide-content -->
							<div class="slide-image">
							<a href="http://www.25travels.com/2012/04/crazy-nights-in-the-ruin-bars-of-budapest/" title="Crazy Nights in the Ruin Bars of Budapest"><img src="http://lh5.ggpht.com/_Eg1ks9CXra8/SHOdVTsctZI/AAAAAAAAEtU/I7GKbE71934/s512/espa%C3%B1a%20174.jpg&amp;h=190&amp;w=315" height="190" width="315" alt="Crazy Nights in the Ruin Bars of Budapest" title="Crazy Nights in the Ruin Bars of Budapest" /></a>
							</div><!-- /slide-image -->  
						</div><!-- /slide -->
								<div class="slide">
						<div class="slide-content">			
						<h2>Tercer Post Title</h2>	
							<p>Tercer Testo;</p>
 
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a><a class="slider-read-more" href="http://www.25travels.com/2012/03/travel-blogger-feature-will-of-my-spanish-adventure/" title="Travel Blogger Feature: Will of My Spanish Adventure">Read More</a>
						</div><!-- /slide-content -->
							<div class="slide-image">
							<a href="http://www.25travels.com/2012/03/travel-blogger-feature-will-of-my-spanish-adventure/" title="Travel Blogger Feature: Will of My Spanish Adventure"><img src="http://lh3.ggpht.com/_sIFcB4A_jT4/SnnMENU1SMI/AAAAAAAABaE/89b9uofl_Ak/s512/IMG_3159.jpg&amp;h=190&amp;w=315" height="190" width="315" alt="Travel Blogger Feature: Will of My Spanish Adventure" title="Travel Blogger Feature: Will of My Spanish Adventure" /></a>
							</div><!-- /slide-image -->  
						</div><!-- /slide -->
							</div><!-- /slides --> 
         <div id="slider-nav">
			<a id="prev" href="#">Previous</a> ~ <a id="next" href="#">Next</a>
        </div>
		</div><!-- /slider -->
 
 
 
 
 
 
 
<center>
<table>
<tr>
<td>
<ul id="nav2" style="clear:both;">
<li><a href="#">Home</a></li>
<li><a href="#">Places</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</td>
</tr>
</table>
 
</center>
 
</body>
</html>
Attachment	Size
Continent.png	164.77 KB
Tags:
Beginners CSS Questions
Formating for a slideshow

User login

Navigation
