CSS: Vertical-Align text? - html

I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?

The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)

You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.

Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.

I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.

There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.

You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design

You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.

Related

show background of empty span

Let's say that I have a span and I set an image as the background of the span like this:
<span style="background:url("my_image.png") no-repeat;"></span>
As you can see above, my span is empty. If I put some content in my span like:
<span style="background:url("my_image.png") no-repeat;">Some content...</span>
I can see the background image of the span with no problem. But If I leave the span empty I don't see the background image. I figured that I could solve this issue by adding some padding to my span like:
<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>
But is there another way I can do this without adding some padding to my span and keep my span empty?
Thank you
You get the same effect by using inline-block but setting width and height instead of using padding.
<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>
Also, something else that could trip you up is you are using double-quotes inside of an HTML attribute, which would confuse a parser and could lead to unexpected results. I've changed them to single quotes in the code I posted above, although no quotes would do just as well.
just don't make it empty: put a 'blank' inside. There are three ways, to do that:
simple space and add style white-space: pre; to it
Non-breaking Space or  
The non plus ultra is, to let css do the trick for you:
add this style to your span:
:before {
content: "\200D";
display:inline;
}
What happens:
you add a content before (or better "in front inside") your span, that displays a ZERO WIDTH JOINER, and your span is not empty enymore
By default spans are inline page elements (rather than 'block' elements). This means they won't take up any more space in the page than that assigned to them—for example, if you place text in them (as you have found). To achieve what you want, you need a little CSS to define a height and width for the span, but you also need to make it a block element so that it is rendered consistently.
Alternatively, you could switch to something like a div, which is already a block element. Note however that defining a block element means it will take up space in your page. If you want something more dynamic consider some on-the-fly manipulation of the element with Javascript or similar.
(Either way, ignore the advice elsewhere on this page about single and double quotes in HTML attributes: that is utter nonsense).
try
<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>
You have to specify a width and height to show the background. When you're typing something in it you force both with the text.
<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>
You should set a width and height.
In the following SO-Question is a tip, how to get the size of the background-image: How do I get background-image size in jQuery

Fixing html and css

First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.

HTML for sprites

So I've setup Compass for creating automatic sprites with SCSS. All goes well, it generates some nice CSS for me :-
.icons-sprite, .actions-new, .actions-edit, .actions-save, .actions-delete, .actions-refresh {
background: url('/content/themes/admin/images/icons-s0336d5eb89.png') no-repeat;
}
.actions-new {
background-position: 0 -48px;
}
... ... ...
Now I am creating a table, and in that table there is a "Action column" where you can perform functions on rows (delete or edit).
What is the generally accepted way (in html 5) for showing these buttons using sprites?
I've explored a few options and ran into a few problems
span I can't get this to show unless I place it in display: block mode and if I do that it inserts new lines after the item, and I don't want to have to float everything
div for some reason this one doesn't even show
img The biggest issue I am seeing with this one is the requirement for a src field, this means that I need to duplictate the url over and over again.
What do other people use for sprites inside links?
Use span and display: inline-block. This will make the span behave like an image, so you can apply vertical-align: middle. Support goes all the way back to IE6 if you use it on an inline element.

Change 'src' value by css for input tag with type="image"

