HTML - Image Slider Joomla

this is probably very basic, but I'm not very familiar with html at all.
I have the code shown below (shows a weather graphic) which I have put into an article on my joomla site, unfortunately some of the text is in black and doesn't show up on my site which has a black background.
Is there some code I can add to put the graphic on a white background with a neat border around it?
Thanks

<script type="text/javascript">
var sbLoc=1; // Location ID
var sbLocFixed=1; // 0=user can change location
var sbSize='l'; // m=mini,l=large
var sbRedHigh=0; // 0=green high wind, 1=red high wind
document.write('<scr'+'ipt src="'+document.location.protocol+'//'+(
document.location.protocol.toLowerCase()=='https' ? 'secure' : 'www') + '.seabreeze.com.au/members/weather/widget.aspx?size='+sbSize+'&loc='+sbLoc+'&rev='+sbRedHigh+'&fixed='+sbLocFixed+'"></scr'+'ipt>');
</script>

can somebody tell me why this dont work. i have read this joomla document and it says that you can use style so i wanne padding im but it don't work i have read this document
http://docs.joomla.org/Jdoc_statements

<jdoc:include type="modules" name="taal" style="padding-left: 620px;" />

Hi: some help needed how can optimize this template, i would lake to optimize it for 800x600, and also i would like to expand the with of the table to make space for a second menu on the left.

Thanks in advance

Code:

BODY {
    background: url(../images/bg.jpg) repeat;
    font: 10px Verdana, sans-serif;
    color: #fefefe;
    margin: 0;
    padding: 0;
}

.pathway {
	padding-left    : 5px;
	border			: 0;
	color: #ffffff;
	font-family: Arial;
	
}

a.pathway:link, a.pathway:visited {
	color			: #ffffff;
	font-size		: 11px;
	line-height		: 18px;
	font-family: Arial;
}
a.pathway:hover {
	color			: #ffffff;
	font-family: Arial;
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 20px;
padding-left: 12px;
padding-top: 0px;
background-image: url(../images/bullet.png) ;
background-repeat: no-repeat;
background-position: 0px 3px;

}

.pagenav
{
	font-size:12px;
	font-weight:normal;
}
.componentheading
{
	height: 14px;
	margin-left:2px;
	padding-left:3px;
	border-bottom: 1px solid #336699;
	color: #336699;
	text-align: left;
	white-space: nowrap;
	font-family: Arial;
	font-size:12px;
	font-weight:bold;
}


a.toclink:link, a.toclink:visited
{
	line-height:normal;
	font-size:11px;
	font-family:arial;
	color: #000000;
	text-decoration: underline;
}

a.toclink:hover
{
	text-decoration: none;
}

table.contenttoc {
	border: 1px solid #000000;
	padding: 2px;
	margin-left: 2px;
	margin-bottom: 2px;
}


table.contenttoc th {
	background: #E1DECF;
	color: #C20A28;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
}


.button1 {
	margin-top:3px;
	margin-bottom: 3px;
	padding-left:5px;
	padding-right:5px;
	border:solid 1px #ADAA9C;
	background-color: #E1DECF;
	color: #000000;
	font-family: Arial, Helvetica, Sans Serif;
	text-align: center;
	font-size: 11px;
}
.button2 {
    background: url(../images/sg_13_45.jpg) no-repeat;
    width:28;
    height:19;
	border:0px;
	text-align: center;
}

.sectiontableheader
{
	background: #E1DECF;
	height: 20px;
	padding-right:3px;
	font-weight :bold;
}

table.contentpane td.contentdescription
{
	font-size:12px;
	line-height:18px;
}

table.contentpane td.componentheading
{
	background:#E1DECF;
	height: 20px;
	padding-left:3px;
	border: 1px solid #000000;
	color: #C20A28;
	text-align: left;
	padding-bottom:3px;
	white-space: nowrap;
	font-family: Arial;
	font-size:14px;
	font-weight:bold;
}

table.contentpane td
{
	padding-top:1px;
	padding-bottom:2px;
	font-size:12px;
}

a:link, a:visited {
	font-family:arial;
	color: #000000;
	text-decoration: underline;
}
a:hover {
	text-decoration:none;
}	

table.contentpaneopen
{
	width:100%;
}

table.contentpaneopen td
{
	line-height:18px;
	font-size:12px;
}

table.contentpaneopen td.contentheading
{
	height: 20px;
	padding-left:3px;
	color: #77C21F;
	text-align: left;
	white-space: nowrap;
	font-family: Franklin Gothic T Medium,Arial;
	font-size:14px;
	font-weight:bold;
	border-bottom:1px solid #336699;
}


a.sublevel:link, a.sublevel:visited {
	font-size: 10px;
	color: #FFFFFF;
	text-align: left;
	text-decoration: underline;
	vertical-align:middle;
	
}

a.sublevel:hover {
	text-decoration: none;

}


a.mainlevel:link, a.mainlevel:visited {
	display: block;
	vertical-align: middle;
	font-size: 11px;
	text-align: left;
	padding-left:0px;
	padding-top: 5px;
	height: 16px;
	width:130px;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	
	border-bottom-color: #FFFFFF;
	color:#FFFFFF;
}


a.mainlevel:hover {
	text-decoration: none;
	border-bottom-color: #FFFFFF;
	color: #FFFFFF;
	text-align: right;
}

table.moduletable {
	width:100%;	
	margin-bottom: 5px;
	border-spacing: 0px;
	border-collapse: collapse;
}

table.moduletable th {
	color: #336699;
	text-align: left;
	vertical-align:middle;
	padding-left: 16px;
	height: 25px;
	font-weight: bold;
	font-size: 12px;
}

table.moduletable td {
	margin-top:12px;
	padding-left:7px;
	font-size: 11px;
	margin: 10px;
	font-weight: bold;
}

td
{
	font-family:Franklin Gothic T Medium,arial;
	font-size:11px;
	color:#3C3032;
}
.mymoduletdmiddle
{
	background: url(../images/module_middle_graphic.gif) repeat-y;
	padding-left:18px;
	padding-right:10px;
}

.mymoduletdheader
{
	background: url(../images/module_top_graphic.gif) no-repeat;
	height: 13px;
}

.mymoduletdfooter
{
	background: url(../images/module_footer_graphic.gif) no-repeat;
	height: 10px;
}

.mymodulebg
{
	background: url(../images/general_module_bg.jpg) no-repeat right bottom;
	height:110px;
}

.mymainbody
{
	padding-top :3px;
	padding-left:5px;
	padding-right :23px;
}

.inputboxs {
    background: url(../images/sg_13_43.jpg) no-repeat;
	border:none;
	margin:0;
	padding-top:2px;
	width: 109px;
	height: 18px;
	font-family:Verdana;
	font-size:10px;
	color:#3C3032;
	vertical-align: top;
}
#search {
margin: 0px;
padding: 0px;
width: 109px;
height: 18px;
float: left;
vertical-align: top;
}

#search2 {
margin: 0px;
padding: 0px;
vertical-align: top;
}
.date {
    font-family:Verdana;
	font-size:10px;
	color:#cccccc;
	padding-left:4px;
 
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
	color			: #333;
	font-size		: 11px;
	font-family: Arial;
	text-decoration:none;
}
a.sgfooter:hover {
	color			: #333;
	font-family: Franklin Gothic T Medium,Arial;
	text-decoration:none;
}
.sgf {
font-size: 9px;
font-family: Franklin Gothic T Medium,Verdana,Arial,Helvetica,sans-serif;
color: #333;
text-decoration:none;
}
.sgf1 {
font-size: 10px;
font-family:Franklin Gothic T Medium, Verdana,Arial,Helvetica,sans-serif;
color: #333;
text-align:left;
}

a.sglink:link, a.sglink:visited {
	color			: #333;
	font-size		: 11px;
	font-family: Franklin Gothic T Medium,Arial;
	text-decoration:none;
}
a.sglink:hover {
	color			: #333;
	font-family: Franklin Gothic T Medium,Arial;
	text-decoration:none;
}

Hi,

