So I'm simply trying to get the text in each line item to be position at the bottom of the square rather than stuck at the top. Here is a screenshot of what my nav looks like http://imgur.com/QLPBYQK
And here is my code:
<div id="nav">
<ul>
<li>Home</li>
<li>Supplies</li>
<li>FAQ</li>
</ul>
</div>
#nav {
height: 50px;
width: 950px;
margin: auto;
background-color: #FF5252;
font-family: sans-serif, Georgia;
border: 5px solid white;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul li {
float: left;
width: 145px;
}
#nav ul li a {
font-size: 20px;
text-align: center;
color: white;
background-color: #FF5252;
display: block;
text-decoration: none;
height: 50px;
}
JSFiddle.
Add this attribute:
line-height:80px;
To the Class:
#nav ul li a {
font-size: 20px;
text-align: center;
color: white;
background-color: #FF5252;
display: block;
text-decoration: none;
height: 50px;
line-height:80px;
}
Add list-style: none to #nav ul li and line-height: 50px(should be the same as height of the a element, if you want to center the text vertically) to #nav ul li a.
Demo
#nav ul li {
float: left;
width: 145px;
list-style: none;
}
#nav ul li a {
font-size: 20px;
text-align: center;
color: white;
background-color: #FF5252;
display: block;
text-decoration: none;
height: 50px;
line-height: 50px;
}
Don't use height; instead use appropriate padding-top.
#nav ul li a {
font-size: 20px;
text-align: center;
color: white;
background-color: #FF5252;
display: block;
text-decoration: none;
padding-top: 28px;
}
Use padding-top or
line-height in nav ul li a
Related
I have a nav element with 4 items.
When I click on any of the elements, I notice that the items shift apart slightly, and the div expands.
<div id="siteNavigation" class="navDiv">
<nav>
<ul>
<li><span>Home</span></li>
<li>Meet Me</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
.navDiv {
display: inline;
width: auto;
float: right;
border: solid;
}
nav ul {
clear: both;
list-style-position: inside;
clear: left;
list-style: none;
margin-left: 0;
width: auto;
padding-top: 32px;
text-align: center;
white-space: nowrap;
}
nav ul li {
display: inline-block;
white-space: nowrap;
padding-left: 8px;
border: none;
}
nav ul li a {
color: #000000;
/* #E3CF9C */
font-size: 1em;
font-weight: bold;
text-decoration: none;
letter-spacing: 0.05em;
padding: 10px 3.125% 26px 3.125%;
text-transform: uppercase;
border: none;
}
nav ul li a:hover {
color: #BF0000;
}
nav ul li a.selected {
color: #BF0000;
}
nav ul li a.selected:hover {
color: #E3CF9C;
}
JSFiddle example: https://jsfiddle.net/rfhasw48/1/
What do I need to change to make the nav stay a constant size?
Just remove the padding from nav ul li a.
Updated CSS:
.navDiv {
display: inline;
width: auto;
float: right;
border: solid;
}
nav ul {
clear: both;
list-style-position: inside;
clear: left;
list-style: none;
margin-left: 0;
width: auto;
padding-top: 32px;
text-align: center;
white-space: nowrap;
}
nav ul li {
display: inline-block;
white-space: nowrap;
padding-left: 8px;
border: none;
}
nav ul li a {
color: #000000;
/* #E3CF9C */
font-size: 1em;
font-weight: bold;
text-decoration: none;
letter-spacing: 0.05em;
text-transform: uppercase;
border: none;
}
nav ul li a:hover {
color: #BF0000;
}
nav ul li a.selected {
color: #BF0000;
}
nav ul li a.selected:hover {
color: #E3CF9C;
}
I created a dropdown menu and I am trying to get rid of the little space that I am getting at the beginning of the dropdown, between the parent component and its children, as shown in the screenshot below:
I want the drop down to begin from where the tab starts, something like this:
--------
| Parent
-----------
| Child
------------
Please, find a code snippet attached below:
ul {
list-style-type: none;
margin: 0;
padding-left: 25px;
padding-right: 10px;
position: absolute;
}
li {
display: inline-block;
float: left;
margin-right: 1px;
}
li a {
display: block;
min-width: 138.7px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
li:hover a {
background: green;
}
li:hover ul a {
background: grey;
color: #2f3036;
height: 40px;
line-height: 40px;
text-align: center;
}
li:hover ul a:hover {
background: green;
color: #fff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
}
ul li a:hover+.hidden,
.hidden:hover {
display: block;
width: auto;
}
#menu {
text-align: center;
}
<ul class="menu">
<li>Somthing</li>
<li> something
<ul class="hidden">
<li>somethoing</li>
<li>something</li>
</ul>
</li>
</ul>
Thanks in advance.
Set the padding to 0 on your hidden class. .hidden{padding: 0;} and also remove the li ul li a{width:auto; min-width:100px;} JSFiddle I changed your media query so it can be viewed in here.
ul {
list-style-type:none;
margin:0;
padding-left: 25px;
padding-right: 10px;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:138.7px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
li:hover a {
background:green ;
}
li:hover ul a {
background: grey;
color: #2f3036;
height: 40px;
line-height: 40px;
text-align:center;
}
li:hover ul a:hover {
background: green;
color: #fff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
.hidden{
padding: 0;
}
ul li a:hover + .hidden, .hidden:hover {
display:block;
width: auto;
}
#menu{
text-align:center;
}
#media screen and (max-width : 460px){
ul {
position: static;
display: none;
}
li {
margin-bottom: 1px;
}
ul li, li a {
width: 100%;
}
.show-menu {
display:block;
}
}
<ul class="menu">
<li>Something</li>
<li> something
<ul class="hidden">
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
li{position: relative;}
ul li ul{padding: 0; width: 100%;}
My dropdown works fine, except it closes before i can move mouse top of last link in it.
CSS
nav {
width: 100%;
display: inline-block;
margin-bottom: 1%;
text-align: center;
background-color: #F0F0F0;
}
nav .links {
width: 100%;
line-height: 1.2;
font-size: 100%;
text-decoration: underline;
text-align: center;
}
nav .links a {
color: #666666;
text-decoration: none;
word-spacing: normal;
}
nav .links a:visited {
color: #666666;
text-decoration: none;
}
nav .links a:hover {
color: #383838;
text-decoration: none;
}
nav .links a:active {
color: #666666;
text-decoration: none;
}
nav ul {
position:relative;
list-style:none;
color: #666666;
white-space: nowrap;
}
nav li{
position:relative;
float: left;
margin-left: 5%;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
line-height: 1.2;
}
ul li:hover ul {
display: block;
}
HTML
<nav>
<div class="links">
<ul>
<li>ETUSIVU</li>
<li>HENKILÖKUVA JA HISTORIA</li>
<li>KORISTEKERAMIIKKA</li>
<li>GALLERIA
<ul>
<li>Keramiikkaveistokset</li>
<li>Keramiikka - kuparityöt</li>
<!--Next link is the one where dropdown closes before mouse reaches it-->
<li>Krisu testi</li>
</ul>
</li>
</ul>
</div>
I tested it with Chrome and FF. CSS is not top skill for me and i think this should work but obviously im wrong :)
I would appreciate help with this greatly, thanks.
EDIT
I changed nav ul li ul as...
nav ul li ul {
z-index: 1;
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
}
and now it works just fine. So basically i just added z-index there.
There is an image right below dropdows, not sure is it possible that it messes this one? Atleast z-index did help...
I seem to be having a problem with my CSS in making the entire menu item clickable, not just the text.
As you can see from the highlighted screenshot, the menu does not extend to 100% height of the div. As a result, only the text of the menu is clickable, not the whole box around it. How do I make the entire box clickable?
(Code Below)
#header
{
background-color: black;
}
#header .menu
{
display: inline;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%
position: relative;
text-transform:uppercase;
}
#header .menu ul{
display: inline-block;
}
#header .menu li {
display: inline-block;
padding: 20px;
width: auto;
color: white;
height: 100%;
position: relative;
}
#header .menu a{
display: block;
width: 100%
height: 100%;
text-decoration: none;
color: white;
font-family: Helvetica;
}
#header .menu ul li a{
display: block;
}
#header .menu li a{
position: relative;
}
Thanks.
Use this piece of CSS
#header .menu
{
display: inline;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%
position: relative;
text-align: center;
text-transform:uppercase;
}
#header .menu li { display: inline; float:left; }
#header .menu li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
font-family: Helvetica;
}
#header ul li a:hover
{
color: Yellow;
background-color: #000;
}
Here is a Demo
the text within the li is a link, where as the entire li item including the text should work as a link. How can I get it so that the entire li item operates as link as opposed to just the text within the li?
CSS:
#navbar {
width: 900px;
height: 50px;
background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}
#navbar ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align: center;
}
#navbar ul li {
height: 50px;
width: auto;
float: left;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
height: 100%;
}
#navbar a:link {
font-weight:bold;
color: black;
font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
text-decoration: none;
}
#navbar a:hover {
background-color: #003300;
color: gold;
}
#navbar a:visited {
color: black;
}
a:active {
background-color: #003300;
color: gold;
}
HTML:
<div id="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>READING</li>
<li>STORE</li>
<li>CONTACT</li>
</ul>
</div>
Here's a screenshot for reference: (home has my cursor over)
Cheers
here's a quick example for you:
http://jsfiddle.net/DFS5P/
You then should move some of the li css to the a css - like so
#navbar ul li {
height: 50px;
width: auto;
float: left;
}
#navbar ul li a {
display: block;
height: 100%;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
Give your padding & height to anchor instead of LI. Write like this:
#navbar ul li {
float: left;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
height: 50px;
}
Check this http://jsfiddle.net/DFS5P/1/
Try adding
width:100%;
to:
#navbar ul li a {
display: block;
height: 100%;
}
If you remove the padding from the list items and give them a fixed width, it works as you need.
#navbar ul li {
height: 50px;
width: 100px;
float: left;
line-height: 50px;
border-right: 1px solid black;
}
jsFiddle example
It is definately not the best way, but sometimes I just move the entire 'li' inside the 'a' tag. This way everything witin the 'li' goes to the link in when you click on it.
Works fine by me, but as I said it is not the best way.