CSS to stop text wrapping under heading
Moderator: General Moderators
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
I agree with superdezign. Use a td for the "item" and another td for the description. You can give the td's a class to be able to style them a certain way.
Even if you get it to look the way you want, I don't think it looks good. Much better if everything is neatly aligned. If one cell has a short title and the one below it a longer title the consequence is that the descriptions do not align, which looks messy.
Even if you get it to look the way you want, I don't think it looks good. Much better if everything is neatly aligned. If one cell has a short title and the one below it a longer title the consequence is that the descriptions do not align, which looks messy.
I totally understand what you're saying, and if i was anything else I'd be with you all the way, but this just must kinda be the exception to the rule or something.
I set it up using the separate <td> and as you would expect, it looked just like a table should, but for some reason it detracts from the presentation of the information.
It's for a product list, but for a clearer example of the issue, let say the content was along the lines of:
But what I'm finding is that it makes your eye wander over to, and down, the ingredients list, which isn't the intent. You're supposed to focus on the title, find something you like and *then* start scanning the ingredients / toppings if it is required. Put another way, using a ragged edge on the descriptions forces your eye to the title, instead of splitting your attention between primary and secondary information. It makes the description visually belong to the item, instead of being associated to both the item and the other descriptions.
It just feels like I'm trying to include a non-tabular piece of data into a tabular display. You simply aren't supposed to run your eye down the descriptions, and as the designer I feel I have to find a way to get users to intuitively interact with the data in the way it was intended.
Anyhow, it's a small thing, but a tuned interface is always the key focus for me and little things like this can make a huge impact on usability.
I know there are a thousand reasons for sticking to the standards, but I really feel that there is a substantial usability hit with standard table layout. In the mean time, I've set up a format switcher so I can see it in either mode. I'll let it go at that for now and get some feedback from user testing .... when I get back to that stage.
When I get a a chance and some realistic data, I'll post a comparative view. I'd be interested to know your thoughts.
For now, thanks for the feedback.
I set it up using the separate <td> and as you would expect, it looked just like a table should, but for some reason it detracts from the presentation of the information.
It's for a product list, but for a clearer example of the issue, let say the content was along the lines of:
Doing it with the individual cells works, but it makes all of the topping / ingredient lists start from the same point. As you say, this is how tables are designed, and for good reason. We've all been trained from constant use to scan tables and visually identify and relate columns and rows of data using nothing more than the fundamental design principals of tables - cells in uniform rows and columns.24. Ham and Cheese Pizza - Tomato sauce, Ham, Cheese
But what I'm finding is that it makes your eye wander over to, and down, the ingredients list, which isn't the intent. You're supposed to focus on the title, find something you like and *then* start scanning the ingredients / toppings if it is required. Put another way, using a ragged edge on the descriptions forces your eye to the title, instead of splitting your attention between primary and secondary information. It makes the description visually belong to the item, instead of being associated to both the item and the other descriptions.
It just feels like I'm trying to include a non-tabular piece of data into a tabular display. You simply aren't supposed to run your eye down the descriptions, and as the designer I feel I have to find a way to get users to intuitively interact with the data in the way it was intended.
Anyhow, it's a small thing, but a tuned interface is always the key focus for me and little things like this can make a huge impact on usability.
I know there are a thousand reasons for sticking to the standards, but I really feel that there is a substantial usability hit with standard table layout. In the mean time, I've set up a format switcher so I can see it in either mode. I'll let it go at that for now and get some feedback from user testing .... when I get back to that stage.
When I get a a chance and some realistic data, I'll post a comparative view. I'd be interested to know your thoughts.
For now, thanks for the feedback.
Ok, interesting reasoning. I understand your thoughts. However, there are more ways to attract the attention from a user. Font-weight, font-size, font-color. Background-color. You can use all those to focus the visual weight on the titles.
And I'm not sure if a ragged edge will make sure a user does not focus on the ingredients. Might be the opposite. And besides that, you have to ask yourself if the visual "clutter" from the ragged edge is worth it.
You could also put the titles and descriptions in he same cell. And then use font-weight etc to focus on the titles.
Ham and Cheese Pizza - Tomato sauce, Ham, Cheese
Pepperoni Pizza - Pepperoni, Sauce, Ham, Cheese
And I'm not sure if a ragged edge will make sure a user does not focus on the ingredients. Might be the opposite. And besides that, you have to ask yourself if the visual "clutter" from the ragged edge is worth it.
You could also put the titles and descriptions in he same cell. And then use font-weight etc to focus on the titles.
Ham and Cheese Pizza - Tomato sauce, Ham, Cheese
Pepperoni Pizza - Pepperoni, Sauce, Ham, Cheese
Use the div element and the CSS attribute of
Code: Select all
display: inline;
/*or playing around with the width and height*/
overflow:hidden;
word-wrap:none;