I don't understand why my viewport changes with this code. A scrollbar appears and I have to navigate across the page. I thought that calc height and width and using percentage would avoid this.
My understanding is that margin adds outside of the box and by doing 'calc(100vw - 20rem)'. I can effectively fit my html onto the page.
.activityText {
color: white;
font-size: medium;
font-weight: bold;
}
.hoursText {
color: white;
font-size:larger;
}
.dashboard {
display: flex;
flex-flow: column wrap;
row-gap: 20%;
width: calc(100vw - 20rem);
height: calc(100vh - 20rem);
margin: 20rem;
}
.userinfo {
width: 20%;
background-color: blue;
flex-basis: 100%;
border-radius: 50px;
}
.panel {
position: relative;
width: 20%;
flex-basis: 40%;
border-radius: 50px;
}
.colorPane {
position: absolute;
width: 100%;
background-color: rgb(6, 132, 136);
height: 100%;
border-radius: 50px;
}
.activity {
position: absolute;
top: 20%;
width: 100%;
background-color: rgb(40, 38, 56);
height: 80%;
border-radius: 50px;
}
<body>
<div class="dashboard">
<div class="userinfo"></div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity">
<div class="activityText"> Work </div>
<div class="hoursText"> 70 horus </div>
</div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity"></div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity"></div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity"></div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity">
</div>
</div>
<div class="panel">
<div class="colorPane"></div>
<div class="activity"></div>
</div>
</div>
</body>
The problem in an image
Related
In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>
Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.
A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>
A better solution would be to use position: relative and left: -40px on your .second_text.
I'm trying to achieve the following:
I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the position: absolute), otherwise I can't see the green rectangle.
My HTML structure is the following:
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
In the .interface CSS I have the following:
.interface
{
position: absolute;
top: 15%;
}
With this CSS I'm unable to see the green rectangle. If I remove the position: absolute (and therefore the top: 15% stops applying) I'm able to see the green rectangle.
You can see the issue in this JSFiddle: https://jsfiddle.net/v9euwdz3/
So, how do I manage to have the DIV showing at a certain level (margin from top) and without compromise my HTML structure?
Here is what you're trying to achieve using flex:
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.navetc {
background-color: white;
height: 15vh;
}
.top {
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="navetc">
SPACE
</div>
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
You could also use margin-top: 15%; instead of a placeholder div
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.top {
margin-top: 15vh;
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
(I used vh instead of % to get it to show up correctly in this code snippet)
as we know the content that have height which is 100% means is 100% of its parent and while the height of the parent is not defined will cause an error that's what you was stuck with you set the with of body to 100% but was not right you would set it to 100vh to fit the screen if you are on computer and the other mistakes that I found was in your calculation where you used to subtract the measurement which is in parcentages from the one in pixels height: calc(100% - 150px); and the others where simple mistakes
html,
body {
height: 100vh;
}
.app {
position: relative;
height: 100%;
display: flex;
}
.interface {
position: absolute;
height: 100%;
top: 15%;
}
.view {
position: fixed;
height: 100%;
background-color: #ccc;
width: 350px;
}
.body {
position: relative;
height: 100%;
}
.body .top {
height: 15%;
border: 1px solid #000;
}
.body .middle {
height: 60%;
border: 1px solid red;
}
.body .bottom {
height: 20%;
border: 1px solid green;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
to see the result in the snippet you should observe it in full page and also when you see the result through jsfiddle there at the result section there is bar downward which hide some part of footer
I have element on page, where I need to set height: auto, but it doesn't work the way I want to. Only min-height works, but when it's bigger that this, text goes over to the next element. Important thing to say, that I am reworking downloaded template. Everywhere else height: auto worked, but not here. I'm including the code below. I've already tried overflow: auto; but it just added scrollbar in the size of min-height value...
HTML:
<section id="dates" class="full-wrapper parallax-wrapper dates"> <!-- Tour Dates -->
<div class="parallax" data-velocity="-.3" data-fit="0">
<div class="front-content dates">
<h1>Koncerty</h1>
<div class="spacer"></div>
<div class="dates-wrapper">
<ul>
<li> <!-- List #2 --> <!-- max 5 Date Info elements per li -->
<div class="date-box"> <!-- Date Info 1 -->
<div class="info date">
<div class="day">15</div>
<div class="month">zář</div>
<div class="year">2015</div>
</div>
<div class="info">
<div class="city">Mladá Boleslav</div>
<div class="place"><div class="ico"></div>Nádvoří hradu</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>19:00 - 20:00</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 1 -->
<div class="date-box"> <!-- Date Info 2 -->
<div class="info date">
<div class="day">11</div>
<div class="month">úno</div>
<div class="year">2016</div>
</div>
<div class="info">
<div class="city">Plzeň</div>
<div class="place"><div class="ico"></div>
Pod Lampou</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>20:30 - 21:30</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 2 -->
<div class="date-box"> <!-- Date Info 3 -->
<div class="info date">
<div class="day">24</div>
<div class="month">úno</div>
<div class="year">2016</div>
</div>
<div class="info">
<div class="city">Praha</div>
<div class="place"><div class="ico"></div>Vagon</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>21:00 - 22:00</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 3 -->
</li>
</ul>
</div>
</div>
<div class="overlay"></div>
</div>
</section><!-- end Tour Dates -->
CSS:
#dates>div:nth-of-type(1) {
background: url(../img/parallax/01.jpg) 50% 0% repeat-y fixed;
background-color: #333333;
margin: 0;
height: auto !important;
min-height: 200px;
position: relative;
width: 100%;
text-align: center;
/* background-size: 100%;*/
-moz-background-size: cover !important;
-o-background-size: cover !important;
-webkit-background-size: cover !important;
-khtml-background-size: cover !important;
}
.parallax-wrapper.dates {
height: auto;
min-height: 200px;
position: static;
width: 100% !important;
/*min-width: 1000px;*/
margin: 0;
padding: 0;
}
.parallax-wrapper.dates h1 {
color: white;
}
.front-content.dates{
width: 500px;
margin-left: -250px;
}
.dates-wrapper{
width: 600px;
height: auto;
min-height: 200px;
position: relative;
overflow: hidden;
margin-left: 10px;
}
.dates-wrapper ul li{
float: left;
width: 600px;
}
.date-box{margin-bottom: 12px;}
.date-box:last-child{margin-bottom: 0;}
.date-box .info{
float: left;
text-align: left;
padding-left: 10px;
color: #bbb;
max-width: 170px;
overflow: hidden;
font-size: 14px;
}
.date-box .info div{position: relative;}
.date-box .info.date{
width: 65px;
height: 80px;
background: #ee6c00;
color: #fff;
text-align: center;
padding-left: 0;
}
Solved! I had to add exception for .front-content class, because there was only this:
.front-content{
position: absolute;
left: 50%;
z-index: 5;
}
So I had to edit it for .dates block:
.front-content.dates{
position: relative;
z-index: 5;
padding: 5px 10px 25px 10px;
}
Hi so here's what I want to do,
http://i1377.photobucket.com/albums/ah45/nikilean/line_zpswvrndxwg.jpg
a horizontal line behind the images? There are 8 circles and I want them to be connected with a line
I made it in bootstrap so the lines are divided into two col 6 and inside each col there are 3 col-3
.stepnumber {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #f9b315;
vertical-align: middle;
color: #fff;
padding-top: 2px;
padding-right: 10px;
font-size: 18px;
font-weight: bold;
margin-top: 150px;
left: -10px;
}
.step {
height: 150px;
width: 150px;
border-radius: 50%;
background-color: #fff;
margin-top: 80px;
margin-right:-60px;
position: absolute;
}
<div class="container">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class="lineline"><div class=stepnumber>1</div></div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
BOOK
</div>
</div>
</div>
<div class="col-md-3">
<div class=stepnumber>2</div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
WAIT
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class=stepnumber>3 </div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
FOUND
</div>
</div>
</div>
<div class="col-md-3">
<div class=stepnumber>4</div>
</div>
<div class="col-md-3">
<div class="step">
<div class="workstitle">
FLY!
</div>
</div>
</div>
</div>
</div>
</div>
You can achieve the look you're going for by using the :after (or :before) pseudo class on your wrapping element. You can create a border on the :after element and position it behind your circles using z-index.
Below is an example of how you could construct it.
.timeline {
height: 150px;
line-height: 150px;
display: table;
position: relative;
}
.timeline:after {
position: absolute;
left: 0.5em;
right: 0.5em;
top: 50%;
content: "";
border-top: 3px solid #F9B315;
z-index: 900;
}
.-item {
display: table-cell;
vertical-align: middle;
z-index: 1000;
position: relative;
}
.-item > div {
margin-left: 0.5em;
margin-right: 0.5em;
width: 150px;
height: 150px;
border-radius: 50%;
text-align: center;
line-height: 150px;
font-weight: bold;
font-size: 18px;
background-color: #f9b315;
color: #FFF;
}
.-item:first-of-type > div { margin-left: 0; }
.-item:last-of-type > div { margin-right: 0; }
.-item._number > div {
width: 30px;
height: 30px;
line-height: 2;
}
<div class="timeline">
<div class="-item _number">
<div>1</div>
</div>
<div class="-item _title">
<div>BOOK</div>
</div>
<div class="-item _number">
<div>2</div>
</div>
<div class="-item _title">
<div>WAIT</div>
</div>
<div class="-item _number">
<div>3</div>
</div>
<div class="-item _title">
<div>FOUND</div>
</div>
<div class="-item _number">
<div>4</div>
</div>
<div class="-item _title">
<div>FLY!</div>
</div>
</div>
This is going to take a little bit of work on your part, but here is a way to put a horizontal line behind the div.
Here is the fiddle. The trick for the line is to make a div that's only 1px high. It will take a little bit of thinking on your part:
.line{
height: 1px;
width: 100px;
background-color: black;
z-index: 1;
position: absolute;
top: 25px;
}
I'm struggling trying to align both vertically and horizontally what should be a CSS keyboard.
I believe I got horizontal aligning right (by specifying width and margin:auto) but I can't understand how to align that vertically.
HTML:
<body>
<div class="maindocu">
<div class="keyboard">
<div class="first_row">
<div class="key">Q</div>
<div class="key">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
</div>
<div class="second_row">
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
</div>
<div class="third_row">
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
</div>
</div>
</div>
</body>
CSS:
a.maindocu{
min-height: 100%;
}
.keyboard{
display: block;
border-spacing: 5px;
margin: auto;
position: relative;
vertical-align: middle;
}
.first_row{
display: block;
margin: auto;
width: 550px;
}
.second_row{
display: block;
margin: auto;
width: 490px;
}
.third_row{
display: block;
margin: auto;
width: 440px;
}
.key{
display: table-cell;
width: 50px;
height: 50px;
border-spacing: 5px;
text-align: center;
vertical-align: middle;
font-family: "Verdana";
font-size: 100%;
color: #ffffff;
background: #000;
border: 5px solid #808080;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
JSFiddle: http://jsfiddle.net/fb58bpgj/
I have already read a few tutorials and tips and tricks but I can't figure this out. Any advice?
Thanks in advance!