I have created a navbar that i wish to make it 100%.
Here is my HTML code for better clarity
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<title>iPolice</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<asp:ContentPlaceHolder ID="head" runat="server" >
</asp:ContentPlaceHolder>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<ul id="nav" >
<li>Home</li>
<li>About</li>
<li>Department</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</head>
However, despite putting width:100%; It still remain the same.
I was hoping that all my 5 choices will be centered and divided evenly like this. However, i'm not even able to do it without my width being 100%.
This is the CSS of my navbar
#nav {
position:absolute;
left:0%;
top:0%;
margin: 0px;
padding: 0;
border: 1px yellow;
border-bottom: none;
width:100%;
}
#nav li a, #nav li {
text-align: center;
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #5FFB17;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
I also have tried to change the #navbar's position to relative. However, the navbar's left, top position wont be 0% as what my code written. I cant really see anything that is holding my navbar from becoming 100%.
I have also tried nesting my navbar in a different CSS attributes with width as 100% as well
<div id="navbarwidth">
<ul id="nav" >
<li>Home</li>
<li>About</li>
<li>Department</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</div>
CSS
#navbarwidth {
width:100%;
position:absolute;
}
as icktoofay said, your #nav element is occupying the whole width, but the elements within it are floated left, and the nav has no background, so it looks like it isn't. Here's a fixup:
http://jsfiddle.net/DgceP/
remove the float on the li and a elements and set them to display: inline-block
move the background gradient to #nav
set text-align: center on #navbarwidth
set a min-width on the li elements so they will have similar widths ( except very long ones )
If you don't want the menu to wrap on small screens, set a min-width on #navbarwidth or #nav
#navbarwidth {
width:100%;
position:absolute;
text-align: center;
}
#nav {
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
position:absolute;
left:0%;
top:0%;
margin: 0px;
padding: 0;
border: 1px yellow;
border-bottom: none;
width:100%;
}
#nav li a, #nav li {
text-align: center;
display: inline-block;
min-width: 70px;
}
#nav li {
list-style: none;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #5FFB17;
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
Your navigation bar is taking up all the horizontal space – it's just that
it has no height; and
you haven't applied a background to see it.
These problems have rather obvious solutions:
Apply an explicit height to the navigation bar and its elements.
Apply a background.
The items still won't be centered because you're doing float: left, but that's a different problem.
The problem is most likely because your navbar is within a div that has a finite width. Therefore, setting the navbar width to 100% only lets it fill the div it is in (not the entire page).
If this is indeed the case, simply take the navbar out of the parent div or adjust the parent div in some way. (i.e. center it, or make its width bigger)
Related
I have a nav bar that consists of an UL with several LI items. The active nav button has a different background color, but I also need a small bottom border on the button.
When applying a border, this appears outside of the LI. When working with divs, you can use box-sizing:border-box to get the borders inside the div. But how can you offset the border on a LI item ??? (list-style-position seems to have no effect)
My scss code:
nav {
ul {
li {
float: left;
padding: 0;
box-sizing: border-box;
list-style-position: inside;
&.active {
background-color: white;
border-bottom: solid 6px blue;
box-sizing: border-box;
list-style-position: inside;
}
}
}
}
When working with divs, you can use box-sizing:border-box to get the
borders inside the div.
To clarify, box-sizing:border-box does not make the border to be within the element (change offset), it make the border size be included in the width or height, when set, so i.e. if you give li a height of 25px and bottom border 5px, the inner height will decrease to 20px.
But how can you offset the border on a LI item
You can't offset the border, one workaround to show/hide a border on an element is to use a pseudo element, which will avoid having the element jump/resize when toggle the border, but there are more ways, such as linear-gradient (shown in below sample when hover)
body {
background: lightgray;
}
nav ul li {
position: relative;
float: left;
padding: 0 5px;
list-style-type: none;
}
nav ul li.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: -6px;
background-color: white;
border-bottom: solid 6px blue;
z-index: -1;
}
/* or one can use linear-gradient */
nav ul li:hover {
background: linear-gradient(
to bottom, white calc(100% - 5px), blue 5px
) no-repeat left bottom;
}
<nav>
<ul>
<li>
Some text
</li>
<li>
Some text
</li>
<li class="active">
Some text
</li>
<li>
Some text
</li>
</ul>
</nav>
Updated
There is actually a way to offset the border, using border-image-outset, shown in this answer:
border-image-outset in CSS
Another fast and clean way to create an inside border is to create an inset shadow without a blur. You don't even need box-sizing or list-style.
nav {
ul {
li {
float: left;
padding: 0;
&.active {
background-color: white;
box-shadow: 0px -6px 0px red inset;
}
}
}
}
I'm using floats and trying to keep each one of three buttons in a navigation menu to ~33.3% so that it fills the screen and doesn't break when the window size shrinks, nor should it leave gaps on the ends when the browser window gets wider.
Here is a fiddle http://jsfiddle.net/xxd1vdcj/1/
<div id ="nav">
<ul>
<li id="dawn" >Tradition</li>
<li id="dusk" >Styles</li>
<li id="night">Contact</li>
</ul>
</div>
#nav ul li{
display:block;
//width:19.3%;
width: 33%;
line-height: 3em;
margin:0 auto;
padding:0;
text-align:center;
float:left;
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
color: #b0c4ff;
font-size: 18px;
margin-top: 140px;
opacity: 1;
border: 1px solid black;
}
As I've said in my comment, <a> is not a valid <ul> children.
100/3 = 33.333.. but you used 33% which on larger screen sizes encounted for the 1px (up to 6px) for your three LI widths, than once you resized your page, the remaining availiable width % was not enough to contain the fixed (1px) border width, leading to a LI breaking beneath to the nearest available space.
using box-sizing
Some box-sizing will fix your issue of borders adding up the available space.
*{margin:0; padding:0;} /* Global reset (also to remove 8px margin from Body) */
#nav ul{
display:block;
margin:10px;
margin-top: 140px;
}
#nav ul li{
box-sizing:border-box;
border: 1px solid black;
display:block;
float:left;
width: 33%;
line-height: 3em;
text-align:center;
color: #b0c4ff;
font-size: 18px;
}
http://jsfiddle.net/xxd1vdcj/5/
Now you can even go using 33.333% for your LI width.
using display:table and table-layout
Since box-sizing is not supported by older browsers you can go and use this simple solution:
*{margin:0;padding:0;}
#nav{
margin:10px;
margin-top: 140px;
}
#nav ul{
display:table; /* Table!! yey */
width:100%;
table-layout: fixed; /* To fix LI widths */
}
#nav ul li{
border: 1px solid black;
display: table-cell; /* Note */
line-height: 3em;
text-align:center;
color: #b0c4ff;
font-size: 18px;
}
which excels at what tables are born for!
http://jsfiddle.net/xxd1vdcj/7/
I have two background images, but I cannot display both of them (one of them is invisible).
Another problem is the padding-top for li a element is not working.
HTML:
<ul class="menu">
<li class="item-101 current active">Home</li>
<li class="item-102">Merchants / Shops</li>
<li class="item-103">Contact us</li>
</ul>
CSS:
* {
margin: 0;
}
#left #menu ul.menu {
list-style: none;
padding: 0;
}
#left #menu ul.menu li {
background: url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no- repeat, url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat;
background-position: left 0px, 200px 0px;
width: 294px;
height: 44px;
padding: 0 0 5px 0;
}
#left #menu ul.menu li a {
text-transform: uppercase;
text-decoration: none;
font-style: italic;
padding: 15px 0 0 17px;
color: #336699;
}
See full example here: http://jsfiddle.net/BWagZ/
The questions are:
1) How to make two background images to appear on button. You can think that the first image is background image for button. But the second image is a small arrow that should be displayed on the right side of the button. Currently this image doesn't appear at all (but it is somwhere there).
2) Why padding-top for li elements are not working? I want text in li element to have top padding in the button.
You must add a div inside anchor tag for double background and cover full button area
Check out fiddle
HTML
<div id="left">
<div id="menu">
<ul class="menu">
<li class="item-101 current active"><div>Home</div></li><li class="item-102"><div>Merchants / Shops</div></li><li class="item-103"><div>Contact us</div></li></ul>
</div>
</div>
CSS
* {
margin: 0;
}
#left #menu ul.menu {
list-style: none;
padding: 0;
}
#left #menu ul.menu li {
background: url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat;
background-position: left 0px, 200px 0px;
width: 294px;
height: 30px;
padding: 14px 0 5px 0;
}
#left #menu ul.menu li a {
text-transform: uppercase;
text-decoration: none;
font-style: italic;
color: #336699;
}
#left #menu ul.menu li a div {
color: #336699;
background:url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat center right;
width: 235px;
}
Working fiddle
I think you want the links to have a top-offset in the li element. Then you'd have to set a padding-top in the li element, not the a element, which works for me (Chromium). I don't understand your image-problem.
Try setting some z-index for each background, also when u put the arrow image first you will see both.. now you just have to adjust them.
Is this good enough? http://jsfiddle.net/goodfriend/BWagZ/10/
You should change the order of your backgrounds around.
background: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat 200px 0px,
url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat left 0px;
And the a elements you can adjust by giving them a line-height property.
Here you go: http://jsfiddle.net/MrLister/yFMZf/1
Your method is good. You just have to swapp images between them.
Meaning:
background: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat, url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat;
background-position: 200px 0px, left 0px;
Do you want to achive something like this?
Demo
Answer 1:
Change the orders of the images and positioning accordingly.
Replace your CSS with the following:
#left #menu ul.menu li {
background-image: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png), url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png);
background-position: 200px 7px, left 0px;
background-repeat: no-repeat;
width: 294px;
height: 44px;
padding: 0 0 5px 0;
}
Answer 2:
Add display: block; css rule in the following line:
#left #menu ul.menu li a
It will make the whole list clickable and your padding will work also.
I am working on a menu with a custom font and in chrome (and safari) it is spaced exactly how I want it.
http://american-motorsports.net/2012/
When I view it in firefox, the kerning of the font is a little different causing a little black gap on the far right menu item. I can see the difference between the F and A in FABRICATION
The HTML is very simple right now:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/css/reset.css" />
<link rel="stylesheet" href="resources/css/main.css" />
<title><?php echo date('M d, Y') . ' | '; ?>American Motorsports - Off-Road Fabrication</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<img src="resources/images/logo.png" width="291" height="150" alt="American Motorsports - Off-Road Fabrication" />
</div>
<div id="menu">
<span class="item">HOME</span><span class="item">SUSPENSION</span><span class="item">FABRICATION</span><span class="item">PROJECTS</span><span class="item">MEDIA</span><span class="item">CONTACT</span>
</div>
</div>
<div id="main"></div>
</div>
</body>
</html>
and the CSS consists of this so far
#font-face {
font-family: bebas;
src: url("../fonts/bebas.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
font-size: 14px;
color: #ccc;
line-height: 20px;
margin: 0;
padding: 0;
background: url("../images/bg.png") #202020;
}
#wrap {
background: url("../images/bg_main.jpg") no-repeat center top;
min-height:800px;
}
#header {
border-top: 5px solid #3a3a3a;
height:150px;
width:970px;
background-color:#000000;
margin: 50px auto;
}
#logo {
width:324px;
height:179px;
background-color:#121212;
border-top: 5px solid #3a3a3a;
border-bottom: 5px solid #ffffff;
margin-top:-22px;
float:left;
}
#logo img {
margin-left:13px;
margin-top:17px;
}
#menu {
width:646px;
height:150px;
float:right;
margin:0;
padding:0;
}
#menu a {
margin:0;
padding:0;
}
.item {
font-family:bebas;
font-size:18px;
height:150px;
display:inline-block;
text-align:center;
line-height:8em;
color:#fff;
cursor:pointer;
padding-left:20px;
padding-right:20px;
margin:0;
text-shadow: 0 3px 3px #111;
}
.item:hover {
background: -moz-linear-gradient(top, #3a3a3a 0%, #101010 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#101010));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: linear-gradient(to bottom, #3a3a3a 0%,#101010 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#101010',GradientType=0 );
}
#main {
width:970px;
/*background-color:#ffffff;*/
margin: 0 auto;
}
So the question is how to remove the gap so it looks like chrome and safari or fix the kerning issue..I just dont want that gap in firefox
You'd have to wrap a span around the offending letters and tweak the CSS letter-spacing: property until you get what you want.
The finesse of good typography, especially when it comes to custom fonts, isn't quite ready for prime-time on browsers.
Plan B: use an image.
A quick dirty solution is
#menu{
white-space: nowrap;
overflow: hidden; /* means you don't get a dirty edge, but the last link may be smaller on the right */
}
Ideally though, you shouldn't be relying on the width of the font to make your menu look right.
If you have the time, give each of these links a class, and a custom width.
Or even better, use a list with links in each item, to get greater control.
For example, if you add:
.item{
padding: 0;
width: 16.66%; /* assuming you always have 6 links */
}
...they will always fit, but some will look rubbish.
For the most professional-looking finish, you'll want to give each a class and custom width.
I don’t see what gap you are trying to remove, but what you are describing is the issue that Firefox (modern versions) apply kerning by default, if defined in a font. Other browsers don’t. So it’s a matter of kerning vs. no kerning, not a difference in kerning. Kerning is generally considered as typographically desirable. But if you really want to prevent Firefox from kerning, that’s possible using font feature settings, e.g. in this case with
#menu { -moz-font-feature-settings: "kern" 0; }
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet