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>
Related
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>
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
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>
I want to make a line in the middle of the divs. In the following image, the line should be in the middle of the red boxes.
I'm trying to do that using the line height, but not able to.
Here's the code:
HTML/CSS:
.wrap {
text-align: center;
margin: 20px;
}
.links {
padding: 0 10px;
border-top: 1px solid #000;
height: 1px;
line-height: 0.1em;
}
.dot {
width: 20px;
height: 20px;
background: red;
float: left;
margin-right: 150px;
position: relative;
top: -10px;
}
<div class="wrap">
<div class="links">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
Demo:
https://jsfiddle.net/nkq468xg/
You can use Flexbox on links and for line you can use :before pseudo-element on wrap element.
.wrap {
text-align: center;
margin: 20px;
position: relative;
}
.links {
padding: 0 10px;
display: flex;
justify-content: space-between;
position: relative;
}
.wrap:before {
content: '';
position: absolute;
top: 50%;
left: 0;
border-top: 1px solid black;
background: black;
width: 100%;
transform: translateY(-50%);
}
.dot {
width: 20px;
height: 20px;
background: red;
}
<div class="wrap">
<div class="links">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
Here's one where the line is actually on top, but it does add another element to the HTML:
https://jsfiddle.net/nkq468xg/2/
.wrap {
text-align: center;
margin: 20px;
}
.links {
height: 20px;
position: relative;
}
hr {
border: 0;
height: 1px;
background: black;
position: absolute;
top: 1px;
width: 100%;
}
.dot {
width: 20px;
height: 20px;
background: red;
float: left;
margin-right: 150px;
}
<div class="wrap">
<div class="links">
<hr>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
You can use pseudo element, like ::after
.links {
padding: 0 10px;
overflow: auto; // Your div will have the height of the overflowing elements
}
.links::after {
content: '';
width: 100%;
height: 1px;
background: black;
display: block;
position: relative;
top: 10px;
}
Check your code snippet in your question here on SO ("Run code snippet" blue button), is that what you need?
Added position: relative; top: -10px; in your code for .dot.
.dot {
position: relative;
top: -10px;
}
Fiddle: https://jsfiddle.net/nkq468xg/3/
The following is my markup:
.play-controls {
.fa-play, .fa-pause {
font-size: 25px;
}
}
.volume-controls {
display: inline-block;
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 100px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
.player {
#album-artwork {
width: 80px;
height: 80px;
vertical-align: middle;
display:inline-block;
margin-right: 10px;
}
.wrapper {
display:inline-block;
.information {
margin-bottom: 5px;
#song-title {
font-size: 22px;
font-weight:bold;
margin-right: 5px;
}
#artist-album {
font-size: 18px;
}
}
.progress-bar {
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 600px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
}
}
<div class="play-controls">
<i class="fa fa-play" id="playpause"></i>
</div>
<div class="volume-controls">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
<div class="player">
<img id="album-artwork" src="build/images/guero.jpg">
<div class="wrapper">
<div class="information">
<span id="song-title">Go It Alone</span>
<span id="artist-album">Beck - Guero</span>
</div>
<div class="progress-bar">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
</div>
</div>
The divs with classes background, circle, and overlay in volume-controls are all position: absolute; with volume-controls as position: relative;.
Upon making play-controls, volume-controls, and player inline, play-controls is inline with volume-controls, but volume-controls is overlapping the player.
How would I be able to set everything in one line, without any overlapping?
EDIT: JSFiddle
You could float:left; the 3 main parts or display:inline-block; them the issue the player is over the volume-controls is because of the absolute positioned elements in the volume-controls. You could add a width to volume-controls.
.volume-controls {
display: inline-block;
position: relative;
width:150px;
}
Here is the fiddle