SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    You did change your CSS, right?
    i.e.
    #slides{ ... }
    into
    .slides{ ... }

    Just checking.

  5. #5
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats the correct link http://pirrcreatives.com/home2.php

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  10. #10
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In http://pirrcreatives.com/home3.php, the panning images are misaligned too.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    This is quite hard to debug remotely.
    I just sent you a PM asking for more info.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    /*#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:

    Code:
    	<script type="text#javascript">
    		$(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>
    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.
    Code:
    <!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>•</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">•</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">•</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">•</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">•</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">•</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>

  13. #13
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  14. #14
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tanka79 View Post
    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.

  16. #16
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Moved to JavaScript forum for help with the Caption animation script.

  18. #18
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •