So basiclly I'm trying to add a custom thumbnail on my website. I'm using the <ol> and styling it in css such as..
ol {
counter-reset: none;
margin: 0px;
padding: 0px;
list-style-image: url('{image:thumbNail}');
position: relative;
right: 20px;
}
But i want to position this without affecting my other text within the <ol>. how can i achieve this so i dont effect the text but just positon the thumbnail? Help will be appreciated thanks.
Here is a fidle: http://jsfiddle.net/enn5r/
<ol class="thumnails">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
ol.thumbnails li{
padding:5px 0px 5px 25px;
border-bottom:1px solid #DDD;
background:transparent url(/icons/clock.png) no-repeat 5px 7px;
}
You should remove position:relative; to ol list and give it position:absolute; and align it using left and top CSS attributes. But this all will work properly if the parent tag of ol has position:relative; applied. You can also get it to work using position:relative; but that wont be the proper way as it would shift the elements on different screen resolutions.
Related
I'm trying to style a popup-menu that shows a submenu on hover, popping out to the right of the hovered item.
My main items are split into two columns using column-count, and this is where the misery begins.
In Firefox, everything behaves as expected: the submenu pops out where the hovered item is. In Chrome, the submenu pops up relative to the leftmost column.
The four cases (hovered items 3 and 9, Firefox and Chrome) are shown in the attached screen. Try the demo both in Firefox and Chrome to see what I mean.
Is there a neat solution for this? I tried column-span, but that doesn't work. I cannot make the item's li relative because I want the popup to fill the complete height.
ul.first {
border:1px solid #888;
position:relative;
display:inline-block;
margin:5px;
padding:0;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule:1px solid #888;
-moz-column-rule:1px solid #888;
-webkit-column-rule:1px solid #888;
background-color:#eee;
}
ul.first li {
list-style:none;
display:block;
width:200px;
background-color:#eee;
margin:2px;
padding:5px;
}
ul.first li:hover {
background-color:#ddd;
}
ul.first > li.hassub > ul {
display:none;
position:absolute;
margin-left:100px;
top:0;
bottom:0;
background-color:#ddd;
padding:0 5px;
}
ul.first > li.hassub:hover > ul {
display:inline-block;
}
ul.first > li.hassub > ul > li {
background-color:#ddd;
}
ul.first > li.hassub > ul > li:hover {
background-color:#eeffee;
}
<ul class="first">
<li>Item 1</li>
<li>Item 2</li>
<li class="hassub">Item 3
<ul>
<li>Subitem 3-1</li>
<li>Subitem 3-2</li>
<li>Subitem 3-3</li>
<li>Subitem 3-4</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="hassub">Item 9
<ul>
<li>Subitem 9-1</li>
<li>Subitem 9-2</li>
<li>Subitem 9-3</li>
<li>Subitem 9-4</li>
</ul>
</li>
<li>Item 10</li>
</ul>
http://jsfiddle.net/cfckw5jz/6/
There are many solutions:
Solution 1: A quick solution is to Give the sub-menu inside the right column different class (hassub2), and give it different margin-left
.hassup2{
left: 390px;
}
Solution 2: A smarter solution is to give all sub-menus inside li's above 5 a different margin, this can be achieved by using nth-child:
ul.first > li:nth-child(n+5) > ul{
left: 390px;
}
n + 5 = any element above 5 (in that case all li's above 5)
Solution 3: You can also separate it into 2 UL's and float them left (or use display: inline-block), and assign position relative to the UL's to be the reference point for the sub-menu:
li{ list-style: none; }
ul.left,
ul.right{
float: left;
width: 200px;
position: relative;
}
.right li,
.left li{
float: left;
width: 100%;
background-color: #eee;
margin: 2px;
padding: 5px;
}
.right li ul,
.left li ul{
display: none;
position: absolute;
left: 200px;
top:0;
height:100%;
}
.right li ul li,
.left li ul li{
width: 100%;
padding: 5px;
margin: 2px;
}
.right li:hover ul,
.left li:hover ul{
display: block;
}
Tip: use Left instead of margin-left for a consistent design, using left will always make the element 200px away from left side, it will not depend or get effected on any element placed before it, like what margins behave.
Tip: Absolute positioned element will look for the first father with a defined position and make it its reference point. So to make an absolute div refer to the direct father div, the father must be given position (relative, fixed, or absolute).
Today I realized that this issue was fixed in the latest Chrome release 55 and now Chrome behaves as the other modern browsers.
So, no need to make modifications to css nor html. Yay!
I was wondering how to remove the vertical space between a unordered list and div. I know it's possible with using - margins, but I have a feeling that isn't really a clean method.
This is my code:
.menu {
list-style-type: none;
background-color: #660066;
}
.menu li {
display: inline;
padding-left: 40px;
padding-right: 40px;
}
.div {
width: 100%;
height: 500px;
background-color: #660066;
}
<nav>
<ul class="menu">
<li>Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
</nav>
<article class="div">
In this case your ul simply has standard margin on top and bottom. margin: 0; solves this.
jsfiddle
ul{
margin: 0;
}
Always do a reset like shown below for both UL and LI. That way spaces will only be present when you apply them by yourself.
ol, ul {
margin: 0;
padding: 0;
}
Click here to see why it is important to set a reset.
You have to set up your position since you are going to move in close proximity to the original location your position will be relative from there you move can move it up or down , it should look like this
.div
position:relative;
bottom:30px;
Neither googling nor browsing in SO helped me - hope someone here can solve this :
I have the following html :
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
and css
ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}
the "hook.png" image is 32x35 px - but whenever I create list items, text (e.g. ABC...) will always be shown below the image. Tried line-height and those 100% thingies - but neither worked out.
Any quick help :/ ?
Try some variation of
ul{
background-image: url(../img/hook.png);
background-repeat: no-repeat;
background-position: 95% 50%;
}
Obviously the position is unlikely to fit your needs, but fiddling around with this method would be your best bet I'd say.
<html>
<head>
<style>
ul
{
list-style-image:none;
}
li
{
color:#FFFFFF;
font-size:16px;
text-shadow: 0em 0.13em 0.13em #2A2A2A;
font-family:Helvetica,Arial,Sans-Serif;
font-weight:normal;
line-height:35px;
margin-bottom:5px;
padding-left: 36px;
background-image: url('../img/hook.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>
Never seen any of our designers try to use the list-style-image when implementing custom icons for list, I guess this is why :)
If I have understood your problem is text seems bellow the baseline?
Try to set beelow property for your text:
padding-bottom
I came up with something like that, which may save u some time
HTML:
<ul class="rozcestnik">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
CSS:
.rozcestnik {
list-style-type: none;
padding: 0;
margin: 2.5em 2em 0;
}
.rozcestnik li:before {
background: url("icon.png") no-repeat scroll 50% 50% transparent;
content: " ";
display: block;
height: 20px;
left: -20px;
position: absolute;
top: 0;
width: 20px;
}
.rozcestnik li {
position: relative;
padding-bottom: 5px;
padding-left: 5px;
}
According to custom list-image, you'll probably just need to customize the top and size ":before" and padding of "li".
It works across all major browsers and the application IE8 and more.
Morning again...,
Sorry to bother everyone but I need more help... I haven't done any real coding in ages so here goes...
I'm trying to make a horizontal navigation menu, here's my html
<nav>
<ul id="navmenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<ul>
<nav>
now I have the following CSS
/* menu */
ul#navmenu{
border-top:1px solid #FFF;
background:#e60000;
list-style: none;
margin: 0;
padding: 0;
padding-left:30px;
}
ul#navmenu li{
display:inline;
}
ul#navmenu li a{
color:#fff;
text-decoration:none;
/*
padding-left:15px;
padding-right:15px;
*/
padding:15px 15px 15px 15px;
}
ul#navmenu li a.selected{
color:#e60000;
text-decoration:none;
/*
padding-left:15px;
padding-right:15px;
*/
padding:15px 15px 15px 15px;
background:#fff;
}
I want the links to sit in the center of the Li and look something like this:
However the containing UL doesn't seem to contain the LIs, they bleed out of the container. I've played around with overflow and line heights but nothing seems to work... here's a worst case scenario...
does any one have any ideas?
give display:block to your <a> because <a> in an inline element so, inline element not take vertical margin, vertical padding, width & height
Check this http://jsfiddle.net/T8eNe/2/
but first close your UL & NAV
For starters, I would close the <ul> and <nav> tags correctly, then check to make sure that the parent containers are floated left.
Give inline-block to your anchor
ul li a { display: inline-block; }
I'm trying to create a horizontal navigation bar (no dropdown, just a horizontal list), but I'm having trouble finding the best way to add vertical dividers between the menu items.
The actual HTML is as follows:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
The current CSS is as follows:
.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}
Between each menu item I want a small image as a vertical divider, except that I don't want a divider shown before the first item and I don't want a divider shown after the second item.
The end result should look something like this:
Item 1 | Item 2 | Item 3 | Item 4 | Item 5
Just replacing the pipe with an actual image.
I've tried different ways - I've tried setting the list-style-image property, but the image didn't show up. I've also tried setting the divider as a background which actually more or less worked except that it made the first item have a divider in front of it.
Quite and simple without any "having to specify the first element". CSS is more powerful than most think (e.g. the first-child:before is great!). But this is by far the cleanest and most proper way to do this, at least in my opinion it is.
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li:not(:first-child):before {
content: " | ";
}
Now just use a simple unordered list in HTML and it'll populate it for you. HTML should look like this:
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Support</li>
</ul>
</div><!-- navigation -->
The result will be just like this:
HOME | ABOUT US | SUPPORT
Now you can indefinitely expand and never have to worry about order, changing links, or your first entry. It's all automated and works great!
try this one, seeker:
li+li { border-left: 1px solid #000000 }
this will affect only adjecent li elements
found here
This can also be done via CSS:pseudo-classes. Support isn't quite as wide and the answer above gives you the same result, but it's pure CSS-y =)
.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }
OR:
.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }
See: http://www.quirksmode.org/css/firstchild.html
Or: http://www.w3schools.com/cssref/sel_firstchild.asp
I think your best shot is a border-left property that is assigned to each one of the lis except the first one (You would have to give the first one a class named first and explicitly remove the border for that).
Even if you are generating the <li> programmatically, assigning a first class should be easy.
A simpler solution would be to just add #navigation ul li~li { border-left: 1px solid #857D7A; }
.last { border-right: none
.last { border-right: none !important; }
This works fine for me:
NB I'm using BEM/OCSS SCSS Syntax
#navigation{
li{
&:after{
content: '|'; // use content for box-sizing
text-indent: -999999px; // Hide the content
display: block;
float: right; // Position
width: 1px;
height: 100%; // The 100% of parent (li)
background: black; // The color
margin: {
left: 5px;
right: 5px;
}
}
&:last-child{
&:after{
content: none;
}
}
}
}
I do it as Pekka says. Put an inline style on each <li>:
style="border-right: solid 1px #555; border-left: solid 1px #111;"
Take off first and last as appropriate.