I am creating a portfolio for myself and I am struggling with these list items. I want them to be the same height and inline with each other. In each list item there is one extra line and I believe that is what is causing it. How would I fix this?
Here is what it looks like:
Picture of the problem
#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
display: inline-block;
margin: 5px 2.5px;
width: 45%;
}
#content-wrapper ul li p {
padding: 10px;
height: 150px;
}
#content-wrapper ul li img {
width: 100%;
}
<div id="content-wrapper">
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>
there is another version of your code for you. everything is in line here.
any other questions, just ask :)
<div class="project">
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="project">
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="project">
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="project">
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
body{
margin:0;
padding:0;
}
#wrapper{
width:100%;
height:2000px;
background:#eee;
}
#portfolio{
width:900px;
height:1200px;
margin:auto;
}
.project{
width:47.5%;
height:400px;
background:#fff;
float:left;
margin:10px 2.5% 0 0;
}
.project img{
width:80%;
height:auto;
margin-left:10%;
}
.project p{
text-align:center;
}
http://codepen.io/raze444/pen/mOBjOx?editors=1100
replace inline-block with inline-table on #content-wrapper ul li for instant solution LiveOnFiddle . On small screen the last li p element overflow coz of the p tag height 150px. So you can change it 200px or write media query for small screen.
#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
display: inline-table;/*Change inline-block to inline-table*/
margin: 5px 2.5px;
width: 45%;
}
#content-wrapper ul li p {
padding: 10px;
height: 200px; /*Change the height 150px to 200px*/
}
#content-wrapper ul li img {
width: 100%;
}
<div id="content-wrapper">
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>
Use float: left; instead of display: inline-block;, and should look fine. Also if you want to completely remove the spaces between them set margin: 0;, everything on #content-wrapper ul li:
body{
margin: 0;
padding: 0;
}
#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
display: inline-block;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
float: left;
width: 50%;
}
#content-wrapper ul li p {
padding: 10px;
height: 150px;
}
#content-wrapper ul li img {
width: 100%;
}
#inner-wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
border-top: 2.5px solid #0F0F0F;
}
<div id="content-wrapper">
<div id='inner-wrapper'>
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>
</div>
I suggest you should use flexbox in place of display-inline something like below :
Add display: flex to parent container
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
margin: 5px 2px;
width: 45%;
}
#content-wrapper ul li p {
padding: 10px;
height: 150px;
}
#content-wrapper ul li img {
width: 100%;
}
<div id="content-wrapper">
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>
For documentation - A Complete Guide to Flexbox
Related
How can I make the sticky navbar stick to top of the page even after I provide a static height on sections below? Now when I scroll to the point of test-section then the nav disappears. How can I avoid this?
.header {
position: sticky;
top: 0;
z-index: 100;
height: 50px;
background: blue;
}
.test-section {
height: 300px;
background: red;
}
<div>
<div class="header">
hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve
</p>
</div>
<div class="test-section">
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">
</div>
Use "position: fixed" instead on the class header
Changing from position: sticky; to position: fixed; and also adding width: 100%; to your .header class seems to get the result your looking for
.header {
position: fixed;
top: 0;
z-index: 100;
height: 50px;
width:100%;
background: blue;
}
.test-section {
height: 300px;
background: red;
}
<div>
<div class="header">
hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve
</p>
</div>
<div class="test-section">
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">
</div>
.header {
position: fixed;
top: 0;
z-index: 100;
height: 50px;
background: blue;
}
I'm trying to get tooltips working properly within a scrollable div container. To achieve this I've set the tooltips position to absolute and for its parent element (.panel-section) to relative. Problem is with the very first tooltip which should be visible on top of the .panel-header but now it's going "under" it and is not visible.
.panel {
margin: 50px;
width: 500px;
border: 1px solid black;
}
.panel-header {
height: 2rem;
background-color: silver;
border-bottom: 1px solid black;
}
.panel-content {
overflow-y: auto;
height: 500px;
}
.panel-section {
position: relative;
}
h1,
h2 {
margin: 0;
}
.tooltip {
width: 200px;
height: 50px;
border: 1px solid silver;
background-color: #333333ee;
color: silver;
position: absolute;
top: -50px;
display: none;
}
.panel-section:hover .tooltip {
display: block;
}
<html>
<body>
<div class="panel">
<div class="panel-header">
<h1>Header content</h1>
</div>
<div class="panel-content">
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
</div>
</div>
</body>
</html>
A regular list
This is a regular list that serves as the basis of my question.
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
The font-size is blown up to 2em so that we can clearly see additional unwanted space around the bullet points in proposed solutions.
Setting left-padding to 0 does not solve it completely
I want to align the discs (the bullets) of the list with the left edge of the div element. So I try something like this.
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding-left: 0;
list-style-position: inside;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
This solution would have been nice if the indentation of the wrapped lines were not lost. I still want the wrapped lines to be aligned with the beginning of the first character of the first line like they are in a regular list.
Setting left-padding to 1em does not solve it completely
This is one of the solutions proposed in the answers but this does not work as well. We can see additional horizontal space between the left edge of the DIV and the bullet-point discs.
div {
background: lightgreen;
width: 20em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding-left: 1em;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus
porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
Question
What is the right way to solve this problem?
You can create your own bullet and you will be able to easily control size and distance:
div {
background: lightgreen;
margin-left:20px;
font-size: 2em;
}
ul {
list-style:none;
padding:0;
}
li {
display:flex;
}
li:before {
content:"";
width:0.4em;
height:0.4em;
border-radius:50%;
background:#000;
margin-right:0.5em;
margin-top:0.4em;
flex-shrink:0;
}
body {
background:pink;
}
<div>
<ul>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
<div style="font-size: 1em;">
<ul>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
You have to add to your second example margin-left: 0.84em; and list-style-position: outside; and you will have what you need:
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding-left: 0;
margin-left: 0.84em;
list-style-position: outside;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
div ul {
list-style:none;
}
div ul li {
}
div ul li .disc {
display: inline-block;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: #000;
margin-right: 10px;
}
<div>
<ul>
<li><span class="disc"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li><span class="disc"></span>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li><span class="disc"></span>Nulla id</li>
<li><span class="disc"></span>Nam ut</li>
</ul>
</div>
https://jsfiddle.net/Sampath_Madhuranga/4wv7kuep/5/
Use your own styles to show bullet points..That is the best solution for this issue...
Try this snippet..This may works for you.
Thanks.
There are different ways.
Check the https://css-tricks.com/almanac/properties/l/list-style/ which shows you can order the list 'list-style-position' property.
Otherwise we can use the symbols or any icons or images look at this link "Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image" which gives complete descruption of listview alignment.
In general it will add before property to the li, we can write our own.Please let me know if anything required
You can also try using background-images, with minimal css, it works exactly the same way as pseudo :before and :after as said by others earlier. This would also give you tight control over the size of the bullet. please have a look at the below snippet :)
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding-left: 1em;
background: url("https://via.placeholder.com/10.png/000/000") no-repeat left .5em / .25em;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit
amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque,
quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc,
eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
<br>
<br>
<div style="font-size: 1em">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit
amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque,
quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc,
eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
div {
background: lightgreen;
width: 20em;
margin-left: auto;
margin-right: auto;
}
div ul{
padding-left:0;
list-style-position: outside;
}
div ul li{
margin-left:20px;
}
Try this CSS instead.
I have a circle div and my text isn't inside it. By default it is slightly above and I can't pinpoint why. I have added margin to the top to force it inside the div but I am sure there is a better way to do this because my method only works for a certain amount of text.
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}
<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>
This is what it looks like
But I want it to look more like this but without having to add margin to the top of the text inside the div.
Here's a version that allows for any size text inside, although of course the size of the surrounding <div> will have to be changed if the size of the content is vastly greater. I added a second example with a bit more text.
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: justify;
text-align-last: center;
position: relative;
}
div.description h1 {
margin: 0;
padding: 0;
}
div.description p {
padding: 3.5em;
position: absolute;
top: 50%;
max-width: 470px;
max-height: 470px;
transform: translate(0,-50%);
}
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.</p>
</div>
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat.</p>
</div>
You should use css3 flexbox. Following css will make an element horizontally and vertically middle aligned:
div.description {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
div.description {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
padding: 25px;
}
<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>
For old browser support you can use following css to make it middle aligned:
div.description {
display: table;
}
div.description div.text {
vertical-align: middle;
display: table-cell;
}
div.description {
display: table;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
padding: 25px;
}
div.description div.text {
vertical-align: middle;
display: table-cell;
}
<div class="description">
<div class="text">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>
</div>
You can use the concept of padding:20px; to achieve the output you have expected
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
padding: 20px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}
<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>
you can try this. giving a max-width to p element smaller than the circle so it will not exede beyond the circle.
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}
div.description p{
max-width: 450px;
margin: 0 auto;
}
<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.
</p>
</div>
I would like to know how to start my ol with a different number, say 4. I have tried using start="4" and I have tried adding a class to the ol and setting counter-reset: 4; but none of this seems to work. The number doesn't change.
I have tried to remove all my stylings to put it right back to a plain ol list but it still doesn't work. Can someone please tell me where I am going wrong?
I just want the second list to have the number in the red circle start with 4.
JSFIDDLE
HTML
<div class="row">
<div class="col-md-6">
<ol class="number-circles">
<li value="7"><div class="ol-block"><div class="blue-heading">Title 1</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 2</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 3</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
</ol>
</div>
<div class="col-md-6">
<ol class="number-circles four">
<li><div class="ol-block"><div class="blue-heading">Title 4</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 5</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
</ol>
</div>
</div>
CSS
.col-md-6 {
float: left;
width: 50%;
}
.number-circles {
margin: 40px 0 0 0;
padding: 0;
list-style-type: none;
}
.blue-heading {
color: red;
font-weight: 600;
margin-bottom: 5px;
}
li {
counter-increment: step-counter;
margin-bottom: 40px;
}
.number-circles li::before {
content: counter(step-counter);
margin-right: 15px;
font-size: 17px;
background-color: red;
border: solid 6px yellow;
color: white;
font-weight: bold;
border-radius: 50%;
height: 40px;
display: inline-block;
width: 40px;
height: 40px;
padding: 2px 8px;
text-align: center;
float: left;
}
.ol-block {
float: left;
display: inline-block;
width: 85%;
margin-bottom: 20px;
}
ol.four { counter-reset: item 2; }
You have list-style-type set to none on your ol.
.number-circles {
margin: 40px 0 0 0;
padding: 0;
list-style-type: none;
}
The start attribute won't make a difference, because the value will be hidden.
list-style-type
The list-style-type property specifies the appearance of a list item
element.
none
No item marker is shown.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
You don't have a counter named "item". You need to change:
ol.four {counter-reset: item 2}
to:
ol.four {counter-reset: step-counter 3}
The value of step-counter is 0 based so setting value to 3 will display 4
Check it out here - JSFiddle