I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of a GIF image:
.uiComposerAttachment, .nub {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top;
height: 7px;
width: 11px
position: absolute;
left: 2px;
top: 18px;
}
But I couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?
I made a fiddle that mimics the facebook status box...
http://jsfiddle.net/UnsungHero97/mFuD4/5/
I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.
Facebook actually uses a <textarea> element and the way they take care of the border is simple.
The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!
Regarding the triangle...
If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...
How can I create a "tooltip tail" using pure CSS?
... and here are the answers:
answer 1
answer 2
answer 3
answer 4 (this one is REALLY cool!!!)
I hope this helps.
Hristo
Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
A similar question has been asked before though...
The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.
As for the triangle it is just a css background inside the li (the items status, photo, video, link, etc are a list). The triangle is this element: <i class="nub"></i>. It is then positioned absolute to sit at the bottom of the list which has the form just below.
Thanks for your useful hints,
I finally managed to solve it in a four-liner:
#type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */
position:absolute;
left:100px;
}
Greetings
Chris
Related
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
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
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.
I would like to know if there is a framework that can make standard html forms look more web 2.0 style, I would like to have rounded corners on text boxes and a more casual looking submit button, other than the out of box html one, which looks very old school.
If you know of something that's quick to implement, and open source, thank you in advance.
Try NiceForms a Javascript library for styling forms.
Or JqTransform for jQuery.
You can find some other resources below:
http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html
http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/
http://devsnippets.com/reviews/using-jquery-to-style-design-elements-20-impressive-plugins.html
You will have to style the form elements with a combination of css and image backgrounds. This is fairly easy to do though and you should be able to find a lot of examples out there...
http://www.assemblesoft.com/examples/form/
http://pupungbp.erastica.com/css/rounded-corner-input-form/
It's called CSS.
The plain old HTML look is created by the default CSS settings. If you want to change the look, then you need to change the CSS. Find a website that has a look similar to what you want, and look at the HTML source. You will see a lot of CSS near the begining wrapped by STYLE tags. For instance:
<style type="text/css">
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
width: 180px;
}
</style>
In order to get the actual rounded corners you are going to need some images that can cover the sharp corners. In the example CSS it refers to a single image of a box, but generally you will need four corner images, and four separate line images (top, bottom, left, right).
Check this article about creating forms with rounded elements: http://www.picment.com/articles/css/funwithforms/
Regarding rounded corners, you can use a background image which is rounded off using transparencies or if a user is using mozilla based browser or opera, you can use:
#formbox {
-moz-border-radius: 5px;
background-image: url('roundededges.jpg');
}
In your CSS to add rounded corners to any div. Either that or use some simple flash.
I have an href in HTML that I dynamically produce from a server. I have designed a nice rounded corner gif image that I would like to use as the background i.e. put the text (in white) over the gif image and have it still linkable.
The current html looks like:
<h2>
<!--img src="images/greenback.gif"-->
<a id="site-title0" class="titletext" href="#">
Alligator Creek, Bowling Green Bay National Park
</a>
</h2>
<div id="descrip0" class='description'>
20km S of Townsville. $4.85/night. Gates close...
What is the best way to do this with CSS? It seems I could either use relative positioning to move the text over the background image, but in early experiments, this affects the rest of the flow on the page.
Or, maybe using CSS background-image is the best way?
As Daniel says, really:
a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
background: #fff url(path/to/image.gif) top left no-repeat;
text-align: center;
line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */
I'd also -and this may simply be personal habit, affectation and received 'wisdom'- suggest using .png rather than .gif. But, as noted, it's likely a personal and subjective thing.
Answer edited in response to timbo's comment.
Also, and this ain't particularly pretty, there's a code demo here: http://davidrhysthomas.co.uk/so/a-img-bg.html
You have to set the link to display: block
display: block on the a or attach the background image to the h2. Either way, be sure to set a background color on the a or the h2 if you're using white text. If some one has CSS on and images off, they wont see your link. Means you may need to fill in the corners of your rounded corner image to the bg color of the page.