I have 3 images in a div placed horizontally. When I resize the page the images changes their position and float in a vertical alignment.I want the page responsive and when i resize the page i want that the whole div is adapted and resized. I need also to put in the page others div with others images. I want the images align in the bottom side.Sameone help me please?
This is the code example.
.box{
display: inline-block;
position: relative;
bottom:100%;
width: 100%;
margin: 5% 5% 0 0;
font-size: 12px;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}
img {
max-width:100%;
height:auto;
border:1px solid black;
text-align:center;
}
.content{
/* Positioning */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Styling */
border:1px solid;
padding: 30px;
text-align: center;
vertical-align: center;
text-transform: uppercase;
color: #fff;
}
<div class="box">
<div class="content">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
</div>
</div>
strong text
Just add this to the img:
See fiddle https://jsfiddle.net/16q2xr8k/27/
img {
width: calc((100% / 3) - 2px);
height: auto;
border: 1px solid black;
text-align: center;
}
Related
This question already has answers here:
Text in Border CSS HTML
(10 answers)
Closed 2 years ago.
See the image above. I'd like to have the text on top of the border. How can I achieve this using html/css? Are there other alternatives
.wrapper {
width: 100%;
background: black;
border: 4px solid purple;
padding: 1rem;
color: #FFF;
}
.wrapper p {
text-align: center;
}
h1 {
text-align: center;
}
a {
display: table;
margin: 0 auto;
color: #FFF;
}
<div class="wrapper">
<h1>
Lorem ipsum dolor sit amet
</h1>
<p>
Lorem ipsum
</p>
Button
</div>
You can achieve this using the pseudo elements of the h1 tag. In short, you have a wrapper div that creates the border left, right and bottom and still then use the pseudo elements of h1 to make the top border.
.wrapper {
height: 100px;
margin: 0 auto;
width: 80%;
margin-top: 30px;
box-sizing: border-box;
border: 5px solid tomato;
border-top: none;
position: relative;
}
.wrapper h1 {
position: absolute;
top: -41px;
display: block;
text-align: center;
width: 100%;
overflow: hidden;
font-size: 2em;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
margin-right:1em;
margin-left:-50%;
vertical-align: middle;
border-bottom: 5px solid tomato;
}
h1:after {
margin-right:-50%;
margin-left:1em;
}
/*Demo Only*/
body{
background:url("https://i.imgur.com/fL3tbdj_d.webp?maxwidth=728&fidelity=grand") no-repeat;
background-size:100% 100%;
<div class="wrapper">
<h1>
TITLE HERE
</h1>
</div>
<div class="wrapper">
<h1>
LONGER TITLE HERE
</h1>
</div>
You can try to change the position of your h1 to relative, and move It
.wrapper p {
position : relative;
bottom : 30%;
}
the bottom one means that It will move 30% to the top
Here is simple example may be it can give you an idea I found hard to edit your own codes so that's why I made this simple code
body {
background-color: lightgreen;
}
.cont {
height: 120px;
width: 400px;
border: 2px solid black;
position: relative;
margin: 40px
}
.cont:before {
content: "My Header title";
width: 180px;
/* border: 1px solid; */
position: absolute;
text-align: center;
top: -10px;
background-color: lightgreen;
left: 50%;
transform: translateX(-50%);
}
<div class="cont"></div>
I'm trying to center a text inside a div, this div contains an image + another div which contains the text that needs to be centered.
See image the following image:
The problem I'm facing is that the image which is also in the div doesn't allow me to outline the text in the center.
I tried to apply padding and margins(even negatives ones) however with no results
So right now this is the code I have in my HTML & CSS files:
.destinations {
padding: 5px 15px;
}
.destinations img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.flex-item {
width: 290px;
height: auto;
border-radius: 10px;
margin: auto;
}
.flex-item-title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="flex-item">
<img src="assets/img/wassenaar.jpg">
<div class="flex-item-title">Wassenaar</div>
</div>
</div>
I hope you can help me out
Here is one approach to vertically and horizontally center the text over the image:
.destinations {
padding: 5px 15px;
}
.destination {
width: 290px;
height: 290px;
display: flex;
border-radius: 10px;
margin: auto;
background-image: url("https://placekitten.com/500/500");
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="destination">
<div class="title">Wassenaar</div>
</div>
</div>
You can get your porblem solve using following css .
.flex-item{
width:300px;
height:200px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}
.flex-item-title{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 300px;
height: 200px;
text-align: center;
color: white;
display: inline-table;
vertical-align:middle;
line-height:100%;
}
Try changing your css to this css , it will work .
I am trying to get this to happen.
what I want
So far, I don't know how to overlap one img-div with another text-div and keep white space on the top of the text-div. You will see. What I have right now is:
<div id="some">
<img src="photos/some.png">
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
With some CSS that doesn't make it very appealing: what it looks like
#some{
margin-top: 20px;
background-color: red;
}
#some img{
width: 30%;
float: left;
}
#box{
padding-top: 220px;
margin-right: 40px;
font-family: "Eusthalia";
text-align: right;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
I am wondering if my whole approach with divs is wrong. I was researching and I found that right:0; doesn't work and stuff like that. How do I get a border to overlap behind the image? How do I give it a width and a height but make it push to the right?
Do I have to make the main div width 100% and then give the img a width 30% and the colored filled in text box 70%? But how would I have the box behind the img?
Drearo, I think you're doing fine with div tags. You just may need a bit more of them to help things along.
I would suggest the divs be position: absolute with the image in one of those. The box of text needs it too. Aside from that, a little CSS would get you the positioning you want. See here:
<div id="some">
<div class="my_img">
<img src="photos/some.jpg" />
</div>
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
css:
#some{
margin-top: 20px;
height: 100vh;
width: 100vw;
border: 1px solid #000;
position: relative;
}
.my_img {
position: absolute;
top: 5em;
left: 5em;
z-index: 200;
}
.my_img img {
width: 200px;
}
#box{
position: absolute;
top: 10em;
left: 10em;
transition: translate( -50%, -50%);
font-family: "Eusthalia";
text-align: right;
background: red;
min-width: 60%;
padding-right: 2em;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
https://jsfiddle.net/5k94j73p/
There is a block 225px. Inside you insert a picture large size (850px). And she goes outside.
It looks like this:
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
}
.single-slide img {
width: auto;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<div>to place the center of the image</div>
</div>
</div>
</div>
Using slick slider. I want to add dots to control the slider.
When I add the dots they are placed in the middle of the block. It's okay, I understand. But I want to place them in the center of the picture. How to do it?
UPD: The image goes beyond the block, that's right! And I need to do to the dots were at the center of the image, not the block
I see that your dots are in the center of the window.
To do this, your dots list must be inside a container with the image's width.
I think you should enlarge your slider or limit image's width with a max-width: 100%;
if you want to need image in box then change
.single-slide img { width: auto;}
to
.single-slide img { max-width: 100%;}
Updated: The inherit keyword specifies that a property should inherit its value from its parent element [ Source ]. and image can't be a parent element. see this example.
Here is a solution on based on inherit and position on your latest update.
See the html section I have added a class "img-holder" on div which hold the img and add a class "div_center" on div which contain text's.
img inherit width from its parent div class "img-holder". "img-holder" and "div_center" inherit width from parent div class slider.
N.B: if you set the img width auto text will always center of the div class slider.
.content {
display: inline-block;
}
.column {
float: right;
width: 225px;
}
.slider {
border: 1px solid #000;
width: 220px;
padding: 5px;
position:relative;
}
.img-holder {
width: inherit;
}
.img-holder img {
width: inherit;/*width auto default value. The browser calculates the width*/
}
.div_center {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div class="img-holder">
<img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' />
</div><!--./ img-holder -->
<div class="div_center">
to place the center of the image
</div><!--end of txt_center -->
</div><!--./ slider single-slide-->
</div><!--./ column -->
</div><!--./ content -->
Previous: Position absolute for slick-dots class but you dont set any relative position for that. so you need to add position relative to your slide div.
And make the image responsive. I have added responsive property for your image on css section and added border on li for clear view.
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
position: relative;
}
.single-slide img {
max-width:100%;
display:block;
height:auto;
margin:0 auto;
}
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
top:50%;
left:0;
right:0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
border:2px solid red;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
right: 0;
bottom: 0;
left: 0;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 12px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<ul class="slick-dots">
<li class="active"><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>
</div>
</div>
</div>
I have an Image on the page. I have put a Div on footer with a heading and a paragraph inside the Div. I have made the Div's background transparent like this way , background-color: rgba(0,0,0,.6);.
But I need to implement this like this way , background-color:black; opacity:0.6".
The problem is, if I am doing it using opacity then the heading and paragraph is also getting blur with the Div's colour. How can I solve it?
Below is my full code.
CSS
<style type="text/css">
.div1 {
max-width: 100%;
height: auto;
text-align: center;
display: block;
border: none;
}
.feature-text-overlay {
background-color: rgba(0,0,0,.3);
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
}
.feature-title {
font-size: .875em;
margin: 0;
text-transform: uppercase;
color:white;
}
.feature-description {
line-height: 1.2;
margin: 0 2em;
color:white;
}
</style>
Html
<div class="div1">
<img src="~/Content/Image/rendering-graphics-in-resolution-222734.jpg" />
<div class="feature-text-overlay" style="height:52.599999277954px; min-height:1px;">
<h4 class="feature-title">Enterprise Mobility Suite</h4>
<p class="feature-description">Manages Users, Devices and Data</p>
</div>
</div>
css
.feature-text-overlay {
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
position:relative; /* add this to specify position */
}
/* create pseudo css element */
.feature-text-overlay:before {
content:"";
background-color: #000;
opacity:0.3;
bottom: 0;
top:0;
right:0;
left:0;
position: absolute;
}
Demo
edit as per comment demo 2