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
Related
I have a website and the active and hover links are showing on the mobile menu when they should not. So it is like they are there all the time.
```
html, body
{
font-family: "Lato", sans-serif;
width: 100%;
height: auto; margin: 0;
}
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
}
.menu ul li {
text-align: center;
display: inline;
padding: 8px;
margin: 0 5px 0 5px;
width: 24.11%;
}
.menu li:visited, .menu li:active, .active, .menu li:hover
{
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 18px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 500px) {
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
background-color: #3333FF;
margin-bottom:-40px;
padding: 0;
}
.menu li a {border-top: 1px solid #F4F4F4;}
.menu li a:active, .menu li a:hover; .menu li a:link {color: #fff; background: 0; display: none;}
#toggle:checked + .menu {
display: block;
}
}
<div class="nav"><label for="toggle">☰</label> <input
id="toggle" type="checkbox" /> <div class="menu"><ul><li>Home</li><li>News</li><li class="active">Contacts</li><li>Policies</li><li>Members</li><li>Volunteer</li><li>Links</li></ul></div>
Does anyone know why it is doing this as it is a mystery to me. Tried most things. I placed a active hover display none but it is still showing like a bug.
try to use
opacity: 0;
visibility:hidden;
too
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
I have a web page with a sticky header, sticky sidebar and sticky footer but can't get the content to be padded on the right(padding just gets ignored) and my in-page links don't work correctly. I want to do this with CSS ONLY.
http://jsfiddle.net/C7v9f/
I know there are many other similar questions but their solutions either don't work; their too old; they've never been answered; they use jQuery, JavaScript etc. or they fall apart after adding things like line-height or padding.
html, body {
height: 100%;
color: #fff;
}
body, p {
margin: 0;
padding: 0;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
background: #888;
}
#header {
height: 55px;
background: #222;
position: fixed;
width: 100%;
z-index: 4;
}
#SC-wrap {
float: left;
margin-bottom: 40px;
}
/* BEGIN HEADER NAV */
#nav {
padding-left: 32%;
}
#nav li{
position: relative;
display: inline;
color: white;
}
#nav a {
display: inline-block;
padding:10px;
}
#nav ul {
position: absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align: left;
text-decoration: none;
}
#nav ul li {
display: block;
}
#nav li:hover ul {
left:0;
}
#nav li:hover a {
text-decoration: none;
background: darkgrey;
}
#nav li:hover ul a {
text-decoration: none;
background: #B8B8B8;
}
#nav li:hover ul a:hover{
text-decoration: none;
background: #CCCCCC;
}
#nav ul a{
white-space: nowrap;
display: block;
border-bottom:1px solid #ccc;
color: white;
text-decoration: none;
}
#nav a {
text-decoration:none;
color: blue;
}
#nav a:hover {
text-decoration:none;
background: #f1f1f1;
color: blue;
}
/* END HEADER NAV */
#sidebar {
background-color: green;
width: 150px;
height: 100%;
position: fixed;
line-height: 2em;
font-size: 1.2em;
z-index: 2;
text-align: center;
padding-top: 6%;
overflow-y: auto;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
background-color: grey;
}
#content {
padding-right: 250px;
width: 100%;
padding-top: 100px;
font-size: 1.2em;
line-height: 1.6em;
z-index: 1;
text-align: left;
padding-left: 200px;
}
#footer {
position: fixed;
bottom: 0px;
height: 40px;
width: 100%;
background: #222;
z-index: 4;
}
The padding on the right is there, the content is just too wide. To make the padding not be included in the width of the element use box-sizing:border-box Demo
#content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
... Your other styles ...
}
I have this menu:
<div id="menu">
<ul>
<li>Home</li>
<li>Programm & Preise</li>
<li>Künstler</li>
<li>Rückblick</li>
<li>Team</li>
</ul>
</div> <!-- end of menu -->
And this is the css I have at the moment:
/* menu */
#menu {
clear: both;
width: 670px;
height: 64px;
background: url(images/menu_yellow.png) no-repeat bottom;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
display: inline;
}
#menu ul li a{
float: left;
display: block;
width: 94px;
height: 55px;
padding: 7px 0 0 0;
margin-right: 5px;
text-align: center;
font-size: 13px;
text-decoration: none;
color: #000;
font-weight: normal;
outline: none;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
opacity: .7;
}
#menu li a:hover, #menu li .current{
color: #C30;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
opacity: 1;
}
The links are centered horizontally, but is it also possible to center it vertically inside the <li> that contain them?
I read about vertical-align: middle ; but just adding it to the links does not work.
Here is a fiddle: http://jsfiddle.net/gkpfL/
You are using float: left; so you won't need display: block;
So first, you don't need display: block; as when you float, even inline elements become floated blocks, as far as the vertical centering goes, instead of using float, use display: table-cell; along with vertical-align: middle;
Demo
#menu ul li a{
display: table-cell; /* Add this */
vertical-align: middle; /* Add this */
width: 94px;
height: 55px;
padding-bottom: 5px;
/* Use this for a spare bottom space for your background-image */
/* Rest of the properties goes here */
}
Also use display: inline-block; for the li element instead of display: inline; with vertical-align: top; (Not required but better to be safe than sorry)
#menu ul li {
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
}
You can align them in the middle, but the arrow make them align lower than it should..you have to adjust it a little bit but it's something like:
#menu {
clear: both;
width: 670px;
height: 64px;
background: url(images/menu_yellow.png) no-repeat bottom;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
float: left;
display: table;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
width: 94px;
height: 60px;
}
#menu ul li a{
display: table-cell;
vertical-align:middle;
margin-right: 5px;
text-align: center;
font-size: 13px;
text-decoration: none;
color: #000;
font-weight: normal;
outline: none;
opacity: .7;
}
#menu li a:hover, #menu li .current{
color: #C30;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
opacity: 1;
}
http://jsfiddle.net/gkpfL/8/
http://jsfiddle.net/gkpfL/7/
changed the li to display:inline-block;
removed float:left; and added display:table-cell; and vertical-align:middle;
#menu ul li {
padding: 0;
margin: 0;
display: inline-block;
}
#menu ul li a{
width: 94px;
height: 62px;
margin-right: 5px;
text-align: center;
font-size: 13px;
text-decoration: none;
color: #000;
font-weight: normal;
outline: none;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
opacity: .7;
display:table-cell;
vertical-align:middle;
}
DEMO
/* menu */
#menu {
clear: both;
width: 670px;
height: 64px;
background: url(images/menu_yellow.png) no-repeat bottom;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
display: inline-block;
}
#menu ul li a {
display: table-cell;
vertical-align: middle;
width: 94px;
height: 55px;
margin-right: 5px;
text-align: center;
font-size: 13px;
text-decoration: none;
color: #000;
font-weight: normal;
outline: none;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
opacity: .7;
}
#menu li a:hover, #menu li .current {
color: #C30;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
opacity: 1;
}
vertical-align
The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
An easy attemp would be to just replace the height with some padding
#menu ul li a{
padding: 27.5px 0px;
height: auto;
}
vertical-align works for inline/inline-block elements. Also you can center Content in Table cells with it. But it was not designed to center content liked this.
Try the following CSS:
#menu {
clear: both;
width: 670px;
height: 64px;
background: url(images/menu_yellow.png) no-repeat bottom;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
display: table-cell;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
vertical-align:middle;
height: 60px;
}
#menu ul li a{
float: left;
display: table-cell;
width: 94px;
padding: 7px 0 0 0;
margin-right: 5px;
text-align: center;
font-size: 13px;
text-decoration: none;
color: #000;
font-weight: normal;
outline: none;
opacity: .7;
margin-bottom: 18px;
}
#menu lihover, #menu li.current{
color: #C30;
background: url(http://i.imgur.com/JYsyCl6.png) repeat;
opacity: 1;
}
Also you could think about creating the pointer with CSS using :after pseudo element
I am having a simple problem with my CSS dropdown menu, I want to make it so the dropdowns are equal length to the button above them. See example below, I just want to stretch the block to the length of the above block.
New user, can't upload image
If you use my jsFiddle link you can see my code, and edit it live. I'll post the code anyway just in case.. Note I am only posting the CSS stylesheet in here as the HTML is not part of the problem.
/* Dropdown Menu */
#nav {
float: right;
width: 600px;
height: 90px;
margin: 0 auto;
padding-top: 65px;
}
#nav ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul { display: none; }
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #3636FE;
margin-left: 1px;
white-space: nowrap;
}
#nav ul li a:hover { background: #3636FE; }
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 11px;
}
#nav li:hover a { background: #3636FE; }
#nav li:hover li a:hover { background: #6868FE; }
Fixed. (at least for Chrome+Firefox+IE9)
http://jsfiddle.net/QZWj3/4/
You had to add width: 100% to #nav li:hover ul and to #nav li:hover li