Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Align text within button

    Hey, I got a problem. My buttons don't validate. Because Ive got p tags within the a tags.. But if i get rid of the p tag I lose my text alignment. What can i do?

    <a class="washing_machine_button" href="#"> <p> Washing Machine </p> </a>


    /* Washing Machine button CSS */

    .washing_machine_button {
    float: left;
    list-style: none;
    width: 88px;
    height: 96px;
    background-image: url('images/side_menu/washing_machines.jpg');
    }

    .washing_machine_button:hover {
    background-image: url('images/side_menu/washingmachine_hover.jpg');
    }

    .washing_machine_button:active {
    background-image: url('images/side_menu/washing_machines_productclick.jpg');
    }

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    I'm being very lazy here by not trying it myself.. but have you tried div tags??

    Edit:

    Oh wow I am blind.. I didn't notice you had a class in that.. here you go..
    html:
    Code:
    <a class="washing_machine_button" href="#">Washing Machine</a>
    css:
    Code:
    .washing_machine_button {
    float: left;
    list-style: none;
    width: 88px;
    height: 96px;
    background-image: url('images/side_menu/washing_machines.jpg');
    text-align: center;
    padding-top: 45px;
    }
    
    .washing_machine_button:hover {
    background-image: url('images/side_menu/washingmachine_hover.jpg');
    }
    
    .washing_machine_button:active {
    background-image: url('images/side_menu/washing_machines_productclick.jpg');
    }
    Last edited by Chris Hick; 11-08-2010 at 05:08 AM.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can divs act like a button? eg. link to pages/rollover images?

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,020
    Thanks
    15
    Thanked 239 Times in 239 Posts
    Quote Originally Posted by tsua View Post
    Can divs act like a button? eg. link to pages/rollover images?
    You can make just about any block element act and look like a button. And you can tell a span display:block: and it can be made into a button too. You could take a div, give it rounded corners, borders, etc, and make a nice button. It's the code inside it that makes it behave.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Aye, DrDOS nailed it on the head.

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks heaps for your help guys..
    Chris, I tried that code but the padding pushed everything down, not just the text...

    I'll try it without <a> tags.

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Hmm.. when I did it with a sample pic it did not push anything down..
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay, how do i make the div link?
    I tried this,

    <div id="washing_machine_button" href="about.html" > <p> Washing Machine </p>
    </div>
    but it doesn't link.

  • #9
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Gotta use a little bit of js..
    Code:
    <div class="washing_machine_button" OnClick="document.location='about.html'"><noscript><a href="about.html"></noscript>Washing Machine<noscript></a></noscript></div>

    I'm decent at javascript, but I know DrDOS is pretty good at it. So, he'll correct me if I'm in the wrong.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #10
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Apologies for double post.

    But I just remembered something.. you are wanting to make this a button right?

    If so here is another solution:

    html:
    Code:
    <button class="washing_machine_button" onClick="document.location='about.html'">Washing Machine</button>
    css:
    Code:
    /* CSS Document */
    
    .washing_machine_button {
    float: left;
    list-style: none;
    width: 88px;
    height: 96px;
    background-image: url('images/side_menu/washing_machines.jpg');
    text-align: center;
    line-height: 96px;
    }
    
    .washing_machine_button:hover {
    background-image: url('images/side_menu/washingmachine_hover.jpg');
    }
    
    .washing_machine_button:active {
    background-image: url('images/side_menu/washing_machines_productclick.jpg');
    }
    Last edited by Chris Hick; 11-08-2010 at 06:26 AM.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^


  •  

    Posting Permissions

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