I have problem with positioning:
I cannot set exactly top: 50% and left: 50% on both photo and text because it isn't 50%. I try by hand set that 50% which is more like 46%.
When I change size of window text moves. I don't know what to Do and I am looking for answer for 2 hours
.photo-box {
background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
width: 100vw;
text-align: center;
font-size: 30px;
padding-top: 70px;
padding-bottom: 70px;
margin-left: auto;
margin-right: auto;
color: #f0eeee;
font-family: sans-serif;
position: relative;
}
.tytul {
display: flex;
text-align: center;
position: absolute;
top: 46%;
left: 45.3%;
}
.zdj-pierw img {
border-radius: 100px;
align-items: center;
justify-content: center;
}
<div class="photo-box" style="">
<div class="tytul">Strona WWW </div>
<div class="zdj-pierw">
<img src="https://picsum.photos/200/200/?random" width="200" height="200" />
</div>
</div>
You should be using flex properties on the parent, not just on the item you want to place.
I've also changed your border-radius to 50%, as this is a perfect round, no matter what the size of the image.
.photo-box {
background: linear-gradient(250deg, rgba(251, 10, 237, 0.84), rgba(0, 186, 255, 0.91) 50%, rgba(15, 226, 98, 1));
width: 100vw;
font-size: 30px;
padding-top: 70px;
padding-bottom: 70px;
color: #f0eeee;
font-family: sans-serif;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.tytul {
position: absolute;
}
.zdj-pierw img {
border-radius: 50%;
}
<div class="photo-box" style="">
<div class="tytul">Strona WWW </div>
<div class="zdj-pierw">
<img src="https://picsum.photos/200/200/?random" width="200" height="200" />
</div>
</div>
Related
I have a picture which has certain dimensions, and i need to implementa div with a button inside the pic, as it is on this picture.
I tried this, this is my code.
.wrapper {
width: auto;
text-align: center;
}
.wrapper::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(0, 9, 34, 0) 70%, #000922 99.52%);
width: 100%;
height: 100%;
z-index: 10;
}
.background-image {
display: none;
}
.responsive-image {
max-width: 100%;
height: 100%;
}
body {
background: linear-gradient(180deg, rgba(0, 9, 34, 0) 1%, #000922 100%);
}
.button-position {
position: absolute;
bottom: 20%;
left: 15%;
z-index: 200;
}
.cta-button {
padding: 2rem 8rem;
background: linear-gradient(180deg, #1FD660 0%, #127C38 100%);
font-family: Barlow;
color: white;
font-size: 40px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.2em;
text-align: center;
}
<div class="wrapper">
<img class="img-fluid responsive-image position-relative" src="https://unsplash.com/random" />
<div class="button-position">
<a class="rounded-0 btn cta-button btn-lg btn-block cta-button" href="<?php echo $button['new_template_button_link'] ?>">
Button
</a>
</div>
</div>
This is what i've gotten so far:
But as you can see, its streched out, and it doesnt look as the figma file above
It looks like you're using a library to adjust the image. Remove the classes img-fluid and position-relative from your HTML.
For the purpose of setting a background image, I would create a seperate div and set the background image to your image.
#hero-div {
background-image: url('./image.jpg');
background-repeat: no-repeat;
background-position: center;
object-fit: cover;
}
Nest the button inside the image and position it there.
would you please hlep me about this problem
as you see my codes when i hover article-img its img'transform: scale(1.1) and image overflow and its container are hidden for large size it works but for less than 576px it does not work, i also tested similar codes in media query for less than 576px what's you tip about this?
html:
<div class="img-article ">
<img src="images/xitems1.jpg">
<div class="img-info">
<p class="info-title">Men's Fashion</p>
<a class="info-link" href="#">Shop Now</a>
</div>
</div>
css:
.img-article {
width: 93%;
text-align: center;
position: relative;
cursor:pointer;
display: flex;
justify-content: center;
align-items: flex-end;
overflow:hidden;
}
.img-article::after {
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(4, 14, 39, 0.7) 0%, rgba(241, 242, 245, 0) 50%);
content: '';
z-index: 200;
}
.img-article img {
width: 100%;
height: 100%;
text-align: center;
transition: all 1s ;
overflow:hidden;
}
.img-article:hover img {
transform: scale(1.1);
}
I am working at a mobile bottom navigation bar. Here is the code I developed:
body {
background-color: #ff0000;
}
.mobile_bottombar {
display: flex;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
padding: 0 12px;
background-color: #fff;
z-index: 999;
}
.des:before { /* creates the circle */
position: absolute;
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z'/></svg>");
width: 66px;
height: 66px;
top: -45px;
left: calc(50% - 33px);
border-radius: 50%;
background-color: #188071;
justify-content: center;
align-items: center;
display: flex;
}
.des {
border-radius: 6px;
background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);
}
<div class="mobile_bottombar des">
<div class="bottombar_item" onclick="switchPage(2, 'main', true)">
<div>
<span>Sepp</span>
</div>
</div>
<div style="margin-right: 20px;" class="bottombar_item" onclick="switchPage(3, 'noteslist', true)">
<div>
<span>Depp</span>
</div>
</div>
<div style="margin-left: 20px;" class="bottombar_item">
<div>
<span>Mepp</span>
</div>
</div>
<div class="bottombar_item" onclick="switchPage(4, 'permission', true)">
<div>
<span>Repp</span>
</div>
</div>
</div>
My problem is that the radius which is cut of the div is another radius than the blue circle. Or maybe there is the other problem which I do not know? Anyway, that looks very weired, because of the different space around the circle. But how to fix that?
~marcelo
You can try #Temani's comment or if you want to stick to your method continue the reading.
I think that there is no relative way to do it so all you can do is hard-changing the value of the radial-gradient in the .des rule like this:
background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);
I also advice you to remove the box-shadowand replace it with
filter: drop-shadow(0px -2px 1px black);
instead, because we can see the shadow crossing the transparent area.
I am trying to make an image have green overlay and a title inside the image itself at the same time while trying to be responsive all at the same time, i have tried everything and i just cant make it work.
.headline-picture{
height: auto;
width: 100%;
background-image:
linear-gradient(
rgba(10, 158, 0, 0.5),
rgba(10, 158, 0, 0.5)
);
}
<div class="article-headline">
<img class="headline-picture" src="example image">
</div>
I think i understand the requirement... Have a look at the below snippet. Is this what you were looking for?
I've put the overlay as a separate element and is position:absolute.
.article-headline {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.headline-picture {
height: auto;
width: 100%;
}
.overlay {
background-color: rgba(0, 128, 0, 0.2);
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
}
h1 {
position: absolute;
}
<div class="article-headline">
<img class="headline-picture" src="https://placekitten.com/640/360">
<div class="overlay"></div>
<h1>Title</h1>
</div>
I am trying to make a about page for my website. I am trying to center 3 images inside a div, equally spread out on the page, adjusting to the window size using css.
My question is:
How do I get the items to be equally spaced out in the div while having the same width on the left and right sides?
The other solutions I have read about have not actually provided me with a solution.
Here is my code:
#screamer {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
#kinzu {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
#swezii {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
<div class="container">
<div class="row" id="managers-row">
<h4 id="managers-head">Our Managers</h4>
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
</div>
</div>
Just use percentage values for your width instead of pixel ones.
.column {
width: 33.333333%;
box-sizing: border-box;
padding: 0 20px;
}
box-sizing allows you to add padding to the column without making the total width greater than the target 33.333%
If need be, you may want to add a fixed with to managers-row and use auto margin
#managers-row {
width: 240px;
margin: auto;
}
#screamer {
border-radius: 50%;
width: 33.33%;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
#kinzu {
border-radius: 50%;
width: 33.33%;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
#swezii {
border-radius: 50%;
width: 33.33%;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
}
<div class="container">
<div class="row" id="managers-row">
<h4 id="managers-head">Our Managers</h4>
<div class="one-third.column" id="screamer">
Screamer
</div>
<div class="one-third.column" id="kinzu">
Kinzu
</div>
<div class="one-third.column" id="swezii">
Swezii
</div>
</div>
</div>
Used center tag in HTML, and removed float:left;
WORKING:DEMO:UPDATED
HTML
<div class="container">
<div class="row" id="managers-row">
<h4 id="managers-head">Our Managers</h4>
<center><!-- Added -->
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
</center>
</div>
</div>
CSS
#screamer {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
background-size: 100%;
}
#kinzu {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
background-size: 100%;
}
#swezii {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
background-size: 100%;
}
#screamer, #kinzu, #swezii
{
display:inline-block;
}
You have some errors in your html, as well as some incorrect css. Here is what I think you are looking for:
http://jsfiddle.net/jkjzpz7z/2/
<div class="container">
<div class="row" id="managers-row">
<h4 id="managers-head">Our Managers</h4>
<div class="column one-third">
<div class="screamer"></div>
</div>
<div class="column one-third">
<div class="kinzu"></div>
</div>
<div class="column one-third">
<div class="swezii"></div>
</div>
</div>
</div>
.column {
float: left;
}
.one-third {
width: 33.33%;
}
#managers-row {
width: 500px; /* Demo Only */
text-align: center;
}
.screamer,
.kinzu,
.swezii {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #000; /* Demo Only */
background-size: 100%;
}
.screamer {
background-image: url(../images/screamer.png);
}
.kinzu {
background-image: url(../images/screamer.png);
}
.swezii {
background-image: url(../images/screamer.png);
}
Use percentages, and remove white space between DIV elements(really annoying)
JS Fiddle
.one-third-column {
width: 33.333333333%;
display: inline-block;
}
.one-third-column img {
width: 100%;
height: auto;
background-color: red;
}
.one-third-column > div {
padding: 15px 15px 15px 15px;
}
<div class="container"><div class="row" id="managers-row"><h4 id="managers-head">Our Managers</h4><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div></div></div>
None of the other answers helped. I ended up using margin-left:10px; on the left aligned div, text-align:center; and display:inline-block; to center the middle div. Lastly I used a margin-right:10px; to align the right div.