Alignment issues with CSS/jquery

Hi all,

My name is Kian Ang. I am predominantly a graphics designer but occasionally I handle web projects. I am currently working on a website and I am facing problems with the contents alignment on it. I am thinking that the alignment problem may be due to CSS. I do not have a sound knowledge of CSS and I am pretty clueless to what made the misalignment ><! There is supposed to be an individual image slider for the three sections that would be on the website (namely logo design, multimedia design and print design). The CSS alignments work perfect on the image gallery at ‘logo design’. But it goes misaligned on the other two galleries.

The url of the website is at http://pirrcreatives.com/home.php.

Hope that experts here can lend me a hand on this. Thank you in advance!

Hi,

If you change <div id=“slides-two”> and <div id=“slides-three”> into <div id=“slides”>, this solves your positioning problem.
However, an id should be unique to a particular page, i.e. you shouldn’t have three <div> tags with the same id on the same page, so you might want to think about making those into classes.

HTH

I have changed <div id=“slides”> to <div class=“slides”> at line 181. The resultant is at http://pirrcreatives.com/home2.php. I think the image slider script fails when its changed to a class. Would appreciate advise from people. Thanks guys.

You did change your CSS, right?
i.e.
#slides{ … }
into
.slides{ … }

Just checking.

I did not change my CSS in my earlier post. I have now changed all ‘#slides{…}’ into ‘.slides{…}’. The resultant is at http://pirrcreatives.com/home.php. It still fails. Sorry for my inadequacy.

Thats the correct link http://pirrcreatives.com/home2.php

Ok then,
Before we go any further, can you just confirm that changing <div id=“slides-two”> and <div id=“slides-three”> into <div id=“slides”> did in fact solve the positioning issue for you.
We should establish this before trying to debug any further.

I’m new to this thread, but the site seems to be working fine to me. If there are still some issues, perhaps restate them now.

http://pirrcreatives.com/home2.php is the link where I changed <div id=“slides_two”> and <div id=“slides_three”> into <div id=“slides”>. The positioning of the previous and next buttons, as well as the image frame background seems to be in correct position. However, the latter two image slider malfunctions (the images does not appear, the bullets at the bottom of the image gallery are missing) because I believe they were assigned the same ‘id’.

http://pirrcreatives.com/home3.php is the original state of the website where i made this post. At the beginning of this thread, in order for multiple galleries to work, I simply duplicated and appended the original script, to add in two more functions, both for “slides_two” and “slides_three”. They appended codes are from line 43 to 102. The latter two image sliders work perfect. But the previous and next buttons as well as the bullets all run off in position.

Thank you guys for your advice and support!

In http://pirrcreatives.com/home3.php, the panning images are misaligned too.

This is quite hard to debug remotely.
I just sent you a PM asking for more info.

Hi,

You added slides_two and three but you didn’t change the css to accommodate them. Change id=container to a class if you want to re-use it and then target the prev and next via that class.

e.g.


/*#slides .next,#slides .prev,*/
.container .next, .container .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}
/*#slides .next */
.container .next { left:585px; }
/*


You could combine the js into one routine like this:


	<script type="text#javascript">
		$(function(){
			[B]$('#slides,#slides_two,#slides_three').slides({[/B]
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>


You can’t wrap p tags around divs so remove them. The empty headerspacer div is also a waste of space. Just add margins to exisiting elements to move them down.

Here’s a full working example with the code in the head although I haven’t addressed all the errors.


<!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">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>pirr creatives</title>
	<link href="css/pirr_creatives_style.css" rel="stylesheet" type="text/css" media="screen"/>
	<link rel="stylesheet" href="css/global3.css" />
	<style type="text/css">
body {
	background:#fff;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	width:600%;
}
img.pirrlogo {
	float:left;
	margin:45px 25px 0px 65px;
}
.section {
	margin:0px;
	bottom:0px;
	width:16%;
	float:left;
}
.content {
	clear:both;
	float:none;
	margin:0px 0px 0px 270px;
	width:600px;
}
.section ul {
	float:left;
	list-style:none;
	margin:90px 0 0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px;
	font-style:normal;
	font-weight:normal;
	color: #504143;
}
.section p {
	clear:both;
	margin:0px 0px 0px 0px;
	width:670px;
}
.navi ul li {
	float:left;
	padding:5px 9px 0px 0px;
	margin:5px 9px 0px 0px;
	color:#504143;
}
.navi ul li a {
	display:block;
	color:#CCC;
}
.navi ul li a:hover {
	text-decoration:none;
	color:#504143;
}
/* 
	Resets defualt browser settings
	reset.css
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
:focus { outline:0; }
a:active { outline:none; }
body {
	line-height:1;
	color:black;
	background:white;
}
ol, ul { list-style:none; }
table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	text-align:left;
	font-weight:normal;
}
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }
/*
	Page style
*/
body {
	font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
	letter-spacing:0;
	color:#434343;
	background:#efefef url(http://pirrcreatives.com/img/background.png) repeat top center;
	padding:20px 0;
	position:relative;
	text-shadow:0 1px 0 rgba(255,255,255,.8);
	-webkit-font-smoothing: subpixel-antialiased;
}
.container {
	width:580px;
	padding:10px;
	position:relative;
	margin:140px 0 0 280px;
	z-index:0;
}
#example {
	width:600px;
	height:350px;
	position:relative;
}
.frame {
	position:absolute;
	z-index:0;
	width:739px;
	height:341px;
	top:-3px;
	left:-80px;
}
/*
	Slideshow
*/

