button with background + padding overlapping other text, margin no use

Page 1 of 1

6 Replies - 928 Views - Last Post: 13 October 2012 - 01:12 PM

#1 creativecoding  Icon User is online

  • Hash != Encryption
  • member icon


Reputation: 786
  • View blog
  • Posts: 2,971
  • Joined: 19-January 10

button with background + padding overlapping other text, margin no use

Posted 13 October 2012 - 02:21 AM

I'm trying to make a button class that when put on a link, will turn that link into a button-looking thing. Here's what I have so far:

CSS:
.btn {
    border: 1px solid black;
    background-color: lightgray;
    padding: 5px 10px;
    margin-top: 50px;
}

HTML EXAMPLE:
<a href="#" class="btn">Add to cart</a>


And here's what's happening:
http://puu.sh/1el4S
(the text above is wrapped in paragraph tags, removing them nor putting the button inside of them helps)

You may notice that I put margin-top: 50px in to see if it changes anything, it doesn't. Why? And how can I fix this?

This post has been edited by creativecoding: 13 October 2012 - 02:22 AM


Is This A Good Question/Topic? 0
  • +

Replies To: button with background + padding overlapping other text, margin no use

#2 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 64
  • View blog
  • Posts: 224
  • Joined: 22-November 10

Re: button with background + padding overlapping other text, margin no use

Posted 13 October 2012 - 10:49 AM

hmmm, sounds like the box with the kitten may be floating or possibly absolute positioned.

This post has been edited by exiles.prx: 13 October 2012 - 11:07 AM

Was This Post Helpful? 0
  • +
  • -

#3 creativecoding  Icon User is online

  • Hash != Encryption
  • member icon


Reputation: 786
  • View blog
  • Posts: 2,971
  • Joined: 19-January 10

Re: button with background + padding overlapping other text, margin no use

Posted 13 October 2012 - 10:59 AM

But then wouldn't taking out the <p> tags fix the problem?
Was This Post Helpful? 0
  • +
  • -

#4 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 64
  • View blog
  • Posts: 224
  • Joined: 22-November 10

Re: button with background + padding overlapping other text, margin no use

Posted 13 October 2012 - 11:10 AM

Sry, not sure why I said the paragraph element, I meant the box with the kitten photo in it (edited above to reflect my brain fart). Do you have a link?
Was This Post Helpful? 0
  • +
  • -

#5 creativecoding  Icon User is online

  • Hash != Encryption
  • member icon


Reputation: 786
  • View blog
  • Posts: 2,971
  • Joined: 19-January 10

Re: button with background + padding overlapping other text, margin no use

Posted 13 October 2012 - 11:23 AM

No, sorry, it's hosted locally.

But not, it's not. Here's the full HTML: 

<!DOCTYPE html>
<html><head>
        <title>CandyChain</title>
        <link rel="stylesheet" type="text/css" href="v/css/style.css">
        <script src="v/js/jquery-1.8.2.js"></script>
        <script src="v/js/scripts.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <div class="navbar">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Shipping/Payment info</a></li>
                        <li class="pull-right"><a href="#">Cart</a></li>
                        <li class="pull-right"><a href="#">Login</a></li>
                    </ul>
                </div>
            </div>
            <div class="sidebar">
                <ul>
                    <li><h2>Bracelets</h2></li>
                    <li><a href="#">In stock</a></li>
                    <li><a href="#">Custom order</a></li>
                    <li><h2>Necklaces</h2></li>
                    <li><a href="#">In stock</a></li>
                    <li><a href="#">Custom order</a></li>
                    <li><h2>Other</h2></li>
                    <li><a href="#">In stock</a></li>
                    <li><a href="#">Custom order</a></li>
                </ul>
            </div>
            <div class="content">
                
				<h1>Black and yellow necklace</h1>
                                <img src="http://placekitten.com/g/350/250">
                                <br>
                                    This is amazing. Buy now!
                                <br>
                                <a href="#" class="btn thick" name="add-to-cart" data-item="1">Added to cart</a>
				            </div>
            <div class="footer">
                Copyright 2012 Candychain
            </div>
        </div>
    
</body></html>


and CSS:
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #646464;
}

.header {
    width: 100%;
    height: 243px;
    background-image: url('../images/header.jpg');
    background-repeat: no-repeat;
}

.navbar {
    top: 201px;
    position: absolute;
    height: 42px;
    width: 100%;
}

.navbar ul {
    line-height: 42px;
    font-size: 25px;
    font-family: Magneto;
    margin-left: 40px;
}

.navbar ul li {
    list-style: none;
    display: inline;
    margin-right: 35px;
}

.navbar ul li a {
    color: #646464;
}

.sidebar {
    margin-top: 20px;
    float: left;
    width: 20%;
    padding-left: 10px;
    background-color: #C7C8CA;
    color: #646464;
}

.sidebar ul {
    font-family: Magneto;
}

.sidebar ul li {
    font-size: 22px;
}



.content {
    font-weight: normal;
    margin-top: 20px;
    float: right;
    padding: 5px 10px;
    width: 75%;
    background-color: #C7C8CA;
    font-family: 'Prestige Elite Std', Courier, monospace;
    color: #646464;
}

.footer {
    clear: both;
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: 100%;
    padding-top: 30px;
}

.item-preview {
    width: 250px;
    height: 250px;
    border: 1px solid black;
    border-radius: 10px;
    background-color: lightgray;
    display: inline-table;
    padding: 10px 5px 0px 5px;
    text-align: center;
}

.item-preview img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.btn {
    border: 1px solid black;
    background-color: lightgray;
    padding: 5px 10px;
    margin-top: 50px;
}

.btn.thick {
    padding: 10px 20px;
}

.pull-right {
    text-align: right;
    float: right;
}

td {
    padding: 5px;
}

th {
    font-size: 20px;
    border: 1px solid black;
    padding: 0px 25px;
}

Was This Post Helpful? 0
  • +
  • -

#6 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 64
  • View blog
  • Posts: 224
  • Joined: 22-November 10

Re: button with background + padding overlapping other text, margin no use

Posted 13 October 2012 - 11:48 AM

Ok, add the style below and it should push the button away from the text.

.btn {
     display: inline-block;
}


You could also wrap the text "This is amazing. Buy now!" in a div tag or span tag. If using span, use display: block to push the button below the text.

This post has been edited by exiles.prx: 13 October 2012 - 11:50 AM

Was This Post Helpful? 1
  • +
  • -

#7 creativecoding  Icon User is online

  • Hash != Encryption
  • member icon


Reputation: 786
  • View blog
  • Posts: 2,971
  • Joined: 19-January 10

Re: button with background + padding overlapping other text, margin no use

Posted 13 October 2012 - 01:12 PM

Ah, much thanks! That's exactly what I needed.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1