I have a django app that has a horizontal nav. The horizontal nav looks like the image below.
Now what I want to do is edit the sub navigation for storage orders. For both Delivery and collection orders tabs, I want both of these curved tab images removed, and have both of these tab in a retangular background color similar to my tabs. Something like this.
base_menu.html
<ul id="toc">
<li id="current"><span>Home</span></li>
<li><span>Create quote/order</span></li>
<li><span> Item Search</span></li>
<li><span>Storage orders</span><br/>
<ul class="subnav">
<li><span>Delivery orders</span></li><br/>
<li><span>Collection orders</span></li>
</ul>
</li>
<li><span>Delivery list</span></li>
<li><span>Collection list</span></li>
<li><span>Export for invoicing</span></li>
<li><span>Backup data</span></li>
<li><span>Help</span></li>
</ul>
<br/>
base.css
ul#toc {
height: 2em;
list-style: none;
margin-left: 20px;
padding: 0;
position relative;
}
ul#toc li{
background:#ffffff url(../images/tab.png);
float: left;
margin: 0 1px 0 0;
}
ul#toc span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
ul#toc a {
color: #000000;
height: 2em;
float: left;
text-decoration: none;
padding-left: 10px;
}
ul#toc a:hover {
background: url(../images/tab2.png);
text-decoration: underline;
}
ul#toc a:hover span{
background: url(../images/tab2.png) 100% 0;
}
ul.subnav {
float:left;
display:none;
position:absolute;
margin-top:10px;
z-index:999;
padding-top:2px;
}
ul#toc li:hover .subnav {
display:block;
}
Update #Yule I have done what you said, but nothing changes. I have instead wrote.
ul.subnav a {
background: url(../images/squaretab.png)
}
And this gives me this.
Now here U have a grey image on the left, but only partially. I need to remove that green tab completely. How would I do this?
Just set a BG image on subnav li:
ul.subnav li{
background: #ffffff url(../images/squaretab.png) no-repeat;
}
ul.subnav li a{
background: none;
}
Related
I'm making a simple ebook site so me and my friends can access my ebooks and all that jazz. My menu has this black box or space on the end and I'm not sure why. I tried resizing the overall menu and I don't know any way I can make the box act like the home button. It's perfect, there's no space near it. Just at the end. html and css for reference.
<body>
<img src="logo2.png" class="logo" />
<div class="br" />
<ul class="menu">
<li class="list">Home</li>
<li>Ebooks
<ul class="dropdown1">
<li>Case studies, theses, academia, educational</li>
</ul>
</li>
<li>Extras
<ul class="dropdown2">
<li>test</li>
</ul>
</li>
<li>News</li>
<li>Site map</li>
</ul>
<div class="content">
<br>
<p>test</p>
<br>
</div>
</body>
</html>
And the css:
body{
background-color:#0e0d0d;
}
#font-face {
font-family: Lato-Light;
src: url('Lato-Light.ttf');
}
#font-face {
font-family: Lato-Light-Italic;
src: url('Lato-LightItalic.ttf');
}
img.logo {
width: 500px;
height: auto;
display: block;
margin-left: auto;
margin-top:60px;
margin-right: auto
}
div.br {
margin-top:60px;
}
ul{
padding:0px;
font-family:Lato-Light;
background: #000000;
color:#f9a724;
width:535px;
margin-left:auto;
margin-right:auto;
}
ul li{
padding:0px;
margin:0px;
display: inline-block;
position: relative;
line-height: 21px;
text-align: center;
}
ul li a{
display: block;
padding: 8px 25px;
color: #f9a724;
text-decoration: none;
}
ul li a:hover{
color: #000000;
background: #f9a724;
}
ul li ul.dropdown1 {
min-width: 150px; /* Set width of the dropdown */
max-width:350px;
background: #000000;
display: none;
position: absolute;
z-index: 999;
}
ul li ul.dropdown2 {
min-width: 150px; /* Set width of the dropdown */
max-width:200px;
background: #000000;
display: none;
position: absolute;
z-index: 999;
}
ul li:hover ul.dropdown1 {
display: block; /* Display the dropdown */
}
ul li ul.dropdown1 li {
display: block;
}
ul li:hover ul.dropdown2 {
display: block; /* Display the dropdown */
}
ul li ul.dropdown2 li {
display: block;
}
div.content {
width:535px;
background: #000000;
margin-left:auto;
margin-right:auto;
}
p {
color: #f9a724;
text-align:center;
word-wrap: break-word;
margin-right:50px;
margin-left:50px;
font-family:Lato-Light;
}
https://jsfiddle.net/mncvhoz9/
If you don't want to have to worry about getting down to exact pixel numbers, and/or making each item the same width, you should be able to add the following declarations, though I'm not sure how well it's supported by all the browser versions (it's been a while since I've looked into it):
ul {
display: table;
}
li {
display: table-cell;
}
Example with those added to your code: https://jsfiddle.net/nfqs0j0u/
Just add the following CSS in your file
ul li a{
display: block;
padding: 9px 29.5px;
color: #f9a724;
text-decoration: none;
}
it's not a black box it is the background of your ul element you can simply change the width of your ul to remove this black area:
ul {
width: 488px;
}
ul have margin top and bottom, because of that it has black space.So give like this,it will work.
div.br ul.menu{
margin-bottom:0px
}
Working Demo
If you don't need to reduce the width of ul, then you should set the width of li.
ul li{ width: 103px; }
Please try this one:
Css code like this:
ul{
padding:0px;
font-family:Lato-Light;
background: #000000;
color:#f9a724;
width:488px;
margin-left:auto;
margin-right:auto;
}
Demo
I have a dropdown list item in my navbar and can't get the dropdown section to align underneath the parent link. I am trying to use just css and know I've done it before, it's just stumping me at the moment. None of the other examples I've come across use the same menu format so it's been troubling trying to force fit pieces of code. Please help me with this easy solution
HTML
<div id="navbar">
<li>Home</li><!--
--><li>Link2</li><!--
--><li>Link3</li><!--
--><li><a href="#">Link4
<ul>
<li>SubLink1</li><br />
<li>SubLink2</li><br />
<li>SubLink3</li><br />
<li>SubLink4</li>
</ul>
</a></li><!--
--><li>Link5</li>
</div>
CSS
#navbar {
width:75%;
margin:0px auto;
text-align:right;
position:relative;
top:218px;
}
#navbar li {
list-style:none;
display:inline;
position:relative;
}
#navbar a {
background-color:#862D59;
font-size:18px;
width:60px;
margin:0px;
padding:10px 15px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#navbar a:hover {
background-color:#602040;
border-bottom:solid 4px #969;
}
#navbar li ul {
display:none;
}
#navbar li:hover ul {
position:absolute;
display:block;
}
Working Example
https://jsfiddle.net/o6Ldutp5/
Firstly, you should use a reset css of some kind to remove the default margin / padding attached to ul & li.
Then validate your HTML, it contained a number of errors such as missing the opening ul etc.
Then it's just a matter of using position:absolute and appropriate values.
top:100% will place the menu directly below the li parent (with position:relative) regardless of the height of the li.
left:0 will align the left edge of the submenu to the left side of the parent li.
#navbar {
margin: 0px auto;
text-align: right;
}
ul,
li {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
display: inline-block;
position: relative;
}
#navbar a {
background-color: #862D59;
font-size: 18px;
width: 60px;
margin: 0px;
padding: 10px 15px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
}
#navbar a:hover {
background-color: #602040;
border-bottom: solid 4px #969;
}
#navbar li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
#navbar li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Home
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<ul>
<li>SubLink1
</li>
<li>SubLink2
</li>
<li>SubLink3
</li>
<li>SubLink4
</li>
</ul>
</li>
<li>Link5
</li>
</ul>
</div>
I've written my own minimal CSS without the styling, try replacing your whole CSS with this -
I've also edited your HTML by removing the comments and <br /> tags
div#navbar li {
display: inline-block;
}
div#navbar li ul {
width: 200px;
position: absolute;
display: none;
top: 10px;
}
div#navbar li ul li {
display: block;
width: 150px;
}
div#navbar li:hover ul {
display: block;
}
ul,ol,li {
margin-left: 0;
padding-left: 0;
}
Here is the fiddle
I'm working on this vertical menu. I need it to be flexible, so even longer text can be shown (as seen in the middle item). I want to keep the "padding" of the items, but I also want to increase the space between the lines for multi-line items (if I increase line-height, the distance from the edges gets bigger). How can I achieve that without increasing the "padding"? The images I use must have transparent background, so I can't use combination color-image (there is a gradient behind).
<div id="nav-list">
<ul>
<li><span class="button-middle">Button</span><span class="button-bottom"></span></li>
<li><span class="button-middle">Another button</span><span class="button-bottom"></span></li>
<li><span class="button-middle">The longest button in the world, even longer</span><span class="button-bottom"></span></li>
<li><span class="button-middle">Button</span><span class="button-bottom"></span></li>
<li><span class="button-middle">Btn</span><span class="button-bottom"></span></li>
</ul>
</div>
CSS:
* {
border: 0;
margin: 0;
padding: 0;
}
#nav-list {
width: 195px;
}
#nav-list ul {
list-style: none;
}
#nav-list ul li {
display: block;
margin: 5px 2px 0 5px;
font-size: 13px;
}
#nav-list ul li a {
display: block;
background: url('http://i41.tinypic.com/20h4hvp.png') top left no-repeat;
padding-top: 10px;
line-height: 10px;
color: #000000;
text-decoration: none;
}
#nav-list ul li a .button-middle {
width: 183px;
background: #b6b6b6;
padding-left: 5px;
display: block;
}
#nav-list ul li a .button-bottom {
width: 188px;
height: 10px;
background: url('http://i39.tinypic.com/2mrd343.png') top left no-repeat;
display: block;
}
Note: I can't use CSS3 because of its weak browser support.
I think the best you can do is add something like:
span.button-middle {
line-height: 1.2;
}
You could also decrease the line-height of the top and bottom of the button to compensate for the bigger middle section:
span.button-bottom {
line-height: 0.8;
}
Well... after hours of struggle I managed to solve it. I had to use different images, add one more span and use some relative positioning.
http://jsfiddle.net/uNCsp/
<div id="nav-list">
<ul>
<li><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></li>
<li><span class="button-top"><span class="button-middle">Another button</span></span><span class="button-bottom"></span></li>
<li><span class="button-top"><span class="button-middle">Even longer button button button button</span></span><span class="button-bottom"></span></li>
<li><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></li>
<li><span class="button-top"><span class="button-middle">Button</span></span><span class="button-bottom"></span></li>
</ul>
</div>
CSS:
#nav-list {
width: 195px;
}
#nav-list ul {
list-style: none;
}
#nav-list ul li {
display: block;
margin: 5px 2px 0 5px;
font-size: 13px;
}
#nav-list ul li a {
display: block;
color: #000000;
text-decoration: none;
}
#nav-list ul li a .button-top {
background: url('http://i43.tinypic.com/r0urzp.png') top left no-repeat;
display: block;
}
#nav-list ul li a .button-middle {
position: relative;
top: 6px;
background: transparent;
padding: 0 0 0 5px;
display: block; /* IE7 bug */
line-height: 16px;
padding-bottom: 3px;
}
#nav-list ul li a .button-bottom {
width: 188px;
height: 10px;
background: url('http://i44.tinypic.com/15fqbti.png') top left no-repeat;
display: block;
}
#nav-list ul li a:hover .button-top {
background: url('http://i39.tinypic.com/334qfsz.png') top left no-repeat;
}
#nav-list ul li a:hover .button-bottom {
background: url('http://i41.tinypic.com/2ewinti.png') top left no-repeat;
}
There is a problem in IE7 (marked in the code), but I believe I'll solve that quickly.
I have a horizontal menu navigation.
The code is:
<div class="menu-holder">
<ul class="menu">
<li>
Home
</li>
<li>
Profile
</li>
<li>
Billing
<ul class="submenu">
<li>New</li>
<li>Find</li>
</ul>
</li>
<li>
Workspaces
</li>
<li>
Manage Leaves
</li>
<li>
Blogs
</li>
<li>
News
</li>
<li>
Search
</li>
<li>
Albums
</li>
</ul>
</div>
The CSS:
ul.menu {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 960px;
background: #222;
font-size: 1.2em;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 10px;
behavior: url(CSS3PIE);
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.menu li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover{
background: url(Images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 17px;
height: 35px;
float: left;
background: url(Images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 44px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #111;
behavior: url(CSS3PIE);
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(Images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover {
background: #222 url(Images/dropdown_linkbg.gif) no-repeat 10px center;
}
There is also jQuery has been used to create this navigation.
Now I want to make the li completely cover ui. But without applying fixed width to li. Because there is also another menu item(not in picture) which will be visible depending on the role of the logged in user.
Is it possible?
I believe the best way to solve this is to use display: table/table-cell instead of float: left. Here's a fiddle: http://jsfiddle.net/nk7yY/
Basically, what you'd change in your code is:
ul.menu {
display: table;
width: 100%; /* Tables are not 100% width like block elements */
/* Everything you already had except float: left; which I don't really get why you have to begin with */
}
ul.menu li {
display: table-cell;
/* Everything you already had except float: left; */
}
ul.menu li a {
/* Just remove the float here as well */
}
Edit: This won't work in old IE though, but you can keep the float for them (with a *float hack for example).
Are you saying you have 9 ul.menu li elements and there will some times be a 10th? and that you want all 9 (or 10) together to fill the width of the ul.menu?
or are you talking about the ul.submenu?
Just saying "make the li completely cover ui" also sounds like you want a single <li> to cover the entire width of the navigation ui (assuming its your <ul> and not some other parts of your UI.
Is this what your trying to do? or do you just want all 9 or 10 <li> items to fill the space of the <ul> ?
If so you should probably put a class on <ul class="menu"> which changes depending on the role of the logged in user so that you can adjust the styling accordingly.
Supply a bit more information on what your attempting to do and what browsers your wanting to support i.e. for CSS3.
I have a django app that has a horizontal navigation. For some reason I am having problems creating a drop down menu.
Have a look at both of these images
The first image shows the horizontal navigation. On the left side of the image, there is a menu.
The second image shows when I hover over Storage orders (This is the only link that has a drop down menu.) For some reason the right hand side of the tab seems a bit off. This is because the length of the tab for storage, delivery and collection are different due to the number of words. I want to try to make all of these three tabs the same length if possible.
Another problem that I have is the left hand side menu moves to the right when I move my curser over storage orders.
base_menu.html
<ul id="toc">
<li id="current"><span>Home</span></li>
<li><span>Create quote/order</span></li>
<li><span> Item Search</span></li>
<li><span>Storage orders</span><br/>
<ul class="subnav">
<li><span>Delivery orders</span></li><br/>
<li><span>Collection orders</span></li>
</ul>
</li>
<li><span>Delivery list</span></li>
<li><span>Collection list</span></li>
<li><span>Export for invoicing</span></li>
<li><span>Backup data</span></li>
<li><span>Help</span></li>
</ul>
<br/>
base.css
ul#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ul#toc li{
background:#ffffff url(../images/tab.png);
float: left;
margin: 0 1px 0 0;
}
ul#toc span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
ul#toc a {
color: #000000;
height: 2em;
float: left;
text-decoration: none;
padding-left: 10px;
}
ul#toc a:hover {
background: url(../images/tab2.png);
text-decoration: underline;
}
ul#toc a:hover span {
background: url(../images/tab2.png) 100% 0;
background-position: 100% -120px;
}
ul.subnav {
float:left;
display:none;
position:absolute;
}
ul#toc li:hover .subnav {
display:block;
}
EDIT: #Andres: If I make the change, you can see from the image below, the drop down tab needs to be lowered a bit more. Also, the collection tab is missing as well, but the good thing is the left hand menu does not shift to the right.
Update #Andres: I have removed the tag in the template has made the tab re-appear. Now using margin-top:10px seem to work. Now from the image below, I need to make sure my drop-down box can overlap the delivery header. And I think I may be done.
Try this:
ul#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ul#toc li{
background:#ffffff url(../images/tab.png);
float: left;
margin: 0 1px 0 0;
position:relative;
}
ul#toc span {
background: url(../images/tab.png) 100% 0;
display: block;
padding-right: 10px;
}
ul#toc a {
color: #000000;
float: left;
text-decoration: none;
padding-left: 10px;
}
ul#toc a:hover {
background: url(../images/tab2.png);
text-decoration: underline;
}
ul#toc a:hover span {
background: url(../images/tab2.png) 100% 0;
background-position: 100% -120px;
}
ul.subnav {
float:left;
display:none;
position:absolute;
}
ul#toc li:hover .subnav {
display:block;
}
since your ul.subnav class is still in the flow of things when it pops up it shifts things on the bottom, if you position it absolutely, relative to the parent li it should fix things up.