...

View Full Version : Align text within button



tsua
11-08-2010, 05:49 AM
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');
}

Chris Hick
11-08-2010, 05:53 AM
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:


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


css:


.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');
}

tsua
11-08-2010, 06:04 AM
Can divs act like a button? eg. link to pages/rollover images?

DrDOS
11-08-2010, 06:13 AM
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.

Chris Hick
11-08-2010, 06:17 AM
Aye, DrDOS nailed it on the head.

tsua
11-08-2010, 06:27 AM
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.

Chris Hick
11-08-2010, 06:35 AM
Hmm.. when I did it with a sample pic it did not push anything down..

tsua
11-08-2010, 06:49 AM
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.

Chris Hick
11-08-2010, 06:56 AM
Gotta use a little bit of js..


<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.

Chris Hick
11-08-2010, 07:12 AM
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:


<button class="washing_machine_button" onClick="document.location='about.html'">Washing Machine</button>


css:


/* 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');
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum