Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 57

Thread: CSS Help please

  1. #26
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by Kyle Undefined View Post
    What do you need the mouseover to do? If you want to change images, I'd suggest CSS Sprites

    Here's a simple mouseover example: http://www.w3schools.com/jsref/event_onmouseover.asp
    Thankyou for the reply I'm looking to create some links buttons in the left nav, so sprites aren't as useful in this situation. I'm debating between some very hard JavaScript, or some CSS. Here's what I would like to happen:

    When the link button is generally there, it will be this picture:



    When the link is hovered over, it should change size a little bit (say an extra 50x50)

    Then the active link should be like this:



    Thankyou.

  2. #27
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    Quote Originally Posted by Kyle Undefined View Post
    What do you need the mouseover to do? If you want to change images, I'd suggest CSS Sprites

    Here's a simple mouseover example: http://www.w3schools.com/jsref/event_onmouseover.asp
    Don't listen to kyle! He doesn't know what he is talking about :P. This should be done in CSS. I can't find your question he is answering, but using css and background image is the way to go. Also Padding 25px 25px 25px 25px; would make it 50 pixels bigger(I know it can be shorter).
    Working on: Tithe Farmer

  3. #28
    Join Date
    Oct 2008
    Location
    C:\Simba\Includes\
    Posts
    7,566
    Mentioned
    19 Post(s)
    Quoted
    180 Post(s)

    Default

    You can use CSS Sprites for that, I do it all the time.

    If you want to use JS, you could do something like this:
    Code:
    function changeImg(imgName, imgSrc){
      document[imgName].src = imgSrc;
    }
    Which can be called like:
    Code:
    <a href="#" onmouseover="changeImg('imgNav', 'img2.png');" onmouseout="changeImg('imgNav', 'img.png');"><img src="img.png" name="imgNav" border="0" /></a>
    EDIT: masterBB I always use CSS or CSS Sprites when I can. Hate using JS for stuff like that
    Away for awhile, life is keeping me busy. | Want to get my attention in a thread? @Kyle Undefined; me.
    { MSI Phoenix || SRL Stats Sigs || Paste || Scripts || Quotes || Graphics }

    When posting a bug, please post debug! Help us, help you!

    I would love to change the world, but they won't give me the source code. || To be the best, you've got to beat the rest. || Logic never changes, just the syntax.
    If you PM me with a stupid question or one listed in FAQ, or about a script that is not mine, I will NOT respond.


    SRL is a Library of routines made by the SRL community written for the Program Simba. We produce Scripts for the game Runescape.


  4. #29
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by masterBB View Post
    Don't listen to kyle! He doesn't know what he is talking about :P. This should be done in CSS. I can't find your question he is answering, but using css and background image is the way to go. Also Padding 25px 25px 25px 25px; would make it 50 pixels bigger(I know it can be shorter).
    I'm trying to make a button that changes when you hover over it.

    Quote Originally Posted by Kyle Undefined View Post
    You can use CSS Sprites for that, I do it all the time.

    If you want to use JS, you could do something like this:
    Code:
    function changeImg(imgName, imgSrc){
      document[imgName].src = imgSrc;
    }
    Which can be called like:
    Code:
    <a href="#" onmouseover="changeImg('imgNav', 'img2.png');" onmouseout="changeImg('imgNav', 'img.png');"><img src="img.png" name="imgNav" border="0" /></a>
    EDIT: masterBB I always use CSS or CSS Sprites when I can. Hate using JS for stuff like that
    I'm going to use CSS too I think, I have absolutely no idea what I'm doing with JavaScript, thankyou anyway Can anyone make this happen for me please:

    The button is
    The hover over is
    The click is

    Thankyou for all the replies
    Last edited by sm321; 05-04-2012 at 01:19 PM.

  5. #30
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    Css:
    css Code:
    /* Stylesheet CSS */

    a {
      background-image = url(/images/yourButtonImage.png);
      padding: 0;
    }

    a:hover {
      background-image = url(/images/yourHoveredButtonImage.png);
      padding: 10px 10px 10px 10px;
    }
    Working on: Tithe Farmer

  6. #31
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by masterBB View Post
    Don't listen to kyle! He doesn't know what he is talking about :P. This should be done in CSS. I can't find your question he is answering, but using css and background image is the way to go. Also Padding 25px 25px 25px 25px; would make it 50 pixels bigger(I know it can be shorter).
    Quote Originally Posted by masterBB View Post
    Css:
    css Code:
    /* Stylesheet CSS */

    a {
      background-image = url(/images/yourButtonImage.png);
      padding: 0;
    }

    a:hover {
      background-image = url(/images/yourHoveredButtonImage.png);
      padding: 10px 10px 10px 10px;
    }
    Thankyou What amateur mistake am I doing (I'm trying to make the image part of the left nav as a link button):

    HTML Code:
     {
      background-image = url(/images/red.jpg);
      padding: 0;
    }
    
    a:hover {
      background-image = url(/images/green.jpg);
      padding: 10px 10px 10px 10px;
    }
    
    #leftnav {
    
    position: relative; left: 20px; top: 55px;
    width: 200px;
    height: 400px;
    background-image: url(images/red.jpg);
    float: left;
    
    }
    Aswell, I would like a click and an active image too, so it would be:

    Standard

    Hover + enlarge slightly

    Active
    Last edited by sm321; 05-04-2012 at 01:29 PM.

  7. #32
    Join Date
    Oct 2008
    Location
    C:\Simba\Includes\
    Posts
    7,566
    Mentioned
    19 Post(s)
    Quoted
    180 Post(s)

    Default

    Code:
    a:active{
      background-image = url(/images/black.jpg);
      padding: 10px;
    }
    There ya go.
    Away for awhile, life is keeping me busy. | Want to get my attention in a thread? @Kyle Undefined; me.
    { MSI Phoenix || SRL Stats Sigs || Paste || Scripts || Quotes || Graphics }

    When posting a bug, please post debug! Help us, help you!

    I would love to change the world, but they won't give me the source code. || To be the best, you've got to beat the rest. || Logic never changes, just the syntax.
    If you PM me with a stupid question or one listed in FAQ, or about a script that is not mine, I will NOT respond.


    SRL is a Library of routines made by the SRL community written for the Program Simba. We produce Scripts for the game Runescape.


  8. #33
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by Kyle Undefined View Post
    Code:
    a:active{
      background-image = url(/images/black.jpg);
      padding: 10px;
    }
    There ya go.
    Thankyou It's working now, but now how I really wanted it. I was hoping that the images would automatically show up, but I have to type text. Here are some pictures of what it is like:

    Standard Link:


    When hovered over it:

  9. #34
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    Quote Originally Posted by sm321 View Post
    Thankyou It's working now, but now how I really wanted it. I was hoping that the images would automatically show up, but I have to type text.
    css Code:
    a {
      width: 100px;
      height: 30px;
    }

    or

    css Code:
    a {
      min-width: 100px;
      min-height: 30px;
    }
    Last edited by masterBB; 05-04-2012 at 05:09 PM. Reason: I'm retarded.
    Working on: Tithe Farmer

  10. #35
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by masterBB View Post
    css Code:
    a {
      width: 100px;
      height: 30px;
    }

    or

    css Code:
    a {
      min-width: 100px;
      min-height: 30px;
    }
    Thankyou for the reply It's not the width and height, but the fact that without adding any text into the
    HTML Code:
    <div id="leftnav">Here</div>
    The images don't appear.

  11. #36
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    Quote Originally Posted by sm321 View Post
    Thankyou for the reply It's not the width and height, but the fact that without adding any text into the
    HTML Code:
    <div id="leftnav">Here</div>
    The images don't appear.
    Which is because there is no width and height. Try it. It will work. When you add text it will automatically add a width and height to fit the text, the image is a background image, the size of that image isn't related to the size of the div on the screen.
    Working on: Tithe Farmer

  12. #37
    Join Date
    Oct 2008
    Location
    C:\Simba\Includes\
    Posts
    7,566
    Mentioned
    19 Post(s)
    Quoted
    180 Post(s)

    Default

    This is where a CSS Sprite would be perfect.
    Away for awhile, life is keeping me busy. | Want to get my attention in a thread? @Kyle Undefined; me.
    { MSI Phoenix || SRL Stats Sigs || Paste || Scripts || Quotes || Graphics }

    When posting a bug, please post debug! Help us, help you!

    I would love to change the world, but they won't give me the source code. || To be the best, you've got to beat the rest. || Logic never changes, just the syntax.
    If you PM me with a stupid question or one listed in FAQ, or about a script that is not mine, I will NOT respond.


    SRL is a Library of routines made by the SRL community written for the Program Simba. We produce Scripts for the game Runescape.


  13. #38
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by masterBB View Post
    Which is because there is no width and height. Try it. It will work. When you add text it will automatically add a width and height to fit the text, the image is a background image, the size of that image isn't related to the size of the div on the screen.
    Thankyou for the replies So I would have to put it as an image, not as a background instead then?

    Quote Originally Posted by Kyle Undefined View Post
    This is where a CSS Sprite would be perfect.
    I thought I was using them:

    HTML Code:
    #leftnav a {
    
    background-image: url(images/red.jpg);
    text-decoration: none;
    font-family: Arial;
    width: 250px;
    height: 50px;
    
    }
    
    #leftnav a:hover {
    
    background-image: url(images/green.jpg);
    padding: 10px 10px 10px 10px;
    width: 250px;
    height: 50px;
    
    }
    
    #leftnav a:active {
    
    background-image: url(images/green2.jpg);
    width: 250px;
    height: 50px;
    
    }
     
    #leftnav {
    
    position: relative; left: 20px; top: 55px;
    width: 200px;
    height: 400px;
    float: left;
    
    }
    If not, can you make me one please using the same as above

  14. #39
    Join Date
    Oct 2008
    Location
    C:\Simba\Includes\
    Posts
    7,566
    Mentioned
    19 Post(s)
    Quoted
    180 Post(s)

    Default

    CSS Sprites are only one image, and are set as backgrounds. When you hover over an element, you change the background positioning.

    Take a look at this, and it's source: http://www.vipreantivirus.com/promos/spring-sale/

    The tabs are a CSS Sprite, the arrow that you see move is all one image with the background position being changed. The CSS file that's imported is where it all happens at.

    Away for awhile, life is keeping me busy. | Want to get my attention in a thread? @Kyle Undefined; me.
    { MSI Phoenix || SRL Stats Sigs || Paste || Scripts || Quotes || Graphics }

    When posting a bug, please post debug! Help us, help you!

    I would love to change the world, but they won't give me the source code. || To be the best, you've got to beat the rest. || Logic never changes, just the syntax.
    If you PM me with a stupid question or one listed in FAQ, or about a script that is not mine, I will NOT respond.


    SRL is a Library of routines made by the SRL community written for the Program Simba. We produce Scripts for the game Runescape.


  15. #40
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by Kyle Undefined View Post
    CSS Sprites are only one image, and are set as backgrounds. When you hover over an element, you change the background positioning.

    Take a look at this, and it's source: http://www.vipreantivirus.com/promos/spring-sale/

    The tabs are a CSS Sprite, the arrow that you see move is all one image with the background position being changed. The CSS file that's imported is where it all happens at.

    Thankyou for the reply Ok, but I still thought that I was doing that (changing the background image). Can you please make a me a working example so that I can see what I'm actually doing wrong please?

  16. #41
    Join Date
    Oct 2008
    Location
    C:\Simba\Includes\
    Posts
    7,566
    Mentioned
    19 Post(s)
    Quoted
    180 Post(s)

    Default

    What I linked you to is a working example, I built that.
    Away for awhile, life is keeping me busy. | Want to get my attention in a thread? @Kyle Undefined; me.
    { MSI Phoenix || SRL Stats Sigs || Paste || Scripts || Quotes || Graphics }

    When posting a bug, please post debug! Help us, help you!

    I would love to change the world, but they won't give me the source code. || To be the best, you've got to beat the rest. || Logic never changes, just the syntax.
    If you PM me with a stupid question or one listed in FAQ, or about a script that is not mine, I will NOT respond.


    SRL is a Library of routines made by the SRL community written for the Program Simba. We produce Scripts for the game Runescape.


  17. #42
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by Kyle Undefined View Post
    What I linked you to is a working example, I built that.
    Thankyou for the reply, and nice website

    The only thing I can see is this:

    HTML Code:
    <a href="Awards" title="VIPRE Antivirus Awards & Reviews"></a>
    Last edited by sm321; 05-05-2012 at 08:27 AM.

  18. #43
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

  19. #44
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Thankyou I still have no idea how that works though, as there is only 1 image. Infact, when I said there is only 1 image that made me remember something. Don't you have 1 image , but with 3 images (like 3 in 1), then you use some sort of coding to choose which part of the image?

  20. #45
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    It is a very width background image. He moves it over the x-axis.
    Working on: Tithe Farmer

  21. #46
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by masterBB View Post
    It is a very width background image. He moves it over the x-axis.
    Thankyou for the reply You may have to explain that ^ for me. Could you please make this work, so that I could see what it should look like:

    Button

    Hover button and enlarge

    When active

  22. #47
    Join Date
    Oct 2007
    Location
    #srl
    Posts
    6,102
    Mentioned
    39 Post(s)
    Quoted
    62 Post(s)

    Default

    Quote Originally Posted by sm321 View Post
    Thankyou I still have no idea how that works though, as there is only 1 image. Infact, when I said there is only 1 image that made me remember something. Don't you have 1 image , but with 3 images (like 3 in 1), then you use some sort of coding to choose which part of the image?
    Quote Originally Posted by sm321 View Post
    Thankyou for the reply You may have to explain that ^ for me. Could you please make this work, so that I could see what it should look like:

    Button

    Hover button and enlarge

    When active
    CSS3 can handle most of that for you, including the appearance of the buttons.

  23. #48
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by NCDS View Post
    CSS3 can handle most of that for you, including the appearance of the buttons.
    Thankyou for the reply I've tried to get it too work, but I have to put text, when I was hoping the images would just appear. I have no reason why. Here's my CSS code if it helps:

    HTML Code:
    #leftnav a {
    
    background-image: url(images/red.jpg);
    text-decoration: none;
    font-family: Arial;
    width: 250px;
    height: 50px;
    
    }
    
    #leftnav a:hover {
    
    background-image: url(images/green.jpg);
    padding: 10px 10px 10px 10px;
    width: 250px;
    height: 50px;
    
    }
    
    #leftnav a:active {
    
    background-image: url(images/green2.jpg);
    width: 250px;
    height: 50px;
    
    }
     
    #leftnav {
    
    position: relative; left: 20px; top: 55px;
    width: 200px;
    height: 400px;
    float: left;
    
    }

  24. #49
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    try display: block;
    Working on: Tithe Farmer

  25. #50
    Join Date
    Dec 2011
    Posts
    257
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Quote Originally Posted by masterBB View Post
    try display: block;
    Thankyou That's now made it "separate" from the background. If anyone reads this part, how do you make a background image/colour work using CSS? I know how to do it in HTML, but I don't want to edit every single page.
    Last edited by sm321; 05-08-2012 at 08:10 PM.

Page 2 of 3 FirstFirst 123 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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