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.
Related
I'm looking to replicate the following design in CSS:
So far I've done the following:
.bb-title::before{
content:'';
position: absolute;
background-color: #7D18FD;
width: 25%;
height: 3px;
bottom: 0;
}
<h2 class='f2 mt4 bb-title relative'>
What people are saying
</h2>
But this isn't responsive.
See the Codepen.
What is the best way to achieve a bottom border on titles, where the border will always be the same width as the title?
follow these steps:
.bb-title {
position: relative;
display: inline-block;
}
.bb-title::before {
content: '';
position: absolute;
background-color: #7D18FD;
width: 100%;
height: 3px;
bottom: -5px;
left: 0;
right: 0;
}
Try adding this and remove the old styling
.bb-titlee{
position: relative;
border-bottom: 3px solid #7D18FD;
display: inline;
padding: 0;
margin: 0;
}
h2 elements are displayed as blocks as default, if we set it to inline it will wrap around the text and contain that width.
You can make the element inline and then add a bottom border to it like the code bellow:
.bb-title{
display: inline;
border-bottom: 3px solid #7D18FD;
}
Try
.bb-title
{
display:inline;
border-bottom: 5px solid #7D18FD;
padding-bottom: 10px;
}
Html :
<div class='d-flex fl'>
<h2 class='f2 mt4 header'>What people are saying</h2>
<div class='line'></div>
</div>
Css:
.header{
margin:0 !important
}
.line{
flex: 1;
border:1px solid #7D18FD;
}
I want the price of coffee to come at the right end of the coffee name i.e 1.80 price should come in line of Americano. Similarly 10.00 price should come in line of Macchiato.
ul {
list-style: none;
padding: 5px;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container li {
border-bottom: 1px dashed blue;
}
#container > li {
font-size: 2em;
border-bottom: 1px solid black;
}
em {
float: right;
position: relative;
bottom: 0px;
}
span {
width: 100px;
display: inline-block;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
As you can see i am using relative position, but its not working.
Can you solve this without absolute position and minimum changes to the code?
Just tell me why is relative position not working.
First you need to fix your html - the closing li for the DRINK MENU should be after the nested ul.
Then I would make use of display:table css:
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container > li {
padding: 5px;
}
#container ul {
border-top: 1px solid black;
margin-top: 5px;
}
#container ul li {
border-bottom: 1px dashed blue;
display: table;
width: 100%;
}
#container span,
#container em {
display: table-cell;
vertical-align: bottom;
padding: 3px 0;
}
#container em {
text-align: right;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
UPDATE
As per your comments about overflow. There are a couple of ways to fix this:
Increase the min width of ul#container to something that will accommodate the longest line - in this case a width of 125px should suffice: Fiddle example
Add table-layout:fixed to your table li and add word-wrap:break-word to the span: Fiddle example
You can add a class to the <em>
HTML
<ul id="container">
<li>DRINK MENU</li>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano</span><em class="bottom">1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato</span><em class="bottom">10.00</em></li>
</ul>
</ul>
CSS:
ul{
list-style: none;
padding: 5px;
margin: 0;
}
ul#container{
width: 18%;
min-width: 200px ;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange ;
box-shadow: 4px 4px 8px rgba(0,0,0,.3);
}
#container li{
border-bottom: 1px dashed blue;
}
#container > li{
font-size: 2em;
border-bottom: 1px solid black;
}
em{
float: right;
position: relative;
bottom: 0px;
}
.bottom {
position: relative;
top:15px;
}
span{
width: 100px;
display: inline-block ;
}
DEMO
Another posible solution (maybe the best practice):
CSS:
li:nth-child(3) > em, li:nth-child(5) > em{
position: relative;
top:16px;
}
DEMO
Along with your questions, I've taken your comments into consideration in preparing this answer.
First, your HTML was invalid. The list was nested improperly so I corrected that that in my answer.
In answer to your first question...
how to position the prices at the baseline
... absolute positioning will work and will not prevent your price card from adjusting to different browsers, platforms or devices. It will be as responsive as the container it is in. Of course, you should test your code to make sure it works as intended.
Note that for position: absolute to work properly you must set the parent element to position: relative. This is because absolute positioning will move the element – in this case the em – relative to its closest positioned ancestor (which in this case should be the li). If the absolutely positioned element doesn't find a positioned ancestor, it will position the element relative to the <body>. So bottom line:
To absolutely position a child element, set the parent element to position: relative.
Here's an example using your code.
DEMO
HTML
<!-- with corrections to improperly nested list -->
<div id="container">
<h2>DRINK MENU</h2>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano more text more text more text more text</span>
<em>1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato more text more text more text more text</span>
<em>10.00</em></li>
</ul>
</div>
CSS
/* based on your original code */
#container {
width: 200px;
border: 15px solid #886633;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
padding: 5px;
}
h2 {
width: 99%;
border-bottom: 1px solid black;
margin: 0;
}
ul {
list-style: none;
padding: 5px;
margin: 0;
}
#container ul li {
font-size: 1em;
font-weight: bold;
border-bottom: 1px dashed blue;
position: relative;
}
span {
width: 100px;
display: inline-block;
}
em {
position: absolute;
bottom: 0;
right: 0;
}
In answer to your second question...
Just tell me why is relative position not working.
Actually, it's working fine. In the normal flow of things, it's positioned exactly where it belongs. Your descriptions are breaking to a new line because of the margin limitation you set in your span.
That being said, the em can still be positioned with position: relative. Change the value from 0. Your prices will (as defined by your style rule) move up or down as a group, depending on whether you use positive or negative numbers.
Your CSS rule:
em {
float: right;
position: relative;
bottom: 0px;
/* test these individually:
bottom: 25px;
bottom: -25px;
right: 25px;
right: -25px */
}
For more about positioning see the position article at MDN.
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/
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='#'
I have a TD which contains a UL and LIs. I'm trying to get the list to flow outside of the TD. If I use position:absolute all the LIs stack on top of each other. Is there a way to get the LIs to maintain their positioning relative to each other and still flow outside the containing TD?
EDIT Added code (it is written in rails but I've included the generated HTML):
CSS
#calendar li {
width: 265px;
position: absolute;
background: palegreen;
}
Generated HTML
<td class="weekend">
24
<ul>
<li>
Deleware (2)
</li>
</ul>
</td>
Have you tried adding
position:relative;
to the td element.
(like this http://jsfiddle.net/ZGyDW/)
Afaik this is required for the parent element in order to position a child element absolute inside it.
I reread your explanation and updated my fiddle. I don't know if you're able to add elements, but you could try wrapping all the uls in a div and absolutely positioning the div. Here's my CSS:
table {
color: #666;
font: 16px normal Arial, Helvetica, sans-serif;
margin: 30px;
}
td {
border: 1px solid #f00;
height: 200px;
padding: 5px;
position: relative;
vertical-align: top;
width: 200px;
}
div {
position: absolute;
}
ul {
border: 1px solid #00f;
margin: 5px 0;
width: 300px;
z-index: 2;
}
li {
border: 1px solid #0f0;
padding: 5px;
}