CODEWITHSUNDEEP
htmlcss
nadermx
nadermx

Reputation: 2776

Move border-bottom further away from text

I'm trying to move the border-bottom down so more of my active-link can be seen.

.navigation a.active-link {
    background-border: #red;
    border-style: solid;
    border-bottom: solid white;
    color: black;
    padding:10px;
}


#navigation {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  word-wrap: break-word;
  padding-top: 10px;
  margin-bottom: 15px;
  overflow: hidden !important;
  white-space: no-wrap;
  text-overflow: clip;
  height: 26px;
}

The problem is when I try and increase the padding-bottom it stacks my text and I'm trying to avoid that.

https://jsfiddle.net/akn5r7y5/2/

Upvotes: 1

Views: 5894

Answers (5)

Obink
Obink

Reputation: 329

here is some clue for you.

ok forget what i just said about hr tags.

i just got what is your question, so you wanted to create a navigation with a border bottom, and a full border if you are in that page.. i suggest you to using ul li tags. its a bit comfotable, and dont use too many link if you dont have any responsive yet.

because, the whitegaps u think it's a easy task but it actually a big trouble in here. this <a></a> link should not seperated and you should type the code like this ridiculously like this

<a>link</a><a>link</a>

which mean, you should type it without a gaps in it, if only you put it in li tags, it would be easier to read like this

<li><a>link</a></li><li>
<a>link</a></li><li>
etc

so you only thinking about border inside of a, dont over think about a border in navigation div.

this is the code, have a look

.navigation a.active-link {
    border: solid 1px black;
    color: black;
    padding:10px;
}

.navigation a{
  padding:10px;
  border-bottom: 1px solid black;
}

#navigation {
  text-decoration: none;
  padding-top: 10px;
  padding-bottom:10px
}
hr{
  border:solid black 1px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="col-xs-12 col-lg-10 col-lg-offset-1">
      <div class="navigation" id="navigation">
        <a href="/" class="active-link">Show all</a><a href="#" >title</a><a href="#" >title1</a><a href="#" >title2</a><a href="#" >title3</a><a href="#" >title4</a><a href="#" >title5</a>
      </div>
      </div>

Upvotes: 0

phobia82
phobia82

Reputation: 1257

You can add the padding-bottom you need and set the anchor line-height accordingly so they don't stack

#navigation a {
    line-height:26px;
}

#navigation {
  padding-bottom:26px;
}

https://jsfiddle.net/akn5r7y5/3/

Upvotes: 5

Steyn
Steyn

Reputation: 1321

I think you're making this way harder than you need. Try to prevent using a fixed height. Also use a display: inline-block; on the anchor. This way it has a height you can actually work with. Example:

#navigation {
  border-bottom: 1px solid currentColor;
}

.navigation a {
  color: black;
  padding: 10px;
  display: inline-block;
  text-decoration: none;
}

.navigation a.active-link {
  background: red;
  border: 1px solid black;
  border-bottom: none;
} 
<div class="navigation" id="navigation">
  <a href="/" class="active-link">Show all</a>
  <a href="#" >title</a>
  <a href="#" >title1</a>
  <a href="#" >title2</a>
  <a href="#" >title3</a>
  <a href="#" >title4</a>
</div>

Upvotes: 0

Troyer
Troyer

Reputation: 7013

Remove your padding-top, and use line-height, must be equal to the height of the content, so it will be centered:

Your #navigation must look like this then:

#navigation {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  word-wrap: break-word;
  margin-bottom: 15px;
  overflow: hidden !important;
  white-space: no-wrap;
  text-overflow: clip;
  height: 26px;
  line-height: 26px;
}

Upvotes: 0

alcia
alcia

Reputation: 139

Adding padding-bottom to your navigation should fix your problem.

Read more about box model (paddings, margins etc.) here - https://css-tricks.com/box-sizing/

Upvotes: 0

Related Questions