Problem making borders the same height as my div

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I am trying to make the exact same navigation bar as the one on the screenshot but I have a problem doing it, I also have other lists in my page and it causes troubles.

Here's what I have done

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



li {

  float: left;

  border-right: 1px solid black;

}



li a {

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

Page

edited Nov 16 '18 at 14:07

chazsolo

5,40011234

asked Nov 16 '18 at 14:02

Hector Bertucat

Where exactly are you stuck? Your question isn't too clear about what you need help with.

– Roko
Nov 16 '18 at 14:09

What's the problem, the height of your borders seem fine in your snippet.

– Mark Baijens
Nov 16 '18 at 14:09

Your borders exactly the same height as your div. You can see this in the developer console. Try to rephrase the task.

– Smollet777
Nov 16 '18 at 14:12

I want to make the same navigation bar as on the page (partie1, partie2 etc..) but I don't know how to do it..

– Hector Bertucat
Nov 16 '18 at 14:13

if you have a border on the nav then you need to also use a clearfix. if everything inside is floating else the container wont know it exists - css-tricks.com/snippets/css/clear-fix - I have never liked using display:inline-block as it does not work well for everything

– Andrew
Nov 16 '18 at 14:29

add a comment |

I am trying to make the exact same navigation bar as the one on the screenshot but I have a problem doing it, I also have other lists in my page and it causes troubles.

Here's what I have done

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



li {

  float: left;

  border-right: 1px solid black;

}



li a {

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

Page

edited Nov 16 '18 at 14:07

chazsolo

5,40011234

asked Nov 16 '18 at 14:02

Hector Bertucat

Where exactly are you stuck? Your question isn't too clear about what you need help with.

– Roko
Nov 16 '18 at 14:09

What's the problem, the height of your borders seem fine in your snippet.

– Mark Baijens
Nov 16 '18 at 14:09

Your borders exactly the same height as your div. You can see this in the developer console. Try to rephrase the task.

– Smollet777
Nov 16 '18 at 14:12

I want to make the same navigation bar as on the page (partie1, partie2 etc..) but I don't know how to do it..

– Hector Bertucat
Nov 16 '18 at 14:13

if you have a border on the nav then you need to also use a clearfix. if everything inside is floating else the container wont know it exists - css-tricks.com/snippets/css/clear-fix - I have never liked using display:inline-block as it does not work well for everything

– Andrew
Nov 16 '18 at 14:29

add a comment |

I am trying to make the exact same navigation bar as the one on the screenshot but I have a problem doing it, I also have other lists in my page and it causes troubles.

Here's what I have done

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



li {

  float: left;

  border-right: 1px solid black;

}



li a {

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

Page

edited Nov 16 '18 at 14:07

chazsolo

5,40011234

asked Nov 16 '18 at 14:02

Hector Bertucat

I am trying to make the exact same navigation bar as the one on the screenshot but I have a problem doing it, I also have other lists in my page and it causes troubles.

Here's what I have done

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



li {

  float: left;

  border-right: 1px solid black;

}



li a {

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

Page

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



li {

  float: left;

  border-right: 1px solid black;

}



li a {

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



li {

  float: left;

  border-right: 1px solid black;

}



li a {

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

html css navbar

edited Nov 16 '18 at 14:07

chazsolo

5,40011234

asked Nov 16 '18 at 14:02

Hector Bertucat

edited Nov 16 '18 at 14:07

chazsolo

5,40011234

asked Nov 16 '18 at 14:02

Hector Bertucat

edited Nov 16 '18 at 14:07

chazsolo

5,40011234

edited Nov 16 '18 at 14:07

chazsolo

5,40011234

edited Nov 16 '18 at 14:07

chazsolo

5,40011234

asked Nov 16 '18 at 14:02

Hector Bertucat

asked Nov 16 '18 at 14:02

Hector Bertucat

asked Nov 16 '18 at 14:02

Hector Bertucat

Where exactly are you stuck? Your question isn't too clear about what you need help with.

– Roko
Nov 16 '18 at 14:09

What's the problem, the height of your borders seem fine in your snippet.

– Mark Baijens
Nov 16 '18 at 14:09

Your borders exactly the same height as your div. You can see this in the developer console. Try to rephrase the task.

– Smollet777
Nov 16 '18 at 14:12

I want to make the same navigation bar as on the page (partie1, partie2 etc..) but I don't know how to do it..

– Hector Bertucat
Nov 16 '18 at 14:13

if you have a border on the nav then you need to also use a clearfix. if everything inside is floating else the container wont know it exists - css-tricks.com/snippets/css/clear-fix - I have never liked using display:inline-block as it does not work well for everything

– Andrew
Nov 16 '18 at 14:29

add a comment |

Where exactly are you stuck? Your question isn't too clear about what you need help with.

– Roko
Nov 16 '18 at 14:09

What's the problem, the height of your borders seem fine in your snippet.

– Mark Baijens
Nov 16 '18 at 14:09

Your borders exactly the same height as your div. You can see this in the developer console. Try to rephrase the task.

– Smollet777
Nov 16 '18 at 14:12

I want to make the same navigation bar as on the page (partie1, partie2 etc..) but I don't know how to do it..

– Hector Bertucat
Nov 16 '18 at 14:13

if you have a border on the nav then you need to also use a clearfix. if everything inside is floating else the container wont know it exists - css-tricks.com/snippets/css/clear-fix - I have never liked using display:inline-block as it does not work well for everything

– Andrew
Nov 16 '18 at 14:29

Where exactly are you stuck? Your question isn't too clear about what you need help with.

– Roko
Nov 16 '18 at 14:09

What's the problem, the height of your borders seem fine in your snippet.

– Mark Baijens
Nov 16 '18 at 14:09

Your borders exactly the same height as your div. You can see this in the developer console. Try to rephrase the task.

– Smollet777
Nov 16 '18 at 14:12

I want to make the same navigation bar as on the page (partie1, partie2 etc..) but I don't know how to do it..

– Hector Bertucat
Nov 16 '18 at 14:13

if you have a border on the nav then you need to also use a clearfix. if everything inside is floating else the container wont know it exists - css-tricks.com/snippets/css/clear-fix - I have never liked using display:inline-block as it does not work well for everything

– Andrew
Nov 16 '18 at 14:29

add a comment |

1 Answer
1

active

oldest

votes

So it seems your real question was how to make your navigation look like the one in the picture.

To make this more clear I went ahead and added the border around the #nav element.

You should get rid of float:left and instead set your li to display : inline-block.

Then move the padding from the a tag to the li tag.

Then decrease the vertical padding to the desired height. I think this is enough to get the desired look.

I also have other lists in my page and it causes troubles.

You should use classes and css selectors then. Instead of just ul and li you should add classes to your elements and then select them in the css.

In the example below I simply selected them based on the root element that has the id nav. So now this css shouldn't effect anything else on your page.

#nav {

  width : 100%;

  border : 1px solid black;

}



#nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



#nav li {

  display : inline-block;

  padding: 8px 16px;

  border-right: 1px solid black;

}



#nav li a {

  color: black;

  text-align: center;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

answered Nov 16 '18 at 14:25

Khauri McClain

2,3001414

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53339352%2fproblem-making-borders-the-same-height-as-my-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

So it seems your real question was how to make your navigation look like the one in the picture.

To make this more clear I went ahead and added the border around the #nav element.

You should get rid of float:left and instead set your li to display : inline-block.

Then move the padding from the a tag to the li tag.

Then decrease the vertical padding to the desired height. I think this is enough to get the desired look.

I also have other lists in my page and it causes troubles.

You should use classes and css selectors then. Instead of just ul and li you should add classes to your elements and then select them in the css.

In the example below I simply selected them based on the root element that has the id nav. So now this css shouldn't effect anything else on your page.

#nav {

  width : 100%;

  border : 1px solid black;

}



#nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



#nav li {

  display : inline-block;

  padding: 8px 16px;

  border-right: 1px solid black;

}



#nav li a {

  color: black;

  text-align: center;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

answered Nov 16 '18 at 14:25

Khauri McClain

2,3001414

add a comment |

So it seems your real question was how to make your navigation look like the one in the picture.

To make this more clear I went ahead and added the border around the #nav element.

You should get rid of float:left and instead set your li to display : inline-block.

Then move the padding from the a tag to the li tag.

Then decrease the vertical padding to the desired height. I think this is enough to get the desired look.

I also have other lists in my page and it causes troubles.

You should use classes and css selectors then. Instead of just ul and li you should add classes to your elements and then select them in the css.

In the example below I simply selected them based on the root element that has the id nav. So now this css shouldn't effect anything else on your page.

#nav {

  width : 100%;

  border : 1px solid black;

}



#nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



#nav li {

  display : inline-block;

  padding: 8px 16px;

  border-right: 1px solid black;

}



#nav li a {

  color: black;

  text-align: center;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

answered Nov 16 '18 at 14:25

Khauri McClain

2,3001414

add a comment |

So it seems your real question was how to make your navigation look like the one in the picture.

To make this more clear I went ahead and added the border around the #nav element.

You should get rid of float:left and instead set your li to display : inline-block.

Then move the padding from the a tag to the li tag.

Then decrease the vertical padding to the desired height. I think this is enough to get the desired look.

I also have other lists in my page and it causes troubles.

You should use classes and css selectors then. Instead of just ul and li you should add classes to your elements and then select them in the css.

In the example below I simply selected them based on the root element that has the id nav. So now this css shouldn't effect anything else on your page.

#nav {

  width : 100%;

  border : 1px solid black;

}



#nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



#nav li {

  display : inline-block;

  padding: 8px 16px;

  border-right: 1px solid black;

}



#nav li a {

  color: black;

  text-align: center;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

answered Nov 16 '18 at 14:25

Khauri McClain

2,3001414

So it seems your real question was how to make your navigation look like the one in the picture.

To make this more clear I went ahead and added the border around the #nav element.

You should get rid of float:left and instead set your li to display : inline-block.

Then move the padding from the a tag to the li tag.

Then decrease the vertical padding to the desired height. I think this is enough to get the desired look.

I also have other lists in my page and it causes troubles.

You should use classes and css selectors then. Instead of just ul and li you should add classes to your elements and then select them in the css.

In the example below I simply selected them based on the root element that has the id nav. So now this css shouldn't effect anything else on your page.

#nav {

  width : 100%;

  border : 1px solid black;

}



#nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



#nav li {

  display : inline-block;

  padding: 8px 16px;

  border-right: 1px solid black;

}



#nav li a {

  color: black;

  text-align: center;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

#nav {

  width : 100%;

  border : 1px solid black;

}



#nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



#nav li {

  display : inline-block;

  padding: 8px 16px;

  border-right: 1px solid black;

}



#nav li a {

  color: black;

  text-align: center;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

#nav {

  width : 100%;

  border : 1px solid black;

}



#nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



#nav li {

  display : inline-block;

  padding: 8px 16px;

  border-right: 1px solid black;

}



#nav li a {

  color: black;

  text-align: center;

}

<div id="nav">

  <ul>

    <li><a href="#anchor1">Partie 1</a></li>

    <li><a href="#anchor2">Partie 2</a></li>

    <li><a href="#anchor3">Partie 3</a></li>

    <li><a href="#anchor4">Partie 4</a></li>

  </ul>

</div>

answered Nov 16 '18 at 14:25

Khauri McClain

2,3001414

answered Nov 16 '18 at 14:25

Khauri McClain

2,3001414

answered Nov 16 '18 at 14:25

Khauri McClain

2,3001414

answered Nov 16 '18 at 14:25

Khauri McClain

2,3001414

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky