I need to overlay text and images over both basic-b1.png and basic-b2.png. How would I achieve this so that it's easy to accurately position the text and images?
I do understand how to add text on images when there is only one image within the div element. However when there are two images and they both have to be center aligned with each other I cannot separate out the images into different div elements.
CSS:
.bun{
text-align:center;
position:relative
}
HTML :
<div class="bun">
<img src="basic-b1.png" height ="320" width ="212">
<span style="padding-left:200px"></span>
<img src="basic-b2.png" height ="320" width ="212">
</div>
The ::hover selector is usually used in such cases
Html:
<div class="bun">
<img src="https://images.unsplash.com/photo-1538497508301-aa6452af8400?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=ca19176e4dc2bcc9269edf74c9c10d4f" height ="320" width ="212">
<img src="https://images.unsplash.com/photo-1521624928109-a794da7909a9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=48e97751d49c36e90b877ab2bbe27c3e" height ="320" width ="212">
</div>
Css:
.bun{
text-align:center;
position:relative
}
.bun::before {
content: 'hi there';
color: yellow;
position: absolute;
font-size: 40px;
left: 40%;
top: 40%;
}
You can place an image instead of text by doing content: 'url(...)'.
If you need different imgs/texts for each img, you would have to wrap them in another div and put the ::before selector on those because the img tag doesn't accept ::before.
Related
I have this html and this css.
.entry-content > .greyfruitdrawing {
height:2000px !important;
width:2000px !important;
margin-top:40px;
}
.redletters1 {
font-size:40px;
opacity:0.7;
color:red;
position:relative;
top: 20px;
font-weight: bolder;
line-height:1.6;
text-align:justify;
}
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" alt=""width="300" height="201"class="alignnone size-medium wp-image-6978"/>
</div>
<div class="redletters1">SOME TEXT.</div>
The problem is that a) it won't expand by the size css is telling it to. b) elements are interacting in a way they shouldn't. Adjusting greyfruitdrawing affects position of redletters1
Site: https://4309.co.uk/about-us/
Set the height and width of an outer container and then give the image itself a height and width of 100%:
.container {
text-align: center;
width: 2000px;
height: 2000px;
margin-top: 40px;
}
.greyfruitdrawing img {
height: 100%;
width: 100%;
}
.redletters1 {
font-size: 40px;
color: rgba(255,0,0,0.7);
font-weight: bolder;
line-height: 1.6;
}
<div class="container">
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" />
</div>
<div class="redletters1">SOME TEXT.</div>
</div>
Edit
There are a few problems with what you are doing here. First off, height and width are not properties that are inherited. In your example, you are defining the height and width of the div surrounding your image in your css, not the image itself, which is why it is affecting the "position" of the red lettering. The div is getting bigger and pushing the text downwards.
Simply move the greyfruitdrawing class inside your image tag instead of your div surrounding it.
Also, it is generally bad practice to use the !important property, although I don't know what the other classes you are linking to do, so maybe they are needed to override some presets you are using.
You have many different classes and properties trying to change the size of the image. I would recommend you do something simpler.
Either change the height and width properties within the tag to match how big you want the image to be, or remove these properties and define it in your css.
Alternatively, if you want the image to fill the size of the div then I would recommend the answer by symlink.
The reason this is affecting the position of the red lettering is because you are making the div bigger, which is pushing the letters down the page. You can't see what is happening because the div is the same color as the background.
Using css to define height and width:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" class="size"/>
</div>
//notice the class is in the <img> tag and not the <div> surrounding it.
.size {
height: 2000px;
width: 2000px;
}
or defining height and width within the tag:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" height="2000" width="2000" />
</div>
I have a set of divs (11 of them), 8 of them with an image and 3 of them with ':'.
all 11 boxes are inside a class "timer".
Something like this:
<div class="timer">
<div><img></div>
<div><img></div>
<div>:</div>
</div>
I added text over image by using p tags inside each div and using this code on css:
.text{
position: absolute;
left: 85px;
top: 185px;
}
But on resisizing the window, the boxes move but the text stays. How can I make the text move along with the boxes?
Missing a few things here: <div>:</div> should actually be: <div class="text">:</div> if you want to apply your CSS that's targeting .text to this div containing the :.
Also if you want the container to hold the absolutely positioned element, you need to set your timer to be relative position: .timer { position: relative; }
I have the following: jsfiddle.net
What I'm trying to do is have the image float left of the text such that it fills the parent (.box). Note that the .box can vary in height depending on the number of lines of text.
The end result should look like this:
How would this be done?
.box {
position: relative;
display: block;
width: 600px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid red;
}
.img {
float: left;
}
.text {
font-size: 14px;
}
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box is one line.</div>
</div>
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>
You can use display: table on the parent element and display: table-cell on the children.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
figure {
display: table;
width: 600px;
height: auto;
margin-bottom: 24px;
border: 2px solid red;
}
img {
float: left;
display: table-cell;
min-height: 100%;
margin-right: 20px;
}
figcaption {
font-size: 14px;
height: 100%;
}
</style>
</head>
<body>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box is one line.</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
</figure>
</body>
</html>
As far as I know there is no HTML/CSS only solution to make this work - correct me if I'm wrong. The OP wants to have an image with unknown size dynamically scaled to the parent's container's height. This container on the other hand depends dynamically on the text length and has no fixed height. The image size can vary, the text size can vary.
Here a proof of concept solution using jQuery and <img> instead of background-image with the following result:
HTML:
<div class="box">
<img class="img" data-src='https://placehold.it/500x500'>
<div class="text">This box is one line.</div>
</div>
JavaScript / jQuery
var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
var heightParent = $boxes.eq(i).outerHeight() - 4;
// -4 because of border 2px top + 2px bottom
$imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
$imgs.eq(i).height(heightParent);
}
CSS (only changed part):
.img {
float:left;
margin-left: -24px;
margin-top: -24px;
margin-right: 10px;
}
It's not such a trivial thing to achieve what you want as you don't want to set height. Not on the image and not on the parent container.
Problems using background-image:
With the background-image approach it would easy be possible to position the image correctly scaled to the left with position:absolute, but the margin to the right (to the text) would not work, as the width can be different.
Problems using img:
On the other side with the use of <img> you have the problem, that the parent <div> will always be in the original height of the image, as long as no parent has a fixed height - which is the case in your example.
JavaScript for partly making it work:
To avoid this you can avoid the creation of the image on page load by setting the url to a data attribute, I called it data-src. Now when the page is load, you can look for the parent's <div> natural height. Next you pass the URL from the data-src attribute to the src attribute so that the image is rendered.
As we know the former parent's height we can set it as the image height.
The CSS negative margins are there to undo your setting of padding: 24px on the parent's container so that the image is correctly positioned. If you ask yourself why I subtract 4 from the height - this is because you want your image to be within the border, so we need to subtract the 2px to the top + the 2px to the bottom of your border.
Note: Of course this solution would not work responsive without further scripting, but your parent <div> seems not to be responsive anyway.
Fiddle: https://jsfiddle.net/av9pk5kv/
Problems with the layout wish and the above example:
You could argue that the wished layout is not worth aspiring to in the first place, it will not work with more amount of text if you don't change something else. At some point there is so much text, so that it's just impossible to place the image filling the parent:
To avoid it partly you would have to remove the fixed width of the parent.
But the same (or similar) result will happen if the dynamically including of the image via JavaScript leads to more text lines as there were before (the text is squeezed).
How would I solve these problems: I'd use another layout.
I am trying to make a slider. How can I put one image into another image and
put text and a small image in that image(the last one)? I have put one image into another one with no problem by giving position:relative in for main div and giving the second image position:absolute. But the third part (putting small image and text in that image) is tricky. I gave the container of image and text position absolute, but it is positioned out of the image div. Maybe a small example could help. Thanks
#maincontainer{
width:650px;
margin:0 auto;
margin-top: 25px;
position: relative;
}
#image1container
{
width: 650px;
margin:0 auto;
margin-top: 25px;
position: absolute;
top: 95px;
left: 137px;
}
#image2container{
position:absolute;
}
You could try using the background-image CSS property of <div> elements in HTML. Your HTML would look like this:
<div id="maincontainer">
<div id="image1container">
<img src="small-image.jpg" alt="Small image />
<p>Text in image</p>
</div>
</div>
And your CSS would look like this:
#maincontainer {
background-image: url('main-container-image.jpg');
}
#image1container {
background-image: url('image1-container-image.jpg');
}
From here, you could use CSS to position the elements as needed.
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.