I have a a breadcrumb in my subheader however the active breadcrumb appears underneath the list. I would like it so that they are both in the same line.
HTML:
<div id="breadcrumb">
<ul>
<li>Home ></li>
<li class="active">Marketing Items</li> </ul> </div>
CSS:
#breadcrumb {
font-size:11px;
background-color:#F2F2F2;
}
#breadcrumb ul {
margin:0px;
margin-bottom:0px;
margin-left:4px;
list-style: none;
background-color:#F2F2F2;
}
#breadcrumb .active {
color:#B3B3B3;
}
Here is also the jsfiddle: http://jsfiddle.net/4nRPY/
Use float:left or display: inline-block. But, with float left you have to clear the element right after that.
#breadcrumb ul li{
float: left;
}
Use display: inline-block; on your <li> tags
#breadcrumb ul li {
display: inline-block;
}
DEMO: http://jsfiddle.net/4nRPY/2/
You can this way to chive to that
li{float:left;}
Demo http://jsfiddle.net/4nRPY/3/
I prefer a pseudo element:
JSFiddle
HTML
<div id="breadcrumb">
<ul>
<li>Home</li>
<li class="active">Marketing Items</li>
</ul>
</div>
CSS
#breadcrumb ul li:after {
content:">";
padding:0 0.5em;
}
#breadcrumb ul li:last-child:after {
content:"";
padding:0;
}
Slighty less browser support but no extraneous HTML mark-up and you can change it throughout your site by changing one CSS property.
Related
I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}
I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.
I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help
#Contentmenu ul {
margin: 0;
padding: 40px;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {
display: inline;
padding:10px;
float: left;
}
#contentmenu a {
display:block;
padding:10px;
width:200px;
color:#ffffff;
font-size:26px;
background-color:#c7daff;
}
#Contentsubmenu ul {
margin: 0;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {
display:block;
floa:left;
}
#contentsubmenu a {
display:block;
width:200px;
color:#000000;
font-size:20px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
HTML
<div id="contentmenu">
<ul>
<li>Header 1
<div id="contentsubmenu">
<ul>
<li>Article 1</li>
<li><a href="#" Article 2</a></li>
</ul>
</div>
</li>
<li>Articl3</li>
</ul>
if you want to only target the top-level , you would use this:
#contentmenu > ul
and
#contentmenu > ul > li
Also, CSS is case-sensitive, so make sure you are using #contentmenu
Does this fix your other issue as well?
Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.
Demo on JSFiddle
Therefore that you are new in CSS:
Try to write clean code with correct indentations.
Here's the HTML
<ul>
<li>Salads</li>
<li>Fruits
<ul>
<li>Apples</li>
<li>Prunes</li>
</ul>
</li>
<li>Main Course</li>
</ul>
Here's what it looks like now:
Salads Fruits
Apples Prunes
Main Course
And here's what I'd like it to look like:
Salads Fruits Main Course
Apples Prunes
How can I achieve this, without modifying the HTML?
Current CSS:
ul {
list-style:none;
display:block;
}
li {
display:inline-block;
}
This results in the display:
Salads Fruits Main Course
Apples Prunes
Here is the CSS I used.
ul {
list-style:none;
display:block;
float: left;
clear: both;
width: 100%;
}
li {
display: inline;
}
If you don't want the individual fruits to start a little way across the page - remove the padding with this style rule:
ul > li > ul {
padding-left: 0;
}
All of the above will still work if you nest more items too. For example:
<ul>
<li>Salads
<ul>
<li>Green Leaf</li>
<li>Chicken</li>
</ul>
</li>
<li>Fruits
<ul>
<li>Apples</li>
<li>Prunes</li>
</ul>
</li>
<li>Main Course</li>
</ul>
You should style the ul inside the li, and the li inside the ul,
View demo here. I hope it helps.
CSS for a quick look:
ul {
list-style:none;
display:block;
float: left;
clear: both;
width: 100%;
}
li {
display: inline;
}
ul > li > ul {
padding-left: 0;
}
you will need to apply styles to the ULs INSIDE the lis. Try this out
ul li {
float: left;
}
I am trying to setup a menu with sub menu that contains ul. My question is how to remove the sub ul menu background image that inherits from the menu ul. I appreciate any help. Thanks a lot!
my html
<ul id="menuBar">
<li id="test1">test1</li>
<li id="test2">Pro1
<div class="subMenu">
<ul>
<li>sub1</li> //all li a would get the same
//backgroundimage btForTest2.jpg
// butI just want a clean background
<li>sub2</li>
<li>sub3</li>
</ul>
<ul>
<li>Volleyball</li>
<li>Walking</li>
<li>Water Shoes</li>
</ul>
</div> <!--end of submenu-->
</li>
</ul>
CSS:
#menuBar #mens a{
background:url("../images/btForTest2.jpg") no-repeat;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}
.subMenu li a{
list-style:none;
margin: 0;
padding: 5px;
width: 200px; //width is 112px not 200 px
float: left;
color:#ffffff;
text-decoration:none;
}
.subMenu li a
{
background: none;
}
if it is not sticking, you can add the !important flag
.subMenu li a
{
background: none !important;
}
Add the following to the .subMenu li a section:
background:none !important;
Edit: Opened tab before durilai answered, so I didn't see his answer...
Instead of adding another rule to overwrite the mistake, rewrite the selector on your first rule to only apply to the outer list items:
#menuBar > li > a {
background: red;
}
> means a direct descendant.
I got a reallly simple drop-down menu but got a problem with the submenus width.
See it here:
http://dl.dropbox.com/u/70953/SOSfrontpage.html
My HTML is:
<div id="navigation">
<div id="menu-dropdown">
<ul class="menu">
<li class="menu_punkt">Frontpage</li>
<li class="menu_punkt">Who are we?</li>
<li class="menu_punkt">This is a test
<ul>
<li>Your profile</li>
<li>New profile</li>
</ul>
</li>
<li class="menu_punkt">SOS Profile
<ul>
<li>Your profile</li>
<li>New user</li>
</ul>
</li><li class="menu_punkt">Log ind</li>
</ul>
</div>
</div>
and my CSS is:
/*horisontal navbar*/
#menu-dropdown {
list-style: none;
position: absolute;
top: 600px;
}
#menu-dropdown ul li {
float:left;
list-style-type: none;
font-size: 0.8em;
}
#menu-dropdown li ul {
position: absolute;
display: none;
background-color:#cdc3a2;
padding: 0px;
margin-bottom:1px;
}
#menu-dropdown ul ul li {
clear: both;
}
#menu-dropdown ul li a {
display: block;
padding: 10px;
color:#102B47;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size: 1em;
}
#menu-dropdown ul li a:hover {
background-color: #cdc3a2;
}
#menu-dropdown li:hover ul, li.over ul {
display: block;
}
You can see my problem here:
http://dl.dropbox.com/u/70953/SOSfrontpage.html
Regards
- Mestika
Add a width to the submenu anchors
.menu ul li a { width:200px;}
Also add the hover to the li (not teh anchor) that way the top menu stays selected when you are in the submenus
#menu-dropdown ul li:hover, #menu-dropdown ul li.hover {
background-color: #cdc3a2;
}
I think you should add a width to the menu-dropdown ul li class.
A great way to build a css drop down menu is son of a suckerfish.
Yes JAO is right u shoud give width to li like this
#menu-dropdown ul ul li {
clear:both;
width:107px;}
you can get more clue from here http://www.cssnewbie.com/example/css-dropdown-menu/
Try:
.menu ul li li {width: 100%}
when I learnt to write css dropdown menus I based a lot of experiments on the ton of examples on this site : http://www.cssplay.co.uk/menus/ - very clear css / html examples, minimal, clean code
hope it helps :)