Sun, 2012-12-09 23:39
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&h=190&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&h=190&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&h=190&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 |