I am trying layout labels with in li tag divided into3 columns, it is working perfectly fine except when there are multiple line for any field, horizontal alignment is getting disturbed. I tried all possible ways but was not able to find out the solution
Here is the demo http://jsfiddle.net/pHHhz/2
Can someone crack this..
label tags are not meant for what you're using them for. They're meant for describe form input-type elements.
It looks like you need to use a table here rather than unordered lists. Don't be afraid of tables; if you need to display tabular data (which this looks like) then use them!
Related
I'd like for all the options in a select menu to be centered, however I can't find a way of doing it.
After a quick google I couldn't find any real solutions, however most of the entries are quite old, so I'm wondering if there have been any improvements made to css to make this possible.
The closest I've found is to use text indentation, which may well work for the options that are the same length, but for any options of varying lengths it of course looks off.
You might be interested in using ul and li instead of a traditional select and option.
Bootstrap has a component that lets you do this: Single button dropdowns.
You can use their component and add a style similar to this:
ul.btn-dropdown li {
text-align: center;
}
You can get a result like this:
HTML/CSS doesn't provide for formatting Option elements within Select lists - only for formatting the whole Select list.
You could try padding with spaces but, realistically, I'd concentrate on more important issues and let Select lists be Select lists.
(JQuery may have something to offer, but I do straight Javascript so am not familiar enough to know).
Tony Duffill
I'm trying to figure out how to develop a page that we can use to organize a magazine. There will be multiple sections to the magazine that will contain multiple pages, each page may have multiple articles on them. To accomplish this, I want to have a DIV for each page or section that will intent to show that it's subordinate to the group above it. Here's a picture of what I want it to look like:
http://chromaticinc.com/help/final.png
I'd like to only use CSS to accomplish this. So far, I've come up with this:
http://chromaticinc.com/help/
But it is using Javascript to set the width on the 1st column, because each of the other columns has to line up too and with the variable width on the 1st column, it throws off the layout. I'm sure I could use Javascript to set the width of the "Comments" column, but I feel like there has to be a better solution using CSS.
I'm open to using tables, if it would make sense, but each item will have to be draggable so that they can be rearranged and also they will have to be able to be moved into other sections, so I've set them in DIVs to make that easier.
Any help or suggestions would be greatly appreciated.
You should be able to do this using relative positioning.
You will want to give the element an id and then use some CSS like this:
#divid {
position:relative;
left:20px;
}
This will force the div to move over however much you specify from its default position.
I am currently working on turning a normal html table like so:
into and indented version as follows:
Even if I can't set this in html someone might know of a way in which I can hide the initial part of the border to match the start of the text.
There are several bad ways to do this, I'm sure. You'll just have to get creative.
Here is one example to do this, with some classes, empty table cells and colspans:
http://jsfiddle.net/ESFuC/
You can achieve this by playing about with the table cells and taking advantage of display:inline-block; there are other ways to achieve this but this should work across most browsers.
Fiddle with demo
Maybe with divs inside cells like this;
http://jsfiddle.net/UdF98/
I colored the bottom line red, seems fine except the one at the bottom. Maybe you can modify to suit your needs.
I'm renovating a legacy Java based web site. I've already greatly reduced the number of tags used on the front end by using CSS to do the graphic lay out of the "screens". Is there a CSS tag that will replace HTML tables that makes a good grid for HTML forms? Does it significantly reduce the number of tags? Is it reliable in most of the main browsers?
Tables are actually prevalently used to align forms. You take out the borders with <table borders='0'>. They are pretty reliable for aligning because the table cells in different rows line up.
You'll still probably want to use <table> tags for actual grid/table elements. But, you could consider using something like Javascript grid/table plugins for tables... for styling, and functionality.
I would suggest using <ul> and <li> elements (and then setting CSS rules for those elements,) when formatting <form> elements, though. If it doesn't seem to be working out... you can still leave the <form> in a table; over the past decade, however, browser support for CSS has made it a lot easier to use HTML lists instead of tables for formatting things like forms.
Before anyone close this question or complain... I've been looking all over StackOverFlow site but couldn't find anything straight foward about tables and forms.
I have a form which has at least 20 to 35 labels and text boxes, in different categories. So to start using CSS for each element would be too much.
For some reason, I'm feeling like using tables to align all the fields with their respective labels, since some labels will be larger than others (i.e. 'First Name' is a larger word than 'Age'), and so the layout would be distorted. And I can't start applying css for each label and text box (circa 20 each... that's 40 individual css rules).
Unless someone can give me some techniques, I'll be greatful.
I know CSS is good for forms but what about the very big forms?
So long as you use the cascade to your advantage, there is nothing wrong with CSS for forms.
In fact, I recommend it over using table.
Just set up some base rules...
input {
padding: 3px;
float: right;
}
Then handle the exceptions to your rules...
input#age {
float: none;
}
Forms are not tabular data, simple forms just superficially look like they are.
CSS is just fine for long forms. Have styles for most data. Then more specific styles for short bits of data and/or long bits of data, and so on. Don't style everything individually.
try using UL and LI instead of table, such as explained in the following article Click to see article
It provides the CSS too.
You wouldn't need 40 individual CSS rules. You could have one rule for all the labels, and one for all text boxes.
BUT - having said that - this sort of layout, where you have two columns of stuff, and you want all the stuff in column 1 (the labels in this example) aligned with each other, and all the stuff in col 2 (the text boxes) aligned with each other, while keeping the rows aligned - well that's exactly the sort of thing that the the good ol' table excels at.
I am a big advocate of CSS, and I believe that abuse of tables (to layout a page for example) is evil, evil, evil - but I would definitely go with tables on this one.
At the end of the day, it's all about preference and functionality. My personal preference are divs/CSS. The cascading nature of CSS, and cleanliness of the code, etc..
But hey, if you like tables - shout it from a rooftop!
You can use jQuery Masonry.
As far as I can see, it will achieve the layout you need and all you have to do is add classes and single line of JS code.
You can create good, accessible forms using CSS without too many CSS rules (for the alignment part, anyway). You basically just need to set the width of all the labels -- with one rule -- and define how they interact with the input elements. There a nice article at http://www.websiteoptimization.com/speed/tweak/forms/ (just the first one I found, I'm sure there are many others).
For a form IMO i'd rather use a table its cleaner. Use CSS for your websites layout. But again thats my opinion...