I am stuck at the moment to put this 4 images (in the same row) inside of the div with image.
Html:
.iniciRo img {
width: 100%;
}
.iniciRo .coluna img {
width: 270px;
z-index: 4;
}
.iniciRo>div {
padding: 30px 0 10px 0;
}
.iniciRo .row>div {
padding-bottom: 20px;
}
.coluna {
position: relative;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 75em;
}
<div class="iniciRo">
<img src="assets/images/Rodape/backbot.png">
<div>
<div class="row">
<div class="coluna">
<img src="assets/images/Rodape/visitas-escolas.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/rafc.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/rioavetv.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/galeri.png" />
</div>
</div>
</div>
</div>
I already tried to use z-index but nothing happened.
Any help is going to be appreciated, please help me...
Like this:
coluna img {
position: relative;
padding: 50em;
}
.iniciRo img{
position: absolute;
width: 100%;
}
.iniciRo > div{
padding: 30px 0 10px 0;
}
.iniciRo .row > div{
padding-bottom: 20px;
}
.coluna{
position: relative;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30em;
}
.row{
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 75em;
clear: both;
}
In other words you want position: absolute for the iniciRo img, position: relative for .row, and the use of flexbox for .row. Here's a JS Fiddle.
Use this Flexbox css code
<div class="flex-container">
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
</div>
.flex-container{
display:flex;
}
.flex-container div {
flex:1;
margin:5px;
}
img {
width:100%;
}
Related
I would like to have my 4 social pictures (alt=test) in the center of my div (now they are appearing on the top center). I put text-align: center in .socials but it is not working. I also tried to put it in .socialdivs but it is also not working. The HTML and CSS code is below.
.socials {
width: 100%;
background-color: #5e6066;
text-align: center;
}
.socialdivs {
width: 100%;
margin: auto;
}
.fb {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover {
background-color: #4668b3;
}
.lin {
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover {
background-color: #00a0dc;
}
.insta {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover {
background-color: #405de6;
}
.golden {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover {
background-color: #fcbf17;
}
.info {
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
Any help would be appreciated.
You can use line-height: 155px; to center it vertically. It needs to have the same height as the container. So, when the height of the container change, the line-height needs to be adjusted.
.socials
{
width:100%;
background-color: #5e6066;
text-align: center;
line-height: 155px;
}
.socialdivs
{
width: 100%;
margin: auto;
}
.fb
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover
{
background-color: #4668b3;
}
.lin
{
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover
{
background-color: #00a0dc;
}
.insta
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover
{
background-color: #405de6;
}
.golden
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover
{
background-color: #fcbf17;
}
.info
{
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
</html>
You can use padding to set text in middle of div,(along with text-align:center;) like this:
.socialdivs
{
padding: 10%;
font-size: 18px;
text-align:center;
width:20%;
}
padding and margin by default show a good result in anchor tag so use display block in it
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
I'm experiencing an issue with my text where I don't see it at all, or it doesn't act as though I would think it would in a flexbox. I have three images in the flexbox right now, but I would like to place small 'captions' under each of them(not in the p element, the purple, but I would like to place it on the white, which is right under the purple box(the p element). I thought that by adding a child element, that element would at least line up vertically with the element above it but I guess I'm wrong. Can anyone help? Another piece of info is that really my images are 250 pixels, but I wanted to accommodate for a snippet so I made it 50 pixels, but that's probably irrelevant.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
margin-top: -130px;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner img {
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<p><img src="cat1.jpeg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="dog1.jpg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="park.jpg" alt="Picture of a cat" width="50" height="50"></p>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Without additional info / image, here's the solution I was able to come up with. If you want to keep each image / caption grouped together, wrap them in another parent div. Then just add the caption below that, which is a block element and should flow below the image, as intended. Snippet below.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner p.caption {
color: #000;
background-color: transparent;
border-radius: 0;
}
#inner img {
display: block;
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Let me know if you have any questions, or if this doesn't satisfy your description.
I want to have a div with two images on the left, some centered text and some text on the right.
One of the many attempts:
http://jsfiddle.net/yu8bz4h4/
The problem is that I cant figure out how to get the p elements in the same line while keeping center and right the alignments
HTML:
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<p class="center" >centered</p>
<p class="right" >right</p>
</div>
CSS:
.outer {
height: 50px;
width: 800px;
}
.icon {
width: 44px;
height: 44px;
}
.outer p {
margin 0;
}
.center {
text-align: center;
width: auto;
}
.right {
text-align: right;
width: auto;
}
Replace all p with div.Then write css code.The text comes in one line.
Hope this works.
.outer {
height: 50px;
width: 800px;
}
.icon {
width: 44px;
height: 44px;
}
.outer p {
margin 0;
}
.center {
margin-left:50%;
width: auto;
position:absolute
}
.right {
margin-left:100%;
width: auto;
position: absolute;
}
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<div class="center" >centered</div>
<div class="right" >right</div>
</div>
I am pretty much sure you wanted something like this. Though your question is not clear. Never forget to write codes with semantic meaning. Here's your solution following more semantic way: codepen.
Or here:
.outer {
height: 50px;
width: 800px;
overflow: hidden;
}
.column {
width: 33.33%;
float: left;
}
.icon {
width: 44px;
height: 44px;
margin-right: 10px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
<div class="outer">
<div class="column">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
</div>
<div class="column">
<p class="center">centered</p>
</div>
<div class="column">
<p class="right">right</p>
</div>
</div>
Revised code in response to OP's comments:
.outer {
height: 50px;
width: 300px;
position: relative;
}
.icon {
width: 44px;
height: 44px;
float: left;
}
.center {
text-align: center;
width: 100%;
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
width: auto;
}
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<p class="center">centered</p>
<p class="right">right</p>
</div>
Currently i have what you see in the image below. container 100% browser width. left column has a 100% image. second column has 4 div's controlled with flexbox with 100% images.
http://s10.postimg.org/tlh1nq5zd/sample_1.jpg
the desired effect is what you see below
http://s21.postimg.org/kn82otopz/sample_2.jpg
the padding of div 'items', are making it drop in rows. My CSS might be wrong since I am new to flexbox, But I was under the impression that flexbox could take into consideration the padding/margin of child elements. ( I'm using a 900x528 image just in case anybody is wondering)
#homepage img {
width: 100%;
height: auto;
}
#homepage .wrap {
overflow: hidden;
padding-right: 2%;
padding-left: 2%;
padding-top: 20px;
padding-bottom: 20px;
max-width: 1200px;
margin: auto;
}
#homepage .big {
float: left;
width: calc(50% - 10px);
}
#homepage .small {
float: right;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: calc(50% - 10px);
}
#homepage .small .item {
width: 50%;
}
#homepage .small .uno {
padding: 0px 10px 10px 0px;
}
#homepage .small .dos {
padding: 0px 0px 10px 10px;
}
#homepage .small .tres {
padding: 10px 10px 0px 0px;
}
#homepage .small .dos {
padding: 0px 0px 10px 10px;
}
#homepage .small .cuatro {
padding: 10px 0px 0px 10px;
}
<div id="homepage">
<div class="wrap">
<div class="big">
<img src="images/magnus.jpg" />
</div>
<div class="small">
<div class="item uno">
<img src="images/magnus.jpg" />
</div>
<div class="item dos">
<img src="images/magnus.jpg" />
</div>
<div class="item tres">
<img src="images/magnus.jpg" />
</div>
<div class="item cuatro">
<img src="images/magnus.jpg" />
</div>
</div>
</div>
</div>
Write down the code like
#homepage img {
width: 100%;
height: auto;
}
#homepage .wrap {
overflow: hidden;
padding-right: 2%;
padding-left: 2%;
padding-top: 20px;
padding-bottom: 20px;
max-width: 1200px;
margin: auto;
}
#homepage .big {
float: left;
width: calc(50% - 10px);
}
#homepage .small {
float: right;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: calc(50% - 10px);
}
#homepage .small .item {
width: 50%;
display: inline-flex;
}
#homepage .small .uno {
padding: 0;
}
#homepage .small .dos {
padding: 0;
}
#homepage .small .tres {
padding: 0;
}
#homepage .small .dos {
padding: 0;
}
#homepage .small .cuatro {
padding: 0;
}
<div id="homepage">
<div class="wrap">
<div class="big">
<img src="images/magnus.jpg" />
</div>
<div class="small">
<div class="item uno">
<img src="images/magnus.jpg" />
</div>
<div class="item dos">
<img src="images/magnus.jpg" />
</div>
<div class="item tres">
<img src="images/magnus.jpg" />
</div>
<div class="item cuatro">
<img src="images/magnus.jpg" />
</div>
</div>
</div>
</div>