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>
Related
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%;
}
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'm trying to write a homepage with this little effect on a hover.
It should look something like this:
How would you do this? My code does not work like it should.
.stage_wrapper {
margin: 0 auto;
width: 1100px;
height: auto;
}
.work {
margin-left: 8px;
margin-right: 5px;
margin-bottom: 15px;
display: inline-block;
height: 350px;
width: 350px;
}
.work img {
width: 350px;
height: auto;
}
<div class="stage_wrapper">
<div class="stage">
<div class="work">
<a href="#" target="_blank">
<img src="//dummyimage.com/350" class="media" alt="#" />
<div class="caption">
<div class="work_title">
<h1>Something in 3 rows</h1>
</div>
</div>
</a>
</div>
</div>
</div>
Something like this?
.work {
width: 300px;
height: 300px;
line-height:300px;
text-align: center;
background-color: #2d3e50;
border: 10px solid #2a81b9;
color: white;
display: inline-block;
}
.work span {
display: none;
vertical-align: middle;
}
.work:hover span {
display: inline-block;
}
.work:hover img {
display: none;
}
<div class="work">
<span>Some text</span>
<img class="portfolio-image" src="http://dummyimage.com/300.png/09f/fff" width="300" height="300" />
</div>
During learning CSS I tried to make the exact example as you can see on the link below using clearfix (sorry for non-English text, but I have no other)
http://htmlbook.ru/files/images/layout2/3-41.png
I need to make it using float and clearfix hack
My code is:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning float</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="float.css">
</head>
<div class="col1 clearfix"><h3>Menu</h3>
<p>Best photo</p>
<p>By ages</p>
<p>Rate</p>
<p>By comments</p>
</div>
<div class="col2">
<div class="photo">
<p><img src="http://churchs.kiev.ua/images/stories/Hrams/Myzej/Sofia_kievsk_1.jpg" alt="" /></p>
<p class="caption">Софийский собор</p>
</div>
<div class="photo clearfix">
<p><img src="http://rybinsk.go2all.ru/imgs/92/1/85222.jpg" alt="" /></p>
<p class="caption">Польский костёл</p>
</div>
<p>This text should be below photos</p>
</div>
<p>This text should go below the columns</p>
<div class="footer">Подвал</div>
</body>
</html>
CSS
.col1 {
background-color: #BDBDBD;
width: 250px;
margin-right: 10px;
float: left;
}
.col2 {
background-color: #A9F5F2;
float: left;
width: 500px;
}
.photo {
float: left;
margin-right: 10px;
width: 170px;
}
img {
width: 150px;
height: 150px;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: green;
text-align: center;
}
What's wrong with using of clearfix.
Will appreciate any answer!
the clearfix:after 'method' is used to wrap floatting child when the container is not in position absolute or fixed, floatting or in display:inline-block,inline-table or table.
In your case, the element you want to clear stands after a floatting element, you only need to clear them. both, left or right.
http://www.w3.org/wiki/CSS/Properties/clear
.col1 {
background-color: #BDBDBD;
width: 250px;
margin-right: 10px;
float: left;
}
.col2 {
background-color: #A9F5F2;
float: left;
width: 500px;
}
.photo {
float: left;
margin-right: 10px;
width: 170px;
}
img {
width: 150px;
height: 150px;
}
.clearfix {
clear: both;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: green;
text-align: center;
}
/* add some space to clear the footer */
body {
padding-bottom:2em;/* average height of current footer: tune it if needed */
min-width:800px;
}
<div class="col1 "><h3>Menu</h3>
<p>Best photo</p>
<p>By ages</p>
<p>Rate</p>
<p>By comments</p>
</div>
<div class="col2">
<div class="photo">
<p><img src="http://churchs.kiev.ua/images/stories/Hrams/Myzej/Sofia_kievsk_1.jpg" alt="" /></p>
<p class="caption">Софийский собор</p>
</div>
<div class="photo clearfix">
<p><img src="http://rybinsk.go2all.ru/imgs/92/1/85222.jpg" alt="" /></p>
<p class="caption">Польский костёл</p>
</div>
<p class="clearfix">This text should be below photos</p>
</div>
<p class="clearfix">This text should go below the columns</p>
<div class="footer">Подвал</div>
Demo: http://codepen.io/malte/pen/kDlbt
I am using an absolute positioned wrapper to center an image in a thumbnail frame. (Only) On mobile safari, the image won't be displayed. if you inspect the .image-pos container you'll see that the height is properly set to its parent's size. applying a fixed px height to it will make the image show up... Does anyone know how to fix that?
It's working on any Desktop browser...
HTML:
<div class="wrapper">
<div class="thumb-grid">
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
</div>
</div>
CSS:
.wrapper {
width: 600px;
margin: 30px auto 0
}
.thumb-grid {
text-align: justify;
}
.thumb-grid:after {
content: '';
display: inline-block;
width: 100%;
}
.thumb {
position: relative;
display: inline-block;
width: 31.5%;
height: 0;
padding-top: 29%;
margin-bottom: 6%;
}
.image {
height: 73%;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 100%;
vertical-align: top;
display: block;
border: 1px solid #eee;
}
.image-pos {
height: 100%;
left: 50%;
margin-left: -300px;
position: absolute;
text-align: center;
width: 600px;
}
.image-pos img {
height: 100%;
max-height: 100%;
min-height: 100%;
max-width: none;
width: auto;
display: inline;
border: 0;
}
.details {
height: 27%;
position: absolute;
top: 73%;
}
.details h5 {
margin: 0;
padding-top: 5px;
}
Demo: http://codepen.io/malte/pen/kDlbt