I have a problem. This is my code:
<body>
<div class="imerologio">
<div id="imerologio-mistika">
<img src="#">
</div>
<div id="imerologio-xarti">
<img src="#">
</div>
</div>
And my css is:
.imerologio{
display: inline-block;
width: 100%;
}
#imerologio-mistika{
background: url("../images/imerologio/mistika.png") no-repeat;
float:left;
}
#imerologio-xarti{
background: url("../images/imerologio/xarti.png") no-repeat;
float:left;
}
I wand to center the inside divs, but i can't. Any help?
You have to remove floats, set display: inline-block to items and text-align: center to container.
.imerologio {
text-align: center;
width: 100%;
}
#imerologio-mistika {
background: url("../images/imerologio/mistika.png") no-repeat;
display: inline-block;
width: 50%;
}
#imerologio-xarti {
background: url("../images/imerologio/xarti.png") no-repeat;
display: inline-block;
width: 50%;
}
<div class="imerologio">
<div id="imerologio-mistika">
<a href="foo">
<img src="#">
</a>
</div><!--
--><div id="imerologio-xarti">
<a href="foo">
<img src="#">
</a>
</div>
</div>
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 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;
}
I want display a set of images with a description below. I chose to use Ionic cards.
I got this result (the first image):
While I want to preserve the same layout I have now, and add a description.
Here is my code:
<ion-content ng-controller="cityController">
<div class="row">
<div class="col col-33">
<div class="list card">
<div class="item item-body">
<img class="full-image"src="img/images/opera.jpg"/>
This is a "Facebook" styled Card..
</div>
</div>
</div>
<div class="col col-33">
<img src="img/images/basilique.jpg"/>
</div>
<div class="col col-33">
<img src="img/images/hoteldeville.jpg"/>
</div>
</div>
.center {
text-align: center;
}
.col {
overflow: hidden;
}
.row {
overflow: hidden;
height: 180px;
}
.fullscreen {
width: 100%;
height: 100%;
}
How can I fix this?
UPDATE
You have to change your source little bit.
Example HTML:
<div class="row">
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_fjords.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_forest.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_mountains.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
</div>
Example CSS:
.col-33 {
width: 33%;
float:left;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
text-align: center;
}
Live demo here
This is just an example how it can work.
UPDATE:
To have the images full sized, you need to put the description over it.
In that case this CSS is required.
.col-33 {
width: 33%;
float:left;
position: relative;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 5px;
line-height: 1.5;
background-color: rgba(255, 255, 255, 0.6);
}
enter link description hereI have a set 8 floated divs, each taking 25% width (and having another div and img inside), so they line up in two rows.
<div class="galleryboard" id="gallery3">
<div class="view view-first">
<img src="img/galleries/3/thumb/1.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/2.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/3.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/4.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/5.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/6.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/7.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/8.jpg">
<div class="mask">
Enlarge
</div>
</div>
</div>
I want to add only the inner borders to all floats by manually picking each float by css, like so:
.view:nth-child(1) {
border-left:none
}
.view:nth-child(5) {
border-left:none
}
.view:nth-child(4) {
border-right:none
}
.view:nth-child(8) {
border-right:none
}
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-top:none;
}
.view:nth-child(5), .view:nth-child(6), .view:nth-child(7), .view:nth-child(8) {
border-bottom:none;
}
but somehow, I'm getting the borders of 2nd, 3rd, 6th and 7th float all wrong - see it here
jsfiddle
the divs are styled here
.view {
width: 25%;
box-sizing:border-box;
float: left;
overflow: hidden;
position: relative;
text-align: center;
border:3px solid blue
}
.view .mask, .view .content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
width:100%;
height:auto;
}
and apparently the problem is caused by the img having its width set to 100%. Can you find a solution to have my inner borders all the same size? Thanks
Try
Remove all child styling and apply following
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(5), .view:nth-child(6), .view:nth-child(7) {
border-right: medium none;
}
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-bottom: medium none;
}
In the .view i have just added height or pass the height dynamicaly
.view {
border: 3px solid blue;
box-sizing: border-box;
float: left;
**height: 240px;**
overflow: hidden;
position: relative;
text-align: center;
width: 25%;
}
I am putting together a dynamic photo gallery and getting stuck trying to place thumbnails. Basically I am trying to place each thumbnail and caption in its own DIV, floated to the left. The thumbnails are working just as I want them to but for some reason the parent DIV refuses to cover the height of the thumbnail area. Here is the CSS I am using..
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 5px;
text-align: center;
}
.item {
display: block;
margin: 10px;
padding: 10px;
float: left;
background: #353535;
min-width: 120px;
}
.label {
display: block;
color: #fff;
}
I have tried height: auto and that hasn't done anything. Here is what I am trying to style:
<div id="galleryBox" class="ui-corner-all">
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
</div>
Thanks!
Give your wrapper div an overflow: auto; so it contains the floated children correctly, like this:
#galleryBox {
overflow: auto; /* Only addition to your current styles */
width: 650px;
background: #fff;
margin: auto;
padding: 5px;
text-align: center;
}
This requires no HTML changes, just the style should do.
You need a clearfix
Add the below code to your css file and set the class of #gallerybox to clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
UPDATE:
Link