Hello :) Is it possible to have bottom border in the center (without using pictures). Something like separator between list items which doesn't go from edge to edge?
Thanks
You can do that with two elements easily, here's a demo http://jsfiddle.net/slash197/JbFrN/6/
Not directly. But if it's OK to insert additional elements just for the sake of the border then you can make these elements less wide than your "proper" list items to achieve the desired effect.
See an example.
Old post, but I was wondering how to do this effect on a day of 2017
I did it with pseudo element ::after and display: inherit
li::after {
content: '';
display: inherit;
width: 50%;
margin: 10px auto;
border-top: 1px solid #DFDFDF;
}
I know it's an old question but I found this thread using google.
It can also be accomplished with :after
div:after {
content: '.';
display: block;
height: 1px;
width: 200px;
margin: 0px auto;
text-indent: -9999px;
border-top: 1px solid #585858;
}
Demo
<div class="dropDown">
<ul class="ddMenu">
<li>ONe</li>
<li>Two</li>
<li class="last">Three</li>
</ul>
</div>
.dropDown {
background-color: #F6F6F2;
border: 1px solid #D6DAC4;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
margin-top: -1px;
padding: 10px;
width: 110px;
}
ul, ol {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.ddMenu li {
border-bottom: 1px solid #E9EADE;
box-shadow: 0 1px #FFFFFF;
display: list-item;
line-height: 2.3;
}
ul.ddMenu li a {
display: block;
padding: 4px 10px;
}
<h1 class="center underlined">
<span>My title</span>
<h1>
h1 {
&.center.underlined {
display: flex;
align-items: center;
justify-content: center;
span {
border-bottom: 3px solid;
}
}
}
Related
i need the borders of my list to appear like this on the screen, Im not able to put the white spacing between the border-bottom and the border-right.
This is my code: https://jsfiddle.net/w1n72hkx/3/
HTML:
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
CSS:
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
display: inline;
padding-right: 5px;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
Here i attach an image of how it should look like:
Just apply a bottom and top margin to your li elements and set their display to inline-block in order to make the margin matter.
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding: 0 5px;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
padding-right: 5px;
/*Here' what changed*/
display: inline-block;
margin: 5px 0;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
There are many ways to separate the internal borders:
you could move up list-items with a negative top value, e.g.
.barraDatosSociales li {
display: inline;
padding-right: 5px;
position: relative;
top: -2px;
}
or you could add a padding-bottom to the outer container
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding-bottom: 2px;
border-color: DarkTurquoise;
}
You need a little modification in the css for the list-items.
Inline elements do not accept top/bottom padding and margins. So try using display: inline-block
.barraDatosSociales li {
display: inline-block;
padding: 5px 15px;
}
I have a list with a few divs inside to style them. I want to align one of the divs along the bottom edge. If I make the div position: absolute (the parent li is also absolute, so it is relative to that) then it loses the width that the element should be. If I remove the position: absolute from the div then the width of the div is right. The width of the div is not set explicitly, but should take up as much space as it can.
In the example below, I have 2 items. the div with class="rules" is the item in question. In the item that is red, the <p> is wide enough that it expands the div to the full width that it can take up, but on the item that is blue there is not much text inside the <p> so the div is not very wide. I can remove the position: absolute but then the div is not aligned to the bottom.
My question is this: Can I somehow make the width the same for all items without explicitly declaring a width, or is there some other way of positioning the div at the bottom of the list item? The only solution I can think of is to
Here is a fiddle
And the code, just in case:
HTML
<ul class="cardlist">
<li class="blue">
<h4>Think Twice<div class="cost">1U</div></h4>
<div class="type">Instant</div>
<div class="rules">
<p>Draw a card.</p>
<p>Flashback {2}{U}</p>
</div>
</li>
<li class="red">
<h4>Lightning Bolt<div class="cost">R</div></h4>
<div class="type">Instant</div>
<div class="rules">
<p>Lightning Bolt deals 3 damage to target creature or player.</p>
</div>
</li>
</ul>
CSS
p, div, ul, li, body, h1, h2, h3, h4, h5, h6
{
margin: 0px;
padding: 0px;
border: 0px solid #000000;
}
.blue { background-color: rgba(15, 158, 219, 0.9);}
.red { background-color: rgba(227, 65, 16, 0.9); }
#BodyContainer
{
width: 100%;
height: 100%;
}
#BodyContainer > div, ul, li
{
display: inline-block;
}
ul
{
text-align: left;
list-style-type: none;
}
.cardlist li
{
vertical-align: top;
border: 10px solid #000000;
border-radius: 15px;
padding: 10px;
width: 250px;
height: 300px;
margin-bottom: 5px;
position: relative;
box-shadow: 5px 5px 5px #CCCCCC;
}
.cardlist li h4
{
padding: 3px;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
}
.cardlist .cost
{
float: right;
margin-right: 4px;
}
.cardlist .type
{
display: block;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
padding: 1px;
}
.cardlist li .rules
{
display: inline-block;
min-height: 100px;
background-color: #FFFFFF;
border: 2px solid #000000;
padding: 4px;
position: absolute;
bottom: 7px;
margin-right: 12px;
margin-left: 2px;
}
.cardlist li .rules p
{
width: 100%;
}
.cardlist li .pt
{
float: right;
position: absolute;
bottom: 2px;
right: 8px;
padding: 3px 8px;
background-color: #FFFFFF;
border: 2px solid #000000;
border-radius: 5px;
}
.cardlist li p
{
margin-bottom: 5px;
}
.cardlist li .rules doesn't have a width. It will have a max-width of parent, with width: auto.
You could give it a width: width: 100% (px: width: 123px) or stretch it with left: 0; right: 0;.
I am facing a small problem in time to align my divs inside a <li>. I would like to vertically align my div (which has a picture inside), in a way that no matter the height of my <li>, it will always be in the middle. NO USE WITH MARGIN-TOP PERCENTAGE (%). Already used the display table but did not work for my case.
Here the picture of how I would like to stay:
How is increased when the height of my <li>.
The image is not in the middle of <li>. ^
If anyone can help me, this here my file fiddle. Remember without using margin :). In my case I am temporarily using the file fiddle.
http://jsfiddle.net/Igaojsfiddle/T6KrE/37/
#frdImgProfile {
width: 50px;
height: 50px;
border: 1px solid #aaa;
background: #ffe;
position:absolute;
margin-top:3px;
margin-left:4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
Thank you!
Well... We'll go for parts:
First: You don't have to abuse with the id attributes.
Second: In your CSS code, you have a lot of rules that reference to same id. This is not a good practice. It supposed that the id is unique.
Third: I've seen that you have a div called: div#avatarUser. I guess that you created this for setting special style. Well you don't need to do this. With parent:first-child or parent:nth-child(1) you can set specific styles for the first element:
E.g.:
<ul>
<li></li> <!-- I want to set specific styles for this element. The first element -->
<li></li>
<li></li>
</ul>
So, for do that just in my CSS file, I'll put:
ul > li:nth-child(1) { /* Your CSS code */ }
Well, now we deep in your problem.
I changed a little your HTML code, because I think it's more organized and clean code:
<div class="frdList">
<ul class="contactList">
<li>Friends :)</li>
<li class="p-flexbox flex-hsc">
<img src="http://w2.vanillicon.com/2c85954e3b080d9926c53b530ca40317_50.png" />
</li>
<li class="p-flexbox flex-hsc">
<img src="http://w6.vanillicon.com/6cd18e7a56ebd6fb1f3f607823b7d5fe_50.png" />
</li>
<li class="p-flexbox flex-hsc">
<img src="http://wc.vanillicon.com/cd7c7d1f9a0c56ff3b8296527a98564f_50.png" />
</li>
<li class="p-flexbox flex-hsc">
<img src="http://vanillicon.com/0fff488a9952086c6785f260e2c127ad_50.png" />
</li>
</ul>
</div>
And also changed the CSS file:
/* Reset CSS */
body, div {
margin: 0;
padding: 0;
}
li { list-style: none; }
/* #font-faces imports */
#font-face {
font-family:'Amatic SC';
font-style: normal;
font-weight: 400;
src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
/* Basic styles */
.frdList {
height:500px;
width:500px;
}
.contactList > li:nth-child(1) {
font-weight: bold;
font-family: 'Amatic SC', cursive;
font-size: 45px;
text-align: center;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(#2da1ec, #0191d9);
background-image: -moz-linear-gradient(#2da1ec, #0191d9);
background-image: -ms-linear-gradient(#2da1ec, #0191d9);
background-image: linear-gradient(#2da1ec, #0191d9);
border: 1px solid #0082c3;
border-bottom: 1px solid #077be0;
position: relative;
height:55px;
}
.contactList > li:nth-child(1):hover {
background-image: -webkit-linear-gradient(#2eacff, #0191d9);
background-image: -moz-linear-gradient(#2eacff, #0191d9);
background-image: -ms-linear-gradient(#2eacff, #0191d9);
background-image: linear-gradient(#2eacff, #0191d9);
}
.contactList > li:nth-child(1):after {
content: url("http://images1.wikia.nocookie.net/knd/images/3/3a/PR2.gif");
text-align: center;
width: 68px;
height: 65px;
background: #8dfd07;
display: inline-block;
position: absolute;
top: -10px;
left: 15px;
border-radius: 5px;
border: solid 1px #aaa;
}
.contactList > li:nth-child(1):before {
content: "";
position: absolute;
border-radius: 6px;
width: 78px;
height: 75px;
background-color: white;
line-height: 70px;
/* Well see */
text-align: center;
border: solid 1px #aaa;
top: -15px;
left: 10px;
}
.contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 2px -2px gray;
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-left: 10px solid green;
border-right: 1px solid #999999;
height:120px;
}
.p-flexbox {
/* Flexbox: Init setup */
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hsc {
/* Flexbox: Principal setup */
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
To center the images I used Flexible Box Model or Flexbox.
But I think... Why to complicate? If you know the height of the container of the image, use line-height
In the development area exists a principle called KIS. It means:
Keep It Simple.
If you have the solution (and a good solution), use it! This will avoid headaches.
Here's a DEMO.
Try to change the height of the li elements in the demo and you will see that the images will always be center.
Cheers,
Leonardo
If you won't use margin, try with line-height on li and .frdImgProfile
Change #frdImgProfile to .frdImgProfile and on your html change id=frdImgProfile to class=frdImgProfile,
Remove margin-top on .frdImgProfile
Add line-height: 120px; to #contactList > li
Add display: inline-block; vertical-align: middle;line-height: normal; to .frdImgProfile
#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 2px -2px gray;
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-left:10px solid green;
border-right:1px solid #999999;
height:120px;
line-height: 120px;
}
.frdImgProfile {
width: 50px;
height: 50px;
border: 1px solid #aaa;
background: #ffe;
margin-left:4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
demo on cssdeck
Hope this help
can add .. add you complete classes. ++
#contactList > li {
position:relative;
}
#frdImgProfile {
width: 50px;
height: 50px;
position:absolute;
margin-top:-25px;
top:50%;
}
My navigation bar currently is scrunching all my text together. I have "headers" for the dropdown list, and the headers aren't forcing a line.
The HTML looks like this:
<li><p>Services</p><ul>
<li id="ITServices"><p>IT Services</p></li>
<li>Portals, Collaboration & Workflows</li>
<li>Business Intelligence & Dashboards</li>
<li>Mobile Development</li>
<li>Custom Application Development</li>
<li id="healthcare"><p>Healthcare Services</p></li>
<li>EMR, ICD 10 and Healthcare Consulting</li>
</ul></li>
CSS looks like this:
#healthcare p {
width: 280px;
margin-left: 0px;
padding: 0px;
display: inline;
}
#ITServices p {
width: 280px;
margin-left: 0px;
padding: 0px;
display: inline;
}
.navbar li:hover ul {
left: 15px;
top: 40px;
background: #7FBA00;
padding: 1px;
width: 280px;
border: none;
text-align: left;
}
.navbar li:hover ul a {
margin: -7px -10px -7px -15px;
text-align: left;
padding: 0px 0px 0px 10px;
display: block;
font-size: 11px;
width: 259px;
line-height: 25px;
color: #000;
background-color: #F0F0F0;
text-decoration: none;
border-left: 10px solid #7FBA00;
border-bottom: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
}
.navbar li:hover ul a:hover {
background: #7FBA00;
border-left: solid 10px #fff;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
width: 260px;
}
Ahhh! Right? I'm trying to get it to all display in a list with basically line breaks after each li element. Help?
Basically a rule is over-riding your style. display property called block makes an element to behave like a block element, thus covering full line.
Your use might be the following, so try this
li > ul li { display: block; }
I have an unordered list that contains links. Some of the links are text and some are text with icons. But I have a problem in that I can't get them to line up. Can someone suggest what I am doing wrong here. I have tried different combinations but still can't get things to line up.
Here is my HTML code. Note that I used an icon from another site. I can't link to my own site as its internal.
<div id="ftr_top_ctr" class="btn_lnk">
<ul class="left">
<li><a class="disabled" id="doCheckMark" rel="nofollow">Mark</a></li>
<li><a href="/aa" ><img class='ico' src="http://michaelwright.me/images/test.png" /></a></li>
<li><a href="/aa" ><img class='ico' src="http://michaelwright.me/images/test.png" />Test</a></li>
</ul>
</div>
div#ftr_top {
height: 30px;
}
.btn_lnk ul.left {
padding: 0 0 0 10px;
}
.btn_lnk ul {
margin: 0;
}
.btn_lnk {
font-size: 12px;
}
.btn_lnk ul li {
display: inline;
float: left;
padding: 0;
position: relative;
}
#ftr_top_ctr a {
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
a {
text-decoration: none;
}
You can see the code and what it displays: fiddle
Add vertical-align: top to the imgs.
http://jsfiddle.net/thirtydot/86ZEf/4/
This problem was happening because the default vertical-align is baseline, see here for more information.
Add float:left; to #ftr_top_ctr a and give it a line-height:16px;. Add a rule for the icon: #ftr_top_ctr a img {float:left;}. Fiddle.
Try this: http://jsfiddle.net/86ZEf/8/
Instead of adding a border to the a elements, add it to the li elements and set a height on the li elements too. Lastly, remove the "float", set "li" to inline and you're good to go. Relevant snippet:
.btn_lnk ul li {
display: inline;
height: 22px;
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
Here is the updated css in its entirity:
.btn_lnk ul.left {
padding: 0 0 0 10px;
}
.btn_lnk ul {
margin: 0;
}
.btn_lnk {
font-size: 12px;
}
.btn_lnk ul li {
display: inline;
height: 22px;
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
a {
text-decoration: none;
}
img {
vertical-align: top
}