Hello,
i just created a navigation bar for testing purposes and there is something wrong with it, the buttons for the list aren’t exactly next to each other.
I want to achieve it just as on this site (sitepoint) on the upper right navigation (Podcast, Articles).
Thanks for your help.
If we’re talking about the navbar in your code, it is fixed to the bottom of the window and doesn’t handle narrow widths well. Where is the top menubar with the buttons on the right that aren’t spaced as you wish them to be? Sorry, but I don’t do “mixed messages” very well and I’m a little confused here.
Uhm yeah sorry about that. Basically I want the buttons to be right next to each other so that there is no gap between them. The position of the navbar itself doesn’t matter.
By saying I want it like on the site (sitepoint) I meant the non-existant gap between the Podcast and Articles button, not the position on the page.
Hope this clears things up, my english is not that good.
OK, there is no space between these anchors. I trust that you can position them on the page wherever you wish.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="stylespacex.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400,700" rel="stylesheet">
<title>nav bar</title>
<style>
a {outline:1px dashed magenta;}
body {
padding:0;
margin:0;
}
/* the page's navigation css */
#navigation-bar {
width:100%;
background-color:#ccc;
}
#navigation-list {
list-style:none;
display:table;
width:100%;
text-align:right;
word-spacing:-.5em;
padding-left:0;
margin:0;
}
li.navigation-link {
display:inline-block;
word-spacing:0;
font-size:18px;
text-decoration:none;
}
a.navigation-link {
display:block;
text-decoration:none;
font-family:"Roboto", sans-serif;
font-weight:400;
color:white;
padding:15px;
}
a.navigation-link:hover {
color:#1B2526;
background-color:white;
padding:15px;
}
</style>
</head>
<body>
<div id="body-elements">
<div id="navigation-bar">
<ul id="navigation-list">
<li class="navigation-link"><a class="navigation-link" href="">Home</a></li>
<li class="navigation-link"><a class="navigation-link" href="">About</a></li>
<li class="navigation-link"><a class="navigation-link" href="">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
In old times, before the common support of css tables, one just floated the list right and the items left with block anchors.
#navigation-list {
float:right;
list-style:none;
padding-left:0;
margin:0;
}
li.navigation-link {
float:left;
font-size:18px;
}
a.navigation-link {
display:block;
text-decoration:none;
font-family:"Roboto", sans-serif;
font-weight:400;
color:white;
padding:15px;
}
In this case it works the same with float and block removing white-spaces.
EDIT)
@ronpat reminded me to clear the float in the #navigation-bar.
#navigation-bar {
overflow:hidden; /* clearing floats if this parent div is static (width can be auto) */
width: 100vw; /* to not collapse a width using vw or any length unit is needed if clearing by table-caption (the generated anonymous table parent has no width) */
display:table-caption;
width: 100%; /* width is optional if clearing by any options below but is needed for the list to float all right (no pun) */
display:table;
display:inline-table;
display:inline-block;
position:absolute;
position:fixed; /* as the OP choosed */
}
Just don’t forget to clear the float on #navigation-list. 
It’s all claered now,. thaknks for the reminder.
Thank you, that is exactly what I wanted.
I just started learning html & css and still this was very comprehensive!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.