Reputation: 19

Borders only showing on the sides in html

When I am trying to add a border to a div element on my website, I am getting these weird borders.

This is the result I was looking for: intended result

HTML

<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>

CSS

.outlined-button
{
 border: 3px solid #fff;
 border-radius: 10px;
 box-sizing: border-box;
 height: 48px;
 width: 140px;
}
.outlined-button-text
{
 color: #fff;
 font-family: Roboto;
 font-style: normal;
 font-weight: bold;
 font-size: 24px;
 line-height: 28px;
}

Upvotes: 0

Answers (5)

vssadineni

Reputation: 454

Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.

body {
  background: #162CEA;
}

.headline {
  width: 34%;
  margin-top: 15%;
  margin-left: 15%;
  margin-bottom: 10px;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 64px;
  line-height: 75px;
  color: #FFFFFF;
}

.button {
  width: 100%;
  text-align: center;
}

.filled-button-text,
.outlined-button-text {
  display: block;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 1.75em;
  line-height: 2.25em;
  width: 100%;
  text-align: center;
}

.outlined-button-text {
  color: #FFFFFF;
}

.filled-button {
  background: #FFFFFF;
}

.filled-button,
.outlined-button {
  width: 49%;
  display: inline-block;
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 0.5em;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {};
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</head>

<body>
  <div>
    <h1 class="headline">hey</h1>
    <div class="buttons">
      <a class="filled-button">
        <span class="filled-button-text">sign up</span>
      </a>
      <a class="outlined-button">
        <span class="outlined-button-text">log in</span>
      </a>


    </div>
  </div>
</body>

</html>

Upvotes: 0

Piyush Teraiya

Reputation: 747

You can use this code

body {
            margin: 0;
            padding: 0;
            font-family: Roboto;
            background-color: #162cea;
        } 
        .headline {
            text-align: center;
            color: #ffffff;
        }
        .buttons {
            padding: 30px;
            margin: 0 auto;
            text-align: center;
        }
        .filled-button {
            border-radius: 10px;
            color: #000000;
            font-weight: bold;
            font-size: 30px;
            height: 55px;
            width: 140px;
            background-color: #ffffff;
            display: inline-block;
            cursor: pointer;
            margin: 0 10px 0 0;
            padding: 0;
        }
        .filled-button .filled-button-text {
            margin: 0;
            padding: 9px;
        }
        .outlined-button {
            border-radius: 10px;
            color: #ffffff;
            font-weight: bold;
            font-size: 30px;
            height: 52px;
            width: 140px;
            background-color: #162cea;
            display: inline-block;
            border: 3px solid #ffffff;
            cursor: pointer;
            margin: 0 0 0 10px;
            padding: 0;
        }
        .outlined-button .outlined-button-text {
            margin: 0;
            padding: 9px;
        }

<div>
        <h1 class="headline">hey</h1>
        <div class="buttons">
            <a class="filled-button"><p class="filled-button-text">sign up</p></a>
            <a class="outlined-button"><p class="outlined-button-text">log in</p></a>
        </div>
    </div>

Upvotes: 0

ArmandFrvr

Reputation: 127

Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.

Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.

Upvotes: 1

Andrei Voicu

Reputation: 750

The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.

A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)

I also attached an alternative solution:

body {
    background: #162CEA;
    padding: 2rem 1rem;
}

.heading {
  color: #FFF;
}

.button {
  padding: .5rem 1rem;
  border-radius: .5rem;
}

.filled-button {
  background: #FFF;
}

.outline-button {
  border: 3px solid #FFF;
  color: #FFF;
}

<h1 class="heading">hey<h1>

<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>

Upvotes: 2

sao

Reputation: 1821

this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>

    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
</head>
<body>
    <div>
        <h1 class="headline">hey</h1>
        <div class="buttons">
            <a class="filled-button"><p class="filled-button-text">sign up</p></a>
            <a class="outlined-button"><p class="outlined-button-text">log in</p></a>
        </div>
    </div>
</body>

<style>
body {
    background: #162CEA;
}
.headline {
    width: 34%;
    margin-top: 15%;
    margin-left: 15%;
    margin-bottom: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 64px;
    line-height: 75px;
    color: #FFFFFF;
}
.filled-button-text {
    display: table-cell;
    vertical-align: middle;
}
.filled-button {
    float: left;
    width: 140px;
    height: 48px;
    margin-left: 15%;
    background: #FFFFFF;
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    display: table;
    text-align: center;
}
.outlined-button {
    width: 140px;
    height: 48px;
    box-sizing: border-box;
}
.outlined-button-text {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    color: #FFFFFF;
}
.buttons {
    border: 2px solid black;
}
</style>
</html>

Upvotes: 0

Borders only showing on the sides in html

Answers (5)

Related Questions