I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem. Please could someone help, it is driving me insane.
The below code is for my Site Navigation. I would like the background to be an image rather than just a background colour. I would also like the background image to change on hover. As our Meerkat friends would say...Simples!....but not for me.
<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">ยป Overview</a></li>
<li>Endorsements</li>
<li>The Detail</li>
<li>Funding</li>
<li>Apply Online</li>
<li><a class="end" href="graduates-terms.html" title=" Terms & Conditions ">Terms</a></li>
</ul>
</div>
div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */
#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
Thank you, I really appreciate your help.
In your question subject, you said you wish to put background image to "li" tag, but as per the code you have shown, you have given background to "a" tag.
You can put background image and color both together to any of the tag "li" and "a"
Eg.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
For details refer:
http://www.w3schools.com/cssref/css3_pr_background.asp
If you want to put hover effect as well, implement it on anchor "a" tag. Because old browsers like ie6 doesn't have inbuilt support for li hover effect.
Use following pattern.
a{
background: url('img1') no-repeat fixed center;
}
a:hover{
background: url('img2') no-repeat fixed center;
}
Hope it helps you.
Related
I'm working on a horizontal menu with a vertical submenu. I have most of the display features set the way I want, but I'm running into trouble with displaying the submenu items with the same width. I want to display them as a nice, even block, but I'm left with a jagged edge on the right side of the submenu.
Here's a snippet of the html I'm using for the menu itself.
<nav class="navbar">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >item with sub</a>
<ul>
<li><a href="#" >sub item 1</a></li>
<li><a href="#" >sub item 2 which is longer</a></li>
<li><a href="#" >sub item 3</a></li>
</ul>
I'm not sure which part of the css I'm using might be affecting the width of the dropdown menu, so here's everything.
.navbar {
font-size: 20px;
text-align: center;
position: relative;
z-index: 1;
white-space: nowrap;
}
.navbar a {
background-color: #333;
color: #999;
text-decoration: none;
}
.navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
.navbar li {
float: left;
position: relative;
min-width: 120px;
padding: 10px 10px 10px 10px;
background-color: #333;
color: #999;
}
.navbar li ul {
display: none;
position: absolute;
left: 0;
}
.navbar li > ul {
top: 42px;
left: 0px;
}
.navbar li:hover,
.navbar li:hover > a,
.navbar li a:hover{
background-color: #999;
color: #333;
text-decoration: none;
display: block;
}
.navbar li:hover ul,
.navbar li:hover ul li {
display: block;
clear: both;
min-width: 120px;
}
The fiddle is here: http://jsfiddle.net/jasotastic/yso6v2po/
Possible that this is a duplicate, but I haven't been able to find a similar question asked.
You could set 100% width to <li> to adjust with content width.
.navbar li ul li {
display: block;
width: 100%;
text-align: left;
}
Fiddle: http://jsfiddle.net/yso6v2po/4/
You can set a width to li and use white-space: normal. Then you will have a fixed width and break the phrase if it is bigger than the width.
Your code modified:
.navbar li ul li {
width:200px;
white-space:normal;
display: block;
}
Here is the jsfiddle: http://jsfiddle.net/yso6v2po/3/
In my asp.net mvc4 view I have some nested divs to show an image and under it a text like below:
<div id="Outer1" class="elementStatus">
<div class="image"> <!-- THIS IS THE IMAGE -->
<img id="MyImg1" src="#Url.Content("~/images/Image.gif")">
</div>
<div class="text"> <!-- THIS SHOWN THE TEXT UNDER IMAGE-->
Statuts Text
</div>
</div>
and the css:
.elementStatus
{
visibility: hidden;
}
.image{
float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;
}
.text{
float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;
font-weight: bold;
font-size: 1em;
}
I want that the image in the first div to be centered horizontally and vertically in the div where it is placed. The same for the second div, I want the text to be centered horizontally and vertically within its div. So how to do it?
Please, do not downvote!
Recommend a background image:
.image {
background-image: url('~/images/Image.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 35px 35px;
}
For the text:
.text {
text-align: center;
}
For vertical text alignment:
.text {
line-height: 35px;
height: 35px;
}
This is a pretty broad question but it's easily solved using flexbox (assuming you're supporting newer browsers). Going to remove vendor prefixes for the sake of clarity but you'll want something like this:
#Outer1 {
display: box;
box-align: center;
box-orient: vertical;
box-pack: center;
}
http://jsfiddle.net/VqwLH/
Since you have updated saying you need support for older browsers, I think you can use display: table-cell for the parent container:
#Outer1 {
display: table-cell;
height: 500px;
width: 500px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
http://jsfiddle.net/VqwLH/1/
I'm working on my first website (I'm a n00b) and on Safari and Chrome it looks exactly the way I want. However, in IE 8 the nav bar does not work at all. In Firefox, once you hover over one of the links it brings the drop down box down but it adds an extra pixel in between the main nav bar and the sub links.
My website's URL is: http://tonerleague.x10.mx/basketball.html
My HTML is...:
<div class="menu">
<nav>
<ul>
<li>Main
<ul>
<li>Advertise</li>
</ul>
</li>
<li>Test
<ul>
<li>Test</li>
<li>TestTest</li>
<li>TestTestTest</li>
</ul>
</li>
<li>Unknown
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</li>
<li>Support</li>
<li>Forums</li>
</ul>
</nav>
</div>
My CSS is..:
.menu
{
left: 50%;
position: absolute;
top: 137px;
margin-left:-500px;
font-family:"Arial", Helvetica, sans-serif;
font-size: .875em;
font-weight: bold;
}
nav ul {
padding: 0;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover {
/*background:#C0C0C0; ** Firefox causes another extra pixel when activated*/
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover a {
color: #FFF;
}
nav ul li a {
display: block; padding: 5px 35px;
color: #FFF; text-decoration: none;
border-right: 0px solid #FFF;
-moz-border-radius: 0;
}
nav ul ul {
background-color: #C0C0C0; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li {
float: none;
border-top: 0px solid #FFF;
border-bottom: 0px solid #000;
border-right: 0px solid #000;
border-left: 0px solid #000;
position: relative;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li a {
padding: 5px 15px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #000000;
}
SELECT boxes are not typical HTML elements. They're closely tied to the OS and can be difficult to style, especially on IE8.
You may opt to wrap the SELECT in a DIV and set the overflow to contain the element, or use an IE8-speficic CSS declaration to tweak the size.
See: How does one target IE7 and IE8 with valid CSS?
Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.
Example:
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
My CSS UL menu doesn't seem to want to centre, any ideas? I have pasted the code below for your review, I am quite new to CSS so your help is greatly appreciated :-)
The only way I have been able to centre it is by fixing the width and using the html centre tags but I need the menu to be at 100% for expansion and I need to to automatically centre.
The CSS
#menu{
width:100%;
margin: 0;
padding: 5px 0 0 0;
list-style: none;
background-color:#333333;
text-align:center;
}
#menu li{
float: left;
padding: 0 0 5px 0;
position: relative;
list-style:none;
margin:auto;
}
#menu ul{
list-style:none;
display:inline;
margin: 0;
padding: 0;
text-align: center;
}
#menu a{
float: left;
height: 15px;
padding: 0 25px;
color:#FFF;
text-transform: uppercase;
font: 10px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#menu li:hover > a{
color:#F90;
font: bold 10px/25px Arial, Helvetica;
}
*html #menu li a:hover{ /* IE6 */
color: #F06;
}
#menu li:hover > ul{
display: block;
}
Thanks again :-)
Provide width to your menu and use margin: auto;
#menu{
width:300px; <--------Here
margin: 0 auto; <-----Here
padding: 5px 0 0 0;
list-style: none;
background-color:#333333;
text-align:center;
}
Moreover why are you doing this?
#menu li:hover > ul{
display: block;
}
And also this
#menu a{
float: left;
....
}
Update: just read all the styles your cascade looks pretty messed up, use the following
#menu { /* I Assume this ID is applied to <ul> element */
width:/*Whatever you want to define*/;
margin: 0 auto; <---Change Here
padding: 5px 0 0 0;
list-style-type: none; <---Change Here
background-color:#333333;
text-align:center;
}
#menu li{
float: left; <---You don't need this
padding: 0 0 5px 0;
position: relative; <---You don't need this too
list-style:none; <---You don't need this too
margin:auto; <---You don't need this too
}
/* Take out this entirely from here */
#menu ul{
list-style:none;
display:inline;
margin: 0;
padding: 0;
text-align: center;
}
/* till here */
#menu a{
float: left; <---You don't need this
height: 15px;
padding: 0 25px;
color:#FFF;
text-transform: uppercase;
font: 10px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#menu li:hover > a{
color:#F90;
font: bold 10px/25px Arial, Helvetica;
}
*html #menu li a:hover{ /* IE6 */
color: #F06;
}
#menu li:hover > ul{
display: block;
}
And if you want your links inside the menu too be centered simply use this
HTML
<ul id="#menu">
<li></li>
</ul>
CSS
#menu li {
text-align: center;
}
Putting
text-align:center;
in the ul means that text in the ul is centered. You should add:
margin-left:auto;
margin-right:auto;
to the ul. This will work for all major browsers save IE. To work in IE you need to make sure that a tag containing ul has
text-align:center;
in it.
i have a big problem with a menue ONLY in IE8 - all other browsers work perfect:
There's an menue like this one:
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
and the CSS is this one:
ul li { padding-left: 23px; line-height: 29px; }
ul li:hover,
ul li.active { background: url(../images/bg_arrow_blue.png) no-repeat top left; }
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; }
ul li a:hover,
ul li a.active { border-bottom: 1px solid red; }
So now - in IE 8 i have the problem, that on mouseover the links jumps up and down on mouseout, because of the border-bottom i think. All other browsers do it right with border bottom and no jump.
I have googled a lot and not found a solution.
Hope anyone here can help!
Thank you so much.
Sascha
Okay,
for anyone who's interested - i have the solution:
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; padding-bottom: 1px; }
i just had to add a "padding-bottom: 1px;" to the "ul li a" statement.
Have a nice christmas.