i have question if it's possible to have that background from second div will be also visible inside my next div.
<div style="max-width:100%;width:100%;">
...
</div>
<div style="max-width:100%;width:100%; background:url('someimage.png')">
...
</div>
<div style="max-width:1200px; width:100%">
...
</div>
or i have to use image and position it absolute :
<div style="max-width:100%;width:100%;">
...
</div>
<div style="max-width:100%;width:100%;position:relative;z-index:2">
...
</div>
<img src="someimage.png" style="position:absolute;width:100%;height:300px;z-index:1" />
<div style="max-width:1200px; width:100%;position:relative;z-index:2;">
...
</div>
but in the case of image i will not be able to position it properly relative to the second div.
unless there is another method ?
need something like this:
If you want something like a watermark
You need define position in div and img.
Img need be position: absolute.
You need define position in div and img.
Img need be position: absolute.
But If you want set background, better solution was background-image property.
Or like a card
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card > img {
padding-top: 16px;
display: block;
margin: 0 auto;
}
.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<img src="img_avatar.png" alt="Avatar" style="width:30%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
Or an hybrid solution
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
height: 300px;
background-image: url("img_avatar.png");
}
.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<div class="card">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
Related
I want to create div, where I can show multiple images like the image given below.
Problem I am facing is that when I try using position:absolute on img tag, my outer div's display:flex getting broke. Any suggestion on how to do this?
Edit:
<div className={styles.imagePart}>
<div className={styles.imageDiv}>
<img src="/main1.svg" alt="" />
</div>
<div className={styles.imageDiv}>
<img src="/main2.svg" alt="" />
</div>
<div className={styles.imageDiv}>
<img src="/main3.svg" alt="" />
</div>
<div className={styles.imageDiv}>
<img src="/main4.svg" alt="" />
</div>
</div>
Css I tried:
.imagePart {
text-align: center;
display: flex;
}
.imageDiv{
position: relative;
}
.imageDiv > img {
width: 5vw;
height: 20vw;
}
I was trying to add postion:absolute in img tag. But then every img goes to the left and overlap each other.
To use absolute positioned elements (image in your case), you may want to specify their wrapper containers with a position of relative. This makes sure that the absolute img elements align their absolute top, bottom... in relation to the wrapper relative elements.
In short, you can imagine the structure as follows:
<flex container>
<relative wrapper>
<absolute img />
</relative wrapper>
<relative wrapper>
<absolute img />
</relative wrapper>
... other elements ...
</flex container>
Below is an example using flex container and absolute images wrapped with div elements whose position is relative. (Note also that the wrapper div should have the same width as its child img)
.container {
margin-top: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
.container__img, img {
width: 5rem;
}
.container__img {
position: relative;
}
.img1 {
position: absolute;
top: -10px;
}
.img2 {
position: absolute;
top: 1.7rem;
}
.img3 {
position: absolute;
top: 5px;
}
.img4 {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox and Absolute</title>
</head>
<body>
<div class="container">
<div class="container__img">
<img class="img1" src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" alt="image 1" />
</div>
<div class="container__img">
<img class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS24wvA9ozipJc5-IStQrqZIo_a3urpEZGIGA&usqp=CAU" alt="image 2" />
</div>
<div class="container__img">
<img class="img3" src="https://www.besthealthmag.ca/wp-content/uploads/2019/07/junk-food-1.gif" alt="image 3" />
</div>
<div class="container__img">
<img class="img4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRhdHVJQDoKTWnLuq-pAByiBK0gcu0PGI9WYw&usqp=CAU" alt="image 4" />
</div>
</div>
</body>
</html>
Hi Man i don't know if that what you want exactly but you can achieve that effect by mask-image: ; or clip path, but i did like that effect just with some easy properties you can see the code below:
#HTML
<div class="container">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
</div>
#CSS
.container{
display:flex;
justify-content:center;
background-color:#333;
padding:3rem;
margin:auto;
}
.img1{background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Image_du_Maroc_3.jpg/800px-Image_du_Maroc_3.jpg") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.5rem;
border-radius: .4em 1.3em 1.5em 1em ;
overflow: hidden;
border-top-width:2px;
transform:skew(10deg,15deg);}
.img2{background:url("https://images.ctfassets.net/cnu0m8re1exe/1mRV2AKcshOa5pHKQ0Pjrb/647a4cc7da3ac5095cfc3202d70b318f/Man_Woman_Weight_Loss.jpg?w=650&h=433&fit=fill") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.2rem;
border-radius: 2em 1.3em 1em 1em ;
overflow: hidden;
box-shadow:1px 3px 10px -5px white;
border-top-width:2px;
transform:skew( 10deg,20deg);}
.img3{background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSuY1_PAAD0xRobQTyv8WEyDvMaCBKCHBS2GQ&usqp=CAU") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.6rem;
border-radius: 2em .5em .3em 2em ;
overflow: hidden;
border-top-width:2px;
transform:skew( 10deg,20deg);}
.img4{background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTKqXNmxNjYkI-iEVj9UhPXAVjsBdnON1NZw&usqp=CAU") no-repeat center center/cover;
width:90px;
height:250px;
margin:.8rem;
border-radius: 2em 3em 1em 1em ;
overflow: hidden;
box-shadow:1px 3px 10px -5px white;
border-top-width:2px;
transform:skew(10deg,15deg);}```
You can see the result of that & play around in codepen :
***I hope That It will Help You Thanks advance good luck***
Mahdi_Soultana[My_CodePen][1]
[1]: https://codepen.io/mahdi-soultana/pen/rNLNyyp
I am creating a data table grid in react, currently I am able to render my dummy data with my code. But the problem is that the header row is overlapped by the first data row, which is very annoying
This is the markup I have :
<div class='Table_table'>
<div class='Table_table-header'>
<div style="height:30px;">
<div class='table_fixed-cols'>
</div>
<div class='Table_x-scroll header'>
<div class='table_row'>
<div class="table_cell"> Name </div>
<div class="table_cell"> Age </div>
<div class="table_cell"> Location </div>
</div>
</div>
</div>
</div>
<div class='table-container'>
<div class="table_fixed-cols">
<div class="table_row even"><div>
<div class="table_row even"><div>
<div class="table_row even"><div>
</div>
<div class="table_x-scroll">
<div class="table_row even">Dana</div>
<div class="table_row ">57</div>
<div class="table_row even">San Francisco</div>
</div>
</div>
</div>
</div>
The CSS I have:
.Table__table{
position: relative;
overflow-y: hidden;
}
.table__cell{
border-right: 1px solid black !important;
padding: 3px 5px !important;
position: absolute;
}
.table__row{
display: flex !important;
position: absolute!important;
margin-top: 1%;
left: 0 !important;
/* overflow: auto!important; */
}
.table_fixed-cols{
top:0 !important;
left: 0 !important;
z-index: 100 !important;
overflow: hidden !important;
position: absolute !important;
}
.table_x-scroll{
overflow:hidden;
position: absolute;
top: 0;
right: 0;
z-index: 0;
}
The thing is that I see my first data row completely overlapped with the header row ( class='Table_table-header' ).
Have been spending hours on trying to fix this issue now..
Any help would be much appreciated !
change css for container switch between position: absolute, position: relative
I have a div where I display next and previous blog post. I have the title in one container (footer_post_title) and the year and "read more button" in another container (footer_post_buttons)underneath. I need to have the second container stay in the bottom of the main container (blog_image_footer) no matter how long the title is in (footer_post_title). How can I achieve this?
<div class="col-md-6 more-articles-left">
<div class="more-articles previous">
<div class="blog_image_footer">
<div class="row artikkel-title-previous" style="height:100%; background: linear-gradient(24deg, rgba(167, 85, 194, 0.9), rgba(219, 197, 218, 0.9)), url('/files/blog_pictures/o-KID-EATING-facebook.jpg') no-repeat center center /cover">
<div class="container footer_post_title">
<div class="col-md-12">
<h1 class="blog_post_title_footer">How to teach Your kids to eat healthy</h1>
</div>
</div>
<div class="container footer_post_buttons">
<p class="blog_post_year_footer">December 2016</p>
Read now!
</div>
</div>
</div>
</div>
</div>
You can set position: relative to the container and position: absolute to its child so you will be able to position your child element taking as reference your parent element.
After that, you can set bottom: 0 to the child so the child will be fixed at the bottom of its container.
.blog_image_footer{
position: relative;
}
.footer_post_buttons{
position: absolute;
bottom: 0;
}
You can use this basic principle:
*{
box-sizing: border-box;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
body{
display:flex;
flex-direction: column;
}
#container
{
margin: 0 auto;
width:100%;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
flex-grow:1;
display:flex;
}
#footer,#header
{
margin: 0 auto;
width:100%;
text-align: center;
height:1.5em;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
}
<div id="header">
header here
</div>
<div id="container">
this is container
</div>
<div id="footer">
footer here
</div>
Try using bootstraps grid system:
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
This should allow you to make the h1 container responsive.
I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}
This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.
Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.
I want to show an arrow over an image. This arrow should be centered every time.
How can I do it?
Here is my code in jsfiddle:
CSS:
.t1_img {
background-image:url('http://www.4freephotos.com/medium/batch/Branch-of-acacia-with-flowers777.jpg');
position: relative;
background-size: cover;
background-position: center center;
overflow: hidden;
border-radius: 10px 0 0 0;
height: 200px;
}
.t1_arrow {
position: absolute;
bottom: 0;
width: 60px;
border-left: 40px solid #cfcfcf;
border-right: 40px solid #cfcfcf;
border-top: 20px solid transparent;
}
.t1_content {
background-color: #cfcfcf;
height: 150px;
padding-top: 20px;
margin-bottom: 40px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
</div>
</div>
You know the width of the arrow so if you put it left:50%; and margin-left:-30px; because its width is 60px it is centered everytime.
So add this
.t1_arrow {left:50%;margin-left:-30px;}
Your fiddle edited
You could use the following line:
left: calc((100% - 60px)/2);
Where 60 px refers to the width of the arrow. This method is not supported by all browsers, unfortunately. For safety, add the following three lines to the .t1_arrow class:
.t1-arrow {
left: 45%;
left: calc((100%-60px)/2);
left: -webkit-calc((100%-60px)/2);
}
Or you could use jquery to set the height after pageload:
$(function() {
$(".t1-arrow").each( function() {
var w = $(this).parent(0).width();
$(this).css('left',(w-60)/2 + 'px');
});
});
If you only want it centred horizontally, add the following to your Arrow's CSS;
left: 0; right: 0;
margin: auto;
Updated Fiddle. https://jsfiddle.net/86e0gg99/12/
Here you can see a picture of the solution, i'm looking for.
https://db.tt/1UFk3baW