I'm trying to put two elements on the top right of a card, but I don't want them to stack. In front of that I want them to stay next to each other but at the top right.
I've seen this W3S page, more in detail the 'Positioning Text in an Image'.
This is the example I'm using right now but only works for one element, if I add a new element with the same class they overlay each other:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
<div class="topright">Top Right overlayed</div>
</div>
</body>
</html>
Is there any way of automate the positioning the topright elements next to each other without making two classes and setting the positions manually?
Thank you.
You can simply use flex and other flex properties to make sure the top-right is not stacking each each and this way it will be responsive as well on modern browsers.
I would not suggest using position: absolute or custom top or right for this type of thing.
Live Demo:
.container {
display: flex;
position: relative;
}
.topright {
font-size: 18px;
}
.top_right_item {
display: flex;
justify-content: space-between;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="top_right_item">
<div class="topright">Top Right</div>
<div class="topright">Top Right overlayed</div>
</div>
</div>
</body>
</html>
.topright {
display:flex;
flex-direction:row;
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
<div class="topright">
<div>Top Right</div>
<div>Hello</div>
</div>
Your problem is solved.
What you have to do is put them in separate divs and wrap them in topright div, and set display to flex,thats all.
You can make an wrapper for the two elements
<div class="topright-wrapper">
<span>Top Right</span>
<span>Top Right Right</span>
</div>
CSS:
.topright-wrapper {
display: flex;
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
Related
I have to put several images and texts on the site and they should be in the same position as the background image but when I minimize the screen size the proportionality is lost, I tried with an image of the text that I needed and it worked for me but I can not do that work with texts
Thank you very much for your help i've just been stuck for the hole day trying to find the solution
.title {
width: 74.5%;
}
/*text image png
.title.s1{
position: absolute;
margin-top: 36%;
}
/*text in h1*/
h1.title.s1 {
color: rgb(60, 255, 0);
position: absolute;
margin-top: 34.5%;
margin-bottom: 0;
text-align: center;
display: inline;
}
<div id="r_bg-img">
<img src="/img/rokubun_background.png" width="100%">
</div>
<div class="content">
<img src="/img/title1.png" class="title s1" >
<h1 class="title s1">The premise</h1>
</div>
In the link there's the output , the gray text is added as an img and the green text is added as a and below those elements the background titles are in orange
If you want to make your contents propotional, you can use the styles like below.
We can use the padding-top property as a percentage to make the gap between your contents like headers and images.
Here this is an example I tried, You can apply the styles properly for our contents. It is easy to create an outer and inner containers to keep the contents like headers and images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 100%;
height:100%;/* 1:1 Aspect Ratio */
}
.container .outer {
width: 100%;
padding-top: 5%; /* defines aspect ratio */
position: relative;
}
.container .outer .inner {
text-align:center;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
display: block;
width: 50%;
height: 50%;
padding: 0% 25%;
}
h1 {
margin:auto;
color: rgb(60, 255, 0);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
</div>
</body>
</html>
You can follow this to get an idea https://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements#:~:text=For%20proportional%20resizing%20purposes%2C%20it,the%20aspect%20ratio%20you%20need.&text=And%20that's%20it!
Hope this will help you and think this is what you want to do.
I'm trying to put a logo on the top left corner, and text parallel to the logo (top center).
The text should have the same distance from both sides of the page regardless of the logo.
I tried adding around "display: table; display: table-cell; position: relative; position: absolute;"
But the best I can get is text being centered but not on the same line as the logo but a bit low.
html:
<header class="header">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
css:
.header {
border: 2px solid black;
width: 100%;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
}
example image:
You could use position: absolute; and i've added the position to the title and gave it a wrapper together with the image so you can move them together.
I've also added some margin to show you the title stays centered
.header {
border: 2px solid black;
width: 100%;
position: relative;
}
.wrapper {
width: 100%;
position: relative;
margin: 30px 0;
}
.logo {
display: flex;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<header class="header">
<div class="wrapper">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</div>
</header>
use flexbox!
.header {
border: 2px solid black;
width: 100%;
display:flex;
justify-content:space-between;
align-items:center;
}
img ,#spacer{
width: 80px;
}
.header-text {
text-align: center;
}
<header class="header">
<img src="https://via.placeholder.com/150" alt="a logo">
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
<div id='spacer'></div>
</header>
There a numerous ways to go about this; I'll describe one method here.
Basically, you need to get the logo out of the layout flow so that the text can be centered without being affected by it. the easiest way to do this is by adding position: absolute to the logo.
Thus, a complete example might look like:
.header {
/* Allows the logo to be positioned relative to the header */
position: relative;
/* Centers the text — can be done other ways too */
text-align: center;
}
.header .logo {
position: absolute;
left: 0;
}
A JSFiddle Example: https://jsfiddle.net/g01z27tv/.
Keeping Proper Alignment
If you want to keep the logo and the text properly (vertically) aligned, flexbox will be your friend here.
First, ensure that the header is taller than the logo will be; otherwise the logo will be cut off.
Next, create a wrapper <div> for your logo. In your case:
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
</div>
<!-- ... -->
</header>
Now, add some styles for .logo-wrapper. Namely:
cause it to expand to fill the height of the header,
make it a flex container,
make its items' vertically centered,
make it position: absolute, and
position it to the left of the header:
.logo-wrapper {
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 0;
}
Note that you should now remove position: absolute and left: 0 from .logo, since we are positioning the wrapper instead.
Lastly, in order to properly align the text, we'll use flexbox on .header:
.header {
display: flex;
justify-content: center; /* Use this instead of text-align: center */
align-items: center;
}
You'll note now that even when you make the logo taller—as long as the header is taller—everything stays aligned.
An Update JSFiddle Example: https://jsfiddle.net/oL5un8gb/.
Note: I created a separate wrapper <div> in this example; in your case you probably don't need to because you have a separate <div> and <img> already. You might be able to get it to work without an extra element.
.header {
border: 2px solid black;
width: 100%;
}
.logo {
float: left;
}
.header-text {
text-align: center;
position: absolute;
width:100%;
margin: auto;
}
.header::after {
content: "";
clear: both;
display: table;
}
<header class="header">
<div class="logo">
<img src="https://via.placeholder.com/75" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
As suggested in comments I have edited the text to be centred to 100% width.
I have a page wherein I have multiple full-width <img>'s - I have to add a <button> and <h2> overlaid upon each image. Images will have variable heights, so elements within need to conform to the perimeter set by their width + height.
An image is styled thus:
CSS
.FullWidthImg {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
HTML
<div id="container"> <!--ONLY STYLING FOR container IS position: relative-->
<img src="xx" alt="xx" style="FullWidthImg"/>
<h2>TEXT GOES HERE</h2>
<button>i'm a button</button>
</div>
Most approaches suggest styling <h2> and <button> with position: absolute - this works if you have one image element and the image always has the same height, however neither is the case for me.
Another approach I've seen is making something like:
<div style="background-image: url(/img.com)">
<h2>TEXT GOES HERE</h2>
<button>i'm a button</button>
</div>
... And then positioning elements within, which could work but I'd like to avoid in-line styling if possible.
Are there any alternative approaches that would work for this use-case?
Building off your first suggestion, here's how you could accomplish your desired layout without inline styles.
.img-wrapper {
position: relative;
}
.img-wrapper img {
width: 100%;
}
.img-wrapper .overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.img-wrapper h2 {
margin: 0 0 .5em;
}
<div class="img-wrapper">
<img src="http://via.placeholder.com/600x150/eee/ddd" />
<div class="overlay">
<h2>Heading</h2>
<button>Button</button>
</div>
</div>
<div class="img-wrapper">
<img src="http://via.placeholder.com/600x400/eee/ddd" />
<div class="overlay">
<h2>Heading</h2>
<button>Button</button>
</div>
</div>
This is what I am trying to achieve:
An image positioned in between two separate div tag like facebook profile page:
I searched here but the solutions did not help much. It got positioned as I wanted but since it is bootstrap and it should responsive, when the screen size decreases the image position gets changed, which I do not want.
Here is the code(which might not be proper as I was just testing) -
HTML -
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
</div>
The CSS -
.container {
background-color: cadetblue;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -60px;
right: 200px;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
This is what I got after:
You could try to change the img-thumbnail to position: relative and use 'bottom: -60px' instead of positioning absolute, that can reposition the image without the use of absolute positioning
check it
.container {
background-color: cadetblue;
width:100%;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -90px;
left:15%;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
.bottom-div {
height:200px;
background-color:red;}
<head>
<meta name="viewport" content="width=device-width, initial-sclae=1">
</head>
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
<div class="bottom-div"></div>
</div>
Well im trying to achieve a basic effect of 6 images placed next to each other ( 2 rows of 3) and want to add some text over them. But the problem is (I think) in the float = left "command" in the CSS, which indeed puts my images nicely next to each other... BUT throws all of my text in the one place instead of nicely with the appropriate image. I've been sitting and thinking on this for solid few days and have no idea what to do. Hope you can help.
CSS
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
}
.image {
float: left;
clear: both;
padding: 2px;
position: relative;
}
HTML
<body>
<div class="row" style="width:1600px">
<div class="container">
<img class="image" src="Life.jpg" alt="Life" style="width:520px;height:360px;" />
<p class="text">Life</p>
</div>
<div class="container">
<img class="image" src="Trees are Cool.jpg" alt="Trees Are Cool" style="width:520px;height:360px;" />
<p class="text">Trees are Cool</p>
</div>
<div class="container">
<img class="image" src="Radical dinosaurs.jpg" alt="Radical Dino" style="width:520px;height:360px;" />
<p class="text">Radical Dinosaurs</p>
</div>
<div class="container">
<img class="image" src="Big Round Vuttons.jpg" alt="Big Round Buttons" style="width:520px;height:360px;"/>
<p class="text">Big Round Buttons</p>
</div>
<div class="container">
<img class="image" src="Run.jpg" alt="Run" style="width:520px;height:360px;"/>
<p class="text">Run</p>
</div>
<div class="container">
<img class="image" src="Thats crazy.jpg" alt="That's Crazy" style="width:520px;height:360px;"/>
<p class="text">That's Crazy</p>
</div>
</div>
</body>
Use following css, this will solve your problem
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 0;
}
.container {
display: inline-block;
box-sizing: border-box;
padding: 2px;
position: relative;
}
the problem is that you are positioning your image to relative. but your .text is direct child of .container by default .text find it's parent to be position relative but .container has not apply css property position relative then it find .container parent to be position relative and so on, in the end html is position relative that's why all your code stack on the top of each other.
SEE DEMO
try this
.contailer{
position: relative;
}
Add position: relative to the .container class, so it will be the .text element context. The element is positioned in relation to the context.
The context is the last parent that has position: relative / absolute / fixed. Right now the context is probably some higher level container or even the body itself, so all .text items are concentrated there.
It has to do with the position of the elements like other have pointed out
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 50px;
left: 50px;
}
.image {
padding: 2px;
position: relative;
}
.container {
float:left;
}
https://jsfiddle.net/xqf8kfd1/1/
Give 'container' class style as follows:
.container {
position: relative;
}
And remove float: left; from 'image' class
try removing the position:absolute and adding float:left to the css text class
.text {
float: left;
z-index: 100;
color: black;
width: 100%;
display: inline-block;
}