I want to put a line under a titlw with dots. like so: How can I do that? I am beginner at CSS. I tried to do it using before and after I could not achieve it though. Thanks in advance
This can help,
.text-wrapper {
max-width: 150px;
margin: 0 auto;
padding: 50px;
text-align: center;
}
.text-wrapper h2 {
margin: 0;
position: relative;
padding-bottom: 3px;
font-family: sans-serif;
}
.text-wrapper h2:after {
width: 50px;
content: '';
position: absolute;
left: 0;
height: 2px;
background: #adadad;
bottom: -4px;
left: 0;
}
.text-wrapper h2:before {
width: 50px;
content: '';
position: absolute;
height: 2px;
background: #adadad;
bottom: -4px;
right: 0;
}
.dots {
width: 4px;
height: 4px;
display: inline-block;
background: #ff9800;
border-radius: 100px;
position:relative;
margin: 0 2px;
}
.dots-wrapper {
display: inline-block;
width: 100%;
position: relative;
top: -10px;
}
<div class="text-wrapper">
<h2>Title</h2>
<div class="dots-wrapper">
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
</div>
</div>
Related
I am trying to teach myself how ot build a timeline and add images. I found this on W3. I want to add images left / right of each text-container displaying what is writte in the text.
I experimented around a lot trying to make it work but I dont completely understand. Also there are some parts within this code I dont completely understand yet. It would be helpful I think, if you could break it down into pieces are explain a little on what each code of line does. But my main problem is to add images next to (left or right) the text-containers.
Thank you.
* {
box-sizing: border-box;
}
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.right::after {
left: -16px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
You can add the image to existing container using <img> tag.
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
<img src="https://placehold.it/200x200" /> <!-- image tag inside the container -->
</div>
I added the below additional CSS and used CSS flexbox layout.
/* Newly added CSS begin*/
.container {
display: flex; /*this makes the container flexbox layout*/
}
.container.left .content {
order: 2; /* order changes the content order within container */
margin-left: auto; /* pushes the left content box to extreme left */
}
.container.right .content {
margin-right: auto;
}
.container img {
margin: 0 20px;
}
/* Newly added CSS ends */
Updated code is below:
* {
box-sizing: border-box;
}
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
/* Newly added CSS begin*/
.container {
display: flex;
}
.container.left .content {
order: 2;
margin-left: auto;
}
.container.right .content {
margin-right: auto;
}
.container img {
margin: 0 20px;
}
/* Newly added CSS ends */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.right::after {
left: -16px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
<img src="http://placehold.it/200x200" />
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
<img src="http://placehold.it/200x200" />
</div>
</div>
Fiddle
Updated Fiddle with Adjacent images
This is my timeline code this far, I would like to end the last timeline-post element in a yellow line and then to the last blue dot.
I have tried to add this class .timeline:last-child::after but this does obliviously not work!
.iconspace {
position: relative;
width: 40px;
height: 40px;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #25b5f1;
z-index: 7;
}
.iconspace i {
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
}
.timeline {
position: relative;
}
.timeline:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 49.8%;
width: 3px;
height: 100%;
background-color: RED;
z-index: -5;
}
.timeline-post {
height: 100px;
width: 200px;
background-color: green;
margin: 0 auto;
margin-top: 20px;
}
.timeline:last-child::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 49.8%;
width: 3px;
height: 100%;
background-color: YELLOW;
z-index: -5;
}
.timeline:after {
position: absolute;
content: "";
display: inline-block;
width: 15px;
height: 15px;
line-height: 1;
background-color: #25b5f1;
margin-top: 50px;
left: 49.8%;
border-radius: 50%;
text-align: center;
}
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span>
<div class="timeline">
<div class="iconspace"><i class="fa fa-graduation-cap"></i></div>
<div class="timeline-post">
Test 1
</div>
<div class="timeline-post">
Test 2
</div>
<div class="timeline-post">
Test 3
</div>
</div>
You need to apply last-child to timeline-post and not timeline. You need also to set negative value in bottom instead of using height:100% or your line will take the same height of the timeline-post and will never reach the blue dot.
Also never forget to add position:relative to element when using position:absolute with its pseudo-element or any child element.
.iconspace {
position: relative;
width: 40px;
height: 40px;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #25b5f1;
z-index: 7;
}
.iconspace i {
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
}
.timeline {
position: relative;
}
.timeline:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 49.8%;
width: 3px;
height: 100%;
background-color: RED;
z-index: -5;
}
.timeline-post {
height: 100px;
width: 200px;
background-color: green;
margin: 0 auto;
margin-top: 20px;
}
.timeline:after {
position: absolute;
content: "";
display: inline-block;
width: 15px;
height: 15px;
line-height: 1;
background-color: #25b5f1;
margin-top: 50px;
left: 49.8%;
border-radius: 50%;
text-align: center;
}
.timeline .timeline-post {
position: relative;
}
.timeline .timeline-post:last-child::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: -50px;
left: 49.8%;
width: 3px;
background-color: YELLOW;
z-index: -5;
}
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span>
<div class="timeline">
<div class="iconspace"><i class="fa fa-graduation-cap"></i></div>
<div class="timeline-post">
Test 1
</div>
<div class="timeline-post">
Test 2
</div>
<div class="timeline-post">
Test 3
</div>
</div>
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape
I'm trying to make a website, with my basic knowledge, for my mother. But I've tried many things, but I can't get it to work the way I want it to
This is how it now looks:
And this is how I want it to be:
But somehow I can't get it to work. The div isn't positioning where I want it to position.
This is my source code:
JsFiddle
It's about this part that doesn't position properly:
<div class="wrapper_3">
<div class="main_3">
3
</div>
</div>
Thanks in advance for the help! I really can't get it to work.
Add float:left; to wrapper_1 and wrapper_2
after that, use position:relative; to position wrapper_2.
visit this link if you need more information about syntax.
CSS Position Property
Here is your new CSS.
.wrapper_1 { width: 25%;
display: inline-block;
position: relative;
margin-left: 21%;
margin-top: 14%;
clear: both;
float:left;}
.wrapper_2 {
width: 25%;
display: inline-block;
position: absolute;
margin-left: 16px;
margin-top: 5%;
float:left;
position: relative;
top: 50%;
}
it will be easier if you use bootstrap for your website.
html:
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="logo text-center">logo</div>
</div>
<div class="col-xs-offset-4 col-xs-3 box">2</div>
<div class="col-xs-offset-4 col-xs-3 box">1</div>
</div>
</div>
css:
.logo {
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 15px;
}
.box {
padding: 60px;
background-color: red;
margin-top: 30px;
}
http://jsfiddle.net/souraj/sxuqqqgd/
here you can see the code.
you have to link the bootstrap.css file to work. just visit to getbootstrap.com and see how to link bootstrap.css in your code.add this code to your head section of the code.
enter link description here
Here you go :) I edited your fiddle, Why are you using position:absolute; everywhere? There is no need of absolute positioning in your design.
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
.main {
position: relative;
width: 100%;
height: 100%;
}
.wrapper_logo {
margin-top: 10px;
margin-left: 10px;
width:20%;
display: inline-block;
position: absolute;
}
.wrapper_logo:after {
padding-top: 45%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_logo {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
padding-left: 20px;
font-size: 30px;
border-top: 1px solid black;
border-bottom: 1px solid black;
color: black;
vertical-align: middle;
}
.wrapper_1 {
width: 25%;
display: inline-block;
position: relative;
margin-left: 21%;
margin-top: 14%;
clear: both;
}
.wrapper_1:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
clear: both;
}
.main_1 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.wrapper_2 {
width: 25%;
margin-left:200px;
}
.wrapper_2:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_2 {
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.wrapper_3 {
width: 15%;
float: left;
display: inline-block;
position: absolute;
}
.wrapper_3:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_3 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.three {
position: absolute;
background: green;
width: 400px;
top: 10px;
left: 50px;
}
<!DOCTYPE html>
<div class="main">
<div class="wrapper_logo">
<div class="main_logo">
LOGO
</div>
</div>
<div class="wrapper_1">
<div class="main_1">
1
</div>
</div>
<div class="wrapper_2">
<div class="main_2">
2
</div>
</div>
<!-- <div class="wrapper_3">
<div class="main_3">
3
</div>
</div> -->
</div>