I have a php function that creates a that includes some information in it and a picture (plain HTML) i want to float the picture left and the echoed php function right.
[IMG] [ blah ]
What currently is happening is the image appears above the echoed function
Here is some of the code:
PHP Function Declaration:
function create($preTag ,$name , $description , $downloadlink) {
echo " <div>
<h3>$preTag $name</h3> <ln>
<br>
<h2>$description </h2>
<br>
<h2><a href= $downloadlink >Click here to download!</a> </h2>
</div>
";
}
PHP Function Call:
create("Game:" , "Pong Clone", "A small pong clone. Completed: [Feb 21, 2013]" , "https://github.com/Bevilacqua/Pong");
CSS For div:
div {
border-radius: 2em;
background-color: #ffffa6;
border: .3em solid white;
float: right;
display: inline;
}
CSS For img:
img {
float: left;
display: inline;
}
HTML For img: (Just a test Image)
<a href="www.google.com">
<img src="http://www.dsga.org/images/tournament_sign_up_button.gif">
</a>
Check if you image isn't too big.
I tried your code and it works fine with a smaller image. With a big image (width) it will not have enough space to be next to it.
I did exactly as Patrick Brouwers and I came to the same answer : Your image is just too big. Here is a Fiddle to show it.
http://jsfiddle.net/kEwan/
float:right;
and
float:left;
work fine.
Try to resize the width of the result windows, and you'll see it.
Note : Be careful with you link of the tag, because it should have double quotes around it.
Related
I've been on this problem for hours. I'm using PHP to display some HTML. It works, but I can't maintain the text indent on a long wrapping line of inserted text.
I've recreated the issue in HTML with the same issue for your convenience.
<style>
.indent {
padding-left: 1.5em;
text-indent:-1.5em;
}
</style>
<html>
<main>
<b class="do_something">X</b> <span class="indent"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </span>
</main>
</html>
Now I've come close to fixing it using a display block, but alas the block creates a new line in the span and I need to stay on the same line as the X, which is important. I also tried flex but no joy.
Any ideas? Thanks.
Here's my php, which probably isn't relevant.
echo '<b class="do_something">X</b>', str_repeat(' ', 3);
echo '<span class = "indent">', nl2br($insert_words), '</span><br>';
echo '<hr>';
//And my other CSS:
.indent {
display:block;
margin-left:25px;
}
The problem is that you are using span which is an inline element.
You also do not need text-indent. It is giving you unexpected results because it only applies to one line of text, it has no effect on the lines that wrap.
You could achieve the desired result using flex like on the following example. I added some background color so you can see how the elements align themselves.
.indent {
padding-left: 1.5em;
text-indent: -1.5em;
background-color: #f8d7da;
}
.do_something {
background-color: #fff3cd;
}
#flex-container {
display: flex;
}
#flex-second {
padding-left: 1em;
background-color: #d4edda;
}
#x { background-color: #cce5ff; }
#fixed-width-x {
float: left;
}
<p>Example using flex</p>
<div id="flex-container">
<div id="x"><strong>X</strong></div>
<div id="flex-second"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </div>
</div>
<p>Your example below</p>
<main>
<b class="do_something">X</b> <span class="indent"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </span>
</main>
I'm having some troubles aligning a piece of text along with an image that should be ( my guess ) within the same tag.
It is supossed to look like this: (Ignore the black stripe)
but it is currently looking like this:
The HTML for it is:
<span class="size-chart-disclaimer">If in doubt, measure your similar<br>
style garment and match our grid.
<img src="{{'we-use.gif' | asset_url}}"/></span>
and the CSS is:
.size-chart-disclaimer img{
float:right;
}
Could someone shed a light on the best way to achieve this ?
I suggest to use a tag for the text, and then style it.
.size-chart-disclaimer img {
float: right;
}
p {
width: 240px;
display: inline-block;
margin-top: 0px;
}
<span class="size-chart-disclaimer">
<p>
If in doubt, measure your similar
style garment and match our grid.
</p>
<img src="http://www.placehold.it/50x50"/>
</span>
Just placing the image in front of the text does the job aswell:
.size-chart-disclaimer img{
float: right;
}
<span class="size-chart-disclaimer">
<img src="http://www.placehold.it/100x50" /> If in doubt, measure your similar
<br /> style garment and match our grid.
</span>
Add following css to yout img tag: vertical-align: middle;
See this JSFiddle
Hello is there a simple way to align text inside span?
I found several solutions but nothing seems to work for me. Here is my code:
<?php echo Yii::t('default','Tax Amount').': ';?>
<span style="border-bottom: 1px solid; ">
<?php echo Yii::app()->locale->numberFormatter->formatCurrency($taxamount, 'EUR');?>
</span>
</span>
All I want is to align the $taxamount to the right and leave Tax Amount to the left as is. I thought it was pretty easy at first but nothing works! I also tried it with div and it worked but it messes with anything I have below that. I have three more echo’s like this below that code. I'm not very proficient with CSS and I would appreciate any help.
My full code is something like this:
<?php echo Yii::t('default','Amount').': ';?>
<span style="border-bottom: 1px solid;">
<?php echo Yii::app()->locale->numberFormatter->formatCurrency($model->credit, 'EUR');?>
</span>
<br>
<?php echo Yii::t('default','Tax').': 23%';?>
<br>
<?php echo Yii::t('default','Tax Amount').': ';?>
<span style="border-bottom: 1px solid; ">
<?php echo Yii::app()->locale->numberFormatter->formatCurrency($taxamount, 'EUR');?>
</span>
</span>
<br>
<?php echo Yii::t('default','Total').': ';?>
<span style="border-bottom: 1px solid;">
<?php echo Yii::app()->locale->numberFormatter->formatCurrency($total, 'EUR');?>
</span>
I comment out everything and I only used one solution as suggested below.
So my code now is like this:
p>span {
display: inline-block;
width: 50%;
}
p>span:last-child {
text-align: right;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
<p><span>Tax Amount</span><span>EUR 12.50</span></p>
I use mpdf extension in Yii to print the results in pdf. So this is all my code now plus the mpdf extension.But still nothing happens!
A <span> is an inline element, the text align will work, but you'll need to give the element a width (which won't work, while its an inline element).
There are a few ways to do it, one is to display them as inline blocks inside a paragraph:
p>span {
display: inline-block;
width: 50%;
}
p>span:last-child {
text-align: right;
}
<p><span>Tax Amount</span><span>EUR 12.50</span></p>
Another way is to float them: (but I personally prefer the first method)
p>span {
display: block;
float: left;
width: 50%;
}
p>span:last-child {
text-align: right;
float: right;
}
<p><span>Tax Amount</span><span>EUR 12.50</span></p>
If your left-aligned text is inside another element (like my <div> below), you should be able to add the 'float:right' CSS style to your <span>.
<div>
Left-hand text <span style="float:right">Right-hand text</span>
</div>
float is typically used for images, but it can be used with span tags. It works by literally floating your <span> tag to the right edge of your containing element.
This should give you the behavior you're looking for, but you can also check out this question. It looks like they're trying to accomplish something similar.
I have some code which displays images from imgur.
When hovering over an image, I want the title attribute to appear at the top of the image.
I have achieved all of this, but when the text becomes visible, it only appears on one line and writes over itself when it runs out of space, as in the image.
I would like the text to start on a new line once it reaches the end of it's container.
I have tried adding word-wrap: break-word; to each of the CSS selector below, as well as to a P selector (as the link is wrapped in a p-tag).
Any advice on how to resolve this is much appreciated!
I have the following html:
<section id='photos'>
<p>
<a class='hovertext' href='http://i.imgur.com/gallery/eWlGSdR.jpg' title='Opened my window shade while flying over Japan, noticed a volcano was erupting. (OC) [2448x2448]'>
<img src='http://i.imgur.com/eWlGSdR.jpg' alt=''>
</a>
</p>
And the following CSS:
a.hovertext {
position: relative;
text-decoration: none !important;
text-align: left;
}
a.hovertext:before {
content: attr(title);
position: absolute;
top: -1;
padding: 0.5em 20px;
width: 90%;
text-decoration: none !important;
color: red;
opacity: 0.0;
}
a.hovertext:hover:before, a.hovertext:focus:before {
opacity: 1.0;
}
As Dinesh said in the comments, this was caused by poor code awareness, as elsewhere in the code, I was calling 'line-height:0;' on the #photos element.
Removing this solved the problem.
i think you coul use some java script on this, if you only want to make it add a extra line to it, correct me if im wrong.
Here's an example what i think you mean:
First add this text next your class="hovertext" :
id="HoverText"
Add this part after your body or paste the code between script into a .js file and call it with
<script src="filename.js"></script>
<script>
HoverText=document.getElementById("HoverText");
HoverText.onclick=function(){ClickToShowText()};
function ClickToShowText(){
HoverText.innerHTML+="<br>New line with text";
}
</script>
just use the break tag at the end of the text that's supposed to be on the first line.
</br>
easy
I'm very new to web development, I have a code like this :
<style type="text/css">
span {
background:red;
background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
}
</style>
<span>
Contents.
</span>
I get the output but the image is been placed over Contents text. I tried with :
background-position: 25px;
But that is making the image to disappear! But what I was looking for is :
Contents . . . . . . . . . . . . . my_image
(note that . in above is space)
Where I'm making the mistake?
Thanks in advance.
Remember that <span> is an inline element, which is not the correct markup to use for items that you wish to display in a block manner. For that, you should use a <div>. That being said, you can use text-indent: 25px; to move your text to the right. Alternatively, you can move the new <div> to the right using left: 25px;. Remember that left will tell it how far from the left border you wish to place it. Then, you can place the text in another <div>:
<style type="text/css">
div {
display:inline-block;
}
div.image {
background:red;
background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
left:25px;
}
</style>
<div class="box">
Contents.
<div class="image"></div>
</div>
If you don't need that your image is a background-image you can apply this:
CSS:
<style>
div#box{
width: 100%;
}
img#image {
float: right;
}
</style>
HTML :
<div id="box">
<span id="content">
Contents.
</span>
<img src="bkg.jpg" alt="Image not available">
</div>
I am also agree with #L0j1k that span is a inline level element. Why you are placing some content inside a span and then applying a background image in that span. Anyways please check the jsfiddle link
DEMO
http://jsfiddle.net/saorabhkr/BvMyg/
Inline:-
<span>
//content
<img src="images/skin/exception.png" style="float:right">
</span>