I have a navigation bar/list that is using only HTML and CSS. The background image for the nav bar is 45px tall.
The list elements have been set with a CSS border-left property. I basically want to have a single vertical separator before each item in the list.
When I change the font in the list to around 30px the height of the border-left fills the 45px height of the div which is good. But when I set the size of the font smaller the border-left no longer fills the height of the div.
How can I set the font in the list small and yet still have the height of the border-left to 45px?
I have placed the code below. Thanks in advance
CSS:
#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 25px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}
#navbar ul{
list-style: none;
margin: 5;
padding: 5;
}
#navbar li{
border-left: solid 1px white;
display: inline;
padding: 1px 10px 1px 1px;
margin: 10px;
}
HTML:
<div class="clear" id="navbar">
<ul>
<li>Home</li>
<li>Start</li>
<li>In Jouw Regio</li>
</ul>
</div>
Here's a solution:
http://jsfiddle.net/bQe6W/1/
I changed the following
#navbar li {
display: inline-block;
line-height: 45px;
margin: 0 10px;
}
Also set the background of the div to gray so you can see the example!
For #navbar li change the display to inline-block and set the height to 100% and set the line-height to 45px.
Related
I have a anchor containing a span element containing my text. The span element has these attributes
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
Now I want to create a shadow behind the border, but not the whole text. How would I do that without giving up on responsiveness?
.selected {
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 10px 10px 10px #59DFB8;
}
<div class="nav">
<ul>
<li><span class="selected">Home</span><span class="shadow"></span></li>
<li>Projects</li>
<li>About</li>
</ul>
</div>
Example:
The box-shadow property always uses its containing element's bounding box. You can't apply it to just part of an element, so you'll need to create an element specifically for the part that you want to have a shadow.
One solution would be to use pseudo-elements to create a child of the .selected element, and make that child look like an underline / bottom border. Then you can apply box-shadow to that.
Make your .selected element inline-block, so that its width is sized to its content. Then use the ::after pseudo-selector to create a block element inside of that, sized to the parent's width with a height of 5px and a solid background.
.selected {
/* so that its bounding box is only as wide as its contents */
display: inline-block;
}
.selected::after {
/* pseudo-elements must have content in order to render; give it a blank string */
content: '';
/* so it fills the parent horizontally */
display: block;
/* adjust to how tall you want the "bottom border" to be */
height: 5px;
/* color for the "bottom border" */
background: #59DFB8;
/* here's the shadow effect, adjust offsets and color as desired */
box-shadow: 10px 10px 10px #59DFB8;
}
Here is a full example, with simplified markup and some extra styles to make it look more like your example image.
ul {
list-style: none;
display: block;
background: #003447;
padding: 20px;
}
ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
}
ul li a {
font-family: Arial, sans-serif;
font-size: 20px;
color: #59DFB8;
text-decoration: none;
text-transform: uppercase;
}
ul li a::after {
content: '';
display: block;
margin-top: 5px;
height: 2px;
background: #59DFB8;
}
ul li a.selected::after {
box-shadow: 0px 0px 10px 1px #59DFB8;
}
ul li a:active::after,
ul li a:hover::after {
visibility: hidden;
}
ul li a.selected:active::after,
ul li a.selected:hover::after {
visibility: visible;
}
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
</ul>
You could do so with an :after or :before psudo-element.
.selected {
display: block;
float: left;
position: absolute;
width: 100%;
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 10px 10px 10px #59DFB8;
}
<div class="nav">
<ul>
<li><span class="selected">Home</span><span class="shadow"></span></li>
<li>Projects</li>
<li>About</li>
</ul>
</div>
I was going to expound but I see Woodrow beat me by a minute. ;p
Without seeing an example of how you want it to look I'm having to guess. The approach may depend on how subtle an effect you're going for. Here i've added a box shadow with a negative spread and semi-transparent fill:
a{text-decoration:none; color:#555;}
a:hover, a.active {
color:#000;
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 0 8px 10px -8px hsl(0, 0%, 40%);
}
.nav ul {margin:0; padding:0; display:flex;}
.nav li {margin:15px; list-style-type:none;}
<div class="nav">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>A Long One</li>
</ul>
</div>
i'm begginer in html and css and i'm building my first site based on my psd project, i just started making it and i can't get through one problem.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
margin: 0 auto;
width: 960px;
}
.primary-header {
position: relative;
background-color: #fff;
height: 85px;
}
.logo {
position: absolute;
top: 29px;
}
.primary-nav {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
}
.nav {
text-align: right;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 0 30px;
padding: 11px 30px;
}
.nav li:hover {
border: 1px solid #333;
border-radius: 5px;
background-color: #333;
color: #fff;
}
.nav li:last-child {
margin-right: 0;
}
border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}
.nav li:last-child {
margin-right: 0;
}
<header class="primary-header">
<div class="grid group">
<a href="index.html">
<img src="http://i58.tinypic.com/2q2prah.png" class="logo" alt="logo">
</a>
<nav class="nav primary-nav">
<ul>
<li>O firmie</li>
<!--
-->
<li>Oferta</li>
<!--
-->
<li>Realizacje</li>
<!--
-->
<li>Kontakt</li>
</ul>
</nav>
</div>
</header>
and here's the effect i'm gonna reach:
So the problems are:
After pointing with cursor on menu element, padding-top and padding-bottom is too big, it should be 11px and right now it's propably 19px
According to margin-top in ".nav li" my nav should be vertically aligned, but it's a little bit too much into bottom, if i set margin-top: 0px;, there is still some white space above my nav, why?
After i point any menu element with cursor, all the menu elements move 1px to bottom, why?
Thanks for your answers, i was searching for answers for about 2 hours and i still didn't find it... please, help me..
Here's my best reply to your questions:
1) The padding is in addition to your text. For example, with Firebug I can see that OFERTA is measured as 15px tall. Add 11px to top and bottom and you get 37px. To get it to 11px, you're going to have to reduce the font-size and add minimal padding. If you don't care as long as the menu item isn't too big, then just lower the vertical padding in
padding: 11px 30px;
2) By default, the ul element has some margins. Set the margin to 0 for nav to remove it.
3) Previously, before hovering, the CSS rules state that the menu item has no border. On nav li:hover, the CSS adds a border, which increases the overall area and to compensate and stay in the center, the text moves slightly downward. A fix would be to add a border to the nav li.
Also,
border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}
seems to be out of place. It's missing a opening brace and an identifier.
For #1, Try reducing the padding on .nav li from padding: 11px 30px to padding: 5px 30px
For #2, Add a float: left on your .logo and remove the position: absolute
For #3, Remove the border: 1px solid #333 on .nav li:hover
Number 1 renders fine on IE11 at my machine. Show 11px padding-top and -bottom. So this is working as it should. Maybe it is not desired?
Number 2 is caused by the margin on the UL, it's 12px.
.nav ul {
margin-top: 0px;
}
Number 3 is caused by the added border on hover. You need to use extra padding or set a transparent border to nav.li
.nav li {
display: inline-block;
vertical-align: top;
margin: 0 30px;
padding: 11px 30px;
border: 1px solid transparent;
}
I wrote following html page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
list-style:none;
margin: 0 auto;
width: 19.5em;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
and the output is following
I made a small change in the section
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .5em;
}
changed the margin from .25em to .5 em and now it appears as following
If you see the about thing has come out, I am not clear as what thing has caused this behaviour, just by changing margin how can this happen?
as per suggestions below I tried changing
if I remove the width column, and in case I remove the float:left column then all the boxes are vertical
i.e.if I do
#nav ul {
list-style:none;
margin: 0 auto;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
}
it comes as following
why is this happening
Your #nav ul element has a width of 19.5em.
Your #nav ul li a elements have 0.5em padding and 0.5em margin. Width-wise this adds up to 2em + 2px (border) per element. This means that the 4 of your elements have 8em + 8px width without any text.
This allows a total of 11.5em width to contain the text found within your elements. If the cumulative text exceeds 11.5em then your elements will wrap onto the next line.
To fix this, simply increase the width of your #nav ul element:
#nav ul {
width: 25em; /* Adjust accordingly. */
}
That's because your #nav ul has a fixed width width: 19.5em.
Now if you change the width or padding or margin of the inside li elements you need to change the total widht of your ul.
By adding margin to your tags, you've increased the overall width of the elements inside of the , but you've still got your restricted to 19.5em.
You can either remove the width declaration from your or increase its width.
it's because the content is wider than the width of the containing element. adjust it so:
#nav ul {
list-style:none;
margin: 0 auto;
width: 19.5em; <- change this to 21em
}
on an aside, why not use html5 element instead of a div with an ID?
When you double your margin in EM, it will go passed the width that you have for the entire nav. Also, you have float:left hidden in your CSS. I would suggest getting rid of the float:left and doing display:inline-block instead, like so.
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
display: inline-block;
list-style:none;
margin: 0 auto;
}
#nav ul li {
display: inline-block;
font-weight: normal;
text-transform: uppercase;
}
#nav ul li a {
display: inline-block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
HTML
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
The only changes you must to do is to apply this css agains you have:
#nav ul {
display: block;
list-style: none;
text-align: center;
}
#nav ul li {
display: inline-block;
text-transform: uppercase;
}
I'm working on a navigation, and I can't seem to figure out how to make the bottom border increase in size upwards, instead of expanding downwards (which in turn extends my header a few pixels), I could fix the extending header with setting a height, but the the border will still extend downwards instead of upwards.
The CSS:
header {
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 100%;
position: absolute;
background: #000000;
}
ul {
list-style-type: none;
display: block;
margin: 0 0 0 20px;
padding: 0;
}
ul li {
display: inline-block;
padding: 0;
}
ul li a{
display: block;
border-bottom: 1px solid #fff;
font-size: 19px;
}
ul li a:hover{
border-bottom: 2px solid #fff;
background: #333;
font-size: 19px;
}
The HTML:
<header>
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
</header>
The JSFiddle:
http://jsfiddle.net/Artsen/EZWvF/
So you want to increase the border-bottom to the top, right?
I've actually had to do this for a website recently. There is no other way than to set specific padding, and border properties.
I edited your jsfiddle here: http://jsfiddle.net/EZWvF/2/ (changed some properties to make the test case more visible)
The principle is: Swap the pixel values from padding-bottom and border-bottom on hover.
These are the key lines to your solution:
ul li a {
border-bottom: 1px solid white;
padding-bottom: 5px;
}
ul li a:hover {
border-bottom: 5px solid white;
padding-bottom: 1px;
}
Note: This only works if you don't add a css-transition. If you unquote the css-transition I put in the fiddle, you'll see that the div still expands to the bottom. If you want a ss-transition you'll need to add a separate div to the li's to mimic a border.
As Tyblitz suggested using extra padding value on :hover works great when you don't need a transition.
If you need transition and don't want to introduce an extra div you can do it using the line-height/height approach for controlling the vertical height.
so instead of doing this:
.nav-element a {
color: gray;
padding: 25px 15px;
transition: all ease-in-out 0.2s;
display: block;
text-decoration: none;
}
do this:
.nav-element a {
color: gray;
padding: 0 15px;
line-height: 70px;
height: 70px;
transition: all ease-in-out 0.2s;
display: block;
text-decoration: none;
}
See example where it doesn't work here
and does work (using the line-height/height) here
I am trying to create a menubar with a few links in it. Here is my relevant code:
CSS:
#menuBar {
overflow: auto;
padding: 0px 0px;
margin: 15px 0px;
}
div#menuItem ul li {
padding: 0px 20px 0px 20px;
list-style-type: none;
display: inline;
}
div#menuItem ul a {
font-size:14px;
}
HTML
<div id="menuBar">
<div id="menuItem">
<ul>
<li> HOME </li>
<li> ABOUT </li>
</ul>
</div> <!-- Menuitem closes -->
</div>
So, the Problem here is that the minimum height of the menuBar remains fixed. I want it to show up a little smaller. I try setting the padding of #menuBar {padding -5px 0px }. But, nothing happens.
How do I do that. And if I completly removing the code for padding. The height of the div becomes so small that it is just enough to accomodate the text.
put a height to the div... either by using the line-height or height properties.
Try floating the div#menuItem ul li left, then add display:block to your a element and an explicit line-height value.
div#menuItem ul li {
padding: 0px 20px 0px 20px;
list-style-type: none;
display: inline;
float:left;
}
div#menuItem ul a {
display: block;
font-size:14px;
line-height: 1;
text-decoration: none;
}