I have a question about a CSS slider I am trying to incorporate into my website. Basically, each slide corresponds to an anchor (#slide1, #slide2, etc). When I click on the tab to open the slide, the entire webpage shifts downward so that the slider is positioned the very top of the browser. It's just like how certain websites like Wikipedia anchor to another part of the webpage so you don't have to scroll down, you can just click the link and it will bring the web page straight to that location.

I don't want the slider to shift when I click on the link. I want to keep it so that if you click on the slider anchor, it remains in the same location. The only action should be the new tab opening up.

To show an example, I am using a slider comparable to the one found he http://www.csslider.com. It's not the exact same, but as you can see the page shifts down when you click on a slide.

Is there any way to rectify this issue easily?

Thanks in advance

hello everyone. i was using a slider on my website. but unfortunately the alignment doesnt work well. the nos (1,2,3 and 4) appear towards to the left side and i want it on or below the image. the following is the html, css and js codes

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="" rel="stylesheet" type="text/css" media="screen" />
	<link rel="stylesheet" href="CSS/Slider2.css" type="text/css" media="screen" />
    <script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/scripts.js"></script>
    <title>Effect of sugar on the body, how and why insulin is secreated and how to control diabetics.</title>
</head>

<body>
		<div id="wrapper">


          <div id="header"><div class="wrap">
           <div id="slide-holder">
        <div id="slide-runner">
            <a href=""><img id="slide-img-1" src="Images/how to choose the right protein.jpg" class="slide" alt="" /></a>
            <a href=""><img id="slide-img-2" src="Images/Simple post workout recovery tactics.jpg" class="slide" alt="" /></a>
            <a href=""><img id="slide-img-3" src="Images/sugars, carbs and insulin.jpg" class="slide" alt="" /></a>
            <a href=""><img id="slide-img-4" src="Images/foodtypes.jpg" class="slide" alt="" /></a>
            
            <div id="slide-controls">
             <p id="slide-client" class="text"><strong> </strong><span></span></p>
             <p id="slide-desc" class="text"></p>
             <p id="slide-nav"></p>
            </div>
        </div>
        
           </div>
           <script type="text/javascript">
            if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"","desc":""},{"id":"slide-img-2","client":"","desc":""},{"id":"slide-img-3","client":"","desc":""},{"id":"slide-img-4","client":"","desc":""}];
           </script>
          </div></div><!--/header-->
          
          

</div><!Wrapper>
</body>

</html>

slider2.css CODE

Code:

* {
margin : 0;
padding : 0;
}
html {
height : 100%;
}

body { background-color:#ccc;}

#wrapper 	{width:950px; margin:0 auto; background-color:#000;}

a:link, a:visited {
color : #fff;
text-decoration : none;
}
a img {
border : 0;
}
div.wrap {
width : 950px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 950px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 683px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 299px;
background : url(images/header-bg.png) no-repeat 50% 0;
}
div#header div#slide-holder {
z-index : 40;
width : 950px;
height : 299px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 9px;
left : 9px;
width : 973px;
height : 278px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 228px;
width : 973px;
height : 46px;
display : none;
position : absolute;
background : url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(images/silde-nav.png);
}
div#nav ul li a {
background : url(images/nav.png) no-repeat;
}

script.js code

Code:

window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};

please help.

Hello, I am working on a wordpress driven site

http://www.bigbrotheraustralia.com.au/CMS/wordpress/

The front nivo slider is having some trouble loading and behaves differently with different browsers. It was working fine not too long ago and hasnt been touched. How can this be fixed?

as you can see it is semi loading and just displaying the tops of the pictures (firefox) and in IE it doesnt transition.

HELP!

Hello,

I purchased a template off template that uses jquery and I am using Dreamweaver to edit it.

As you can see --> http://thegamingtech.com/template

The center buttons don't work. Here is an image of the three buttons I am talking about: http://d.pr/8w4g

If you click on AC III button, it won't change pages even though it is linked.

Any ideas?

I want to ask about making a slider in html.
Is there a way to create photo beams run continuously, forming the slider.
Hope some help.

Okay, so the title...I didn't really know what to put. I'm having serious issues trying to find/alter a string of code on my site. It is currently in a box along the side with a show/hide button to make it retract and expand, but its default is open which is rather annoying. I really hope this is HTML and not Javascript, but I'm a complete newb when it comes to programming so I'm honestly clueless.

HERE is a link to my site, if you want to see exactly what I'm talking about. As for the code, I don't know where the specific problem is, so I'm sorry for this, but I'm going to paste most of the header.
Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".sideb").click(function(){
    $(".cbox").slideToggle("slow");
  });
});
</script>

<script type="text/javascript"> 
$(document).ready(function(){
	$('div.accordionButton').click(function() {
		if($(this).next().is(':visible')) {
			$('div.accordionContent').slideUp('slow');
		} else {
			$('div.accordionContent').slideUp('slow');	
			$(this).next().slideDown('slow');
		}
	});	
	$("div.accordioncontent").hide();
  });