#slides, #slides_two, #slides_three {
	position:absolute;
	top:15px;
	left:4px;
	z-index:100;
}
/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:570px;
	overflow:hidden;
	position:relative;
	display:none;
}
/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
	width:570px;
	height:270px;
	display:block;
}
/*
	Next/prev buttons
*/

/*#slides .next,#slides .prev,*/
.container .next, .container .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}
/*#slides .next */
.container .next { left:585px; }
/*
	Pagination
*/

.pagination {
	margin:0px auto 0;
	width:570px;
}
.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}
.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(http://pirrcreatives.com/img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}
.pagination li.current a { background-position:0 -12px; }
/*
	Caption
*/

.caption {
	z-index:500;
	position:absolute;
	bottom:-35px;
	left:0;
	height:30px;
	padding:5px 20px 0 20px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:540px;
	font-size:1.3em;
	line-height:1.33;
	color:#fff;
	border-top:1px solid #000;
	text-shadow:none;
}
</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="http://pirrcreatives.com/js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides,#slides_two,#slides_three').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
	</head>
	<style>
a {
	color:#CCC;
	text-decoration:none;
}
a:hover { text-decoration:underline; }
span.footer {
	position:fixed;
	left:270px;
	bottom:20px;
	font-size:10px;
	color: #CCC;
	line-height: 15px;
}
span.footer a { padding-right:20px; }
span.footer a:hover {
	color:#504143;
	text-decoration:none;
}
</style>

	<body>
<div> <span class="footer"> pirr creatives. Copyright © 2012-2012 pirr creatives. All Rights Reserved. </span> </div>

<!-- Home page starts here -->
<div class="section navi" id="homepage"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
			<ul class="nav">
				<li>&#8226;</li>
				<li><a href="#logo">logo design</a></li>
				<li><a href="#multimedia">multimedia design</a></li>
				<li><a href="#print">print design</a></li>
				<li><a href="#contact">contact us</a></li>
				<li><a href="#blog">blog</a></li>
		</ul>
			<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat feugiat justo vel rhoncus. Vestibulum lacus neque, viverra placerat sagittis placerat, mollis vel nibh. Vivamus euismod sollicitudin nunc, sit amet pretium est pharetra vel. Morbi ultricies facilisis congue. Etiam tempor libero laoreet dui placerat sagittis ac vitae erat. Fusce tempus mattis malesuada. Sed metus augue, varius vel molestie sed, blandit eget lacus.
				
				Phasellus ac nunc augue, sit amet fermentum neque. Proin tempor arcu in lectus adipiscing luctus eget vitae sem. Fusce nec urna adipiscing massa commodo accumsan et sit amet diam. Etiam faucibus lacus eu sem iaculis nec viverra felis semper. Nulla facilisi. Etiam et odio eu lectus sagittis ullamcorper. Pellentesque dapibus pellentesque convallis. Vivamus libero nunc, tincidunt ut aliquet at, ultrices sit amet ante.
				
				Morbi eros mi, vehicula id tempor a, egestas vitae justo. Vivamus rhoncus aliquet ultricies. Ut libero quam, iaculis quis convallis eu, condimentum eu ligula. In hac habitasse platea dictumst. Etiam est lorem, malesuada nec interdum id, condimentum eu enim. Nullam eget sem elit, vitae dignissim ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ut tristique libero. Etiam vitae odio sem.
				
				Aliquam erat volutpat. Nulla in diam sed arcu venenatis vulputate. Nam tincidunt mattis interdum. Donec libero nibh, bibendum sit amet tempus id, eleifend ut orci. Etiam at lacus in libero molestie tempor. Nulla bibendum luctus tortor nec volutpat. Aenean feugiat porta nulla, nec tristique massa sollicitudin nec. Nulla euismod odio id orci commodo posuere. Morbi tristique enim sed urna dignissim at vehicula ante cursus. Curabitur libero lacus, sodales et accumsan non, suscipit feugiat lacus. Pellentesque id tortor nulla.
				
				Cras quis ante tristique sapien imperdiet pulvinar eget sit amet magna. Nullam commodo semper nunc, in sagittis turpis rutrum vel. Mauris venenatis rutrum gravida. Mauris viverra congue lorem a semper. Integer porta orci et arcu egestas fringilla. Suspendisse venenatis erat eget nibh luctus quis pulvinar dolor bibendum. Aliquam in dolor vel ligula mollis convallis ac vel tortor. Duis ut leo hendrerit dolor molestie imperdiet. Quisque sapien purus, fringilla iaculis scelerisque eget, feugiat vitae augue. Integer porta libero in neque dictum ornare. Suspendisse a eros libero. Mauris leo neque, accumsan in congue eu, consectetur eu neque. </div>
	</div>

<!-- Logo Design page starts here -->
<div class="section navi" id="logo"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
			<ul class="nav">
				<li><a href="#homepage">&#8226;</a></li>
				<li>logo design</li>
				<li><a href="#multimedia">multimedia design</a></li>
				<li><a href="#print">print design</a></li>
				<li><a href="#contact">contact us</a></li>
				<li><a href="#blog">blog</a></li>
		</ul>
			<div class="container">
				<div id="logo_slides">
							<div id="slides">
								<div class="slides_container">
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-01.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Double happiness. Spot the names of the wedded couple!</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-02.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Extreme skateboarding, boar style.</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-03.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Chinese Seal</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-04.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Exposure</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-05.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>A wise man or a fool?</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-06.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Greenosaur = G + Dinosaur</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-07.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Irongate</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-08.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Johnson Horn</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-09.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>King's Landscapers</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-10.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Kolibrie, humming bird in dutch. Logo for internal improvement project, focused to increase profitability and margin.</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-11.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>The run-away shoe-skin!</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-12.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Northwest Intervention Services</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-13.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>One church. One day.</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-14.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>We write, and provide public relations services to the real estate industry</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-15.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Rabbit Snowboard</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-16.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Snack Box</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-17.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>TennisPAL</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-18.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Vertykl</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-19.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>I am a bicycle mechanic.</p>
													</div>
										</div>
									</div>
								<a href="#" class="prev"><img src="http://pirrcreatives.com/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://pirrcreatives.com/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div>
							<img src="http://pirrcreatives.com/img/example-frame.png" width="739" height="341" alt="Example Frame" class="frame"> </div>
		</div>
	</div>

<!-- Multimedia Design page starts here -->
<div class="section navi" id="multimedia"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
			<ul class="nav">
				<li><a href="#homepage">&#8226;</a></li>
				<li><a href="#logo">logo design</a></li>
				<li>multimedia design</li>
				<li><a href="#print">print design</a></li>
				<li><a href="#contact">contact us</a></li>
				<li><a href="#blog">blog</a></li>
		</ul>
			<div class="container">
				<div id="multimedia_slides">
							<div id="slides_two">
								<div class="slides_container">
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-01.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Double happiness. Spot the names of the wedded couple!</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-02.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Extreme skateboarding, boar style.</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-03.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Chinese Seal</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-04.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Exposure</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-05.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>A wise man or a fool?</p>
													</div>
										</div>
									</div>
								<a href="#" class="prev"><img src="http://pirrcreatives.com/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://pirrcreatives.com/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div>
							<img src="http://pirrcreatives.com/img/example-frame.png" width="739" height="341" alt="Example Frame" class="frame"> </div>
		</div>
	</div>

<!-- Print Design page starts here -->
<div class="section navi" id="print"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
			<ul class="nav">
				<li><a href="#homepage">&#8226;</a></li>
				<li><a href="#logo">logo design</a></li>
				<li><a href="#multimedia">multimedia design</a></li>
				<li>print design</li>
				<li><a href="#contact">contact us</a></li>
				<li><a href="#blog">blog</a></li>
		</ul>
			<div class="container">
				<div id="multimedia_slides2">
							<div id="slides_three">
								<div class="slides_container">
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-01.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Double happiness. Spot the names of the wedded couple!</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-02.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Extreme skateboarding, boar style.</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-03.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Chinese Seal</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-04.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>Exposure</p>
													</div>
										</div>
											<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-05.jpg" width="570" height="270" alt="Slide 1" />
												<div class="caption" style="bottom:0">
															<p>A wise man or a fool?</p>
													</div>
										</div>
									</div>
								<a href="#" class="prev"><img src="http://pirrcreatives.com/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://pirrcreatives.com/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div>
							<img src="http://pirrcreatives.com/img/example-frame.png" width="739" height="341" alt="Example Frame" class="frame"> </div>
		</div>
	</div>

<!-- Contact Us page starts here -->
<div class="section navi" id="contact"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
			<ul class="nav">
				<li><a href="#homepage">&#8226;</a></li>
				<li><a href="#logo">logo design</a></li>
				<li><a href="#multimedia">multimedia design</a></li>
				<li><a href="#print">print design</a></li>
				<li>contact us</li>
				<li><a href="#blog">blog</a></li>
		</ul>
			<div class="content"> Under construction </div>
	</div>

<!-- Blog page starts here -->
<div class="section navi" id="blog"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
			<ul class="nav">
				<li><a href="#homepage">&#8226;</a></li>
				<li><a href="#logo">logo design</a></li>
				<li><a href="#multimedia">multimedia design</a></li>
				<li><a href="#print">print design</a></li>
				<li><a href="#contact">contact us</a></li>
				<li>blog</li>
		</ul>
			<div class="content"> Under construction </div>
	</div>

<!-- The JavaScript --> 
<script type="text/javascript" src="http://pirrcreatives.com/js/jquery.easing.1.3.js"></script> 
<script type="text/javascript">
		$(function() {
			$('ul.nav a').bind('click',function(event){
				var $anchor = $(this);
				/*
				if you want to use one of the easing effects:
				$('html, body').stop().animate({
					scrollLeft: $($anchor.attr('href')).offset().left
				}, 1500,'easeInOutExpo');
				*/
				$('html, body').stop().animate({
					scrollLeft: $($anchor.attr('href')).offset().left
				}, 1000);
				event.preventDefault();
			});
		});
	</script>
</body>
</html>

Thank you Paul. Your codes solved the bulk of my alignment issues. The empty headerspacer div was a quick fix to help me push down the navigation menu. If i were to use the margin on the ui li classes, it will affect the bullets below the image gallery too. Apparently it uses ui li tags too. It may be an ‘unorthodox’ method, but its a simple solution for me. The working version is at http://pirrcreatives.com/home4.php

Thank you Pullo, for following the alignment issues that I had.

You guys have been real helpful. I always have problems understanding the syntax of a CSS. Haha, it just confuses me quite a bit. Do you guys have any good websites to recommend that can teach people to have a basic understanding of CSS and to sufficiently build a website out of it? Lastly, do I need to close this thread? I’m new to this forum. And how do I close this thread if its needed?

The only thing that is not solved is about the scripting. The image slider works perfectly when newly loaded. But once the images are mouseovered, or when any previous/next button are pressed, the animation goes haywired. Do I open a new thread to seek help, since its a non-CSS issue?

Hi,

Sounds like a script issue but if you give some more information about what goes “haywire” exactly then I can move the thread to the javascript forum for you. Are you talking about the slider? The only thing I notice was the caption popping on and off.

Yes, “haywire” meaning the caption of the slider pops on and off once the images within the slider are mouseovered or when the previous/next/bullet pagination buttons are pressed. Thank you Paul for your kind assistance!

Moved to JavaScript forum for help with the Caption animation script.

http://pirrcreatives.com/home6.php
The script works perfect when there is only one image gallery.

http://pirrcreatives.com/home5.php
But when there is more than one gallery, the caption animation starts to go haywire. The caption animation goes wrong when either the pagination bullets, previous/next buttons are pressed or when the images within the image gallery gets mouseovered. I need this multiple gallery version to work. Thanks in advance guys.
http://pirrcreatives.com/home5.php is the