I have the code:
html:
<div class=container1>
<div class=container2>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
<div class=container2>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
<div class=container2>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
<div class=container2>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
</div>
css:
.container1 {
background: yellow;
height: 200px;
position: relative !important;
width: 260px !important;
}
.container2 {
background: blue;
border: solid 1px;
float: left !important;
height: 180px;
/*position: relative; can't use, as it would limit icons inside this container*/
text-align: center;
width: 60px;
}
.container2:hover .box {
display: inline-block;
}
.box {
background: red;
border: solid 1px;
display: none;
height: 120px;
position:absolute;
text-align: center;
top: 20px;
width: 180px !important;
}
.box:first-child {
text-align: left;
}
.icon {
border: solid 1px;
background: white;
display: inline-block;
height: 50px;
width: 50px;
}
http://jsfiddle.net/388ygc74/10/
And on IE (any version) the text-align:center does not work.
The solution to make .box width:100% is not applicable, I need it to be a fixed defined width.
Any idea?
How about using left: 30px; (since you set the width to 60px) playing with z-index and position: relative ?
(Yes, you said no position:relative; but it's working :) )
See it here
I think that's what you looking for?
left:50%
margin-left:{-50% of elementh width}px;
Add specific selector to add the element that you want to align
:nth-child(4)
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 have a list of inline-block elements inside a parent element. I wont to center the parent element while keeping the child elements aligned to the left.
<body>
<style>
/* the width of the container is dynamic by the width of the window */
.container {
height: 600px;
text-align: center;
border: 1px solid red;
overflow-y: auto;
}
/* i don't know the width of the list element, it's only for centering */
.list {
text-align: left;
}
/* the width of the item is const - always 200px */
.item {
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
background: gray;
}
</style>
<div class="container">
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
As you can see in the attached example, the list element isn't centered.
If I remove the align: left style then the list element will be centered but then the item elements will be centered as well (I want them to be aligned to the left)
This what I'm trying to achieve:
Some thing like this just give text-align: left; to item and remove text-align: center; from list
<body>
<style>
.container {
width: 600px;
height: 600px;
text-align: center;
border: 1px solid red;
overflow-y: auto;
}
.item {
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
background: gray;
text-align: left;
}
</style>
<div class="container">
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</body>
make all items fit the width of the list either by putting a fixed width to list or edit the width of item to have less than 50% of list, .item{width: 46%;} worked well
.container {
width: 600px;
height: 900px;
border: 1px solid red;
overflow-y: auto;
}
.list {
border: 1px solid #bbb;
width: 445px;
margin: 0px auto;
}
.item {
text-align: left;
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
background: gray;
}
<body>
<div class="container">
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</body>
What are you actually trying to achieve?
Now you have .container and .list that are both 600px wide, so you don't see if list element is aligned to left or center.
First, you should have different widths for .list and .container. Then your list should be an inline-block element for it to react to text-align: center.
I made a codepen for you to make this more clear: https://codepen.io/leo-melin/pen/MWYbLLa
.container {
width: 800px;
height: 600px;
text-align: center;
border: 1px solid red;
overflow-y: auto;
}
.list {
display: inline-block;
width: 500px;
border: solid 1px #000; /* Added border to make it visual */
text-align: left;
}
.item {
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
background: gray;
}
UPDATE 1
If I now understand you correctly, you have n-elements per row that are all 200px wide and you want to center them in container if there's not enough space to fit another 200px element. You want the last item to be aligned to left inside the container.
As in this another stackoverflow answer: https://stackoverflow.com/a/40936683/2061685 you probably need to utilize flexbox for that behaviour to work.
So something like this would do:
<div class="container">
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
<div class="item phantom"></div>
</div>
</div>
.container {
width: 100%;
height: 600px;
border: 1px solid red;
overflow-y: auto;
text-align: center;
}
.list {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
text-align: left;
}
.list:after {
content: '';
flex: auto;
}
.item {
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
background: gray;
}
.item.phantom {
visibility: hidden;
height: 0;
}
Working codepen: https://codepen.io/leo-melin/pen/gObgLrX
As you can see, you need to add those phantom items to make the last element stay on the left. On very wide screen with just a few items, you need to control the amount of phantom elements. Use mediaqueries or define an algorithm while rendering the items to make sure it works in all cases.
Hope this helps now for you to figure out a solution.
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.
This should be simple for you CSS gurus, but I really can't get this going. There are 4 boxes, example code:
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
</div>
When the window width is less than 800 only the rightmost div is moved, leaving them with 3 on top, and 1 on the next row.
I want the second two to go down the page as a pair. 2 on top, 2 on bottom, even if there is space for 3 next to eachother.
You need to set style for firstPair and secondPair elements
div[id$="Pair"] {
display: inline-block;
float: left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">s</div>
<div style="width: 200px; float: left">d</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">f</div>
<div style="width: 200px; float: left">g</div>
</div>
</div>
And one more solution with shorten html, but some more use css
div[id$="Pair"] {
display: inline-block;
}
[id$="Pair"] > div {
width: 200px;
float: left;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>s</div>
<div>d</div>
</div>
<div id="secondPair">
<div>f</div>
<div>g</div>
</div>
</div>
div[id$="Pair"] {
display: inline-block;
margin: 0;
}
[id$="Pair"] > div {
display: inline-block;
width: 200px;
margin: 2px 0;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>1</div>
<div>2</div>
</div>
<div id="secondPair">
<div>3</div>
<div>4</div>
</div>
</div>
It is about BFC.
You might also float the containers :
#wrapper> div {
float:left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">1</div>
<div style="width: 200px; float: left">2</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">3</div>
<div style="width: 200px; float: left">4</div>
</div>
</div>
Here's my solution. I tend to work in a fully responsive environment, so this will position them and be fully responsive on mobile. I also isolated the css, the inline colors are just for demo.
<style>
div#firstPair {
width: 100%;
max-width:400px;
float: left;
}
div#firstPair div{
width: 50%;
float: left;
}
div#secondPair {
width: 100%;
max-width: 400px;
float: left;
}
div#secondPair div{
width: 50%;
float: left;
}
</style>
<div id="wrapper">
<div id="firstPair">
<div style="background-color: blue;">first_1</div>
<div style="background-color: green;">first_2</div>
</div>
<div id="secondPair">
<div style="background-color: red;">second_1</div>
<div style="background-color: orange;">second_2</div>
</div>
<div style="clear: both;"></div>
</div>
I really need some help with some easy css that I just can't get my head around.
I want to create boxes like in the link below.
I guess I could have the code for just one of them, and then use it over and over again, but how do I create the boxes so that they don't mind the other stuff around them?
Example here: http://s23.postimg.org/qypbfvv0r/boxes.jpg
Here: I have figured out a way of doing this. I hope that this helps you in some way in helping you figure out how to finish your task.
HTML:
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
CSS:
.containers {
width: 300px;
height: 150px;
border: 1px solid black;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.inner1 {
margin-left: 5px;
width: 135px;
height: 80px;
border: 1px solid black;
background-color: blue;
}
.inner2 {
position: relative;
float: right;
top: -60%;
margin-left: 5px;
margin-right: 5px;
width: 135px;
height: 80px;
border: 1px solid black;
background-color: red;
}
.heading {
padding-left: 20px;
}
You can start off using this code. After this you can give border styles and colors to the individual divs.
<div>
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
<div style="padding-top:10px">
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
<div style="padding-top:10px">
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
Hope this helps