I want to set the height for the Games menu like all the other menus, but it is not working. What is wrong?
This is my code:
<ul class="menu">
<li class="item-474 current active">News</li>
<li class="item-482 deeper parent">
<span class="separator">Applications</span>
<ul>
<li class="item-483">Games</li>
</ul>
</li>
<li class="item-484"><span class="separator">Appearence</span></li>
</ul>
#left-menu ul.menu {
display: block;
list-style-type: none;
margin-left: -40px;
}
#left-menu ul.menu li {
display: block;
text-align: center;
background: url("img/menu1.png");
width: 208px;
height: 31px;
text-align: center;
list-style-type: none;
padding: 0px;
margin: 0px;
}
#left-menu ul.menu li ul li {
display: block;
text-align: center;
background: url("img/menu2.png");
width: 208px;
height: 31px;
text-align: center;
list-style-type: none;
}
This is the result:
Problem is that li's have fixed height. So when you add second level list there is no space for them.
Change height to min-height and everything will works.
Example: http://jsfiddle.net/FJV8b/
Related
I'm very new to Dreamweaver, CSS and HTML. So I apologise if there's any obvious mistakes or solutions.
I'm trying to figure out how to separate words in my navigation menu. Because they always seem to be centred. I've tried adding "word-spacing" and other adjustments but wasn't able to come to a solution.
Just wondering if anyone's able to offer any suggestions in how I can fix this.
Any help is much appreciated,
Thank you.
CSS
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
float: left;
text-color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
width: 100%;
}
HTML
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
Remove width:100% from li so menu start from left side
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
float: left;
color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
}
ul li + li{
margin-left:10px;
}
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
or You want menu start from center remove float:left from li and add display: inline-block
.nav {
width: 100%;
height: 40px;
margin-top: 20px;
text-align: center;
}
ul {
margin: 0 auto;
padding: 0 100px;
border: 0;
list-style: none;
}
ul li {
display: inline-block;
color: white;
font: Helvetica;
font-size: 100%;
outline: 0 none;
}
ul li + li{
margin-left:10px;
}
<div class="menu">
<ul class="nav">
<li id="nav-products">Products</li>
<li id="nav-contact">Contact</li>
<li id="nav-about">About</li>
</ul>
</div>
Been trying to get this to work for a while now. I'm trying to create the menu for my new site, Ive set up the nav, ul, and li tags. Naturally, I have the actual buttons slightly larger than the text displaying, and I wish to have the A fill out the LI tag.
nav {
width: 100%;
min-width: 800px;
background-color: #EDEDED;
}
nav a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
nav ul {
list-style: none;
margin: auto auto auto 10vw;
height: 2em;
display: block;
}
nav ul li {
display: inline-block;
background-color: #DEDEDE;
vertical-align: middle;
padding: 0 50px 0 50px;
height: 2em;
line-height: 2em;
}
nav ul li:hover {
background-color: #FF0000;
}
<nav>
<ul>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
</ul>
</nav>
I feel like ive tried everything in:
How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?
Stretching <a> tag to fill entire <li>
Expand an <a> tag to fill the space
and I really feel like my code should give the same result. Can someone please point out what mistake I've made?
You had the right idea by adding display:block on the anchors, however the padding on your list item was affecting the result. Move that padding onto the anchors and you're all set.
nav {
width: 100%;
min-width: 800px;
background-color: #EDEDED;
}
nav a {
color: #000;
text-decoration: none;
height: 100%;
width: 100%;
display: block;
padding: 0 50px 0 50px;
box-sizing:border-box;
}
nav ul {
list-style: none;
margin: auto auto auto 10vw;
height: 2em;
display: block;
}
nav ul li {
display: inline-block;
background-color: #DEDEDE;
vertical-align: middle;
height: 2em;
line-height: 2em;
}
nav ul li:hover {
background-color: #FF0000;
}
<nav>
<ul>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
</ul>
</nav>
Remove the padding from the ul li:
nav ul li {padding:0px;}
If necessary add it to the nav ul li a:
nav ul li a {padding:0px 50px;}
I'm creating a web with a vertical navigation menu on the left. In this menu, I have several submenus which I would like to be expanded to the right when the mouse hovers the parent item.
Here is the html
<div id="leftmenu">
<ul>
<li>Item</li>
<li>item
<ul>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Item
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>item
<ul>
<li>SubItem</li>
<li>SubItme</li>
<li>SubItem</li>
</ul>
</li>
<li>item</li>
<li>Item</li>
</ul>
</div>
And here is my CSS
#leftmenu {
float: left;
margin: 30px;
font-weight: bold;
background: linear-gradient(#ffeb99, #ffe066);
border: 0;
border-radius: 10px;
}
#leftmenu ul {
position: relative;
border-radius: 10px;
display: inline-block;
}
#leftmenu ul ul {
display: none;
background: #e7c702;
}
#leftmenu ul li:hover > ul {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
left: 100%;
}
#leftmenu ul li a {
padding: 15px 30px;
display: block;
color: #757575;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
My problem is when I hover the mouse to an item that has subitems, the subitems appear but it down not in the same line as its parent item. Instead, it appears in the same line of the item the item I'm hovering. I'm learning CSS so I don't want to use any JavaScript in this case.
Please help me with this.
Sorry if I format something wrong since this is my first post here.
Thank you
You must write the <ul> tags before the <a> tags. Since, the <ul> is later going to be positioned as absolute, it is not going to affect the position of <a> tag...
I've edited the css a little bit to make it better, (hope you don't mind):
#leftmenu {
float: left;
margin: 30px;
font-weight: bold;
background: linear-gradient(#ffeb99, #ffe066);
border: 0;
border-radius: 10px;
}
#leftmenu ul {
position: relative;
border-radius: 10px;
display: inline-block;
list-style: none;
padding: 10px;
}
#leftmenu ul ul {
display: none;
background: #e7c702;
position: absolute;
top: 0;
left: 100%;
}
#leftmenu ul li{
position: relative;
}
#leftmenu ul li:hover > ul {
display: block;
}
#leftmenu ul li a {
padding: 15px 30px;
display: block;
color: #757575;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
This should do the trick.
When an absolutely positioned element is styled inside an element,
that has a position which is not 'static', the 'top', 'left', 'bottom'
and 'right' css properties are relative to the parent container.
So here's what I did:
I changed the position of <li> tags to 'relative' and the submenu
<ul> top value as 'top : 0px;'. That's it.
First of all let me apologize for asking such a newbie question. I have tried to search on the site for similar questions/answers but none of the fixes have worked. So here goes:
I have created a horizontal navigation bar from a popular YouTube tutorial and have got everything working just fine with the exception of one problem: I would really like to center this navigation bar which is within the navigation containing div. I know there must be an easy solution, but for the life of the edges Figured out.
I also had another question about the CSS: why did the author make CSS rules that included the ul tag before the id tag. For example, why did he write ul#navMenu instead of #navMenu ul?
Here's the HTML:
<body>
<div id="wrapper">
<div id="header"> <h1>The New Site
</h1></div>
<div id="navigation">
<ul id="navMenu">
<li>Home</li>
<li>hyperlink 2
<ul class="sub1">
<li>hyperlink 2.1</li>
<li>hyperlink 2.2
<ul class="sub2">
<li>hyperlink 2.2.1</li>
<li>hyperlink 2.2.2</li>
<li>hyperlink 2.2.3</li>
</ul>
</li>
<li>hyper link 2.3</li>
</ul>
</li><!--close hyperlink 2 -->
<li>hyperlink 3</li>
<li>hyperlink 4</li>
<li>hyperlink 5</li>
<li>hyperlink 6</li>
</ul><!--close main ul – navMenu -->
</div><!--close of navigation -->
<div id="main-text"> Etc........
And here's CSS: *Note: I had to put a . Before all of the ul#mainNave rules so that they would show up.
.* {
margin: 0px;
padding: 0px;
}
.body {
background-color:#FF9;
}
#wrapper {
width: 1000px;
margin: 0px auto;
padding: 0px;
background-color:#FCC;
}
#header {
margin: 0px;
padding: 0;
width: 100%;
height: 100px;
float: left;
background-color:#FEA601;
}
#navigation {
margin: 0px;
padding: 0px;
width: 100%;
height: 50px;
float: left;
vertical-align: middle;
background-color:#7979FF;
}
/*CSS for navigation hyperlinks*/
#navigation {
margin: 0 auto;
}
.ul#navMenu {
list-style-type: none;
}
.ul#navMenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 10pt;
}
.ul#navMenu li {
width: 135px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
.ul#navMenu a {
text-decoration: none;
display: block;
width: 135px;
height: 25;
line-height: 25px;
background-color: #000;
border: 1px solid #FFF;
border-radius: 0px;
color:#FFF;
}
.ul#navMenu .sub1 a {
margin-top: 0px;
}
.ul#navMenu .sub1 li {
}
.ul#navMenu .sub2 a {
margin-left: 0px;
}
.ul#navMenu li:hover > a {
background-color:#666;
}
.ul#navMenu li:hover a:hover {
background-color: #666;
}
.ul#navMenu ul.sub1 {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
.ul#navMenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 137px;
}
.ul#navMenu li:hover .sub1 {
display: block;
}
.ul#navMenu .sub1 li:hover .sub2 {
display: block;
}
/*end of navigation rules*/
/*Body rules*/
#main-text {
background-color:#FEC94B;
width: 970px;
Padding: 15px;
Height: auto;
float: left;
}
#footer {
width: 100%;
float: left;
height: 50px;
line-height: 50px;
background-color: #000;
color: #FFF;
text-align: center;
font-size: 10px;
}
#wrapper #navigation #navMenu {
text-align: center;
}
Thank you so much in advance and I greatly look forward to solving this problem.
Doug
Edit: I'm not sure what wrong but a lot of the CSS code did not show up – it all started with ul#navMenu.... Which happen to be part of my question as to why the author was writing CCS code like this.
JSFIDDLE
The reason it isn't centered at the moment is in your css, here:
ul#navMenu li {
...
float: left;
}
Change it to inline-block, like so:
ul#navMenu li {
display: inline-block;
/* old IE hack to get inline-block to work */
zoom: 1;
*display: inline;
}
Add text-align to the container:
ul#navMenu {
...
text-align: center;
}
And that will allow them to center, instead of forcing them left. Ensure the parent container(s) have text-align: center; on them.
See the updated jsFiddle
Finally, css selectors:
ul#navMenu - selects the ul that has the ID of navMenu
#navMenu ul - selects the ul that is the child of an element with the id of navMenu
ul#navMenu - ensures it only addresses any ul elements with id of navMenu, but could also be written simply #navMenu
ul#navMenu li - selects all the li elements that are the child of the ul with the id of navMenu - could also be written #navMenu li, since an ID should only occur once on a page.
Take a look at this website I am working on: new.AudioManiacProductions.com
A screenshot from Dreamweaver showing the divs can be found here: new.AudioManiacProductions.com/images/stack.png
Notice how to navigation bar is not centered and the "home" has an intent on the left side.
I want the nav bar to stretch the whole span of it's parent container and be centered both vertically and horizontally.
Here's my CSS for the navigation section of the page, the nav list item, and the links.
#nav {
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
text-align: center;
color: #FFF;
list-style: none;
line-height: auto;
verticle-align: middle;
}
#nav li {
padding: 0px;
display: block;
width: 20%;
list-style-type: none;
float: left;
text-align: center;
overflow: hidden;
line-height: auto;
verticle-align: middle;
}
#nav li a {
font-size: 18px;
font-weight: 600px;
text-decoration: none;
font-weight:800;
color:#FFF;
}
#nav li a:hover, a:visited {
color: #00F;
}
And here is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Packages</li>
<li>Quote</li>
<li>Contact Us</li>
</ul>
</div>
Any help is greatly appreciated!
Browsers set padding-left by default on UL tags. Remove the padding and that should help out.
#nav ul {
padding-left: 0;
}
or just clear all padding:
#nav ul {
padding: 0;
}