Layout issues!

[gazag]

Hi,

I am having problems solving some layout issues, there is probably a simple solutions but i can't find it!

the website i am working on is wwwDOTlimelightproductsDOTnet/indexDOTphp

The layout is all correct when you view it in FireFox except the category images are messed up on the home page. When you view it in IE explorer the category images are OK but the sideboxes and center content is not correct, the space around the edge has gone!

Any help is appreciated

[gazag]

Ok i have made some progress!!

but i still have the problem with the category images not lining up properly in Firefox it is fine in ie explorer!

i tried editing this code in my css

.categoryListBoxContents{
	float: left;
	}

to say

.categoryListBoxContents{
	float: right;
	}

that makes them all line up fine except it reads from right to left and thats not what i want!
It is almost like the first line has a clear image that is messing things up in firefox!

Any help is much appreciated it is making me

[Website Rob]

You have some coding errors that need to be corrected.

View the page source then copy & paste into http://validator.w3.org/ to see the problems.

Also, you should not put special characters within file names: COTTON&LACE.jpg
Use an _ underscore or - dash instead.

[gazag]

Thanks Website Rob,

I have started on the errors but am stuck on how to edit the ones where a ">" is missing what file do i change? or why have i got 20 errors for the same thing??

Sorry i am a newbie! :)

[gazag]

i have trace the problem to my slider code!

The code i have in the define_main_page.php is as below

	
	  
<?php 	  
	  define(URL1,'http://www.example.com');
	  define(URL2,'http://www.example.com');
	  define(URL3,'http://www.example.com');
	  define(URL4,'http://www.example.com');
	  define(URL5,'http://www.example.com');
	  define(URL6,'http://www.example.com');
	 
	  define(IMAGE1,'01.jpg');
	  define(IMAGE2,'02.jpg');
	  define(IMAGE3,'03.jpg');
	  define(IMAGE4,'04.jpg');
	  define(IMAGE5,'05.jpg');
	  define(IMAGE6,'06.jpg');
	 
?>
	<script type="text/javascript" src="includes/templates/MY_CUST_TEMPLATE/jscript/jscript_easySlider.js"></script>

	<script type="text/javascript">
		$(document).ready(function(){	
		    
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				numeric: true
			});
			
		});	
	</script>
  

	
		<div id="slider">
			<ul>				
				<li><a href="<?php echo URL1 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE1 ?>"  /></a></li>
				<li><a href="<?php echo URL2 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE2 ?>"  /></a></li>
				<li><a href="<?php echo URL3 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE3 ?>"  /></a></li> 
				<li><a href="<?php echo URL4 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE4 ?>"  /></a></li>
				<li><a href="<?php echo URL5 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE5 ?>"  /></a></li>
				<li><a href="<?php echo URL6 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE6 ?>"  /></a></li>			
</ul></div>

Does anyone know how to edit it to solve my issues? I keep trying things but

This is the code that is causing the problem if you delete it - the category images align properly and if you delete only half of them the offset gets less each one you delete!

			<ul>				
				<li><a href="<?php echo URL1 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE1 ?>"  /></a></li>
				<li><a href="<?php echo URL2 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE2 ?>"  /></a></li>
				<li><a href="<?php echo URL3 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE3 ?>"  /></a></li> 
				<li><a href="<?php echo URL4 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE4 ?>"  /></a></li>
				<li><a href="<?php echo URL5 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE5 ?>"  /></a></li>
				<li><a href="<?php echo URL6 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE6 ?>"  /></a></li>			
</ul></div>

[gazag]

Looking into it further it may be a css for the control numbers under the slider that is doing it!

I inserted this code above the /*warnings, errors, messages*/ in my stylesheet when i installed the slider into my front page.

/**************************slider**********************************/

/* Easy Slider */

		pre{
		display:block;
		font:12px "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;
		margin:.5em 0;
		width:630px;
		}	
			
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
			
	#container{	
		margin:0 auto;
		border:1px solid #ccc;
		position:absolute;
		text-align:center;
		width:630px;
		background:#ffffff;		
		margin-bottom:0.5em;
		}	
	#header{
		height:80px;
		line-height:80px;
		background:#5DC9E1;
		color:#ffffff;
		}				
	#content{
		position:relative;
		}			

/* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:630px;/*630*/
		height:200px;/*280*/
		overflow:hidden; 
		text-align:center;
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:31px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:630px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;
		}	
		
	/* numeric controls */	
    #control_div{
		width:200px;
		height:20px;
		position:relative;
		Left:230px;		/* this number controls the buttons left & right*/
		top:-5px		/* this number controls the buttons up and down*/
	
	}
	ol#controls{
		margin:1em 0;
		padding:0;
		height:20px;	
		
		
		
		}
	ol#controls li{
		margin:0 5px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:Right;
		height:20px;
		line-height:20px;
		border:1px solid #ccc;
		background:#fff;		
		color:#555;
		padding:0 5px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#336633;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */
	
/* // Easy Slider */

I know it has got to be something to do with the text in red but .... this is making me

[gazag]

I seem to be talking to myself but i have solved my layout problem so i will post it to help others!

I inserted

<br/>

at the end if my define_main_page.php and it dropped the category images down so the lined up ok, they were lining up with the numeric controls pushing them to the right!

If anyone wants a slider like this one i can pack it up as a mod!

[gazag]

You have some coding errors that need to be corrected.

View the page source then copy & paste into http://validator.w3.org/ to see the problems.

Also, you should not put special characters within file names: COTTON&LACE.jpg
Use an _ underscore or - dash instead.

Website Rob thanks for the help earlier it got a bunch of problems sorted can you or anyone else tell me what to edit to fix my last 19 errors on my validation???? I can't figure them out

[schoolboy]

OK... well it's good that you are working hard at repairing your site's issues...

... but there are still some points that need attention.

It would appear that you are inserting much of the slider code - particularly the JS and CSS into the <body> area of the page.

You can't (for example) have <link rel> statements inside the body tag - only in the header... or call in the javascript in the manner you are doing:

<script type="text/javascript" src="includes/templates/MY_CUST_TEMPLATE/jscript/jscript_easySlider.js"></script>


And it's not <br/> , it's <br />

Calls to JS and CSS should really be made inside the <head> tags.

(PS: There are better sliders than "Easy Slider"... also do some digging in the tutorials to see how JS is to be embedded in ZC)

[schoolboy]

<div id="indexCategoriesMainContent" class="content">	
	  
	<script type="text/javascript" src="includes/templates/Limelight_1/jscript/jscript_easySlider.js"></script>

	<script type="text/javascript">
		$(document).ready(function(){	
		    
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				numeric: true
			});
			
		});	
	</script>

This is appearing inside your BODY section, so you are probably pasting it into define_main_page.php

But this is in your header:

<script type="text/javascript" src="includes/templates/Limelight_1/jscript/jscript_ajquery.js"></script>
<script type="text/javascript" src="includes/templates/Limelight_1/jscript/jscript_easySlider.js"></script>
</head>

So the scripts seem to be in the correct location already.

Describe to us how you installed the slider...