I want the position of ol list item in the middle of content.
My code:
#block-views-credit-library-block-1 .item-lists ol {
list-style-position: inside;
margin: 0 15px 25px;
list-style-type: decimal;
}
#block-views-credit-library-block-1 .item-lists ol li {
background: url("../images/number.png") no-repeat scroll 0 0 transparent;
color: #F9F9F9;
font-family: arial;
font-size: 11pt;
font-weight: bold;
padding: 5px 0 0 13px;
}
See the issue image: http://manjitsingh.org/sites/default/files/test.png
Any help would be appreciated.
Use this css on your ol li block:
background-position: 0 50%;
Or you could try using:
top: 50%;
margin-top: -div height / 2;
position: absolute;
Related
I've created a drop down hover list in the UL tags using CSS, but before I can get the mouse down over the links, they disappear. How can I stop this?
This is my code:
#header {
margin: 0px;
padding: 0px;
width: 100%;
background-color: red;
height: 30px;
box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
text-align: center;
}
#header ul {
margin: 0px;
padding: 0px;
}
#header ul li {
display: inline;
text-align: center;
position: relative;
}
#header ul li a {
text-decoration: none;
font-size: 22px;
color: white;
font-weight: bold;
line-height: 30px;
margin-left: 10px;
}
#header ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#header ul li:hover ul {
visibility: visible;
}
#header ul li a:hover {
text-decoration: underline;
font-size: 22px;
color: black;
}
Try adding height
#header ul li a{
text-decoration:none;
font-size:22px;
color:white;
font-weight:bold;
height:30px;
line-height:30px;
margin-left:10px;
}
Since your main menu is positioned at the very top of the page, it goes from 0 pixels to 30 pixels and you've left a 1 pixel gap before starting the submenu at 31 pixels. Either changing the main menu height to 31px or the top of the submenu to 30px should fix your problem.
I am trying to align an image with an , and I cannot get the heading to wrap around the image icon. I have a screen cap here: http://instagram.com/p/YNGBzrtAs8/
My CSS code is a mess because I keep trying everything, and it's getting messy. Here is the current mess state:
#deck-sub .news-feed { float: left; width: 90%; padding: 5%; margin: 0 0 15px 0; }
#deck-sub h1 { background: none; font: bold 2.0em Arial, Helvetica, sans-serif; color: #006586; margin: 0 0 -8px 0; }
#deck-sub .news-feed h2 a { color: #006586; text-decoration: none; font-size: 1.2em !important; margin: -33px 0 0 0;}
#deck-sub .news-feed ul {vertical-align: middle !important; background: none; padding: 5px 0 0 0; list-style: none; }
#deck-sub .news-feed ul li { vertical-align: middle !important; width: 100%; padding: 5px 0 5px 0; margin: 5px 0 0 0;}
#deck-sub .news-feed ul li a { vertical-align: middle !important; width: 100%; font: 0.8em/1.1em Arial, Helvetica, sans-serif; color: #555 !important; text-decoration: none; padding: 0px 0 0 0; margin: -5px 0 0 0; }
#deck-sub .news-feed ul li a:hover { background: none; color: #009fc7 !important; }
#deck-sub .new-feed ul li img { vertical-align: middle !important; }
#deck-sub .sfnewsListItem { vertical-align: middle !important; background: #ccc; }
#deck-sub .sfnewsMetaInfo { vertical-align: middle !important; padding: 0px; margin: 0px; background: #444;}
Any help would be greatly appreciated. I have run into this before, but my tricks are not working in this case. Thank you in advance.
I'm not sure what you mean by get the heading to wrap around...but I assume you want the image and the title to be beside eachother? vertical-align I don't believe works awesomely for this.
The best option is to remove the icon as an and instead put it into the CSS as a background image. Doing that gives you the ability to position it to the pixel.
It'd also let you sprite those two news\event icons into a single file to serve less resources.
http://www.w3schools.com/css/css_image_sprites.asp
Cheers!
Steve
I want to code this so the active and hover li's appear over the normal li. But what happens is the hover and active li's appear inside the normal li. When I add padding (to hover and active li's) in an attempt to duplicate the size of the normal li, the normal li remains visible and simply expands by the increase padding of the hover and active li and not covered as I need it to be.
Here is my CSS:
/***********HORIZONTAL NAVS***********/
.menu-horizontal {
margin: 3px 2px 0.75em;
}
.menu-horizontal ul.top-level {
background-color: #FFFFFF;
clear: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-horizontal ul.top-level li {
background: #FEAB27;
border-radius: 7px 7px 0px 0px;
display: inline-block;
height: 28px;
padding: 0 25px;
}
.menu-horizontal ul.top-level {
display: inline-block;
float: left;
height: 23px;
margin-left: 173px;
padding-top: 5px;
text-align: center;
text-transform: none;
}
.menu-horizontal ul.top-level li a {
background: none repeat scroll 0 0 transparent;
color: #000000;
display: inline-block;
line-height: 24px;
text-decoration: none;
font-family: Verdana,'Magra','Gafata',sans-serif;
font-size: 102%;
font-weight: bold;
}
.menu-horizontal ul.top-level li.selected a, .menu-horizontal ul.top-level li a:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
text-decoration: underline;
}
.menu-horizontal li ul.second-level {
display: block;
left: -999em;
margin: -1000px 0 0;
overflow: visible;
padding: 0 0 9px;
position: absolute;
text-align: left;
}
.menu-horizontal li:hover ul.second-level, .menu-horizontal li.hover ul.second-level {
left: auto;
}
Thanks!
I am not sure if I got your question right, but did you want something like this?
.menu-horizontal ul.top-level li.selected, .menu-horizontal ul.top-level li:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
}
.menu-horizontal ul.top-level li a:hover, .menu-horizontal ul.top-level li.selected a {
text-decoration: underline;
}
http://jsfiddle.net/svSwA/
If you want to change another element as an A you have to put the :hover selector on it, or you have to use JavaScript.
On hover the background color seems to come outside of the "boxes" that are my navigation items. I have tried tweaking everything. Here is my CSS and HTML...
<div id="menuTop">
<ul id="menuOne" class="menuHoriz">
<li>home</li>
<li>about us</li>
<li>services</li>
<li>samples</li>
<li>contact</li>
</ul>
</div>
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
}
#menuTop ul, #menuTop li {
margin: 0;
padding: 4px 0 0 0;
}
#menuTop ul {
list-style-type: none;
}
#menuTop li {
display: block;
background-color: #3C87D1;
text-align: center;
width: 197px;
height: 30px;
margin: 0 0px 0 0;
padding: 4px 0 0 0;
border: 1px solid #2A5E92;
}
#menuTop a {
display: block;
margin: 0;
padding: 4px 0 0 0;
}
#menuTop a:link, #menuTop a:visited {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
color: #fff;
background-color: #5F9FFF;
}
ul.menuHoriz li {
float: left;
}
I removed the unneeded/double definitions from your stylesheet and fixed the bug.
* {
margin: 0;
padding: 0
}
#menuTop {
font: 12pt 'Trebuchet MS', Helvetica, sans-serif;
padding-top: 18px;
height: 55px;
background: #000
}
#menuTop ul {
padding-top: 4px;
list-style: none
}
#menuTop li {
background: #3C87D1;
border: 1px solid #2A5E92;
text-align: center
}
#menuTop a {
display: block;
width: 197px;
line-height: 30px
}
#menuTop a:link, #menuTop a:visited {
color: #fff;
text-decoration: none
}
#menuTop a:hover {
background-color: #5F9FFF
}
ul.menuHoriz li {
float: left
}
Here are some notes:
It is handy to set the margin and padding for all elements to zero by using *, before designing your layout.
Set the width and height for your menu item to the a element only (the most nested element). The surrounding li element will take the same size. Also use line-height instead of height because it automatically makes your text vertically centered.
Don't redefine styles in :link, :visited, :hover or :active (for example dimensions and font). It gives unnecessary calculations for the browser.
If your problem is only the color coming outside the boxes, add this to your #menuTop li
overflow:hidden;
Works for me. :)
Try this one: jsfiddle example
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
text-align: center;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
line-height: 34px;
}
#menuTop a {
float: left;
border: 1px solid #2A5E92;
background-color: #3C87D1;
width: 197px;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
background-color: #5F9FFF;
}
Am having an issue in opera. I have a series on hyperlinnks in a ul li with backgorund images applied. The pointer cursor isnt displaying when I hover over the links.
Is this a know bug, code below
/cricket" title="Cricket" id="cricket-link" style="background-image:url(/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg);" onmouseover="$().hoverSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bghover.jpg', 'cricket'); return false;" onmouseout="$().originalSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg', 'cricket'); return false;">Cricket
#sidebar ul {
margin: 0;
padding: 0 0 27px 16px;
display: block;
float: left;
width: 180px;
}
#sidebar ul li {
background-image: url(images/left-nav-bg.jpg);
background-repeat: no-repeat;
margin: 0;
margin-bottom: 10px;
padding: 0;
display: block;
float: left;
width: 180px;
height: 40px;
list-style-type: none;
cursor:pointer !important;
}
#sidebar ul li a {
background-repeat: no-repeat;
background-position: 2px 2px;
margin: 0;
padding: 8px 8px 0 4px;
display: block;
float: left;
width: 168px;
height: 32px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: right;
cursor:pointer !important;
}
you should use hover stage for this id
#sidebar ul li hover{
background-repeat: no-repeat;
background-position: 2px 2px;
margin: 0;
display: block;
float: left;
width: 168px;
height: 32px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: right;
cursor:pointer !important;
}
add this css in your style.
Issue solved, changed mouseover and mouseout events to be return true;