There are two spans side by side. The first one holds a caret and the other one has text.
I am trying to acheive the text alignment as in pic1, but what i get is pic2.
This can be acheived by using a table instead of ul li i know, but is there any other way by css
<ul>
<li>
<span><b class="right-caret"></b></span>
<span>
Click here to know how to provide the feedback.
</span>
</li>
<li>
<span><b class="right-caret"></b></span>
<span>
Unable to Login or use the feedback form?
Please report it here.
</span>
</li>
</ul>
Pic 1:
Pic 2:
http://jsfiddle.net/hc6kajv2/
A simple (maybe not elegant) solution is to set the lis to position: relative and the arrow to position: absolute:
.right-caret {
position: absolute;
left: -15px;
top: 5px;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid red;
display: inline-block;
height: 0;
}
FIDDLE
Use this instead of span With bullet , Without bullet
li:before {
content: "";
border-color: transparent red;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
EDIT
You have a margin-left clear it
http://jsfiddle.net/hc6kajv2/2/
Related
As you can see on this link there is en block with a little point on the left side
I was wondering if there is not just a class to make a block with a little point on the left. Without using css? just like class="img-circle" for example where it makes it round.
this pointer
HTML
<div class="triangle">here we talk!!</div>
CSS:
.triangle{
position: relative;
width: 100px;
height: 100px;
color: white;
background-color: rgba(0,0,0,.8);
}
.triangle:after{
position: absolute;
left:-10px;
top: 18px;
content: '';
width: 0;
height: 0;
border-right: solid 10px rgba(0,0,0,.8);
border-bottom: solid 10px transparent;
border-top: solid 10px transparent;
}
Explain:
in the div you create the square in css I define it...
in :after I defined the triangle
If you want to change the background color you have to change both of them
Hello I was recently browsing around some demo for websites for client. And saw a really cool thing I liked. So I try to inspect in the browser to see if I replicate the effect on my own. And I have no idea how they did it.
here is the link to the demo
http://www.templatemonster.com/demo/45057.html
And here is a n image to show what I'm talking about.
They have these squares with an overflow at the bottom looking like multiple elements.
I was able to grab the HTML/CSS and replicate the just one box without the overflow. But I can't figure out how to make it look like stacked boxes, nor can I find where the code is.
I tried to replicate using JSFidle as you can see here
HTML
<div class="span2"><div class="service-box boxed green"><figure class="icon"><i class="icon-file-alt"></i></figure><div class="service-box_body"><h2 class="title">Accounting valuations</h2></div></div> </div>
.service-box.boxed {
border-radius: 0px;
box-shadow: none;
padding: 25px 15px;
margin-bottom: 30px;
text-align: center;
position: relative;
background: none repeat scroll 0% 0% #F1F6F9;
overflow: visible;
border: 1px solid #C5D0D2;
}
http://jsfiddle.net/w1defmkz/
You're pretty close but missing the :before and :after pseudo elements:
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:after {
left: 3px;
right: 3px;
bottom: -7px;
}
Here's an updated fiddle: http://jsfiddle.net/w1defmkz/1/
Well, The user has added two more divisions, made them absolute.
You see, the whole span (class = "span2") is positioned relative.
This is the css for the one of them...
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
Js Fiddle: http://jsfiddle.net/3my6rhgL/
I got a menu and the <li> element has something like a border at right.
The problem about this is when it breaks for a second line of <li> elements. I know that i can take last-child border out, but is there a way to know when it breaks a line?
*Only with CSS and automatic, i cant use nth-child(), since i will not have the control over the categories.
Example:
http://jsfiddle.net/m5cy969s/ - I would like to take out the border from the third <li>.
HTML
<ul>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
</ul>
ul,li { padding:0; margin: 0; }
CSS
li {
display: inline-block;
list-style: none;
padding: 3px 6px;
position: relative;
}
li:after {
position: absolute;
content: "";
right: -2px;
top: 0;
border-left: 2px solid blue;
border-right: 2px solid green;
height: 100%;
}
ul {
max-width: 220px;
border: 1px solid red;
background-color:pink;
}
The only way to do this with pure CSS would be to manually select the child <li> that breaks at the end and remove the border. In your case, this would be the third child.
li:nth-child(3):after {
border: none
}
To do this "automatically", you would need JS.
I'm not that good with css. My scenario:
i'm trying to use a css triangle on active list item.
<div class="bx-viewport"> <!-- this div has overflow:hidden for need. -->
<ul class="nav nav-tabs nav-tabs-noborder bxslider">
<li> <!-- css triangle when the item is active -->
... <!-- some text -->
</li>
</ul>
</div>
list css:
.nav-tabs-noborder > li.active:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
content: '';
z-index: 999;
position: absolute;
left: 40%;
bottom: -22px;
}
div.bx-viewport css:
width: 100%;
overflow: hidden;
position: relative;
The triangle only works if i remove overflow hidden. But in this scenario i can't. Is there solution/workaround for that ?
PS: I'm using bxSlider.
Below the print for what i need and showing css properties. (Removing overflow hidden)
http://i.imgur.com/iOl8FiX.png
I use these rules to create a triangle. You could try:
.triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 14px 7px 0 7px;
border-color: #ffffff transparent transparent transparent;
}
Try this:
.nav-tabs-noborder > li.active:after {
content: '▼';
z-index: 999;
position: absolute;
left: 40%;
bottom: -22px;
color: white;
font-size: 20px;
}
You can style the downward triangle using font-size, color etc. and position it correctly using margins.
If you can get rid of position: relative; on div.bx-viewport, that should unhide your triangle. The bottom: -22px; will move it below the bottom of the viewport, though, so you'll have to scroll down to see it.
Link:
http://jsbin.com/EFAlace/3/edit?html,css,output
HTML:
<a href='#' class='tooltip-parent'>Hover over me!
<span class='tooltip-container'>
<span class='tooltip'>
<a style='href='#'>Weird link</a><br>
One<br>
Two<br>
Three<br>
Four<br>
</span>
</span>
</a>
.tooltip-container added for absolute positioning, for 'reset' tooltip position.
CSS (LESS):
.tooltip-container {
position: absolute;
}
a:hover {
background-color: grey;
}
.tooltip-parent {
display: inline-block;
.tooltip {
width: 150px;
display: none;
position:relative;
border:1px solid blue;
&:before, &:after {
content: '';
top: -20px;
left: 20%;
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
margin-left: -20px;
}
&:before {
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 23px solid;
margin-left: -23px;
border-bottom-color: inherit; /* Can't be included in the shorthand to work */
top: -23px;
}
}
&:hover .tooltip {
padding: 10px;
display: inline-block;
top: 20px;
}
}
ul {
list-style:none;
margin: 0; padding:0;
li {margin: 0; padding:0;}
}
:before and :after: things are for triangle at the top of the tooltip. Google on 'CSS triangle pseudo elements'
I have been experimenting with CSS-only tooltip, which pops out on hover over a parent element. You can see working example at jsBin. But I encountered the strange issue - when I add anchor inside tooltip - html markup blows out, just uncomment this code <!--<a style='href='#'>Weird link</a><br>--> in HTML pane and you will see what Im talking about. And then see at markup structure - browser just places HTML content of .tooltip outside of and element to which that tooltip is attached.
Thats pretty unclear behavior, any thoughts will be appreciated.
first i see a problem of anchor inside anchor, that's not allowed by html. try to rearrange your html tags in a better way.
secondly about the weird link, which is:
<a style='href='#'>Weird link</a>
why is it
style='href='#'