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.
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 1 year ago.
how do I make the three images on the top not go outside the div while keeping them to be 100% width so that their size remains the same and will be resized based on the browser size?
PS: I need them to be in row form
The ideal result should be like this:
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 30px;
}
.img-child {
width: 100%;
margin-right: 30px;
}
.img-child:last-child {
margin-right: 0;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D
.img-child {
min-width: 0;
width: 100%;
margin-right: 30px;
}
Try this :
body
{
height:100vh;
justify-content:center;
align-items:center;
display:flex;
}
#main {
width:391px;
background-color: #666666;
}
#main .img
{
width:100px;
float:left;
margin:15px;
}
#main .img:nth-child(4)
{
width:360px;
}
img
{
max-width:100%;
}
<div id=main>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
</div>
You can use max-width for each img.
I have edited your code for calculate padding each image below...
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second > div {
flex-basis: 100%;
flex-grow:1;
flex-shrink: 1;
padding-left: 15px;
padding-right:15px;
max-width:100%;
}
.img-child {
max-width:100%;
}
#second {
display: flex;
flex-direction: row;
margin-bottom: 30px;
margin-left:-15px;
margin-right:-15px;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
#second{
display: flex;
align-items: center;
justify-content: space-around;
}
.img-child{
width: 30%;
margin-top: 30px;
margin-bottom: 30px;
}
#img-parent{
width: 97%;
margin-left: 12px;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
* {
box-sizing: border-box;
}
.main {
background-color: #666666;
padding: 60px;
width: 100%;
}
.second {
background-color: #666666;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.column {
float: left;
width: 33.3%;
padding: 5px;
}
.largep {
background-color: #666666;
display: flex;
flex-direction: row;
width: 100%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>
</style>
</head>
<body>
<div class="row main">
<div class="column second">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
<div class="largep">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
I am beginner in CSS, I don't understand why my second text isn't at the bottom of the first block?
Why my 2 blocks are horizontally? Normally, the second text must be towards the bottom?!
My structure in HTML seems to be correct?
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
...
</div>
Thank you in advance for your help and your time.
body{
padding: 0;
margin: 0;
}
.container{
display: flex;
padding-top: 35px;
width: 90%;
margin: 0 auto;
background-color: #f5f5f5;;
justify-content: space-evenly;
align-items: center;
}
.img-icon{
width: 15%;
border-radius: 50%;
background-color: black;
padding: 15px;
}
.col{
display: flex;
width: 25%;
}
.t-title-first{
padding: 15px 10px;
font-size: 25px;
color: blue;
}
.t-title-second{
padding: 15px 10px;
}
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
You can achieve that by wrapping the text in a simple div.
body{
padding: 0;
margin: 0;
}
.container{
display: flex;
padding-top: 35px;
width: 90%;
margin: 0 auto;
background-color: #f5f5f5;;
justify-content: space-evenly;
align-items: center;
}
.img-icon{
width: 15%;
border-radius: 50%;
background-color: black;
padding: 15px;
}
.col{
display: flex;
width: 25%;
}
.t-title-first{
padding: 15px 10px;
font-size: 25px;
color: blue;
}
.t-title-second{
padding: 15px 10px;
}
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
</div>
I'm trying to place a calender inside a transparent div container, however I'm having some issues, i want each calender box to form a row that takes up 100% in width in the transparent box. So basically at the moment the page looks like this:
screenshot.
What you probably noticed is if you look at container with the "click on the images text" is that the box is wider than the rows under it.
This is the CSS code for the calender: Basically everything relating to .transbox has something to do with the transparent box. The calender days are the classes .weekdayssttart and weekdays. The remaining classes are the calender days with numbering. So since there is 7 days a week i just thought that I had to divide 100/7 which is 14.2857142857 and set each box type to that width in percentage. However this is the result i get: screenshot2. What I obviously notice is that the row is to small to contain the calender boxes, does anyone have an idea to fix this? Sorry for my bad english.
.transbox {
background: #fff;
padding: 2%;
width: 70%;
margin-left: 15%;
margin-bottom: 1%;
position: relative;
background-color:rgba(255,255,255,.9);
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.9);
overflow: auto;
}
.transbox p {
color: darkslategray;
margin-bottom: 2%;
font-size:13px;
}
.transbox img {
width:100%;
height: 100%;
}
.weekdaysstart {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.weekdays {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.hint {
width: 99%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
padding-top: 5px;
}
.one {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextrow {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
clear:left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextmonth {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.lastrow {
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
background-color: floralwhite;
margin-bottom:2%;
}
.pancakes {
width: 14%;
height: 100px;
float:left;
background: url(images/pancakes.jpeg);
background-size: cover;
border: 1px solid darkslategrey;
}
.meatballs {
width: 14%;
height: 100px;
float:left;
border: 1px solid darkslategrey;
background: url(images/kotbulls.jpg);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Tasty recipes</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ul>
<li>HOME</li>
<li>RECIPES</li>
<li>CALENDAR</li>
<li class="tastyrecipes">Tasty Recipes</li>
</ul>
<h1>Calendar</h1>
<h3>November 2017</h3>
<div class = "transbox">
<div class="hint">
<p>Click on the image of a dish to go to its recipe-page.</p>
</div>
<div class="weekdaysstart">
<p>Monday</p>
</div>
<div class="weekdays">
<p>Tuesday</p>
</div>
<div class="weekdays">
<p>Wednesday</p>
</div>
<div class="weekdays">
<p>Thursday</p>
</div>
<div class="weekdays">
<p>Friday</p>
</div>
<div class="weekdays">
<p>Saturday</p>
</div>
<div class="weekdays">
<p>Sunday</p>
</div>
<div class="nextrow">
<p>30</p>
</div>
<div class="one">
<p>31</p>
</div>
<div class="one">
<p>1</p>
</div>
<div class="one">
<p>2</p>
</div>
<div class="one">
<p>3</p>
</div>
<div class="one">
<p>4</p>
</div>
<div class="one">
<p>5</p>
</div>
<div class="nextrow">
<p>6</p>
</div>
<a href="meatballs.html">
<div class="meatballs">
<p>7</p>
</div>
</a>
<div class="one">
<p>8</p>
</div>
<div class="one">
<p>9</p>
</div>
<div class="one">
<p>10</p>
</div>
<div class="one">
<p>11</p>
</div>
<div class="one">
<p>12</p>
</div>
<div class="nextrow">
<p>13</p>
</div>
<div class="one">
<p>14</p>
</div>
<div class="one">
<p>15</p>
</div>
<div class="one">
<p>16</p>
</div>
<div class="one">
<p>17</p>
</div>
<div class="one">
<p>18</p>
</div>
<div class="one">
<p>19</p>
</div>
<div class="nextrow">
<p>20</p>
</div>
<div class="one">
<p>21</p>
</div>
<div class="one">
<p>22</p>
</div>
<div class="one">
<p>23</p>
</div>
<div class="one">
<p>24</p>
</div>
<a href="pancakes.html">
<div class="pancakes">
<p>25</p>
</div>
</a>
<div class="one">
<p>26</p>
</div>
<div class="nextrow">
<p>27</p>
</div>
<div class="lastrow">
<p>28</p>
</div>
<div class="lastrow">
<p>29</p>
</div>
<div class="lastrow">
<p>30</p>
</div>
<div class="nextmonth">
<p>1</p>
</div>
<div class="nextmonth">
<p>2</p>
</div>
<div class="nextmonth">
<p>3</p>
</div>
</div>
</body>
</html>
Like Matthew JohnSon said, you could do this using flexbox. I'm not totally sure, but I believe the calc() function will let it fit.
.transbox {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.weekdaysstart, .weekdays {
width: calc(100% / 7);
}
Edit
I changed the names of the classes to those of your html classes.
You should use a clearfix container per each row.
https://css-tricks.com/snippets/css/clear-fix, and try to use flex instead of float, set each .row display: flex, and then set flex-grow: 1; flex-shrink: 1; flex-basis: auto; to the elements inside the row.
I want to create a layout for an itemised list of content like below:
Each item is a container that has an image and block of text.
I have attempted to use nth-child and set different css float values based on if it is an odd or even child, but you can't set child properties using the nth-child selector.
HTML:
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
CSS:
.flex-container {
width: auto;
margin: 10px auto;
padding: 0 15px;
display: inline-flex;
}
.flex-container:nth-child(odd) {
.media-container {
float: left;
}
.text-container {
float: right;
}
}
.flex-container:nth-child(even) {
.media-container {
float: right;
}
.text-container {
float: left;
}
}
.media-container {
position: relative;
display: inline-block;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
align-self: center;
position: relative;
display: inline-block;
}
What is the easiest/neatest solution for creating this layout using CSS?
Something like this:
Use the nth-child on your "row" flex-containers and alternate the flex-direction.
.flex-container {
padding: 0 15px;
display: flex;
width: 80%;
border: 1px solid grey;
margin: 1em auto;
}
.flex-container:nth-child(odd) {
flex-direction: row;
}
.flex-container:nth-child(even) {
flex-direction: row-reverse;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
}
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
Take A Look At This:
.item {
width: 305px;
height: 70px;
background: black;
margin: 5px;
padding: 5px;
}
.item .title {
width: 200px;
height: 70px;
background: crimson;
}
.item .img {
width: 100px;
height: 70px;
background: #09f;
}
.item:nth-child(even) .img {
float: right;
}
.item:nth-child(even) .title {
float: left;
}
.item:nth-child(odd) .img {
float: left;
}
.item:nth-child(odd) .title {
float: right;
}
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
Is it necessary that it is display:inline-flex? If you change it to inline-block, I believe you'll get your intended display:
.flex-container {
display: inline-block;
...
}
https://jsfiddle.net/4rcdqy4f/
You can use the Javascript querySelectorAll() method. Then, loop through the list of your items and add the specific CSS property based on whether it is odd or even.
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;
}