I am working round a custom CMS called phpVMS. In this, there is a bubble box that displays when clicked on an icon on the map. However, the text align seems to be centered instead of going to left? I've linked a picture:
The code that I am using for the bubble span is:
<span style="font-size: 9px; text-align: left; width: 100%;">
<strong>Pilot In Command: </strong> <%=flight.pilotname%><br />
... so on.
</span>
I've tried to look where text could be centered, but cannot find anything sadly in the css or the html. I have also noticed that width and font size work, but text-align is ignored. I hope you can help me.
Thanks and regards
You can't use text-align within a span as it is not a block-type element. Try replacing your <span> with a <div> of the same parameters.
Related
I'm trying to accomplish a dynamic button which is always square, and based on the height of the text it is with. Something like this:
Basically the icon stays the same, but the size of the box varies, based on what size of text it is next to. The icon should be centered vertically and horizontally. To get it to look like the image, I had to manually put in everything, but I want it to work whether the font-size is 20px, 70px, or anything else. Basically, I don't know the height, but it should work is the goal, and that seems to be what is different in this question from others around the site/web.
This is the HTML code:
<!-- This may be any font size, but the result should be like the image above. -->
<div id="name">
<!-- This holds the text -->
<span>Amy</span>
<!-- This holds the image, and the anchor is the box. -->
<img src="/images/edit.png" alt="Edit Name" />
</div>
I've tried following this tutorial, but I can't get it to work for some reason. Everything I've tried (which is too many things to enumerate here) either gives me the right height, but wrong width, the exact size of the image, or the image as the size of the square.
Is this possible with just CSS, or am I going to have to resort to JavaScript?
Thanks.
Something like this should do it. You may have to change the size a little depending on the font. Also, you may have to vertical-align it.
.edit {
display: inline-block;
width: 1em;
height: 1em;
}
.edit img {
display: block;
}
DEMO
HTML:
<button>
<h2 id="name">
<span>Amy<a href="#" class="edit">
<img src="/images/edit.png" alt="Edit Name" /></a></span>
</h2>
</button>
CSS:
button img {
vertical-align: middle;
}
h2 {
font-size:20pt;
}
Is this what you want?
I am trying to align two links under an image as text, the HTML I got works perfect in Chrome and Firefox, however not in IE where 90% of our internal users are.
here is the code..
<div style="float: right;"><img src="sites/default/files/recog.png" width="419" height="465" style="border: 6px double #7a9a01;" /><br />
<p style="text-align: right;">Click to Nominate Online!</p>
<p style="text-align: right;">Print your nomination form here.</p>
</div>
<h2>"A World of Thanks!" program</h2>
<p>The “World of Thanks!” program is a collection of...</p>
In Chrome the above HTML shows the text and content on the left, and the image will show up on the right, with the link text underneath the image to the right.
In IE, the links show up first on the left, then the text, the image shows on the right as it should.. but somehow in IE the links are not going under the image instead they are going left of it.
Any idea? what am I doing wrong?
wrong in IE.. https://oppy.com/it/ie_broken.png
correct in Chrome.. https://oppy.com/it/correct_chrome_only.png
I don't have IE to test, but try setting a fixed width for the div.
<div style="float: right; width: 431px;">
a tags are naturally inline-block trying setting your a to display: block; Same with image tags. target the image in your css and add display: block; to that as well
I dont have IE but try this:
JSFIDDLE
Hey there my question is pretty simple i'm trying to do a button exactly like the one you can get in vb form. For Example I want some text in my button and I also want an image in it. The only problem is that in VB.net there is only two type of button the first one is button with an image in it and no text at all and the second one is one with only text in it. The only way i've found is putting the image in the background. Unfortunatly the image is taking all the spaces in the button. I'd like to know if there's a way to align the back-ground image to the left or to right for example
Here my HTML code for the button:
<asp:Button ID="btn_LoadReport" runat="server" Text="Charger"
style="margin-left: 0px; margin-bottom: 0px; margin-right:0px;"
Height="35px" Width="102px"
CssClass="Charger" />
And this is the css code that I Have for the moment:
.Charger
{
background-image:url(report.png);
background-repeat:no-repeat;
text-align:left;
}
Thx
I've tried putting the image in the background with a css but my text is over the images
This is what the background-position attribute is for.
<button>Text</button>
button {
padding-right:40px;
background-image:url(myImage.png);
background-repeat:no-repeat;
background-position:center right;
}
Note that the padding-right property is used to prevent the text overlapping the image.
JSFiddle example.
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.
I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:
alt text http://preview.moveable.com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
I have a height and overflow-y:scroll on the UL (likely not relevant)
I have a height set on the LI that is large enough for the placeholder image plus spacing.
I have vertical-align:middle on the image to get the text in the right place, almost
The rest is just margins and borders
Am am NOT using floats
How can I get the text to wrap properly, perferably without more markup?
If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing
li {
background: url(/images/foo.jpg) center left no-repeat;
padding-left: barpx;
}
you could also use a margin on the li to allow for spacing to the left of the image inside the ul
if the images are different i would simply apply a class to each li to distinguish the difference
edit for seo friendlyness:
add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.
li img {
display:none
}
As #graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.
If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:
<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>
Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.
Seems to me you could float the image left.