My menu structure is
<div id="menu">
<ul>
<li><span>Two Words</span></li>
<li><span>Three Words</span></li>
<li><span>Very Long menu item</span></li>
<li><span>Short word</span></li>
<li><span>item5</span></li>
<li><span>item6</span></li>
</ul>
</div>
Menu has fixed width 720px and fixed height 50px. How can i make menu items to be like on this image?
here is my CSS
#menu {width:720px; height:50px; }
#menu ul {margin:0px; padding:0px;}
#menu ul li {display:inline; float:left; margin-left:1px;}
#menu ul li a {display:block; width:119px; height:100%;}
#menu ul li a span {display:inline-block;vertical-align:middle;
background-color:gray; text-align:center; font-size: 14px; width:100%;}
Here's a headstart:
#menu {
border: 1px solid #0000ff;
padding: 10px;
}
ul li {
border: 1px solid #ff0000;
display: table-cell;
height: 80px;
margin: 10px 5px;
text-align: center;
width: 80px;
vertical-align: middle;
}
jsfiddle
use the text-align="center" in the span tags that you have created or do the same using css.
Related
I have two div-classes named .logo and .menu class within header-bottom class div.
<header class="header-bottom">
<div class="logo">
<img src="images/logo.png" alt="REVELATION" />
</div>
<nav class="menu">
<ul>
<li class="current">homepage</li>
<li>site demo</li>
<li>full width</li>
<li>portfolio</li>
<li>gallery</li>
<li>dropdown</li>
</ul>
</nav>
Now the problem is, when I change my browser window or zooming, then the .logo and .menu classes contents overlapped with each other. If I set width in logo then the problem was solved but I want another simple approached to hole the whole .logo class div even if not having no contents.
box-sizing, positioning may solved the problem but how? I don't know.
*{
margin:0 ;
padding:0;
}
/* hedaer bottom*/
.header-bottom
{
padding-top:40px;
overflow:hidden;
}
.header-bottom .logo
{
width:15%;
float:left;
display: inline-block;
}
.header-bottom .menu
{
width:85%;
float:left;
}
.header-bottom .menu ul
{
list-style:none;
float:right;
margin-top:15px;
padding-right:12px;
}
.header-bottom .menu ul li
{
float:left;
padding-bottom:10px;
padding-right:10px;
border-bottom:1px solid #ededed;
}
.header-bottom .menu ul li:last-child
{
padding-right:0px;
}
.header-bottom .menu ul li a
{
text-decoration:none;
font-family:Georgia Regular;
font-size:13px;
font-weight:normal;
color:#55415f;
text-transform:uppercase;
/* border-bottom:2px solid transparent;*/
}
.header-bottom .menu ul li a:hover
{
padding-bottom:10px;
border-bottom:2px solid #55415f;
}
.header-bottom .menu .current a
{
border-bottom:2px solid #55415f;
padding-bottom:10px;
}
Here is a start using Flexbox.
The display: flex set on the .header-bottom will make the .logo and .menu stay side-by-side, like table cells, and the flex-grow: 1 set on the .menu makes the .menu take the space left, that is not occupied by the .logo
Finally, with the align-items: center set on the .header-bottom you don't need top/bottom padding to center the .logo and the .menu, align-items does it for you, similar to what vertical-align: middle does to inline elements.
* {
margin: 0;
padding: 0;
}
/* hedaer bottom*/
.header-bottom {
padding-top: 40px;
overflow: hidden;
display: flex;
align-items: center;
}
.header-bottom .logo {
padding-right:10px;
}
.header-bottom .menu {
flex-grow: 1;
}
.header-bottom .menu ul {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
.header-bottom .menu ul li {
border-bottom: 1px solid #ededed;
padding-right:10px;
}
.header-bottom .menu ul li:last-child {
}
.header-bottom .menu ul li a {
text-decoration: none;
font-family: Georgia Regular;
font-size: 13px;
font-weight: normal;
color: #55415f;
text-transform: uppercase;
/* border-bottom:2px solid transparent;*/
}
.header-bottom .menu ul li a:hover {
border-bottom: 2px solid #55415f;
}
.header-bottom .menu .current a {
border-bottom: 2px solid #55415f;
}
<header class="header-bottom">
<div class="logo">
<img src="images/logo.png" alt="REVELATION" />
</div>
<nav class="menu">
<ul>
<li class="current">homepage</li>
<li>site demo</li>
<li>full width</li>
<li>portfolio</li>
<li>gallery</li>
<li>dropdown</li>
</ul>
</nav>
Here I have my website: http://gyazo.com/56e069ebf8b5bd61ee30523886180b88
There are a number of issues with the nav bar.
1.You can see that the text or nav bar is not horizontally centered, as indicated by the hover (which is equal on top and bottom)
2.There is to much space in between the text, (and this spacing is the only way I've found works without the text moving around when highlighting or hovering.
So for 1. is there a way I can make the text or the nav bar (not sure what is the cause) centre so the hover looks more equal (horizontally)
For 2. Is there a way I can close the gap between the text, while still keeping the same padding settings, and so it doesn't move the text around when I use the hover function.
I've also added a jsfiddle if that helps: http://jsfiddle.net/d1a5eshs/
HTML FOR NAV BAR
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li>HOME
</li>
<li>STATUS
</li>
<li>INFO
</li>
<li>GAMEMODES
<ul>
<li>SURVIVAL
</li>
<li><br>PURE-PVP
</li>
<li><br>GAMESWORLD
</li>
</ul>
</li>
<li>RULES
</li>
<li>VOTE
</li>
<li>CONTACT
</li>
</ul
CSS FOR NAV BAR
/*TOP NAV BAR SECTION*/
#nav_bar {
background-color: #a22b2f;
padding:1px;
box-shadow: 0px 2px
height:45px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
text-decoration:none;
font-weight:bold;
font-size:15px;
margin-left:10px;
padding-bottom:13px;
padding-top:17px;
padding-left:10px;
padding-right:10px;
margin-bottom:30px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar>ul>li>a:hover {
background:#8c1b1f;
padding-bottom:13px;
padding-top:13px;
padding-left:10px;
padding-right:10px;
}
#nav_bar>ul>li>ul>li>a:hover {
background:#c9c9c9;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: #e2e2e2;
padding-top:10px;
padding-bottom:10px;
padding-left:0px;
padding-right:10px;
border: 1px solid black;
border-radius:5px;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
font-size:12px;
font-weight:bol;
margin-left:-20px;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
There were several spacing issues and also there were several duplicate styles and a few mistakes, but I think I fixed all your issues. http://jsfiddle.net/d1a5eshs/1/.
Here's my version of your navigation bar: http://jsfiddle.net/zo541am2/. I trimmed and simplified both your HTML and CSS code.
HTML:
<nav>
<ul>
<li>HOME</li>
<li>STATUS</li>
<li>INFO</li>
<li>GAMEMODES
<ul>
<li>SURVIVAL</li>
<li>PURE-PVP</li>
<li>GAMESWORLD</li>
</ul>
</li>
<li>RULES</li>
<li>VOTE</li>
<li>CONTACT</li>
</ul>
</nav>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
nav {
background-color: #a22b2f;
box-shadow: 0px 2px 10px;
}
ul {
list-style-type: none;
}
nav > ul {
display: table;
margin: 0 auto;
min-width: 650px;
text-align: center;
}
nav > ul > li {
display: inline-block;
position: relative;
}
nav > ul > li > a {
display: block;
color: #fff;
text-decoration: none;
font: bold 15px/3 Serif;
padding: 0 15px;
}
nav ul ul {
display: none;
position: absolute;
min-width: 100%;
background: #e2e2e2;
border: 1px solid gray;
border-radius: 2px;
}
nav > ul > li:hover > a {
background: #8c1b1f;
}
nav ul ul li a {
display: block;
color: black;
font: bold 12px/3 Sans-Serif;
text-decoration: none;
}
nav ul ul > li:hover > a {
background: #c9c9c9;
}
nav > ul > li:hover > ul {
display: block;
}
need some help. I'm just learning HTML and have been looking at how to do menus today, whilst doing so I have ran into a problem.
I can't seem to figure out how to center the menu on screen.
This is what I have so far;
<div id="navMenu">
<ul>
<li>Home</li>
<li>WWW.
<ul>
<li>Through the years</li>
</ul></li>
<li>Browsers
<ul>
<li>IE</li>
<li>Firefox</li>
<li>Chrome</li>
</ul></li>
<li>CSS
<ul>
<li>CSS 2.1</li>
<li>CSS 3</li>
</ul></li>
<li>Scripting
<ul>
<li>JavaScripts</li>
<li>jQuery</li>
</ul></li>
</ul>
</div>
Current CSS;
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float: left;
position: relative;
background-color: #999;
border-radius: 5px;
}
#navMenu ul li a{
text-align: center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover{
background-color: #09F;
}
#navMenu ul li:hover ul li a:hover{
background-color: #CCC;
color: #000;
}
#navMenu a:hover{
color:#000;
}
The above produces this .... http://gyazo.com/55cf62d121ef16eb1248e5246d0accae
Anyway to get the menu bar in the center of the screen.
SIDE NOTE:: Any spoilers tags on this site?
Try using display: inline-block and text-align: center.
Set display: inline-block for the <ul> and text-align: center for the container #navMenu. Set text-align: left for #navMenu li to fix the submenus.
Also
Example
#navMenu{
margin:0;
padding:0;
text-align: center;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
display: inline-block;
}
#navMenu li{
margin:0;
padding:0;
text-align: left;
float: left;
list-style:none;
position: relative;
background-color: #999;
border-radius: 5px;
}
Add a width to your menu wrapper and give the left and right an automatic margin.
You can adjust the width depending on where in the center you want to have your nav positioned.
#navMenu {
width: 960px;
margin:0 auto;
padding:0;
text-align: center;
}
The margin and paddings your have in the ul and li are not needed.
#navMenu ul{
list-style: none;
line-height:30px;
display: inline-block;
text-align: center;
}
#navMenu li{
display: inline;
}
Padding should go here to keep all your links even.
#navMenu li a {
display: block;
padding: 10px;
}
I've tried making horizontal drop down navigation bars following tutorials, however they are never centered and I can't figure out how to center them. I tried going in the opposite direction and centering my navigation bar first, and then attempting to make it a drop down menu, though this seems to throw everything off. This is the code I have.
EDIT: The problem I am having is that the submenu is displayed when the page is loaded, along with a bullet point, which I'm sure can be fixed by setting the list-style to none, however I'm not sure where in the CSS this should be.
I'm trying to create a menu similar to THIS. I understand this uses joomla and I am not.
#header {
height: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#content {
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#footer {
height: 85px;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 1 solid #ccc;
border-left: 1 solid #ccc;
border-bottom: 1 solid #ccc;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 10px 10px;
text-decoration: none;
font-weight: bold;
}
#menu li a:hover {
color: #c00;
}
<ul id="menu">
<li>Home
</li>
<li>Kandi
<ul>
<li>Claim Kandi
</li>
</li>
<li>Events
</li>
<li>Artists
</li>
<li>Community
</li>
<li>Merchandise
</li>
</ul>
Add this CSS:
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
http://jsfiddle.net/tcKvH/1/
use this css
#menu{
position:absolute;
top:150px;
left:8%;
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
line-height:30px;
}
#menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}
#menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;
}
#menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
#menu ul li:hover ul{
visibility:visible;
z-index:1;
}
#menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
#menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}
with this html code
<div id="menu">
<ul>
<li>Home</li></ul>
<ul>
<li>Video <!--This is in main menu-->
<ul>
<li>Technology</li> <!--This is in drop downmenu-->
<li>Tutorial</li> <!--This is in drop downmenu-->
</ul>
</li>
</ul>
I wish to build a sprite navigation menu using an unorderd list with a background image. I want this menu to expand to fit the browser window. In my code <img src="images/css-sprite-example.png" alt="header" />scales the image to fit the full width of the screen.
How would I go about it to have that same image used in the menu and the menu expand to fill the width of the screen.
I am using the CSS #menu li a{background:url('images/css-sprite-example.png') no-repeat; width:100%; height 100%; display:block;} but the 100% only scales the image to the actual size of the image.
Obviously I will have to change how my CSS selectors will have to be in percent not pixels.
Many thanks
<head>
<style type="text/css">
#menucontainer {
background: blue;
text-align: center;
height:auto;
width:auto;
}
#menucontainer img {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
display: block;
width: 100%;
}
#menucontainer ul {
margin-left: auto;
margin-right: auto;
border: 1px solid pink;
display: block;
width: 100%;
list-style:none;
}
#menucontainerr li {
margin-left: auto;
margin-right: auto;
border: 1px solid black;
display: block;
width: 100%;
}
ul#menu{margin:0; padding:0; list-style:none;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:1px;}
#menu li a{background:url('images/css-sprite-example.png') no-repeat; width:100%; height 100%; display:block;}
/* Home Button */
#menu li.home{width:215px; height:52px;}
#menu li.home a{background-position:-5px -5px;}
#menu li.home a:hover{background-position:-5px -15px;}
#menu li.home a.selected{background-position:-5px -25px;}
/* About Button */
#menu li.about{width:120px; height:52px;}
#menu li.about a{background-position:-125px -5px;}
#menu li.about a:hover{background-position:-125px -15px;}
#menu li.about a.selected{background-position:-125px -25px;}
#menu li.about a.selected:hover{background-position:-125px -35px;}
/* Contact Button */
#menu li.contact{width:80px; height:52px;}
#menu li.contact a{background-position:-250px -5px;}
#menu li.contact a:hover{background-position:-10% -15px;}
#menu li.contact a.selected{background-position:-250px -25px;}
</style>
</head>
<body>
<div id="menucontainer">
<img src="images/css-sprite-example.png" alt="header" />
<ul id="menu">
<li class="home">Home</li>
<li class="about"><a class="selected" href="#">About</a></li>
<li class="contact">Contact</li>
</ul>
</div>
</body>
</html>
If you want to scale a background image you need to use background-size, see http://docs.webplatform.org/wiki/css/properties/background-size and https://developer.mozilla.org/en-US/docs/CSS/background-size