Slider help

keith021773 · February 15, 2011, 01:16:19 PM

I don't know if I can ask this here or not. But I'm a huge fan of SP so maybe. LOL

I have a content slider that I have on my main page. I really want to center it in the block but I am having no luck with it. Any ideas? Here is a pic of what I'm talking about.

AngelinaBelle · February 15, 2011, 06:47:10 PM

Please give a link, so we can see the HTML and CSS.

keith021773 · February 15, 2011, 09:55:01 PM

Thanks Angelina for the reply. I will copy and paste both the block code and the .css file.

Block code...

Code Select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="/slider/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
	});
</script>
</head>
<body>


		<h3></h3>
		<div id="featured" >
		  <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/slider/images/gallery-small.jpg" alt="" /><span>Share your pictures in our gallery!</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/slider/images/rules-small.jpg" alt="" /><span>DP Constitution.  Dads only, No spammers. You get the idea.</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="slider/images/stay-at-home-dad-handbook-small.jpg" alt="" /><span>Stay At Home Dad Handbook</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="slider/images/aat-small.jpg" alt="" /><span>AAT is back!  Get your game on!</span></a></li>
	      </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
			<img src="slider/images/gallery.jpg" alt="" />
			 <div class="info" >
				<h2><a href="http://www.daddyplace.com/gallery/" >>Upload and share your pictures in our photogallery.</a></h2>
				<p><a href="http://www.daddyplace.com/gallery/" >View Gallery</a></p>
			 </div>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="slider/images/rules.jpg" alt="" />
			 <div class="info" >
				<h2><a href="http://www.daddyplace.com/suggestions-and-announcements/the-daddyplace-constitution-please-read/">Rules to keep the community strong</a></h2>
				<p><a href="http://www.daddyplace.com/suggestions-and-announcements/the-daddyplace-constitution-please-read/" >read more</a></p>
			 </div>
	    </div>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="slider/images/stay-at-home-dad-handbook.jpeg" alt="" />
			 <div class="info" >
				<h2><a href="http://www.daddyplace.com/stay-at-home-dad-discussions-board-(sahd)/the-stay-at-home-dad-'handbook'-is-a-must-must-read/" >Stay At Home Dad Handbook</a></h2>
				<p>The Stay-At-Home-Dad Handbook is a must have for SAHD's...<a href="http://www.daddyplace.com/stay-at-home-dad-discussions-board-(sahd)/the-stay-at-home-dad-'handbook'-is-a-must-must-read/" >read more</a></p>
	         </div>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="slider/images/aat.jpg" alt="" />
			 <div class="info" >
				<h2><a href="http://www.daddyplace.com/suggestions-and-announcements/alien-assault-traders-is-back!!/" >AAT is back!</a></h2>
				<p>AAT is back!  Get your game on!....<a href="http://www.daddyplace.com/suggestions-and-announcements/alien-assault-traders-is-back!!/" >read more</a></p>
	         </div>
	    </div>

		</div>
	</div>

</body>
</html>

And here is the .css file.

AngelinaBelle · February 16, 2011, 12:25:40 PM

In a HTML block, you should only paste stuff that can go inside a body tag.
That is because the block already shows up on an HTML page.
The page already has doctype, <html>, <head>, and <body> tags, and these tags are not allowed inside <body> tags.

You can put <script> tags inside your html block, if you need them.

Once you make that change, if you need help, please post a LINK to the page so we can see the HTML and CSS in action.

Thanks

keith021773 · February 16, 2011, 08:59:27 PM

Thanks Angelina. That worked like a charm. I appreciate your help!

AngelinaBelle · February 17, 2011, 07:03:02 AM

Glad you figured it out. There is a lot to learn about HTML and CSS. http://w3schools.com almost always comes up at the top of the searches, and they have some pretty easy-to-understand tutorials.

swoodie · August 22, 2011, 10:01:37 PM

Quote from: keith021773 on February 15, 2011, 01:16:19 PM
I don't know if I can ask this here or not. But I'm a huge fan of SP so maybe. LOL

I have a content slider that I have on my main page. I really want to center it in the block but I am having no luck with it. Any ideas? Here is a pic of what I'm talking about.

Hi Keith where was this downloaded from would like to put one of them on my site

Simple Portal Archived Forum

User Info

Who's Online

Team Blog

Recent Posts

Slider help

keith021773

AngelinaBelle

keith021773

AngelinaBelle

keith021773

AngelinaBelle

swoodie