Is it possible to change the value of src attribute of <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> by css?
The problem is:
I want to specify which pic will be shown as submit button just using css (so the design team will change only css files!).
If I use the alternative way like <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/> and specify the background of this element in css - it doesn't work well if pics are disabled. - No any alternative text is shown instead of pic. However the first way solves this situation...
Please advice something
Thanks.
Here it is: http://jsfiddle.net/kizu/66JXn/
Some notes about this solution:
Use <button></button>, 'cause it can include other blocks.
You'll need a bit of extra code to make all these work in Fx and IE:
For Fx you need an extra wrapper inside (there are positioning bug) and some extra -moz- properties reset.
For IE you must shrink the original button, 'cause there are some extra padding that is hard to remove.
You place the text and another element inside, that would overlay the text. So when the images would absent, the text would be accessible.
That's it :)
No, and this is bad practice. CSS is for static content only.
What you should do, is define a template file with variables in it such as:
template.js
my_backgroundImage = "url('somepic.png')";
then your file would load
x = document.createElement('image');
x.src = my_backgroundImage
Attribute selectors might work, but they aren't very flexible. Try this one:
img[src=""] {
background-image: url('none.png');
height: 100px; /* Height of BG image */
width: 100px; /* Width of BG image */
}
It doesn't change the image's src= attribute, but it performs the same function.
Here's my idea.
You can use JavaScript to read the stylesheets of <img> tags, and modify them accordingly.
I'm talking about a class whitelist, like big, small, center and all other classes applied to the images are interpreted via JavaScript. The design team could use CSS, but it would not render in the expected manor, like this (Python + JavaScript):
for every <img> tag:
if tag.classes contains class not in whitelist:
for every class not in whitelist:
this.src = newClass.backgroundImage;
this.removeClass(newClass)
It reads the CSS for the background-image property, but it just steals the URL of the image and sets the src= attribute using that URL. Then, the JavaScript would delete that class, causing it not to render.
(This is a problem for which JS is the solution, but ignoring that:)
One option is to wrap the button and an extra div (lets call it div.overlay) in a parent container.
Set the container to to position:relative.
Set the button to only display text, as usual. Set the div.overlay to position:absolute, width and height to 100%, and left and top to 0, and a z-index higher than the button. Set the image you want to display as the background-image of div.overlay.
With images enabled, the user sees the image, and the image can be changed using only CSS.
With images, or CSS disabled, the user only sees the plaintext submit button.
You might have to do some trickery to get clicking div.overlay to submit the form, perhaps just make div.overlay a duplicate submit button. Also, who knows what Googlebot makes of overlay techniques like these.
It's ugly, but the only pure CSS solution that immediately jumps to mind is a kind of image replacement with relatively poor support. That's using :after. It's kind of a poor practice due to the misuse of :after, and the support is pretty iffy, and I think it'd be iffier for an input element, based on the last time I tried to use :after on an input...
.cssclass,
.cssclass:after{
display:block;
width:100px;
height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
position:absolute;
top:0;left:0;
content:url("button.jpg");
}
See http://www.rachaelmoore.name/best-practices/css-image-replacement-ii/ for more.
Or setting the default src to a shim and always using CSS to set the desired button as a background image. Which I just noticed you've already thought of. I imagine that should work just fine.
Ok... So I hate it when I ask a specific question and, instead of answering it, they give me some crappy work-around instead of answering the original question that I asked... But for some reason, I've decided that I'm going to do it to you.
If I understand the problem correctly, you just want to have a form button with a background image and if the background image doesn't load, you want some sort of alt text displayed to the user with the caption of the button? If that's not right, stop reading and "down arrow" me.
In apps that I've made, I've always just styled the input with a background image, but left it up to the HTML control to insert text... It's good for three reasons... buttons can be styled, developers can change the value of the text on the button without having to bother me to make a new image, and if the background image doesn't load, the button is still readable.
So my html was like this:
<input type="submit" id="btnSearch" class="searchButton" value="Search">
then my class may read something like:
.searchButton {
backgorund-image: url('searchButtonImage.png');
font-family: sans serif;
font-size: 10px;
color: #808080;
padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
width: 100px; // you can put this as in-line style if you make a more generic class
}
If you want to make the BG more generic, move the width of the button to make it in-line on the button, so the devs can change the width with the text value and make your generic bg image like 200px wide.
Depending on the browser, the text might not be as nice and ani-aliased as in others, but IMO, it's a small price to pay.
(Disclaimer: Please forgive me if you copy and paste this and it doen't work. I just hand-wrote it without testing it.)
Can you do it with javascript?
I have an image on my page that, when clicked, will show another button, and also change the src attribute of the first.
Here is what I use:
<script type="text/javascript">
function apps()
{
var element = document.getElementById("app_frame");
if (element.width != "0%")
{
parent.document.getElementById("frame").setAttribute("width","100%");
parent.document.getElementById("app_frame").setAttribute("width","0%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
}
else
{
parent.document.getElementById("frame").setAttribute("width","65%");
parent.document.getElementById("app_frame").setAttribute("width","35%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
parent.document.getElementById("wthrbutton").style.visibility="visible";
}
}
</script>
What that says, is: set the "app_frame" as variable "element",
then check variable "element" for its width.
if its width is not 0, then it gets the element "frame",
by using getElementById, and then sets the attribute "width" to 100%
you can see slightly lower down that you use the same method, but use the SRC attribute rather than width, and set it to whatever you want, in my case, site/main/images/apps/show.gif
hope that helps

How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com