I know there have been many questions about ul auto indents, I've tried with no success many of those answers and I have the additional problem of when adding a container with padding, it seems to only pad one side.
Basically I'm trying to get a ul bar fixed to the bottom of the window. This bar is inside a container (main) to give it padding from either side of the window). It is designed to auto expand with the width of the window (liquidish) so there is no defined width beyond the initial width=device width.
When written by itself, I get a small auto indention on the left side of the ul. I've tried adding 0 padding and margins to the ul and li elements and that seems to have no effect as well as others. When I add in the container it seems to pad only the side with the indent problem. I'm sure its something simple and stupid, but I appreciate any help.
As an aside.. the width of the li elements being 33.3% is due to using a spacing box hack found on stackoverflow. The use of it doesn't change/help/hurt anything in this problem, so I omitted it to keep this a little more simple.
JSFiddle Link http://jsfiddle.net/XdHXf/1/
HTML
<div class="main">
<nav>
<ul>
<li>Main</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
</div>
CSS
.main{
width: 100%;
padding: 0 1em;
}
nav{
position: fixed;
bottom: 0px;
background: #455868;
width: 100%;
z-index: 1000;
}
nav ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
nav li{
position: relative;
float: left;
width: 33.3%;
text-align: center;
background: #455868;
padding: 0;
margin: 0;
}
nav li a{
text-decoration: none;
display: inline-block;
width: 100%;
padding: 15px 0;
}
This comes from the browser's builtin stylesheet. If you add
body {
margin: 0;
}
the small extra space goes away.
As an alternative, you get similar results, when you check Normalized CSS under Fiddle Options.
Related
I have this navbar:
There is too much space at the left and I want the same space at the left and at the right. I have this code:
<!--html-->
<nav>
<ul>
<li>Tutorials</li>
<li>News</li>
</ul>
</nav>
/*css*/
nav{
background-color: rgb(255, 86, 86);
margin: auto;
height: 50px;
padding: 10px;
width: fit-content;
margin: auto;
}
nav li{
display: inline;
padding: 10px;
}
Looks like you're butting heads with the browser defaults.
It's common to reset the browser's default padding/margin for all elements to zero because some elements (like ul and li) can have some default margin/padding. Also, you didn't specify the list-style-type of the list to be none, which I assume means the unordered list defaults to bullets, a result you don't want.
Here's what I would personally do to accomplish what you're looking for, excluding colors:
* {
margin: 0;
padding: 0;
}
nav {
padding: 10px;
}
nav ul {
list-style-type: none;
display: flex;
}
nav li {
margin-right: 10px;
flex-shrink: 0;
}
nav li:last-child {
margin-right: 0;
}
This puts a 10px space around all of the items, and then a 10px space between each of them. It also forces the list to display horizontally without needing to inline the list items. The CSS Tricks guide to flex box might be helpful to you.
There's many right answers here, so try to have fun with it and pick the method that feels the best to you.
I have a nav containing a list of links. The list has a line-height: 1em. However the links have a height greater than 1em and overlap the preceeding list item, making it hard to click the items.
nav {
height: 100%;
overflow: hidden;
position: absolute;
top: 7.2rem;
left: 0;
right: 0;
font-size: 50px;
line-height: 1em;
}
nav li {
background-color: green;
}
nav a {
background-color: pink;
}
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Ethics</li>
<li>Contact</li>
</ul>
</nav>
This can be seen more easily if I add margin-bottom to the nav li. The links (pink) have greater height than the line-height of the list items (green):
How do I get the links to have the same height as the list items? So that there is no overlapping?
Note. there is no padding on the links, so I don't know why they are larger. It doesn't make any difference if I add height:1em to the nav a. I've tried display:inline-block - which makes the pink background the same height as the green background, but strangely the links are still clickable just above and below the pink background! The clickable area isn't confined to the pink background.
NEW INFO
Links have a greater height than the font-size.
The size of the link is in no way influenced by the line-height.
For example a line of text with font-size: 50px has a height of 50px. Yet the link inside the line of text has a height of 68px (there is no padding or margin on the link).
I presume the clickable area around the link has to take into account all the ascenders and descenders of the typeface. And this is why it has a greater height than the font-size.
Hence if the line-height is set to 1em the links overlap. Using display: inline-block displays the pink background as being the same height as the green background, but, (strangely) the clickable area is still larger than the 50px pink background height.
Unless there is a way to constrain the height of the link to the height of the font-size, then I will have to increase the line-height to account for this difference.
This JS Fiddle shows how the links are bigger than the font-size: https://jsfiddle.net/utqafz61/
... so if the line-height is the same as the font-size (1em) then the links will overlap making it difficult to click the right link. I first noticed this on this website: https://www.hassellstudio.com on the nav menu the links overlap. The mouse pointer can be on one link, but the link below is highlighted!
the weird thing you were doing is to set the font-size of nav which is parent of ul li to 10rem that had made them bigger and also line-height is different from the actual height just se here line-height
example
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
top: 7.2rem;
left: 0;
right: 0;
/* font-size: 10rem;*/
}
nav li {
margin: 10px;
background-color: green;
}
nav a {
background-color: pink;
}
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Ethics</li>
<li>Contact</li>
</ul>
</nav>
Just add display: inline-block to your a elements.
Anchor tags are naturally inlined by user agent stylesheets which is what's causing your overflow.
The problem is with the line-height in your nav, its not giving any space between the lines ()line-height: 1em is only allocating the same as the font-size (50px) so there is no room for the default space around the letters). You can make line-height larger (1.1em will works with your code above):
nav { line-height: 1.1em; }
Or just remove it altogether so it uses the default.
UPDATE:
If you cannot change the line-height from 1em, There are 2 fundamental problems that are causing issues to achieve this:
a tags are inline by default which makes it harder to work with margins & padding etc.
most fonts have extra space above and below so that the ascenders and descenders don't touch - this is down to the font glyphs themselves. Some fonts are "worse" than others.
You could force the link not to overflow outside the li using the following, and it will prevent the effect you see where the mouse looks like its over one link but actually activates another:
nav li {
background-color: green;
overflow: hidden; /* this will crop off anything outside the element */
}
However depending on the font, this could crop a tiny part off the descenders of the letters.
Working snippet:
ul {
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
list-style: none;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
line-height: 1em;
font-size: 3rem;
font-family: "Times New Roman";
}
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
}
nav li:hover a{
background-color: yellow;
}
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Ethics</li>
<li>Contact</li>
</ul>
</nav>
There isn't an easy way around this without changing the line-height (even slightly), but I tried various hacks to see if we could move the link text up a couple of pixels without moving the active link.
If it is possible for you to make the a to be display: block, then this seems to work:
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
display: block;
/* tweak the values below to suit */
margin-top: -2px;
padding-bottom: 2px;
}
Solution: Use overflow:hidden, negative margin and padding as workaround this
The negative margin moves up the top of the link (which has the extra space) and the padding adds a little space for the descender. The òverflow:hidden on the li crops off the extra.
You can see it working below - Note I have greatly exaggerated the margin and padding to ensure that it works with no overlap, and I added a border around the links to make it clear where the link was:
ul {
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
list-style: none;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
line-height: 1em;
font-size: 3rem;
font-family: "Times New Roman";
}
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
display: block;
margin-top: -20px;
padding-bottom: 20px;
border:1px solid blue;
}
nav li:hover a{
background-color: yellow;
}
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Ethics</li>
<li>Contact</li>
</ul>
</nav>
That's as good as I can come up with, hope one of those options is suitable!
I've created a navigation list with plain and simple HTML and some CSS. It should be on the right side of the page and shouldn't move neither if there is a lot of content on the page nor if the user scrolls down.
After I added some sample text to my website I recognized that the navigation element is more in the left side. Why is this happening and how can I fix this?
This is the first minimal example with just some text:
https://jsfiddle.net/sck6nL6w/2/
And a snippet with some more text where the navigation list is more on the left side than in the first example:
https://jsfiddle.net/7Lsew6gg/3/
Note: Both have the same CSS styles defined:
ul {
list-style-type: none;
padding: 0;
width: 200px;
float: right;
margin: 0 5em 0 0;
right: 0%;
top: 5%;
position: fixed;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
.navigation div {
margin-left: 60px;
}
#content div {
width: 65% !important;
}
Edit:
As #Autista_z mentioned the navigation bar gets moved when there is a scrollbar but I don't want to always show a scrollbar. Isn't there a better way to fix this?
as said by #Autista_z it's just because of scrollbar.
`https://jsfiddle.net/sck6nL6w/4/'
check this updates fiddle.
it's not fix but i want to show you how it's not an issue at all.
all i did is added this line of code
body {
overflow: scroll;
}
#main #home_banner {
position: relative;
}
#main ul li {
position: relative;
display: inline-block;
overflow: hidden;
}
#container {
width: 950px;
background-color: red;
padding: 0;
margin: 0 auto;
}
#container #main {
margin: 0;
padding: 0;
width: 100%;
height: 950px;
background-color: blue;
border-bottom: #adde64 solid 1px;
}
they both have relative positioning and aren't positioned anywhere except the default, and they're both inside main(except the list is created -after- the image in the html).
However the list doesn't appear all the way to the left, instead it appears outwards quite a bit
Theres two things that I can think of the first is ul's have padding by default so
ul
{
padding:0px;
}
The second is that display:inline-block adds a small white-space between objects so to get raid of that:
ul
{
font-size:0px;
padding:0px;
}
Based on the picture you posted, I'm assuming you're referring to the indented images at the bottom. If you aren't using CSS resets you'll need to set the margins for the ul and li elements. You may also need to adjust the padding of the div that the ul is in.
By default, any ul has a margin and a padding value. Set the ul to {margin:0; padding:0;} and it will be top left aligned
IF you want the list all the way to the left, look into padding-start attributes. I think this is what you are asking.
Try setting your lists with the following css:
-moz-padding-start: 0px;
-webkit-padding-start: 0px;
-o-padding-start: 0px;
padding-start: 0px;
padding-left:-0px'
I'm trying to make a banner on my webpage, the part on the top that is 700px wide and 80px high.
Code looks like:
<div class="container-narrow" style="heigth: 80px;">
<img src="#" width="52" height="52" alt="my logo" />
<ul>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
Css:
.container-narrow
{
margin: 0 auto;
max-width: 700px;
background: yellow;
}
ul
{
float: right;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a
{
float: right;
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
What I want is the image and the horizontal menu to be vertically aligned in the center of the 80px. the logo to the left and the menu to the right.
I've tried to set the height and then padd/margin my way to get the job done but it feels rubbish...
Problem:
ul has a width:100%; if you give it a black border you will see that its occupying the width of the page, means it has no space to reside on the left of the logo inside the yellow header.
Removing this width will give the following result: http://jsfiddle.net/YBVe6/
Now since the header has a fixed max width, which is 700px, there's many ways to center the logo and the menu.
Fastest way I can think of is the following:
Give ul a display: inline-block;, (remove float: right;) then give the header a text-align: center;, here's the result : http://jsfiddle.net/YBVe6/1/
And if you want the menu to be displayed in the upper part, just add vertical-align: top;.
To start of, it's a good practice if you have an external CSS, don't put additional CSS in your HTML blocks:
<div class="container-narrow">
and put the height style in your css sheet, as you have a class setup for your div there anyway.
Second, making typo's is a pain if you want your CSS to work properly, so instead of heigth you should use height, will make you div actually 80px high.
Third of all: margins are there the position elements. Use them!
.container-narrow
{
height: 80px;
margin: 0 auto;
max-width: 700px;
background: yellow;
}
img
{
margin-top:14px;
}
ul
{
float: right;
padding: 0;
margin: 0;
list-style-type: none;
margin-top:25px;
}
a
{
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
Edit
This is mostly applicable for vertical alignment. If you want to auto-center horizontally, you can make use of the margin:auto concept. This is possible because a page can't extend beyond the browser width (browser height can extend as you have scrolling available as default behavior).