Need Help!

18 posts Page 2 of 2
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Need Help!
mikethedj4
Say your image is 64x96
on the left side contains the before image to facebook, twitter, and google+
on the right side contains the hover. So each icon (if positioned correctly on the image) hovering would be a piece of cake, and could also add the :active css selector with 3 more images for an onmousedown effect.

All you need to do is define the width and height of your image in css (which is shown in the examples above) along with positioning the background image.

For this example for social networking icons you'd have 9 icons so so position these elements you don't actually need to define px margins all you need to state is where the image should be visible...
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right


I explained it well enough for you to understand. If you still don't I recommend reading up on W3Schools.com and playing with some code yourself. Start small and work your way up.
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: Need Help!
Master M1nd
I Learnt That 80%, Thank you so much guys ! clapper;
Code: Select all
<!doctype html>
<html>
<head>
<title>Hover demo</title>
<style>
#blogger {
   width: 610px;
   height: 31px;
 

background:url('http://1.bp.blogspot.com/-x0bDL-25zEY/Ulz00wQpVSI/AAAAAAAAA

vQ/8oMpeK7lGE4/s1600/all+icons+try.png') 0 0;
background-size:100%;
background-position:bottom left;
}

#blogger:hover {
   background-position: top right;
 
}




</style>
</head>
<body>
   <div id="blogger"></div>
</body>
</html>

It is Displaying all images! (ACTIVE)
And on hover it also display All Images ( HOVERED ).


I Try to use some other positions that you have pasted, but still it's not working :|
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Need Help!
mikethedj4
Code: Select all
background:url('http://1.bp.blogspot.com/-x0bDL-25zEY/Ulz00wQpVSI/AAAAAAAAA

vQ/8oMpeK7lGE4/s1600/all+icons+try.png') 0 0;
Right away this is the first mistake I see. Make sure it's on the same line. In addition active is a selector defined for when the mouse is down on an element. Not when an element is visible. The syntax can be kind of confusing at first. I still recommend you to read up more on CSS.

Here's the code to show only the blogger image.
Code: Select all
<!doctype html>
<html>
<head>
<title>Hover demo</title>
<style>
#blogger {
  cursor: pointer;
  width: 54px;
  height: 33px;
  background:url('http://1.bp.blogspot.com/-x0bDL-25zEY/Ulz00wQpVSI/AAAAAAAAAvQ/8oMpeK7lGE4/s1600/all+icons+try.png') 0 0;
  background-size: 1 0;
  background-position: bottom left;
}

#blogger:hover {
  background-position: top left;
}
</style>
</head>
<body>
   <div id="blogger"></div>
</body>
</html>
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: Need Help!
Master M1nd
Well Thanks again, I know i am disturbing you guys so much! cryer;
And I will again read about CSS!
I Make One More can you tell in it, where is the problem! :'(

Code: Select all
<!doctype html>
<html>
<head>
<title>Hover demo</title>
<style>
#blogger {
  cursor: pointer;
  width: 54px;
  height: 33px;
  

background:url('http://1.bp.blogspot.com/-x0bDL-25zEY/Ulz00wQpVSI/AAAAAAAAA

vQ/8oMpeK7lGE4/s1600/all+icons+try.png') 0 0;
  background-size: 1 0;
  background-position: bottom left;
}

#blogger:hover {
  background-position: top left;
}


#templateism {
  cursor: pointer;
  width: 366px;
  height: 32px;
  

background:url('http://1.bp.blogspot.com/-x0bDL-25zEY/Ulz00wQpVSI/AAAAAAAAA

vQ/8oMpeK7lGE4/s1600/all+icons+try.png') 0 0;
  background-size: 1 0;
  background-position: center center;
}

#templateism:hover {
  background-position: top center;
}

#css3 {
  cursor: pointer;
  width: 112px;
  height: 32px;
  

background:url('http://1.bp.blogspot.com/-x0bDL-25zEY/Ulz00wQpVSI/AAAAAAAAA

vQ/8oMpeK7lGE4/s1600/all+icons+try.png') 0 0;
  background-size: 1 0;
  background-position: center right;
}

#css3:hover {
  background-position: top right;
}



</style>
</head>
<body>
   <div id="blogger"></div><div id="templateism"></div><div id="css3"></div>
</body>
</html>



I think the problem is that it got confused that which is the right center and other's.
:cry: :cry: :cry: :cry: cryer; cryer; cryer;
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Need Help!
mikethedj4
Your image/hover is not proportional. I would suggest editing it using an image editor like GIMP, or Sumopaint, but judging at first glance based upon how the image is already constructed looks to me you don't have much knowledge in that area either. Just make sure they're proportional, meaning mirroring, meaning left is congruent to right.

In closing there's been plenty of information and resources here for you to do the job yourself. I am not going to write the entire code for you!

Get a decent IDE (Integrated Development Environment) to use. There's plenty out there such as the HTML OnLive Debugger, Geany, Cloud9IDE, Liveweave, and CodePen. JSFiddle, and JSBin are decent too although I wouldn't exactly classify them as an IDE.

Use any of what I suggested above, but do not use Notepad! It sucks, all it is is a notepad, nothing more, it's not made to code websites or applications. It can do it like any other text editor, but it's terrible if you want to pursue web design listen to these words. I may sound like a prick, but I know what I'm talking about.
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: Need Help!
Master M1nd
Well This Time i Will Make all the width - height's Equal!
I HAVE STARTED USING HTML ONLIVE DEBUGGER cooll;

I think you're angry cryer;
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Need Help!
comathi
There's one more online resource I'd like to share with you: Codecademy

They host online courses for things like PHP, JavaScript, HTML, CSS, Python, etc. that let you learn interactively.

In your case, I would especially recommend the following courses:

HTML/CSS
JavaScript

Happy learning cooll;
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: Need Help!
Master M1nd
Thanks Bro, I will definitely See and Learn wahooo;
comathi wrote:
There's one more online resource I'd like to share with you: Codecademy

They host online courses for things like PHP, JavaScript, HTML, CSS, Python, etc. that let you learn interactively.

In your case, I would especially recommend the following courses:

HTML/CSS
JavaScript

Happy learning cooll;
18 posts Page 2 of 2
Return to “Help & Support”