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
Related
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 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
i am trying to style my menu. I had a working code but notied that parent div is smaller then child div. I am pretty sure its not right so i try to edit it a bit but now i have a problem with it. It looks like:
As you can see last part of menu "FLASHOVKY" is on another line, and all li is same width dispite the fact text is different lenght.
CSS:
#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
HTML:
<nav id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</nav>
Can somebody help me with that guys?
p.s. Live demo : http://funedit.com/andurit/try11/
1] You can fix this by setting box-sizing:border-box;. The issue is the padding on your <a> tags, it's causing the content to overflow because the padding and border are placed outside of the content box.
2] To fix the spacing issue, you need to add a float: left; to #menu ul li. The reason for this is because the <a> tags nested in #menu ul li are floated left. That's why the links were offset.
Change this:
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
To this:
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
float:left; /* Add this float to remove extra space */
}
#menu ul li a {
-webkit-box-sizing: border-box; /* Safari, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
Try playing around with the min-width values in your css.
#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px; // this property causing you to make all box of same size and it occupie the 100px wether text is small or large
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px; // dont fix width
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Use float:left instead of display block..and only use height if you need..yes inline and float:left has for different use..but may be you will like..
#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
border:1px solid;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
width:100%;
}
#menu ul li {
color: #000;
height: 44px;
float:left;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #000;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
margin-left: 8px;
display: block;
}
When I set the width of the sub menu to width:auto, the items with really long names gets squished together. Currently I have the width set to 175% which is not desirable as some menus can get quiet long. How can I make width:auto work for long menu items.
Link to demo site: http://previewyournewwebsite.info/otsl/
.nav.main_nav .sub-menu {
background-color: #2D556F;
display: none;
height: auto;
/* left: -5px; */
left: 0px;
margin: 0 9px 0 0;
position: absolute;
top: 54px;
width: 175%;
}
.nav.main_nav .sub-menu li {
margin: 30px 0px;
display: block;
}
.nav.main_nav .sub-menu li a {
background-image: url("./images/sub-nav-divider.png");
background-position: 0 bottom;
height: 50px;
line-height: 50px;
background-repeat: repeat-x;
font-family: Helvetica,Arial,sans-serif;
font-size: 15px;
margin-left: -31px;
padding: 0 0 0 44px;
width: 100%;
}
.nav.main_nav .sub-menu > li{
height: 50px;
line-height: 50px;
padding-left: 44px;
}
.nav.main_nav .sub-menu > li:last-child a{
background-image: none;
}
.nav.main_nav .sub-menu li {
display: block;
margin: 0;
}
Link to site: http://previewyournewwebsite.info/otsl/
Are you looking for this?
http://jsfiddle.net/coma/MNFXB/11/
nav ul, nav li {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
nav a {
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 1em;
color: #fff;
background-color: #2D556F;
white-space: nowrap;
}
nav > ul {
background-color: #2D556F;
}
nav > ul:after {
display: block;
content: "";
clear: both;
}
nav > ul > li {
float: left;
position: relative;
}
nav > ul > li > ul {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav li:hover > a {
background-color: #92A132;
}
Or would you like something like this?
http://jsfiddle.net/coma/MNFXB/12/
i am trying to create a drop-down menu with rounded corners and have nearly got there but for a small issue in IE. If you view this link (http://ids-ind.com/koris/dropdown.html) in FF it looks and works fine but in IE the right hand side has a flat top.
Please can you advise what i need to do/change to get it looking like it does in FF?
Below is the CSS i am using
a:link {text-decoration:none;}
/* tabs
*************************/
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0 0 0 1px;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
background:url('../images/menuleft_bg.png') left bottom no-repeat;
line-height:55px;
width:130px;
}
ul.tabs a
{
position: relative;
display: block;
background:url('../images/menuright_bg.jpg') right bottom no-repeat;
}
/* dropdowns
*************************/
ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 130px;
display: none;
left: 0;
}
ul.dropdown ul.dropdown
{
top: 0;
left: 100%;
}
ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}
ul.dropdown li a
{
display: block;
}
/* menu-specifc
*************************/
#menu
{
position: fixed;
z-index: 5;
top: 0;
left: 0;
height: 40px;
line-height: 40px;
border-bottom: 0px solid #000;
}
#menu ul
{
margin: 0 auto;
}
#menu ul li h4
{
margin: 0;
}
#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 15px;
}
#menu ul li a
{
color: #fff;
padding-left: 4px;
}
#menu ul li a img
{
vertical-align: middle;
}
#menu ul li a span
{
display: block;
padding: 0 20px;
text-align:center;
}
#menu ul.dropdown
{
padding: 20px 0;
background-image: url('../images/dropdownbg.png');
overflow:hidden;
border-bottom: 0px solid #dc902f;
width: 130px;
z-index:110;
}
#menu ul.dropdown li a
{
border-bottom: 0px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
background-image: url('../images/dropdownbg2.png');
}
#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}
#menu ul.dropdown li a:hover
{
color:#990000;
}
#menu ul li h4 a:hover
{
background-image: none;
}
remove the position:relative; in below
ul.tabs a{}