</script>

<script type="text/javascript">
$(document).ready(function(){
    $("div.accordionbutton").mouseover(function(){
    	$(this).removeClass().addClass("acchover");
    }).mouseout(function(){
    	$(this).removeClass().addClass("accordionbutton");		
    });
</script>

<style type="text/css">
body {
background-position: top center; 
margin-left: 225px;
}

input, textarea, select { 
background-color: #f4f7f9; 
border: 1px solid #f4f7f9; 
font-family: verdana;   
color: #727f85;
} 

.menubg {
height: 30px;
}

.menubg a {
padding: 2px 4px 2px 4px;
text-align: center; 
font-family: helvetica;
font-weight: 100!important;
text-shadow: #c3cdd4 1px 1px 0px;
text-transform: uppercase;
letter-spacing: -1;
font-size: 15px;
text-decoration: none!important;
color: #374a6c!important;
}

.menubg a:hover {
color: #6b7fa2!important;
text-decoration: none!important;
background-color: transparent!important;
}

a:hover, a:active {
background-color: #cdd8de;
text-decoration: none;
}

.catbg {
border-bottom: 5px solid #21314d;
text-align: right;
text-shadow: #21314d 1px 1px 0px;
font-family: helvetica neue;
font-weight: 100!important;
background: url(GRADIENT URL HERE);
}

.cattext {
font-weight: 100!important;
text-transform: uppercase;
padding-right: 20px;
margin-top: 5px;
}

.titlebg {
border-top: 5px solid #21314d;
font-family: helvetica neue;
text-transform: uppercase;
padding-left: 6px;
font-weight: 100!important;
text-shadow: #21304c 1px 1px 0px;
}

.titletext {
font-weight: 100!important;
}

.titletext {
color: #404040!important;
}

.button { 
margin-left: 2px; 
margin-right: 2px;
font-size: 9px!important;
text-transform: lowercase!important;
padding-right: 4px; 
}

.sideb {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-bottom: 1px;
text-decoration: none!important;
}

a.sideb {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}

a.sideb:hover, a.sideb:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
padding: 2 2 2 5;
}

div.accordionButton {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}

a.accordionButton {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}

a.accordionButton:hover, a.accordionButton:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
}

a.side:link, a.side:visited {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3;
font-size: 11px;
margin-bottom: 1px;
text-decoration: none!important;
}

a.side:hover, a.side:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
padding: 2 2 2 5;
}

h3.aegis {
display: block;
width: 98%;
font-family: helvetica neue;
font-weight: 100!important;
font-size: 18px;
letter-spacing: 0px;
text-transform: uppercase;
text-shadow: #34466a 1px 1px 0px;
color: #bcc3cd;
text-align: left;
background-color: #18253f;
margin: 20px 0px 0px -6px;
padding: 5px;
opacity: 0.8;
-moz-opacity: 0.8;
}

h4.aegism {
display: block;
width: 98%;
font-family: helvetica neue;
font-weight: 100!important;
font-size: 18px;
letter-spacing: 0px;
text-transform: uppercase;
text-shadow: #34466a 1px 1px 0px;
color: #bcc3cd;
text-align: left;
background-color: #18253f;
margin: 0px 0px 0px -6px;
padding: 5px;
opacity: 0.8;
-moz-opacity: 0.8;
}

.content {
background: url("SIDEBAR BG MAIN URL HERE (LIGHT BLUE)");
text-align: justify;
padding: 4 6 4 6;
font-size: 10px;
color: #57636a;
margin-top: 0px;
}

p.update {
background-color: #dddddd;
border-bottom: 3px solid #ababab;
text-align: justify;
padding: 4 6 4 6;
font-size: 10px;
margin-top: 0px;
}

p.roma {
background-color: #eff3f5;
width: 80%;
text-align: justify;
padding: 8px;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.8; 
opacity: 0.8; 
margin-top: 10px;
margin-bottom: 0px;
}

p.maintext2 {
background-color: #c6cfd4;
text-align: center;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.6; 
opacity:0.6; 
margin-top: 0px;
}

.transimage {
float: left; 
margin-right: 4px;
border: 3px solid #4a5a71;
width: 80px;
height: 80px;
-moz-opacity: 0.8; 
opacity:0.8; 
}

