CODEWITHSUNDEEP
htmlcss
Cydonia7
Cydonia7

Reputation: 3846

Make a link use all the space

I have a button class working like this :

<p class="button"><a href="#">Rejoindre</a></p>

The CSS is :

p.button
{
    background-color: #e74c3c;
    line-height: 30px;
    width: 200px;
    text-align: center;
}

.button a
{
    font-family: Montserrat, sans-serif;
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
}

.button a:hover
{
    text-decoration: none;
}

How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?

Upvotes: 0

Views: 476

Answers (4)

Justin Chmura
Justin Chmura

Reputation: 2047

<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle . That way allows you to get rid of the p tag all together.

Upvotes: 1

stackErr
stackErr

Reputation: 4170

You can add display:block; to you anchor tag.

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

Fiddle: http://jsfiddle.net/akx3p/

CSS:

p.button
{
    background-color: #e74c3c;
    line-height: 30px;
    width: 200px;
    text-align: center;

}

.button a
{
    font-family: Montserrat, sans-serif;
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
    display: block;
}

.button a:hover
{
    text-decoration: none;}

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191829

Add display: block to the .button a ruleset.

http://jsfiddle.net/ExplosionPIlls/UvrKx/

Upvotes: 1

Matt Sanders
Matt Sanders

Reputation: 10865

You can put the link tag on the outside to make anything inside it be contained in the link:

<a href="#"><p class="button">Rejoindre</p></a>

However, you probably want to use something other than a p tag for your button, maybe a button element instead?

More info on HTML buttons.

Upvotes: 5

Related Questions