I've got a horizontal navigation bar on my page which is pushed down a few pixels to overlap with the content of the div below. I want to have some of the links placed behind the background of the content div, but I can't figure out a way to keep some of the links (such as the link to the current page) in front. Here is what I have:
<div id="header">
<ul id="nav">
<li>index</li>
<li>project[]</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="content">
</div>
Relevant CSS:
div#content {
background:#444;
border-radius:15px;
padding:40px 30px 30px 30px;
clear:left
}
div#header {
position: relative;
margin-left:20px;
top: 13px;
}
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
ul#nav li {
display:inline;
}
ul#nav a {
text-decoration:none;
color: #444;
font-size: 30px;
}
I'm using the class of each link to determine if it points to the current page, so I'd like that link to stick out. The problem is that the stacking context for each of these is inside the div or ul.
Try this fiddle: http://jsfiddle.net/PNC7g/ : I tried it on IE7+ and Firefox 9.
The idea is to set position: relative; z-index: 1 to the #content and to every link and the content has the property top: -13px defined. Even if they share the same z-index order position, #content is defined after the list of links (inside the markup), so it will overlap the navigation menu.
But if you later set z-index: 2 to a link (with a special class, like .current), the selected item will be able to overlap the div.
Related
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 have a problem similar to this one:
Bootstrap 3 Align Text To Bottom of Div
Except that its proposed solution doesn't work in my case. My HTML is:
<header class="masthead">
<a class="navbar-brand" href="index.php"><img src="logo.png" alt="My Logo"></a>
<div class="container-fluid">
<div class="navbar-right" id="nav_derecha">
<ul id="lang">
<li><img src="es.png" alt="Español"></li>
<li><img src="en.png" alt="English"></li>
<li><img src="fr.png" alt="Français"></li>
<li><img src="de.png" alt="Deutsch"></li>
</ul>
<ul id="login_area">
Login | Register
</ul>
</div>
</div>
</header>
And my CSS is:
header.masthead {
background-color: #103961;
height: 82px;
margin-bottom: 0px;
box-shadow: none;
}
header.masthead nav {
background: #339966;
border: 0px;
box-shadow: none;
/* max-width: 1100px; */
margin-left: auto;
margin-right: auto;
}
.navbar-brand > img {
width: 270px;
}
#media only screen and ( min-width: 768px ) {
#nav_derecha {
position: relative;
}
#login_area {
position: absolute;
bottom: 0;
right: 0;
}
}
#login_area li a{
color:white !important;
}
#lang li {
display: inline;
}
Using the "position:absolute" trick, the login/register links appear right on top of the language bar. I want the language bar to appear on the upper-right corner, and the login area below it, aligned to the bottom of the header. How can I do this?
I think something like this, is what you are looking for:
.nav-holder{
display:inline-block;
vertical-align:top;
}
#lang{
-webkit-padding-start: 0;
margin:0;
}
http://jsfiddle.net/1w6xr92j/7/
Need to make block elements inline-block elements, so that they sit side by side.
Also, I saw some padding that webkit was putting on the ul by default, so I took that off.
Aligning vertically to the top is all we needed to get the links to sit up at the top.
edit: positioning your masthead relatively, and then your container fluid, absolutely, will contain your links as you want. You can then also set your "right" property so that the container sits however far away from the right side you want.
If you would like anything else clarified, just let me know.
I changed two sections of your CSS to this:
#media only screen and ( min-width: 768px ) {
#nav_derecha {
position: relative;
}
#login_area {
position: absolute;
text-align: right; /* used to say bottom:0; right: 0 -> you can remove this line too, if you wish */
}
}
#login_area{ /* there is no li a inside this ul, so I removed them from the css */
color:white !important;
}
See updated bootply
Hi I am trying to place a simple horizontal navigation bar so as that it floats on top (in the bottom left corner
to be precise) of a header. The header is an image of a simple color gradient and is inside of a div. The code
for the nav bar is placed inside of this in another div, but always appears beneath the header.
Here is the html:
<div>
<img id="Header" src="images/header.jpg"/>
<div>
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
</div>
<img id="Decal" src="images/decal.png"/>
And the relavent CSS:
#Header {
height:205px;
width: 100%;
z-index:1;
}
#Decal {
position: absolute;
z-index: 2;
right: 5px;
top: 1px;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
This has been bugging me for quite awhile so any help is greatly appreciated thanks!
Okay, two options here:
1) As #SaganTheBeast said, you can add your image as a background-image, and then absolutely position your nav inside of that.
2) You can also do the position: absolute trick without moving your image to the background. To do so, you will need to add a wrapper around your HTML, and set display: relative. Then, absolutely position your #nav element, and add bottom: 0px and width: 100%. This will pin your #nav to the bottom of your container element, and ensure it takes up the full-width.
Here's a working demo: http://codepen.io/anon/pen/BWXNQp?editors=1100#0
(Please note, to make it full work as you need, I had to add margin: 0px to your existing #nav css.)
why don't you put that image as background of the outer div using css:
backgroud: url('images/header.jpg')
(remember to set the height of this div with the same height of the image)
and then you can position the inner div with position relative or absolute (if you do this you have to set position: relative for the outer div)
place the navigation between if you are using bootstrap 5.Make sure to add class="fixed-top" in the div
I would need some help me! I work on something and I can't get it to work. :) I want the text align to the center. Here is the picture: http://imageshack.us/photo/my-images/266/sn54.jpg/
Can anyone give me some tip please? Thanks.
Here is the code what I use:
HTML:
<div id="container">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>Protfolio</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
</div><!-- header end -->
</div><!-- container end -->
CSS:
#header{
position: relative;
margin: 60px 0 0 0;
width: 100%;
height: 80px;}
.nav{
background: url(../images/navbar.png) no-repeat 0 0;
width:100%;
height:80px;
text-align:center;
display:block;}
.nav li{
float:left;
list-style: none;
margin: 10px;}
.nav li a{
width:150px;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0 .5em;}
.nav li a:hover {
margin-top: 2px;
background-color: #d0d5d6;}
An easy way of doing this is to add padding to your nav element on the right and left equal to with width of the ribbon sections.
.nav {
padding:0 XXpx; /* XXpx = width of the ribbon ends */
}
.nav li {
width:25%;
text-align:center;
margin:0;
}
As a basis, this should fix your problem. You may have to play around with the exact code to fit your needs based on margins, etc.
Alternatively, check out this tutorial on how to create this type of ribbon with just CSS and not rely on an image at all: http://css-tricks.com/snippets/css/ribbon/
Without knowing the dimensions of the background image its hard to be specific, but try putting the background on the header element rather than the nav. You can then set the width of the nav UL to the width of the inner part of the ribbon image and set a margin 0 auto on it to center it horizontally
I would wrap the ul with a div an this div has the background image. Than you can adjust the ul.
I have a simple UL navigation menu with width of 1000px:
<ul class="menu">
<li class="first">google</li>
<li>google</li>
<li>google</li>
</ul>
So, how can I set the first element to fit the entire UL width and push the other list items on the right (all LIs should be on the same line - horisontal menu)?
I know I could float:left the first and float:right the rest, but this will reverse the order of the right - floated elements.
I need a quick, CSS only solution, working even in IE6.
Thanks in advance!
UPDATE: To clarify, the first element is a logo, the final result is like the header of 9gag.com except the logo should be on the left and all links to the right.
Logo usually should not be a part of navigation menu. It's more appropriate to mark-up it as header (H1 on home page, and H3 on rest pages).
<h3>MyBrand</h3>
<ul>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
You can use then float: right for your UL list itself to align menu to the right.
See this example, i don't know your menu is dynamic, but if you have a 'width' for other's li's, is more easier
Demo: http://jsfiddle.net/e6SWD/12/
.menu {
margin-left: 84px; /* width others 2 li's */
width: 1000px
}
.menu li {
display: inline;
}
.menu li.first {
display: block;
float: left;
margin-left: -84px; /* width others 2 li's */
width: 100%
}
Now with more clarification:
http://jsfiddle.net/6DkVx/2/
ul {
width: 1000px;
position: relative;
text-align: right;
}
li {
display: inline-block;
}
.first {
position: absolute;
top: 0; left: 0;
}
Just use this CSS
.menu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
As stated before separate the logo from the main navigation. Do something like this instead.
<div id="header>
<div id="logo">Logo here</div>
<ul><li>Rest of links here</li></ul>
</div>
The header div is the wrapping div. You could change this to <header></header> if you want to do HTML5 (this will work in all browsers even old ones).
Then set the width of the logo, you can use a link there aswell. And float the ul and logo to the left.