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
Related
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.
Let say I have two elements <img> and <p> as
<img style="background-color:#ffffff;width:250px;height:auto;float:left" src="http://somesite/p3.png" />
<p>
alibabaanakjalanan.</p>
Currently, the paragraph content is shown exactly nex to the image. How can I set some spacing between the elements ?
If you are floating the image you all you have to do is give it some margin-right, I would advise moving away from adding the styles inline by maybe giving the image a class something like this although my classname is very weak:
CSS
.img {
background-color:#ffffff;
width:250px;
height:auto;
float:left;
margin-right: 20px;
}
HTML
<img src="http://somesite/p3.png" class="img" />
<p class="para">alibabaanakjalanan.</p>
In action http://jsfiddle.net/PqWAh/1/
This is best practice for seperating styles from markup
Add margin for img.
margin-right:20px;
So code would be
<img style="background-color:#ffffff;width:250px;height:auto;float:left;margin-right:20px;"
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.
For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.
means the text should be vertically centered always. I don't want to add extra span
<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>
I want to achieve with this html.
Edit
And I don't want to give fix width and height to any element
Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/
I've used it myself, and it works perfectly.
try with
HTML
<div>
<img src="" height="155px" width="155px" style="float:left">
<div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>
CSS
.imageText {
display: table-cell; // this says treat this element like a table cell
vertical-align:middle;
border:1px solid red;
height:150px;
width:150px;
text-align:left;
}
DEMO
Note: width and height matters
I really like the method described # http://reisio.com/examples/vertcenter/
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>