#sidetables {
margin-left: 13px;
width: 230px;
border-left: 5px solid #18253f;
border-right: 5px solid #18253f;
border-bottom: 5px solid #18253f;
}

p.slide
{
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-bottom: 2px;
margin-top: 2px;
text-decoration: none!important;
}

div.accordioncontent {
display: none;
}

.acc {
background-color: #eff3f5;
width: 80%;
text-align: justify;
padding: 8px;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.8; 
opacity: 0.8; 
margin-top: 2px;
margin-bottom: 0px;
}

div.cbox {
background-color: #eff3f5;
padding: 8px;
-moz-opacity: 0.8; 
opacity: 0.8; 
margin-top: 2px;
margin-bottom: 0px;
}

.bordercolor {
padding: 5;
}
</style>

<script type="text/javascript">
<!--
/* fix text menus by ross */

var startChar = ''; //Start character
var dividerChar = ''; //Dividing Character(s);
var endChar = ''; //End character

//no need to edit below
var menu = document.getElementsByTagName('td').item(5).firstChild;
var a = menu.innerHTML.replace(/^\n?(<.+?>)\[/, startChar+' $1');
var b = a.replace(new RegExp('\\](<\/a>)(\\n|\\s|&nb'+'sp;)*$', 'i'), '$1 '+endChar);
var c = b.replace(new RegExp('\\](<\/a>)(&nb'+'sp;|\\s)(<a.+?>)\\[', 'gi'),'$1 '+dividerChar+' $3');
menu.innerHTML = c;
//-->
</script>

<!-- =====
START Smangii's {LEFT} Side Tables *REVISED*
Global Header
===== -->

<table align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td vAlign="top">

<div style="position: fixed; left: 0px; top: 0px; width: 258px; height: 845px; background: url(SIDEBAR BG URL (DARK BLUE) HERE); color: #202e4c; border-right: 4px solid #78839b;">

<!-- ===== SIDEBAR ===== -->
<table id="sidetables" cellpadding="0px" cellspacing="0">
<tr style="margin-top: 200px"><td class="iro" align="center"><div class="content"><br>
<h3 class="aegis">cbox</h3>
<center><br><a href="javascript:void(0);" class="sideb">click to hide/show</a>
<div class="cbox">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: left; line-height: 0">
<div><iframe frameborder="0" width="200" height="245" src="http://www3.cbox.ws/box/?boxid=3366059&boxtag=rkhyky&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3366059" style="border: 0px solid;" id="cboxmain3-3366059"></iframe></div>
<Cbox here>
</div>
<!-- END CBOX -->
</div></center>

I really hope someone could help me with this ^^; please and thank you very much.

Hello,

Is there a way to hover text over a Jquery slider?

Here is what I am working with.

http://chocotemplates.com/portfolio/portfolio-2/

Would anyone mind sharing a hint as to how i might go about making this dymanic?
i thought i could just use "elementid" but i didn't have much luck...

or just a different script all together, just something simple and light to slide a div from point "a" to point "b" with

thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
x=50
y=0
distanceX = 0
distanceY = 0
 
 
function slideDown() {
if (document.getElementById)
		{document.getElementById("mydiv").style.top = x + "px";}
 
	if (distanceX > 50) 
		{clearTimeout('slideDown()'),x=parseInt(x),distanceX=parseInt(distanceX);}
	else {x=parseInt(x) + 1,distanceX=parseInt(distanceX) + 1,timer1=setTimeout('slideDown()', 15);} 
 
} 
</script>
</head>

<body>
<div id="mydiv" style="position:absolute; width:50px; height:50px; top:50px; background-color:#F00;"></div>
<a href="#" onclick="slideDown('mydiv');">Down</a>
</body>
</html>

hi there,

I am using this technique: http://www.smoothdivscroll.com/

im in a fairly complicated situation, if you take a look at my site here

you will see a set of 4 images aligned neatly... well, they need to scroll to the left, slowly.. we just need to get the scrolling to work. Later on I can customize the options myself. I think the scrolling is failing to start because a lot of scripts are already loaded.. maybe there is a conflict somewhere?

I dont know where to look to be honest.. could someone point me in the right direction?



Thanks a bunch

Hello!

I am new here, I know CSS and HTML basics and would like to ask you how to put a vertical slider inside a table cell.

Thank you!