How to make the coffee image close to the text?example as it should be
how did I manage to do this
.cup {
float: right;
}
.mbc {
font-size: 60px;
}
<div class="page1">
<div>
<div>
<h1 class="mbc">Make better<br>coffee<img src="Coffe.png" alt="Coffe image" width="70px" height="67px" class="cup"></h1>
<p>why learn how to blog?</p>
</div>
<img src="Croods.png" alt="Croods" width="476px" height="323px">
</div>
</div>
Right now, float right makes the image always go to the right side. If the image is positioned inline (display: inline, which is the default value), the image would be placed correctly.
<h1>This is<br/>your text<img width="30" style="margin-left: 10px" src="https://hotemoji.com/images/dl/d/coffee-emoji-by-twitter.png" /></h1>
Related
I am trying to display this content in a line so that it shows with Shopping on the left of my page and content in the "right" div on the right. I have tried floating the div to the right but that didn't work.
Any help is much appreciated.
<header>
<h1>Shopping</h1>
<div id="cart"
<img src="images/cart.png" width="80" height="80">
<p> Cart: 0 </p>
Login
</div>
</header>
Like this
<h1> and <div> are block element so they take a whole line each. You have to make them as below to display them in a line.
header h1, header #cart {
display:inline-block;
}
Well there're a few more methods to show them in a line, but this is the easiest.
Try this https://jsfiddle.net/g6camng3/1/
HTML
<header>
<h1>Shopping</h1>
<div id="right">
<img src="http://placehold.it/350x150" width="80" height="80">
<p> Cart: 0 </p>
Login
</div>
CSS
h1 {
float: left;
display: inline-block;
}
#right {
display: inline-block;
}
I would suggest you to use span instead of p tag :
<header>
<h1>Shopping</h1>
<div id="cart"
<span><img src="images/cart.png" width="80" height="80"></span><span> Cart: 0 </span><span>Login</span>
</div>
</header>
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
EDIT: This might make more sense, check this image. http://puu.sh/rt8M
The image just goes through the padding. I want the title div to expand vertically to accommodate the image. While keeping the text centered and the center of the image should intersect the line the text is on.
I want to align an img to the left (and then another after the text to the right). I've tried various properties but none seem to do it right. Can anyone help?
To clarify, I want the image against the left side of the screen or browser window. The div stretches from the left to the right of screen, as you would expect of a header/title div.
Float;left seems to make the img drop out of the div tag. I should mention there is a text-align:center; property on the tag. But it doesn't fix the problem when removed so I'm not sure it's that.
The HTML
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" width="86" height="98" />
Page Header Title
</h1>
</div>
</div>
I created a little dabblet code example for you. I think this is what you are trying to do?
http://dabblet.com/gist/2492793
CSS:
.logo{
float:left;
width: 86px;
height:98px;
display:block;
}
.img2{
float:right;
display:block;
}
.clear{
clear:both;
}
HTML:
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" />
Page Header Title
<img class="img2" src="images/img2.png" alt="" />
<div class="clear"></div>
</h1>
</div>
</div>
The reason the logo is dropping out of the div is because it is not cleared.
This should fix things up.
Use this
<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
Page Header Title
</h1>
</div>
#logo{
display: flex;
justify-content: space-evenly;
}
<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>
I'd like to write HTML to align an image caption in the centre relative to the image.
I'd like to align the image and the caption together to the left.
This should be true whatever the width of the containing element.
This is what I have so far:
[unknown containing element]
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<span>Some caption text</span>
</div>
[/unknown]
But it's aligning the caption text centre relative to the containing element.
What do I need to fix?
Thanks!
If you really mean relative to the image, make the caption element as wide as the image, then center the text. To be able to set a width on the caption element it needs to be a block element, so I changed it from to :
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<div class="caption">Some caption text</div>
</div>
.caption {
width: 200px;
text-align: center;
}
You might set the width with inline CSS if that is easier.
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<div class="caption" style="width: 200px">Some caption text</div>
</div>
.caption {
text-align: center;
}
You'll need to make the <span> act like a block element.
Take a look at this: http://jsfiddle.net/szNvt/
Center image caption in image
.container {padding:0.1em}
.display-container {position:relative; width:50%}
.display-middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%)
}
img {width: 100%;}
<div class="container">
<div class="display-container">
<img src="http://lorempixel.com/400/200/sports/10" />
<div class="display-middle">
<p>strikee .. !</p>
</div>
</div>
</div>
I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
Your HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
If you know the width of your image, your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
You can use HTML5 <figcaption>:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Working example.
In order to be able to justify the text, you need to know the width of the image. You can just use the normal width of the image, or use a different width, but IE 6 might get cranky at you and not scale.
Here's what you need:
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
This centers the "A" below the image:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
That is ASP.Net and it would render the HTML as:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
I am not an expert in HTML but here is what worked for me:
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>