This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
Hello i want create photo like this image
I want this logo to be in the upper right corner and in the person's photo
this is my code
<div style='position:relative'>
<img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
<img src='https://i.ibb.co/hLB6zMr/logo.png' style='position:absoulute;top:-10px;right:0px'>
</div>
and this is my jsfiddle im try add position absolute in logo image and div position relative doesn't work. Help me thank's
your absolute spelling is wrong and need specific the width of image div.
<div style='position:relative;width: 252px;'>
<img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
<img src='https://i.ibb.co/hLB6zMr/logo.png' style='display:block;position:absolute;top:0;right:0;'>
</div>
and it works on JSFiddle, if the position is not right please change the top and left codes.
.logo {
width: 19%;
position: absolute;
top: 11%;
left: 57.5%;
transform: translate(-50%, -50%);
}
<img src='https://i.ibb.co/gFsCTmf/orang.jpg'>
<img src='https://i.ibb.co/hLB6zMr/logo.png' class="logo">
<div style="position:relative;width: 247px;">
<img src="https://i.ibb.co/gFsCTmf/orang.jpg">
<img src="https://i.ibb.co/hLB6zMr/logo.png" style="position:absolute;top:
-5px;right: -5px;">
</div>
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Display a div width 100% with margins
(6 answers)
Closed 2 years ago.
I have mostly single images on my portfolio pages, but I'd like to incrorporate two images/videos next to each half-way down. You can see that here: https://kaye.hu/ett/islovingherself
The images are set to 10px padding all round, which of course messes with the padding when floating two 50% images next to each other. I've tried amending to a lower size (48%) but it still doesn't line up and I just can't get my head around how to do it!
So, the HTML is..
<img class="one img-responsive" />
<img class="one img-responsive" />
<img class="one img-responsive" />
...
<img class="two img-responsive" />
<img class="two img-responsive" />
And CSS:
.img-responsive {
padding: 10px;
float: left;
}
img.one {
max-width: 100%;
}
img.two {
max-width: 48%;
}
I just can't get my head around the best way to it.
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 2 years ago.
I am trying to make a div element sticky on my page. When I use position sticky (and yes, it is inside of a parent element), not only is it not sticky, but I can't position it's top value. The left and right work, but not top or bottom. As the user scrolls down the page I want the div to be visible in it's entirety nearly all the way down. Can I achieve this in CSS? Here is some code:
<main class="main-area">
<header class="header">
<div class="header__logo-area">
<img src="/src/assets/svg/logo.svg" alt="ImmediaDent logo">
</div>
<div class="header__green-plus">
<img src="/src/assets/svg/plus large.svg" alt="Large Green Plus" class="header--green-plus">
</div>
</header>
</main>
<div class="form">
<div class="form__form-section">
This is where the text goes.
</div>
</div>
<section class="next">
</section>
.form {
position: relative;
&__form-section {
position: sticky;
background-color:$colorFormGray;
bottom: 10rem;
top: 10rem;
left:45rem;
height: 40.9375rem + 18.3125rem;
width: 38.5964912%;
border-radius: 20px;
text-align: center;
}
Please let me know if any more code or information is needed. Thank you!
This question already has answers here:
Vertically aligning an image to the bottom inside a bootstrap “column”?
(1 answer)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
I'm using Bootstrap and trying to position these 3 images at the bottom without any success. Could you help?
JSFIDDEL
HTML:
<div class="row">
<div class="col-xs-2">
<img src="https://s10.postimg.org/730mt4y5l/image.jpg" class="img-responsive first">
</div>
<div class="col-xs-8">
<img src="https://s10.postimg.org/yp3edthih/image.jpg" class="img-responsive second">
</div>
<div class="col-xs-2">
<img src="https://s10.postimg.org/z4j9kkstl/image.jpg" class="img-responsive third">
</div>
</div>
CSS:
.row {
border-bottom: 1px solid red;
position: relative;
}
.first {
}
.second {
}
.third {
}
The 3 images are of different dimensions. I would like to position them in such a way that all the images seat on the red border line.
For now, I only see to regulate with margin_top or padding_top, and responsive regulate with media switch.
style='margin_top:150px;'
This question already has answers here:
CSS - how to overflow from div to full width of screen
(3 answers)
Closed 7 years ago.
I need to put a background image in the middle of a page like this below.
A way would be to close the div container and put it back after my image. But I don't think that's the best way, so here I come to find some help.
My HTML :
<div class="container">
<div class="job">
<h4>Disc Jockey</h4>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p>
Lorem ipsum...
</p>
</div>
</div>
</div>
</div>
And in my css :
.job{
margin-top: 75px;
background:url(../img/bg-about.jpg) no-repeat center top scroll;
background-size: 100% auto;
height: 357px;
width: 1920px;
}
Thanks in advance.
Try to add class .job to <div class='container job'></div> I think it must help you
Hey I have a problem with social buttons. I am trying to move them but only one show up on my page and I can't move that. I have three buttons and them images can someone help I am trying to put them straight line center of header or above my video.And I want to put them links.
HTML
<body>
<div id="header">
<div id="icons>
<img src="facebook-64.png">
<img src="twitter-64.png">
<img src="instagram-64.png">
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
CSS
img {
position: absolute;
right: 640px;
top: -50px;
}
video {
margin-top: 250px;
}
#icons {
top: -220px;
}
If using absolute positioning. Each button needs a different class. It is best practice to use classes for css styling and keep id for targeting elements with JavaScript. The images need to be wrapped in links ( tags) and the # in the href below should be set to the URL of your facebook, twitter and instagram home pages.
Personally I would set out html as:
<body>
<div class="header">
<div class="icons>
<a class="fb-link" href"#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
Rather than use absolute positioning I would simply display the links as blocks and float them left. Use a margin on the containing div to position your icons. See below.
css
.icons{
margin:20px auto; //gives margin of 20px top and bottom and centers buttons horizontally.
width:220px;
}
.fb-link, .twr-link, .inst-link {
display:block;
float:left;
width:60px; //set width to the with of image used eg 64px
margin-left:20px;
}
.fb-link{
margin-left:0; //if margin left was left at 20px the icons would be 20px off center.
}
Using these principles laying out the rest of you pages should be straight forward.
You're giving the same style to all img tags, causing them to overlap! try changing positions for each