I have simple image of red indicator and I put to the image title, the html code is as below:
<img alt='' src='imageUrl' title='myExplanation' />
The problem is that the title is align to the right, you can see it in the following snapshot:
I want the title to align to the left how can I achieve this?
Also you can try some custom tooltip plugins. Like jquery tooltip
You cannot, title aligns relative to the position of your mouse pointer. OS or the Browser has control over this feature and you cannot change the default behaviour.
If you want, then create your own div element, add the content to it, and then use CSS to align it to the left
div.title {
position: absolute;
left: 0;
}
..this will float that div to the left side and use more CSS to stylize it.
Another way
Another way of doing this functionality is to use a bootstrap, twitter bootstrap would be a good start. It is a framework for CSS, JavaScript and you can use that framework to create the Title tags which are more stylized by the developers and is good for UI and UX too. Try that one if you don't want to create your own from scratch.
http://getbootstrap.com/2.3.2/
img[title]:hover:after // while hover
worked for me
<style>
img[title]:hover:after {
content: attr(title);
border:1px solid #ccc;
background-color:#aaa;
color:#f00;
}
</style>
The problem was that my browser was in Hebrew version which by default aligns text from right to left I changed my chrome to English version and it is now working! Thanks for all the answers!
Related
Consider this html:
<div class="logo-b"></div>
And this CSS:
div.logo-b {
content: url(http://placehold.it/350x150);
height: 150px;
border: 1px solid darkred;
}
I am trying to display an image using CSS. The image is not being displayed. Please see this jsfiddle to see what I mean. What am I missing please?
EDIT: It appears that Chrome renders the fiddle as I provided it above fine, but Firefox (which I use) does not. If I add :before or :after to the class name in my CSS the image displays in Firefox. Could someone shed some light on why this would be please?
EDIT: I am using the wrong construct to place the image on my page. In the context of what I am doing I should use the <img> html tag. The CSS content construct uses :before and/or after to place content, including images, but I understand these are used in specific contexts. I simply want to display a logo.
This property content is used with the :before and :after
pseudo-elements to generate content in a document. -W3C
I think the behavior in Firefox is correct.
In the showcase example for http://fractalsoft.net/primeext-showcase-mojarra/sections/layout/tabbedLayout.jsf
tabs are centered right, I can't figure out how to do it.
I've tried searching and applying ui-tabs styling and I can change size easily but not the tab alignment.
For example this did not work: jQuery UI tabs aligned and sharing bar with a title
This seems to be the relevant css http://code.google.com/p/primefaces-extensions/source/browse/primefaces-extensions/trunk/src/main/resources/META-INF/resources/primefaces-extensions/layout/layout.css?r=1201
and pe-layout-tabbuttons is indeed present when I firebug the code but I can't figure out what to change.
I basically want this:
_________________|tab1|tab2|tab3|
instead of:
|tab1|tab2|tab3|_________________
cheers
It seems that this CSS does the magic:
.pe-layout-tabbuttons {
left: auto !important;
}
To see how to use CSS in JSF see here.
So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.
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
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.