960 grid & Jquery help

January 10, 2011

Hello everyone, I am really new to web-design so sorry if I sound silly.

I am currently creating a basic website which will consist of the follow:

Header/Logo

Navigation buttons

Jquery slider

Footer content

I have dicided to code using the 960 grid system and I am slowly understanding how to use it.

I have managed to input the header, and then directly underneath that the navigation buttons all within a grid_12 div

After this point I am stuck, i have been trying for days to input a jquery slider which will sit underneath the nav buttons and randomly change every few seconds but also show text alongside the image.

I thought it would have been easy to simply insert this slider http://nivo.dev7studios.com/#usage but it really isnt it just messes up.

I would really appreciate the help in doing this. thanks in advance

Sin

1,761 · January 10, 2011

Nivo slider only alows images doesnt it?

you need a slider that will allow you to slide divs/content like this one:

http://brenelz.com/blog/build-a-content-slider-with-jquery/

January 10, 2011

On 10/01/2011 at 14:29, the better twin said:

Nivo slider only alows images doesnt it?

you need a slider that will allow you to slide divs/content like this one:

http://brenelz.com/blog/build-a-content-slider-with-jquery/

Thank you for the link, the only problem with that one is that it doesn't change automatically and it doesn't have the right feel to what I had in mind. I just found this which is perfect if I adapt it to suit my look. But the way it looks and automatically slides is just what I want. sllider

Now i need to figure out how to make it, I don't want to purchase it from a pre made template as it wont help me learn or fit with my theme.

January 12, 2011

On 10/01/2011 at 15:01, SiN_SiN said:

Thank you for the link, the only problem with that one is that it doesn't change automatically and it doesn't have the right feel to what I had in mind. I just found this which is perfect if I adapt it to suit my look. But the way it looks and automatically slides is just what I want. sllider

Now i need to figure out how to make it, I don't want to purchase it from a pre made template as it wont help me learn or fit with my theme.

I really like the look of this: Slider but I haven't been able to find a tutorial which helps. Any suggestions? I could post my current site code if that would help in seeing my layout?

2,445 · January 12, 2011

The slider you have posted which is mostly a slide show with a delay for text content is simply a fadeIn fadeOut loop with a reset. If you can post your html code I can point you to a suitable plugin.

January 12, 2011

On 12/01/2011 at 18:54, sweetsam said:

The slider you have posted which is mostly a slide show with a delay for text content is simply a fadeIn fadeOut loop with a reset. If you can post your html code I can point you to a suitable plugin.

Hi thank you for your input hope you can help. This is the code I have so far:

&lt;!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&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;

&lt;title&gt; &lt;/title&gt;

&lt;link href="../../960 ccc/css/reset.css" rel="stylesheet" type="text/css" media="all" /&gt;
&lt;link href="../../960 ccc/css/960.css" rel="stylesheet" type="text/css" media="all" /&gt;
&lt;link href="../../960 ccc/css/text.css" rel="stylesheet" type="text/css" media="all" /&gt; 

&lt;/head&gt;
&lt;body&gt;

&lt;div class="container_12"&gt;
	&lt;!--Header Div --&gt;
&lt;div class="grid_12"&gt;
		&lt;a href="#"&gt;&lt;img src="960_header_03.png" alt=""/&gt;&lt;/a&gt;
&lt;/div&gt;
	&lt;!--&lt;div class="clear"&gt; &lt;/div&gt; --&gt;
	&lt;!-- END HeaderDiv --&gt;

	&lt;!-- Navbar Div --&gt;
	&lt;div class="grid_12" id="navbar"&gt;&lt;img src="960_nav_06.png" width="963" height="72" /&gt;&lt;/div&gt;
  &lt;div class="clear"&gt; &lt;/div&gt;
	&lt;!-- End Navbar Div--&gt;
	&lt;!--Top Section--&gt;&lt;!--End TopSection--&gt;

	&lt;!--Spacer--&gt;

	&lt;div class="clear"&gt; &lt;/div&gt;
	&lt;!--End Spacer--&gt;




	&lt;!-- Stories Area--&gt;
	&lt;div class="grid_3"&gt;
		&lt;h2&gt;&lt;a href="#"&gt;Sample Article Title&lt;/a&gt;&lt;/h2&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.&lt;/p&gt;
	&lt;/div&gt;

	&lt;div class="grid_3"&gt;
		&lt;h2&gt;&lt;a href="#"&gt;Sample Article Title&lt;/a&gt;&lt;/h2&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.&lt;/p&gt;
	&lt;/div&gt;

	&lt;div class="grid_3"&gt;
		&lt;h2&gt;&lt;a href="#"&gt;Sample Article Title&lt;/a&gt;&lt;/h2&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.&lt;/p&gt;
	&lt;/div&gt;

	&lt;div class="grid_3"&gt;
		&lt;h2&gt;&lt;a href="#"&gt;Sample Article Title&lt;/a&gt;&lt;/h2&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.&lt;/p&gt;
	&lt;/div&gt;
	&lt;div class="clear"&gt; &lt;/div&gt;
	&lt;!--End Stories Area--&gt;

	&lt;!--Spacer--&gt;
	&lt;div class="grid_12 spacer"&gt;
	&lt;/div&gt;
	&lt;div class="clear"&gt; &lt;/div&gt;
	&lt;!--End Spacer--&gt;

	&lt;!-- Footer --&gt;
	&lt;div class="grid_12" id="footer"&gt;
		&lt;div class="grid_4 alpha"&gt;
			&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus&lt;/p&gt;
		&lt;/div&gt;

		&lt;div class="grid_4"&gt;
			&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus&lt;/p&gt;
		&lt;/div&gt;

		&lt;div class="grid_4 omega"&gt;
			&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus&lt;/p&gt;
		&lt;/div&gt;	
	&lt;/div&gt;

	&lt;div class="clear"&gt; &lt;/div&gt;
	&lt;!--End Stories Area--&gt;		
&lt;/div&gt;
&lt;div id="legal"&gt;
	&lt;p&gt;© My Magazine&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

I want to have the slider underneath the navigation buttons. I am quite good using photoshop so designing the images for it wont be a problem I just don't know how to implment it into the site, and I am not a 100% with all the code I have so far, but slowly learning. :rolleyes:

2,445 · January 12, 2011

This should help.

January 12, 2011

On 12/01/2011 at 21:01, sweetsam said:

This should help.

Thanks for the link but trust me to like the one which must be paid for! AVIA SLIDER

Sign In

960 grid & Jquery help

Question

SiN_SiN

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

the better twin

Link to comment

Share on other sites

SiN_SiN

Link to comment

Share on other sites

SiN_SiN

Link to comment

Share on other sites

sweetsam

Link to comment

Share on other sites

SiN_SiN

Link to comment

Share on other sites

sweetsam

Link to comment

Share on other sites

SiN_SiN

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker