Form Label Text-Align Center
I am having troubles aligning the label of my form to center. When the page loads, it looks like it wants to be center aligned, but then aligns to the left. I can't tell which CSS is making it do this. Would you be able to help me narrow it down?
link is http://www.thelightingpower.com/donate-now
That is because of the attribute position: absolute; that gets added at runtime with your jQuery custom function.
To fix, Find this in your custom.js file:
$('textarea').each(function() {
if( $(this).val() == ''){
$("label[for="+$(this).attr("id")+"]").css( "position", "absolute" ).css("z-index", "2");
}else{
$("label[for="+$(this).attr("id")+"]").hide('slide', 'fast');
And replace that chunk of code with this:
$('textarea').each(function() {
if( $(this).val() == ''){
$("label[for="+$(this).attr("id")+"]").css("z-index", "2");
}else{
$("label[for="+$(this).attr("id")+"]").hide('slide', 'fast');
Similar Messages
-
FormItem label left align issue
hi experts,
I am very new to Flex. I am using Flex API and i have some issue with FormItem. I cannot make the labels left align. I found a style in web which is as follows.
<mx:Style>
.rightAlignedLabels {
text-align: center;
FormItem {
labelStyleName:rightAlignedLabels;
</mx:Style>
I want this to be used in my action script.But i do not understand to set this style via the API methods. I tried different ways as follows.
new FormItem().setStyle(..,..);
But still i coudn't figure it out. Please can sombody help.
Thanks,
HarshiFormItem
labelStyleName : myFormItemLabelStyleName;
.myFormItemLabelStyleName
text-align : left; -
New to CSS, text-align and line-height ok in 'Design', but not in browsers (IE 10 & Chrome) on Win8
[DREAMWEAVER CC]
I'm now learning CSS, and find that where I specify in an external style sheet
h1 {
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
text-align:center;
color: black;
font-size: 1em;
font-weight: normal;
font-style: normal;
line-height: 3.0;
letter-spacing: 0px;
word-spacing: 10px;
text-shadow: 3px 3px 5px #333;
text-decoration: none ;
text-transform: none;
That, in DW Design, they look fine, but in Windows 8, IE 11 and ChromeVersion 31.0.1650.63 m that the text-align: center; and the line-height: 3.0; are ignored.
I work around by specifying <tr align="center" height = "77"> shouldn't the text-align: center; and the line-height: 3.0; be specifiable in my CSS??
Thanks for any help!
<tr height="77" align="center">
<h1>
<td bgcolor="CornSilk">1/28/2014</td>
<td>the Sky</td>
<td>Fate is the Hunter</td>
<td >Ernest Gann</td>
<td >John</td>
<td >Jessica</td>
<td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1_1?s=books&ie=UTF8&q id=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
</h1>
</tr>hemmi1 wrote:
[DREAMWEAVER CC]
I'm now learning CSS, and find that where I specify in an external style sheet
Not sure what it is you are trying to do but what you have at the moment is invalid code which is most likely why it doesn't work cross browser. (of cousre this css does not help - line-height: 3.0; - 3.0 what? - px, ems?)
Here's an example below of how you could do it. Give your table a class (below it is called .myTable) then you can start styling the <td> cell, and anything inside it by appending the element like an <h2> tag to the class name - .myTable h2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.myTable {
width: 900px;
margin: 0 auto;
.myTable td {
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
width: 150px;
.myTable h2 {
margin: 0;
padding: 0;
text-align:center;
color: black;
font-size: 1em;
line-height: 50px;
word-spacing: 10px;
text-shadow: 3px 3px 5px #333;
.myTable a {
display: block;
text-align: center;
</style>
</head>
<body>
<table class="myTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><h2>1/28/2014</h2></td>
<td><h2>the Sky</h2></td>
<td ><h2>Ernest Gann</h2></td>
<td ><h2>John</h2></td>
<td ><h2>Jessica</h2></td>
<td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1 _1?s=books&ie=UTF8&qid=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
</tr>
</table>
</body>
</html> -
I need help with aligning text in main spry bar menu. Using DW 5.5, I have a 7 bank bar and 2 have 2 lines, remainder have 1. I need to BOTTOM align everything. I've look through forums, help menus, and u-tube and can not find this answer.
I would also like to not have fixed widths, but widths varied per text length, but when I do that, obviously the 2 lined text banks turn into one line.To give you an idea of what I would do, have a look at the following by copying and pasting into a new document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Therapy To Go Home Page</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
margin: 0;
padding: 0;
html {
background: #FFF;
height: 100%;
color: #000;
font: 100% Verdana, Geneva, sans-serif;
body {
background: #FFC;
width: 800px;
margin: auto;
font-size: 0.85em;
#header {
height: 148px;
background: #C2A4FF;
#nav {
background: #EEE;
height: 3.6em;
#aside {
width: 197px;
float: left;
padding: 20px;
#article {
margin-left: 240px;
padding: 20px;
background: #C2A4FF;
ul.MenuBarHorizontal li {
font-size: 1.05em;
width: auto;
text-align: center;
ul.MenuBarHorizontal a {
background-color: #EEE;
padding: 0.5em 1.1em;
color: #333;
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#"><br>Home</a> </li>
<li><a href="#"><br>Services</a></li>
<li><a href="#">Benefits &<br>Contraindications</a></li>
<li><a href="#">Common <br>Q&A</a></li>
<li><a href="#"><br>Pricing/Hours</a></li>
<li><a href="#">Contact/About<br>Melanie</a></li>
<li><a href="#"><br>Resources</a></li>
</ul>
</div>
<div id="aside">
<h2>This is the sidebar</h2>
</div>
<div id="article">
<h1>This is the main article</h1>
<p>Consectetur adipisicing elit, in reprehenderit in voluptate excepteur sint occaecat. Ullamco laboris nisi ut enim ad minim veniam, velit esse cillum dolore. Mollit anim id est laborum. Sed do eiusmod tempor incididunt qui officia deserunt cupidatat non proident.</p>
<p>Quis nostrud exercitation in reprehenderit in voluptate lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum. Consectetur adipisicing elit.</p>
<p>Ut enim ad minim veniam, ullamco laboris nisi duis aute irure dolor. Eu fugiat nulla pariatur. Qui officia deserunt in reprehenderit in voluptate cupidatat non proident.</p>
</div>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
</script>
</body>
</html>
Gramps -
Dear friends,
I've got this div which makes up for a left column on my page and stacked therein I've got some images with some captions underneath. Now, my problem is: I want the images aligned center within that div but the text, I need it to be justified and what happens is that if I style the div>box to center the text gets centered as well. I tried creating a new class style for the text alone but the div style overules it. What should I do?
p-s: this is DW CS4 I'm using now (to make it worse)
Thanks a lot for your help
JVIf I understand you correctlyu, you want that chocolate image to center... The easiist way I can think of is to put it in it's own div and put a class rule. So go to code view and find this
<img src="Chocolate em Cascais.jpg" alt="Chocolate em Cascais" width="170" height="242" />
Change it to this
<div class="center">< img src="Chocolate em Cascais.jpg" alt="Chocolate em Cascais" width="170" height="242" /></div>
Next in your code find this
#left_area .style4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
text-align: left;
and add this after the last }
.center {
margin:0px auto;
text-align:center;
See what that does for you.
Gary -
Hi all,
I'm trying to align the whole portal in the center, like here on SDN.
I've tried different things, like editing the framework.jsp in the com.sap.portal.layouts.framework.par.
In IE6 and 7 I succeeded to align the toplevel navigation into the center, not the main content.
Does anyone know how to do this?
Thnx in advance!Hi Ramesh,
Try adding "margin: auto" to the .portalContent CSS block and it should work in any correctly-implemented browser (Firefox, Safari, Opera).
Leave the "text-align: center" in there because I think it's needed for IE 6. Not sure if IE 7 addressed this issue or not.
Hope this helps!
Chris Bucchere | bdg | [email protected] | http://www.bdg-online.com -
Text Align and Other annoyances
I have upgraded from CS3 to CS5 and while i am mostly happy there are some really annoying bugs, features, or pieces of ill thought out logic in Dreamweaver.
I might be wrong but by default Dreamweaver is a a WYSIWYG editor. Therefore this should make it ideal for editing websites which have text in them. Lets assume that websites include single email campaigns, small static HTML brochure sites, through to large scale CMS websites. In each of these cases i might have the need to align a single piece of text to the right.
Now DW suggests everything like this should be driven by CSS. In in 90% of cases for general text layout i would agree i.e. default paragraph text size, default alignment, default line spacing, etc. These can then easily be adjusted throughout the website large or small by changing a simple bit off CSS in your style sheet.
But what if you just need 1 line of text to be different from "default" - CSS is not approrpiate here, and infact it would result in more code to achieve the same goal. why should i have to write a new style into my style sheet, and then link it with a class name, when a simple align="right" will work in that instance. In fact in all instances the chances are that piece of code will be shorter than the class="text-right" definition to apply the CSS (ignoring the CSS code too).
So why take the align buttons off the property inspector bar? Why make the developers life harder when he is using a tool to make it easier?
Another issue - which probably is more of a bug than anything. In code, Shift + Tab should outdent the code right. Highlight a block of code and this works. Why then does doing this for a single line of code delete the code?
I upgraded from CS3 because i was told that was the worst performing version of creative suite out there. And it was buggy as hell. But i am now finding that CS5 is not a great deal better - this applies through the other products too with Illustrator crashing as much as it ever did, il thought out removed features, etc. I am appalled by the quality of the new CS5 - especially as in my upgrade the fee was a good 30% more expensive than the american alternative.
And before you ask - the machine where i am experiencing this is more than adequate, Quad Core, 6gig of Ram, and on a fresh install of Windows 7.
An unhappy customer.You may need to adjust your workflow to get the most out of CSS.
I find it works much better to identify the CSS IDs, selectors and class names I will be using in the site. This bit of pre-planning gives me a basic stylesheet from which I can grab styles at will and add more to as needed.
/**BASIC LAYOUT**/
#wrapper { }
#header { }
#content { }
#footer { }
/**TEXT STYLES**/
#header h1 { }
#content h2 { }
#content h3 { }
#content p { }
#footer p { }
/**RE-USABLE CLASSES**/
.floatLt {float:left; width: 40%;}
.floatRt {float:right; width: 40%}
.clearing {clear:both}
.center {text-align:center}
.right {text-align:right}
/**LINKS**/
a { }
a:link { }
a:visited { ]
a:hover,
a:active,
a:focus { }
And if you plug all this into an external CSS file to which your HTML documents are linked, sitewide style changes take a minute or two instead of weeks and hours.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Horizontal align center in table-cell
Hello,
I'm having a problem getting to horizontally align a div (schilderij) in another div (schilderijholder).
This schilderij div has a height and width of 480px and has display: table-cell. The content of this div is an image, with different sizes on every page (there are multiple pages, it is some sort of photogallery). The images are nicely centered, horizontally and vertically, inside this div.
The containing div (schilderijholder), has a width of 100% of it's containing block, which has a variable size
The problem is, I cant get the schilderij div horizontally centered in the schilderijholder div.
Here's the simplified code. If you need the whole code, I can post that too.
<div class="leftWrapper" style="clear: none; float: left; width: 68%; height: 100%;">
<div class="content" style="margin: 40 10 50 30;">
<div id="schilderijholder" style="text-align: center; width: 100%; height: 100%;">
<div id="schilderij" style=" height: 480px; width: 480px; text-align: center; vertical-align: middle; display: table-cell;">
<img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />
</div>
</div>
<div id="pageControl">
<span class="left">
<a href="schilderijen2.html"></a> </span>
<span class="right">
<a href="02.html">Volgende</a>
</span>
</div>
</div>
</div>
What I've tried:
- "margin: 0 auto;" on the schilderij div
- "position: relative;" on the schilderijholder div and "position: absolute; left: 50%; margin-left: -240px;" on the schilderij div
But these both don't work.
Does anybody know a solution for this, or maybe has something to put me on the right way?
Thanks in advance!Let's fix your code first:
<div class="leftWrapper" style="float: left; width: 68%; height: 100%;">
<div class="content" style="margin: 40px 10px 50px 30px;">
<div id="schilderijholder" style="text-align: center; width: 100%; height: 100%;">
<div id="schilderij" style=" height: 480px; width: 480px; text-align: center; vertical-align: middle; display: table-cell;">
<img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />
</div>
</div>
<div id="pageControl">
<span class="left">
<a href="schilderijen2.html"></a> </span>
<span class="right">
<a href="02.html">Volgende</a>
</span>
</div>
</div>
</div>
Why do you need the div#schilderij at all? Seems unnecessary to me.
Then you would need the display:table-cell on the parent to this div, not on the div#schilderij, which has basically the same dimensions as the image. But I think this is all too complicated. Why not just this?
<div class="leftWrapper" style="float: left; width: 68%;">
<div class="content" style="margin: 40px 10px 50px 30px;">
<div id="schilderijholder" style="text-align: center;">
<img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />
</div>
</div>
<div id="pageControl">
<span class="left">
<a href="schilderijen2.html"></a> </span>
<span class="right">
<a href="02.html">Volgende</a>
</span>
</div>
</div>
</div> -
af:outputText How to align center.
Hi, I'm using the below tag in one of the jsf page, of an adf application. I would like to align the text to the center of the page. The inlineStyle attribute , takes the value for the center alignment, but not working. Where as other inline style attributes are working. Could some one help me to align the text to center. Thanks.
<af:outputText value="TEXT" id="ot1" noWrap="false"
inlineStyle="font-size:x-large; text-align:center; font-weight:bolder;"/>Re: Center align on the page
-
"Vertical Align Center" Text and a Shape
Hi designers,
I wonder if anyone could give me a hand with aligning text and shapes? I would like to align a number to the center of a circle. "Horizontal Align Center" works well. "Vertical Align Center", however, does not yield the desired result. The number turns out to be higher in the cycle (see figure below). The distance from the top of the circle to the top of the number zero, X, is shorter than the distance between the bottom of the circle and the bottom of the number zero. Is it possible to equal these two distances?
Figure 1: The Outcome of Vertical Align Center
Thanks,
HaoboHi Mylenium,
Thank you very much for you very prompt reply, which solves the problem very effectively.
If you do not mind, I have got two further questions.
Firstly, is there an option similar to "Align to Path: Centre" under "Type on a Path Options" that changes how text is aligned?
Secondly, does InDesign offer the aforementioned function?
I sometimes label a large quantity of locations with alphanumeric characters, which are subject to frequent changes, and therefore would like to preserve the text if possible. I have heard that manipulating text is InDesign's area of expertise. If this function is not available in Illustrator but offered by InDesign, I can jot down another reason for acquiring the latter and split the workflow in the future.
Thanks,
Haobo -
Aligning Text in Center of JOptionPane
Hi,
I am trying to display messages using JOptionPane and a JDialog.
JOptionPane pane = new JOptionPane(message,
message_type,
option_type,
icon,
options,
initial_value){
public int getMaxCharactersPerLineCount() { return default_characters_per_line; }
JDialog dialog = pane.createDialog(parent_component, title);
dialog.setVisible(true);I want to be able to control the number of characters per line which I have found how to do, and to control the alignment of the text. I have not being able to work out how to control the alignment of the text. I would like to be able have the text centered so a long line followed by a short line is displayed nicely.
I have tried using <html><center>My Text</center></html>, however, 1stly the html tags are counted as character therefore shortening the 1st line and secondly is the message is over several line then the tag are broken up and not interpreted properly.
Any assistance greatly appreciated.
Leon//Create the dialog.
final JDialog dialog = new JDialog(frame,
"A Non-Modal Dialog");
//Add contents to it. It must have a close button,
//since some L&Fs (notably Java/Metal) don't provide one
//in the window decorations for dialogs.
JLabel label = new JLabel("<html><p align=center>"
+ "This is a non-modal dialog.<br>"
+ "You can have one or more of these up<br>"
+ "and still use the main window.");
label.setHorizontalAlignment(JLabel.CENTER);
Font font = label.getFont();
label.setFont(label.getFont().deriveFont(font.PLAIN,
14.0f));extract from
http://java.sun.com/docs/books/tutorial/uiswing/examples/components/DialogDemoProject/src/components/CustomDialog.java -
Aligning Text in Center of JTextArea
This is a part of my previous question.
Is there a way of aligning text, left-center-right in the JTextArea.
Someone had mentioned JTextPane for aligning Text in the center. What is the code for this?
Thanks again for your help.I'm sorry. I am new at Java so some of these concepts that may be clear to you aren't as obvious to me.
I inserted the code as you instructed. However, I am not sure if I have to include something else.
Please advise:
import javax.swing.*;
public class HelloClassTwoLine
public static void main(String args[])
JTextArea outputTextArea = new JTextArea(); //Create listbox object
JScrollPane scroll= new JScrollPane(outputTextArea); //create vertical scroll object
===> added to original code JTextField textField=new JTextField();
===> added to original code textField.setHorizontalAlignment(textField.CENTER);
outputTextArea.setText("Hello, This is Java 374\n" + //set text in list box
"This is Java 374 with Ravi");
JOptionPane.showMessageDialog(null, scroll, //text is argument in JScrollPane object
"Java Program #2", JOptionPane.INFORMATION_MESSAGE);
System.exit(0);
thank you again for your help
} -
Changing text alignment to center.
Fo some reason, the forum search returns 0 results to me no matter what I enter. I'm sure this has been asked before, but how to I change the alignment of point text to center?
Even though it's point text it's treated the same as area text. The following works
var docRef = app.activeDocument;
var textRef = docRef.textFrames[0];
//textRef.textRange.characterAttributes.size = 28;
var paraAttr_0 = textRef.paragraphs[0].paragraphAttributes;
paraAttr_0.justification = Justification.CENTER; -
PHP Form Labels Don't align with checkbox
Help!
I can't seem to get my labels in my sign-up form to align with the checkboxes towards the bottom. This form is live at www.thectkgroup.com/signup
Thank you!I like to use ordered lists for my form labels. It's good for web accessibility and it adds some extra hooks for your CSS to grab onto.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 form</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
.formpart {
width: 800px; /**adjust as required**/
overflow: hidden;/*for float containment*/
/**wrap form lables and fields inside ordered lists for better web accessibility**/
.formpart ol {
list-style: none;
margin: 0;
padding: 0
.formpart li {
clear: left;
padding: 16px 0;
.formpart label {
float: left;
line-height: 28px; /**lines up labels with fields**/
font-size: 18px;
.formpart input[type=checkbox] {
width: 2.5em;
height: 1.5em;
/**put boxes first**/
float: left;
.formpart span {
color: #999;
font-style: oblique
</style>
</head>
<body>
<div class="formpart">
<p>Please select the class(es) you would like to attend</p>
<ol>
<li>
<label for="contact_classes1">October 28 - 30, 2013: <span>Lee County Sheriff's Office -Fort Madison</span>
<input id="contact_classes1" name="contact_classes1" type="checkbox">
</label>
</li>
<li>
<label for="contact_classes2">November 4 - 6, 2013: <span>Waterloo PD & Hawkeye CC</span>
<input id="contact_classes2" name="contact_classes2" type="checkbox">
</label>
</li>
<li>
<label for="contact_classes3">March 4 - 6, 2014:<span>Cedar Rapids PD</span>
<input id="contact_classes3" name="contact_classes3" type="checkbox">
</label>
</li>
<li>
<label for="contact_classes4">April 2014: <span>Des Moines PD</span>
<input id="contact_classes4" name="contact_classes4" type="checkbox">
</label>
</li>
</ol>
</div>
</body>
</html>
Nancy O. -
</tr>
</table>
<h3 align="center" class="style2"><font face="Arial, Helvetica, sans-serif"><br />
</font></h3>
<p> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="left"> </p>
<p align="center"><strong><font face="Arial, Helvetica, sans-serif"><a href="Compatibility_Pack.html">To Open To Open Word</a></font></strong><strong><font face="Arial, Helvetica, sans-serif"><a href="Compatibility_Pack.html">2007 Document in Word 2003</a></font></strong></p>
The website is:
Mitchell Public LibraryTake your hand off the ENTER key .
You're using deprecated code. Align="center" and <font> tags have been obsolete since HTML4.
Use the W3C Validation tools below to check your code for errors.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
Maybe you are looking for
-
I am using PC, Windows 7, updated to iTunes11.0. purchased an app from iPad Mini for free, and then when I open iTunes in windows, it automatically try to download the app, and freezes. I am not sure what is the problem behind, but the crashes certai
-
How can i call a zreport from my bsp page.
Hi friends, How can i call a zreport from my bsp page. Moosa
-
Shutdown of the server and problems with some reports
Hello, A fatal shutdown of the ERP server arrived. Now we have some errors and dumps for some transactions. Dumps examples : A RAISE statement in the program "CL_GUI_ALV_TREE===============CP" raised the exception condition "DP_ERROR". Since the ex
-
I have a For Loop that reads and modifies a 40 meg file. The file is a log of GPS and CAN messages. The Labview App will modify the data of one certain message type. This all works but it takes 4 and a half minutes to complete. Is there a faster way
-
using time capusle easily as a wireless router for my pc and macbook. time machine works perfectly as my back up for my mac. is there a way to back up any of my data from my pc to time capsule, wired or wirelessly (preferred)?