I'm trying to make a menu for a web page and I'm inserting images as menu separators.
maybe this is a little stupid question but I'm trying to remove the first image of my menu
this is my code:
.menu ul li {
background: url(separator.png) no-repeat left;
display: inline;
float: left;
height: 50px;
line-height: 50px;
margin: 0;
width: 155px;
and tried this to remove the first separator:
.menu a.first {
background-image: none;
}
I tried to do what that's in this pages:
http://jsfiddle.net/Jaybles/uJdhH/1/
http://www.e-blueprint.co.uk/2011/how-to-use-an-image-as-a-menu-separator/
but it don't work
Try this:
.menu li:first-child{
background-image: none;
}
because your background is on the li tag and your .first class is on an anchor tag you are removing what ever background the anchor holds not the list item.
change to :
.menu li.first {
background-image: none;
}
You are specifying a background property above for a list item and then removing the background image on the a.first class. You should update .menu class to:
.menu li.first { background:none; }
Well, you had background to < li > ... then removed background from < a > .. 'Won't work'
.menu ul li {
background: url(separator.png) no-repeat left;
display: inline;
float: left;
height: 50px;
line-height: 50px;
margin: 0;
width: 155px;
and tried this to remove the first separator:
.menu ul li:first-child {
background-image: none;
}
jsfiddle : http://jsfiddle.net/sd6Vu/
Related
In my PSD file I have a nav bar with some light effect in the background. I'm a bit concerned whether should I slice the whole nav bar and then add text or just slice it into smaller pieces? Which would be the best practice?
I'm new to this subject so any ideas would be so much appreciated.
You for sure want to cut the nav bar images into pieces. Add them to the background of each of the nav bar links with css. It will save you a big headache later.
Here is a good example of a jsfiddle
Css
#nav {
display: block;
height: 40px;
line-height: 35px;
list-style: none outside none;
margin: 20px auto 0 auto;
position: relative;
max-width: 750px;
min-width: 750px;
width: 78.2%;
}
#nav li {
display: inline;
text-align: center;
float:left;
}
#nav li a{
color: #fff;
display: block;
float: left;
font-family: HelveticaNeue-light,Helvetica,sans-serif;
font-size: 1em;
height: 100%;
padding: 0px 23px 0;
text-align: center;
text-decoration: none;
line-height: 40px;
background:#4D4D4D;
position: relative;
}
#nav li a span {
position: absolute;
left: 0;
top: 40px;
display: none
}
#nav li a:hover, #nav .active a {
background: url("path/to/image.png") no-repeat bottom center #a4c723;
color: #4d4d4d;
}
#nav li a:hover span, #nav .active a span {
display: block;
}
if you mean gradients, you can use gradient generator http://www.colorzilla.com/gradient-editor/
As for me, using as few images as possible is best practice. Draw your navbar with css, good luck
it would be great, when I can click the <li> container and in it is the <a> ..
So my container is width: 100px and height: 100px but my tag only width: 20px and height: 15px.
So I can only click on the text in the tag.
Can I change that?
<li>
SEM
</li>
CSS:
.menu ul li {
background-image: url("../images/menu_background.png");
background-position: 1px center;
background-repeat: repeat-x;
border-color: #000000;
border-right: 1px solid #000000;
float: left;
font-family: 'Open Sans',sans-serif;
font-size: 16px;
height: 38px;
list-style-type: none;
padding: 0 34px;
vertical-align: middle;
}
.menu ul li a {
color: #FFFFFF;
display: block;
line-height: 35px;
text-decoration: none;
}
that doesn't work..
Set a block context property on it.
li a {
display:block;
}
You should apply display: block to your 'a' tag
An example : http://jsfiddle.net/e49Tg/
You can try li > a { display: block; } in your stylesheet. Make sure you prefix the li with the appropriate ul class or selector, just so you keep your change isolated to that occurrence.
I can't clearly get what your problem is, if you want an <a> tag to be sized, the solution is as proposed: the "display" property should be either "block" or "inline-block".
In case you want it to have the same size as the parent it should also have the size directives, like:
li a { display: block; width:100%; height: 100% }
and if you want it to be so when clicked, a pure css solution would be
li a:active {
display: block; width:100%; height: 100%;
}
If this isn't answer to your question, explain more.
Not too sure what I'm doing wrong here. I swear I've had this working in the past, but for some reason I cannot get the background image to show when you hover over the navigation item.
I've tried to add a width, but that doesn't seem to work. That only makes the hover all sorts of crazy.
Here's the current CSS:
.nav ul li {
display: inline-block;
margin-left: 15px;
}
.nav ul li a {
text-decoration: none;
color: #760706;
display: block;
position: relative;
}
.nav ul li a:hover {
background: url(imgs/ornament.png) -10px 2px no-repeat;
}
But this is the current result when you hover:
If I increase the width of the anchor element and change it to inline-block it only increases the width of the navigation:
CSS:
.nav {
float: right;
font: 1.2rem "rosewoodfill", Georgia, "Times New Roman", Times, serif;
margin-top: 35px;
}
.nav ul li {
display: inline-block;
margin-left: 15px;
}
.nav ul li a {
text-decoration: none;
color: #760706;
display: inline-block;
position: relative;
width: 150px;
}
.nav ul li a:hover {
background: url(imgs/ornament.png) -10px 2px no-repeat;
}
Result:
Not too sure if I am missing something or what.
I created a pen to help illustrate what I'm trying to do:
http://codepen.io/ultraloveninja/pen/GfAuI
I think the problem lies with the position of the background.
.nav ul li a:hover {
background: url(imgs/ornament.png) -10px 2px no-repeat;
}
The -10px means the background position is -10 pixels on the x axis and is positioned 2 pixels down on the y axis. So if your image is 10px wide you won't be seeing it appear as it is being pulled to the left by 10px. If you set the code to:
.nav ul li a:hover {
background: url(imgs/ornament.png) 0 2px no-repeat;
}
The image will appear to the very left of the anchor tag on hover, and will be placed 2px down. You can then add some padding to the left hand side of the anchor so that the text doesn't cover the image (assuming you would want this).
.nav ul li a {
text-decoration: none;
color: #760706;
display: inline-block;
padding-left: 15px;
position: relative;
width: 135px;
}
.nav ul li a:hover {
background: url(imgs/ornament.png) 0 2px no-repeat;
}
Because you are using an inline-block element you can't have the background image extend beyond the content. However, if you use the pseudo-selector :before you can make it work like this:
.nav ul li a:before {
content: "."; /*You have to have some sort of content for this to work.*/
display: inline-block;
width: 15px;
color: #fff /*This should match your background color so that you can't see it*/
}
.nav ul li a:hover:before {
background:url(img/url) 0 2px no-repeat;
}
That will provide the space for the image to show up. Then when you hover over the item it will show up.
You have to have content in the before for it to work. A period is small. If you then set the color to the same as the background color that it is on then you won't be able to see it.
I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolute for the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...
How can I solve this?
Here is the code:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
<ul class="level_1">
<li>
Level one (1)
<ul class="level_2">
<li>Level two (1)</li>
</ul>
</li>
<li>Level one (2)</li>
</ul>
<p>Paragraph</p>
See the result here: http://jsfiddle.net/5uf2Y/
Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...
You have forgotten two elements for display 100%.
Correction here
1st elements forgets it's :
Position relative on level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
**position:relative;**
}
2nd elements corrections it's :
change size of 2nd li
.level_2 {
display: none;
position: absolute;
width: 100%;
}
With "width:100%" on .level_2 it automatically turns out with the width of its parent.
Add position:relative to level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
position:relative;
}
Try to set the body { width:100%;} property, it will fix this issue, like shown below (added to your original CSS):
body{ width:100%;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
Hey man you have a margin of 6px on your first row li thats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.
It is common to have a set of links in a footer represented in a list, such as:
<div id="footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.
But how do you center the unordered list items without setting a fixed width on the <ul>?
EDIT: clarification - the list items should be next to each other, not below.
The solution, if your list items can be display: inline is quite easy:
#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
However, many times you must use display:block on your <li>s. The following CSS will work, in this case:
#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
Use the below css to solve your issue
#footer{ text-align:center; height:58px;}
#footer ul { font-size:11px;}
#footer ul li {display:inline-block;}
Note: Don't use float:left in li. it will make your li to align left.
One more solution:
#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }
Then ul doesn't jump to the next line in case of zooming text.
It depends on if you mean the list items are below the previous or to the right of the previous, ie:
Home
About
Contact
or
Home | About | Contact
The first one you can do simply with:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
The second could be done like this:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
Try wrapping the list in a div and give that div the inline property instead of your list.
The answer of philfreo is great, it works perfectly (cross-browser, with IE 7+). Just add my exp for the anchor tag inside li.
#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */
#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }