I'm trying to make a CSS/javascript dropdown menu (based on this example. This works. But I want to have a background color for my whole menu. I tried to place the <ul> inside a div and give this div a background color. However, the actual menu items do not appear inside the div when I view the page, they are under it. After some experimenting, I found out that this was caused by setting float: left; on the li elements that comprises the main menu items. (of cause, taking float: left; away means that the menu items are stacked on top of eachother in stead of side by side).
Does anyone know how to fix this?
If you are just trying to get a background color for your main menu items, you can add overflow:auto; or float:left; to the containing div tag.
If you want to set the background color of the sub-items, add it to the li ul rule.
Brief example here: http://www.danfsmith.com/so/css/suckerfish/menu.html
try adding the CSS property overflow: auto; to your <div/> or <ul/> which has the background.
I think what you are asking is how to set a background color for each link in your dropdown menu. If you create the menu with:
<ul class="navigation">
<li id="youarehere">Home</li>
<li>Blog</li>
<li>Papers</li>
<li>Programs</li>
<li>Activities</li>
<li>Contact</li>
<li>About</li>
</ul>
Then the CSS to set the background color is:
ul.navigation li a {
width: 111px;
padding: .5em 1em;
background-color: #993333;
color: #fff;
text-decoration: none;
text-align: left;
float: left;
border-bottom: solid 0px #fff;
border-top: solid 0px #fff;
border-left: solid 1px #000;
}
If you want the background colour for the div to show you'll need to clear the floats.
<div style="background-color: red">
<ul>
<li>asda</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
<span style="clear: both"></span>
</div>
Notice the span with the "clear: both" style in. That should do it.
Heres a link to a nice quirks mode post about it
http://www.quirksmode.org/css/clearing.html
Related
I have a list of items, 4 per row, each item is a gray rectangle with text in it. Problem: these items touch each other and I want space between them. Apparently some SASS variable can be changed but it sounds complex and there's no way I do anything complex to achieve something so elemental. Is there some simple solution to my problem?
Markup:
<div class='row'>
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li id='home_li_computing'>text1</li>
<li id='home_li_field'>text2</li>
<li id='home_li_thinking'>text3</li>
<li id='home_li_guide'>text4</li>
</ul>
</div>
CSS:
li {
border: 1px solid #ddd;
background-color: #eee;
}
You will need to reduce the width of the block-grid li items and then add a margin to take up the extra width.
Here is a simple css solution:
.large-block-grid-4 > li {
width: 20%;
margin: 2.5%;
}
.medium-block-grid-3 > li {
width: 28.33333%;
margin: 2.5%;
}
li {
border: 1px solid #ddd;
background-color: #eee;
}
You would need to add all the various widths and margins for all the block-grids that you intend to use.
The li is what spaces out the items and should be left alone. The easy solution is to put a container inside each li like this:
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li id="home_li_computing"><div class="list-container">text1</div></li>
<li id="home_li_field"><div class="list-container">text2</div></li>
<li id="home_li_thinking"><div class="list-container">text3</div></li>
<li id="home_li_guide"><div class="list-container">text4</div></li>
</ul>
And your css would look the same, just targets the container:
.list-container {
border: 1px solid #ddd;
background-color: #eee;
}
I would not recommend adjusting margin percentages on responsive frameworks as that's just asking for issues. If you want to adjust spacing, always use padding since that will eat the inside instead of add to the total width.
Ex. 5px of margin all-around on 33% width is 33% + 10px. 5px of padding to 33% width is still 33%. This works as long as border-box isn't turned off.
I am building my first website after reading through CSS and HTML.I was able to bring the header on my index page with nav bar and the brand. For the brand, I aligned it in the center using the margin-top property and set the navigation links using float property. However, when I inspect the ul element using firefox,
I see a margin-top and margin-bottom of 16 px each which I do not have a clue on how its getting added.
Is aligning the brand using the margin-top property the right way to center align?
Why is the ul element not taking the entire height of 44 px set for the header.
I am adding the plunker url for more details: http://plnkr.co/edit/RjQtIR?p=preview
Code for more details:
<header class="main-header">
<nav class="top-bar clearfix">
<span class="brand">Money Plant Services</span>
<section class="nav-menu">
<ul class="nav-items">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Downloads</li>
<li>Contact Us</li>
</ul>
</section>
</nav>
</header>
CSS:
.main-header{
width: 100%;
height:44px;
background-color: #3A3A3A;
}
.brand{
float: left;
margin-top: 12px;
padding-left: 10px;
color: #FFFFFF;
}
.nav-menu{
float:right;
}
.nav-items{
list-style: none;
}
.nav-items li{
float: left;
margin-right: 5px;
padding: 5px;
background-color: #FFFFFF;
}
li > a{
color: black;
text-decoration: none;
}
I hope this will helps you. Just replace the below code with yours it will works...
CSS:
.nav-items {
list-style: none;
margin: 0;
padding: 0;
margin-top:8px;
display: inline-block;
}
Ul has a default margin so you can remove that by adding....
<ul style="margin:0px">
Also margins are different from browser to browser so its worth checking out info online about it or test it for yourself using inspect element.
When aligning horixontally there are many ways to do it...
you could use the text-align method or the margin auto method or the custom padding way.(there are also other ways).
Example:
<div style="width:400px;height:20px;text-align:center;">
<div style="width:20px;height:20px;">
</div></div>
Example:
<div style="width:400px;height:20px;">
<div style="width:20px;height:20px;margin-left:auto;margin-right:auto;">
</div></div>
Vertical align is a bit harder but can be done with table cells (there are also other methods).
The right way to align is either using the text-align property or using auto margins as said by the w3c validation service.
Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
I have a JSFiddle that I've made here:
http://jsfiddle.net/agzF5/
If you hover over the menu items that aren't the first of type you'll notice there is some strange margin appearing after where the border would be if it were set, I was wondering as to how I can remove that?
Matt
JSFiddle here
You had your list items as display:inline-block;
I've floated them left, added display:block; and changed some properties on the wrapping element. so it still contains the floated elements, see below.
#menuNav-ul {
background: lightgrey repeat-x;
list-style-type: none;
padding: 0;
margin: 0;
border-bottom: 2px solid darkgrey;
display:block;
overflow:hidden;
}
#menuNav-ul li {
display: block;
border-right: 1px solid #bfbfbf;
margin: 0px;
padding: 0px;
float:left;
}
add
html, body{margin:0;}
to the top, body alone should probably work as well..
Others have answered with good solutions.
I wanted to leave this here in case it helps someone though.
The reason for this is that there is whitespace in your markup (totally fine), which inline-block renders as spaces.
If you are working with inline-block elements, you can to set the font-size of the parent to 0, then explicitly set the font-size of the child elements as a workaround for this.
You're setting your LI elements to be display:inline-block which means they will have a inline whitespace space between them (usually ~4px).
3 solutions:
1. LIVE DEMO
add font-size:0; to the UL
reset the font size to px for the LI elements
2. don't add display:inline-block; but float:left; your LI elements
3. (not recommended) add a -4px margin-left to your LI elements
P.S: an additional suggestion is not to style (colors, borders etc) you LI elements. Treat them like simple positioned containers for your styled <a> elements.
Well the simple solution is to add comment between your li items:
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li><!--
--><li>Page 1</li><!--
--><li>Page 2</li>
</ul>
</div>
Check it in action: http://jsfiddle.net/agzF5/7/
I am having a problem, for a while I have been trying to figure out how to resolve this issue. I will describe it very well below...
I am trying to use an image as a sprite image for an UL list. It should show an icon with text next to it, both the icon and the text should link to somewhere.
My first example look how I want it to be. When the font-size is set to 10px it looks ok...
As soon as I change the font-size from 10px to 16px...
Here is the CSS and HTML
CSS
#post-meta-wrapper{
list-style: none;
margin:20px 0 20px 20px;
width:400px;
}
#post-meta-wrapper li {
width:100%;
color: #44495B;
border-top: 1px dotted #CCC;
color: #999;
font-size: 10px;
line-height: 28px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 0px;
}
#post-meta-wrapper li a{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
padding-left:15px;
}
#post-meta-wrapper .meta-img {
background:#fff;
width: 15px;
height: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 8px;
overflow: hidden;
}
#post-meta-wrapper a:hover,
#post-meta-wrapper .active{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
width: 15px;
height: 10px;
}
The HTML
<ul id="post-meta-wrapper">
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
</ul>
JSFiddle Examples
This is the first one with the font-size: 10px http://jsfiddle.net/jasondavis/Mt87G/4/
This is the MESSED UP one with the font-size: 16px
http://jsfiddle.net/jasondavis/Mt87G/5/
Help me?
Ok I know I could just change the sprite image to have huge spaces around each object in the image and then you wouldn't notice this problem, but I would really like to resolve this issue the right way. I mean is it possible to do what I am trying to do with just CSS or does the image need to be spaced out? I have seen other sprite images where they are together close like mine and I have seen some where everything is like 100px apart.
Please help me if you know how to resolve this, I have tried eveything I can think of without any luck yet. I need to do this on a mass scale so I would like to get it done correctly now before I do that. Thank you for any help
I would suggest using the :before pseudo element. Add the class to your anchor link or the list item and style the pseduo element to hold the sprite image. This gives the same effect as being able to set a specific size on a span, without the need of extra markup.
<li class="icon">
<a href="#">Test Link<a/>
<li>
.icon:before{
content: '';
width: 10px;
height: 10px;
display: block;
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
/* other css for positioning */
}
If you want the icon to be part of the link, the before should to be on the anchor. It will be underlined if the anchor is underlined.
If you put it on the li, the link can still be underlined without the icon being underlined, but to make it clickable you need to work some magic with padding on the anchors.
Note: As mentioned by jimplode, this will not work in IE <= 7 So if you need it to work there (sad for you) better to use the extra markup.
Close the span
Set width, height, float and margin-top of this span to align with base of line height
Try this:
http://jsfiddle.net/Mt87G/19/
CSS
#first a{
font-size: 10px;
padding-left: 5px;
line-height: 12px;
}
#second a{
font-size: 22px;
line-height: 25px;
padding-left: 5px;
}
.meta-img{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
width: 13px;
height: 12px;
float: left;
}
#first .meta-img{
margin-top: 4px
}
#second .meta-img{
margin-top: 7px
}
HTML
<p id="first">
<a href="#">
<span class="meta-img"></span>Test link
</a>
</p>
<p id="second">
<a href="#">
<span class="meta-img"></span>Test link
</a>
</p>
I think you can give more spaces between the images.
If you have individual images then you can use http://spritegen.website-performance.org/ to create sprite images and you can provide custom space between sprite images.
If you are changing the font-size dynamically then also you can use the sprite with more space and can only change the background-position.
Well written question! I simplified your two sample fiddles into one fiddle:
http://jsfiddle.net/Mt87G/6/
It seems in the 16px-variant the image is just showing a bit more as the line-height becomes bigger because of the larger font size.
Edited: apparently SO uses sprites as well, see for example this image. If I use firebug to increase the line-height for the "vote-up" button for example, at some point the next sprite starts showing up.
So, if you would follow their lead, it seems you could:
set a fixed height on your element
leave some space between sprites, just to be sure
Strict answer though to your question then seems "no, not necessary".
As you have your background image on an anchor, you could always put a span inside the anchor for the image, this way you can control the width and height of the span which in turn will only show the portion of the image you want it to use.
I generally leave a few pixels in between sprites due to rounding errors that I've seen on mobile Safari. If there is just 1 pixel in between the sprites, sometimes there is a hair-width sliver of the next sprite over at the edge of the element. Adding a little more buffer room avoids this problem. If you are using PNG files, there isn't really much additional file size (extremely small increase) with more spacing due to the way they compress.