I have a little tricky responsive css problem.
I'm creating articles where there is a body of text on the left, and an image on the right. And the text wraps around the image. Then on the break point I need the body copy to be above the image.
When i use this code:
<section class="news-article-body">
<img src="img/news-article-image.jpg" alt="" title=""/>
<p>
Lorem Ipsum...
</p>
</section
Css:
.news-article-body img {
float: right;
}
Looks great. Image floats right and the text wraps around when needed.
But because the image tag is before the copy I cant get the image below the copy at the break point.
So basically I need the text to wrap with this html (Or another solution):
<section class="news-article-body">
<p>
Lorem Ipsum...
</p>
<img src="img/news-article-image.jpg" alt="" title=""/>
</section
Anyone know of a technique for this? I couldnt seem to figure it out.
Thanks
You could use display:flex and order :
at break point it would be from your piece of HTML :
.news-article-body {
display:flex;
flex-direction:column;
}
.news-article-body img {
order:2;
}
Javascript and float clearing can help too : DEMO or DEMO
Code example :
onload=function() {
document.getElementById('myImg').style.position='absolute';// take img out of the flow
var myoffsetHeight = document.getElementById('myP').offsetHeight;//return height of <p>
document.getElementById('myT').style.height=myoffsetHeight +'px'; //set height to floatting element
document.getElementById('myImg').style.position='static';//bring img back in the flow
}
from a structure like this :
<section >
<b id="myT"></b>
<img src="http://lorempixel.com/250/100/" id="myImg"/>
<p id="myP">Pellentesque ....</p>
</section>
in both example, do not forget set your breakpoint
Simply insert an <img> tag at the beginning of your article text and use align="right" to get the text to wrap around it.
Related
I'd like to ask a question to see IF this is possible in CSS. It may not be: I'm prepared to make some styling concessions.
The context: I'm working on re-styling and redesigning an existing blog. This has over 80 posts that (for the most part) use the same markup. So what I'm trying to do is apply styling that works with the existing html - adding classes and changing orders means going through all posts and will take hours.
Markup example of one post:
<p>Block of text </p>
<img src="example">
<p>Block of text </p>
<img src="example">
<img src="example">
<p>Block of text </p>
<img src="example">
This is an example: the order of the images and paragraphs will vary from post to post so this will be completely randomised.
What I'm trying to do is apply a 50% width styling to images that follow each other up, so they sit next to each other.
Like this: □ □
I'd like to style images that sit on their own to be at fullwidth - 100%
Is there a way to achieve this using CSS?
CSS rules like nth-of-type(3) will not work - the order of the images and p tags is completely randomised, so where in one post the 3rd img tag will be placed on its own, in another this will have to sit next to another image.
A rule like img + img would work for the second image, but I would need the first image to also apply the same styling. A rule like p + img will also cause the single images to shrink.
Any suggestions? An answer of 'this cannot be done' is also fine as I'll know to stop trying.
Flexbox can do this. I applied flex to body but it should be the container in your code:
body {
display:flex;
flex-wrap:wrap;
}
p {
width:100%;
}
img {
width:50%;
min-width:0;
flex-grow:1; /* this will do the trick when the image is alone */
}
<p>Block of text </p>
<img src="https://i.picsum.photos/id/107/800/400.jpg">
<p>Block of text </p>
<img src="https://i.picsum.photos/id/106/800/400.jpg">
<img src="https://i.picsum.photos/id/17/800/400.jpg">
<p>Block of text </p>
<img src="https://i.picsum.photos/id/108/800/400.jpg">
<p>Block of text </p>
<img src="https://i.picsum.photos/id/104/800/400.jpg">
<img src="https://i.picsum.photos/id/108/800/400.jpg">
<img src="https://i.picsum.photos/id/175/800/400.jpg">
<img src="https://i.picsum.photos/id/125/800/400.jpg">
Or like below if you want to apply this to image when there is no image with it even if the number is odd.
body {
display:flex;
flex-wrap:wrap;
}
p {
width:100%;
}
img {
width:50%;
min-width:0;
}
p + img {
flex-grow:1; /* this will do the trick when the image is alone */
}
<p>Block of text </p>
<img src="https://i.picsum.photos/id/107/800/400.jpg">
<p>Block of text </p>
<img src="https://i.picsum.photos/id/106/800/400.jpg">
<img src="https://i.picsum.photos/id/17/800/400.jpg">
<p>Block of text </p>
<img src="https://i.picsum.photos/id/108/800/400.jpg">
<p>Block of text </p>
<img src="https://i.picsum.photos/id/104/800/400.jpg">
<img src="https://i.picsum.photos/id/108/800/400.jpg">
<img src="https://i.picsum.photos/id/175/800/400.jpg">
I'm making a website and I've come across this problem: I need an image with dynamic size (25% to be exact) to have some text to the right of it and some under it.
I know that text can be put to the right of the image using float: right, but that makes it impossible to put any text always under the image.
Here's a jsfiddle: https://jsfiddle.net/7r51y7d4/2/
Since the image has a dynamic size, I can't just add lots of line breaks, because not only would the code be ugly, but it wouldn't work well on any device with a different screen resolution than mine.
Putting the image and the right text in a div won't help because the div will only wrap around the text, leaving the image sticking out through the div's border.
If JavaScript is needed, then so be it, however, I need a PHP-free solution. (pure HTML/CSS would be nice, though)
Looks like you want the div with clear: both CSS rule, for more info: https://www.w3schools.com/cssref/pr_class_clear.asp
img {
float: left;
margin: 8px;
}
.clear {
clear: both;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
I want this text to be under the image
</p>
And here is the fiddle: https://jsfiddle.net/7r51y7d4/4/
Simply use clear:both to clear floating and the second text will go under the image :
img {
float: left;
margin: 8px;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
I want this text to be under the image
</p>
You can use the clear property to specify that the text should be inserted after floating elements.
<p style="clear: both;">
Lorem ipsum
</p>
JSFiddle: https://jsfiddle.net/7r51y7d4/3/
Target your second paragraph with CSS and use clear:both;
FOR EXAMPLE:
HTML Code:
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<p id="secondParagraph">
I want this text to be under the image
</p>
CSS Code:
img {
float: left;
margin: 8px;
}
#secondParagraph {
clear:both;
}
I would also set your 25% width with CSS as well. It is best to do all styling externally with CSS, instead of in-line with HTML. Easier to manage.
Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.
I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.
Text Description.....
Description..........
Description.......... Image Goes About Here
Description..........
Description..........
Does anyone know how to do this off the top of their head? Thank you.
The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.
img, p {
display: inline-block;
}
<img src="image.png" />
<p>
text left
</p>
use padding and float...
I.e.
<div id="container">
<div id="text" style="padding-right: <image-width+few px>">
text text text
text text text
</div>
<img src="<imagesrc" style= "float:right" />
</div>
padding so the text doesn't overlap with the image.
this should give you the desired effect.
After the image, add a div with clear:both to return to use all the dims of the div.
for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>
edited
What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.
Below is my code and css so far:
<div id="header_number">
<h2 class="phone_title">Call Us Today!</h2>
<img src="images/phone_icon.jpg" alt="Call us Today"/>
<h2 class="large_num">1-800-555-9999</h2>
</div>
CSS:
h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}
I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.
Now Define your some element display:inline-block; or vertical-align:top
as like this
h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}
Now check to live demo
How can I right-align an image using CSS.
I do not want the text to wrap-around the image. I want the right aligned image to be on a line by itself.
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
jsFiddle.
img {
display: block;
margin-left: auto;
}
Float the image right, which will at first cause your text to wrap around it.
Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.
There are a few different ways to do this but following is a quick sample of one way.
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.
To make the image move right:
float: right;
To make the text not wrapped:
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.
My workaround for this issue was to set display: inline to the image element.
With this, your image and text will be aligned to the right if you set text-align: right from a parent container.
Easier / more organized way to do this is with some css.
CSS Above, HTML below with the snippet.
div {
clear: right;
}
/*
img {
float:right
}*/
/* img part is unneeded unless you want it to be a image on the right the whole time */
<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
<h1> I support headers! </h1>
<blockquote> And blockquotes!! </blockquote>
and hyperlinks!
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>
</html>