I want to give a list item a background-color, border etc. I have the following CSS and HTML. I will also use that div to add more absolute positioned elements relative to the li > div.
ul {
list-style-image: url('../img/nr_cross.png');
}
li {
position: relative;
height: 35px;
}
div {
position: absolute;
z-index:-1;
left:-40px;
background-color: #dfdfc9;
}
<ul>
<li><p>This</p></li>
<li><p>That</p></li>
<li><p>Other</p></li>
<ul>
The problem is, i cant set the z-index for the list item. If i set the absolute position for the list item, it defeats the purpose of using the list items for layout. I'm thinking this is impossible, or maybe there is a better way to do what I want.
Update:
Update 2:
Answer below does not work in firefox 10, ie8, ie7. Also fixed question above.
Okay, that mockup clears things up. I think. Does this work for you?
ul {
list-style-image: url(http://cdn1.iconfinder.com/data/icons/splashyIcons/breadcrumb_separator_arrow_full.png);
background-color: #dfdfc9;
margin: 0;
padding: 0;
}
p {
position: relative;
left: 2em;
}
li {
border-bottom: 2px dotted black;
border-top: 1px solid transparent;
}
Example here: http://jsfiddle.net/dbT2n/1/
Related
Here's the image i'm trying to replicate.
Here's the link I've got so far.
My issue is the border-bottom length corresponds to the fullwidth of containing element. From the image attached, the border-bottom should be a little shorter and centered.
http://jsbin.com/tukomuwuri/edit?html,css,output
You can add a pseudo after element to the list item and then add a border-top property.
li:after{
content: "";
display:block;
border-top: 4px solid color;
width: /* your desired width*/
}
You can give it an absolute position to center it or align it however you want.
By default, the border is going to stretch the width of the block-level element (in this case, the <a>).
To achieve your desired effect, you'll want to actually decrease the width of the <a>. You can do this by padding the containing <li>:
li {
background-color: white;
padding: 0 40px;
position: relative;
&:hover {
background-color: #e5e8e8;
a:before {
content: '|';
position: absolute;
top: 10px;
left: -15px;
}
}
}
Here's the example:
http://jsbin.com/ciqujidupa/3/edit?html,css,output
I am trying to customize navigation menu in wordpress. I want my submenu to appear below the parent menu element in a single line. I am also setting submenu position to absolute so that I can control the overlap of main menu bar and submenu bar.
Below is my minimized CSS (in SASS, for clarity I am posting only those portions that i thought relevant).
Problem: Everything is working fine except the submenu items now break into lines, rather than in a single line.
Observation: If I remove absolute positioning OR I give a fixed width, then it works.
What I tried: Putting white-space: nowrap and display:inline-block (in li), though I know display doesn't make sense for absolute positioning.
.menu-primary-menu-container {
&>ul {
float:left;
list-style: none;
&>li {
position: relative;
float:left;
&>ul {
position: absolute;
height: 40px;
bottom: -30px;
list-style: none;
&>li {
float:left;
}
}
}
}
}
You have to specify a width to the submenu in order to get it working: JSFiddle
.menu-primary-menu-container {
&>ul {
float:left;
list-style: none;
&>li {
position: relative;
float:left;
&>ul {
position: absolute;
height: 40px;
bottom: -30px;
list-style: none;
width: 500px;
&>li {
float:left;
}
}
}
}
}
If you use position: absolute; without a width or without specify left and right, the element will use the width as small as possible.
I have a list which has round elements in it. They have a image in the background and on hover the other div is supposed to become visible as an overlay. It works so far, however there is still a visible border, indicating that the hovered div is not perfectly overlaying the other rounded element.
HTML:
<ul>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
height: 140px;
}
li {
width: 140px;
height: 140px;
margin: 0;
padding: 0;
display: inline-block;
border-radius: 70px;
background: url(http://www.nationalflaggen.de/media/flags/flagge-thailand.gif);
}
.hover {
border-radius: 70px;
width: 140px;
height: 140px;
}
.hover:hover {
background-color: rgba(255,255,255,.9);
}
I added a fiddle since I really don't know how to make them perfectly overlapping.
Thanks for your help.
UPDATED THE FIDDLE:
http://jsfiddle.net/pL9Aa/1
Looks like a sub-pixel problem -- the browser does a bunch of math to determine the smoothness of a curve using square pixels. And sometimes it doesn't render how you might expect.
You can simply remove the border-radius rule from the :hover pseudo class if you are keeping it transparent.
.hover {
width: 140px;
height: 140px;
}
Fiddle
If it needs to be round, I would override your image using the same element, instead of a nested element, like so:
li:hover {
background: white;
}
Fiddle2
You could add:
li:hover {
background:none;
}
to ensure that the background on the li is gone.
It's weird though - does look like a rendering bug.
Assuming that you are going to have text or other content in the overlay, it's worth noting that setting the background to be slightly transparent (e.g. rgba(255,255,255,0.8)) makes the rendering error less noticeable.
Just change #hovers border-radius: 62px;
If your hover is only meant to cover the element, you do not need to put a border-radius on the hover element. Simply removing that line will resolve your issue:
.hover {
width: 140px;
height: 140px;
}
http://jsfiddle.net/pL9Aa/3/
If in the production envirionment you can actually use a background color, you could also use a box-shadow
demo: http://jsfiddle.net/j4NFB/
.hover:hover {
background-color: #FFF;
box-shadow: 0 0 0 1px #fff;
}
I have this simple css menu list that I want to wrap in a div and put A border around it.
You can see on below link the border by default takes max width instead of wrapping around the menu list.
#cont
{
border: 4px solid #90bade;
display: inline;
overflow: hidden;
}
MY FIDDLE
I have tried to set the display mode of this div to inline and played with overflow:hidden style on div. It fixes the div border to wrap perfectly around my list But at the same time it prevents the menu drop down action.
UPDATE #1 :
As pointed out in Ritabrata's answer missing bit was display:inline-block; and there is no need for overflow: hidden;
#cont
{
border: 4px solid #90bade;
display: inline-block;
}
couple of changes in your css ::
#cont
{
border: 4px solid #90bade;
overflow:hidden;
width:auto;
display:inline;
}
#nav
{
position: relative;
padding: 0;
margin: 0;
display:inline-block;
}
UPDATED FIDDLE
LEARN MORE ABOUT display: HERE
I know I have seen this somewhere before, but I am trying to create a black fixed navbar with a marker that is transparent cut-out triangle. I need help getting the triangle cut-out to be transparent to the background, so when you scroll the page, you can see through to the content beneath:
I have a standard list/anchor navigation with a javascript to move the .current class depending upon the page section:
<div class="navbar">
<ul>
<li class="current"><a>home</a></li>
<li><a>products</a></li>
<li><a>services</a></li>
<li><a>contact us</a></li>
</ul>
</div>
styled with the following CSS:
.navbar {
width: 100%;
position: fixed;
background: black;
float: left;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
a {
padding: 10px 20px 20px;
}
.current a {
background: transparent url('../img/wedge-red.png') center bottom no-repeat;
}
The only way I can think to do it is to add extra divs on either side of the ul and assign the background to them, and then use a transparent png with a cutout as the background of the li a's.
Is there a way to do this without getting really ugly like that, and adding extra divs?
Try CSS pseudo elements!
Add 2 free DOM elements before and after an existing element in the DOM. Ideal in cases when you don't want to add stuff to your markup to satisfy styling needs.
CSS Markup
.item:before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: silver;
}
.item:after {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: gray;
}
HTML
<div class="item">Content</div>
Check this JSFiddle for a demo.
Make sure you set content: "" and display:block in order to see them.
Here's what I ended up with -- extending the borders and cropping them with overflow: hidden; (a little hacky, but it works and doesn't add elements to the DOM):
.navbar {
width: 100%;
height: 60px;
position: fixed;
overflow: hidden;
}
ul {
border-left: solid black 2000px;
border-right: solid black 2000px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2000px;
}
The above worked nicely for my purposes, and behaves in a responsive environment.
The other answer on this page, using :before and :after pseudo elements didn't work for my purposes. It ended up being too fussy, the pseudo elements wouldn't align properly, and kept wrapping to the next line when the browser window was resized. That solution as suggested works with fixed-width elements, not percentages as was specified in the original question.