PDA

View Full Version : Having trouble aligning text in CSS



Spider
06-11-2011, 12:28 AM
I have been studying w3schools and trying to find out how to align text. What is automatic in tables seems to be unobtainable in css - namely vertical alignment of text inside a box or panel.

I found out how to align text horizontally - left, right, center and justified.

But how do you get text positioned at the top of the panel, at the bottom and in the middle? Neither 'vertical-align' nor 'verticalalign' work.

What am I not seeing? Anyone?

vangogh
06-11-2011, 12:53 AM
vertical-align applies to inline elements. You're probably trying to apply it to a block level element. I'd need to see the rest of your code to offer a solution.

Spider
06-11-2011, 12:59 AM
<div>

<div style="float:right;width:22%;height:120px;padding:10px;ba ckground:#a00;color:#e1e79f;font:bold 80% Arial,Helvetica,sans-serif;text-align:left;">

Create your own Wealth Program. You already know how to be wealthy!
</div>

</div>

vangogh
06-11-2011, 01:07 AM
Is the page in question online by any chance? Is it live on the site? The issue probably isn't in the single line of code, but rather how that code is interacting with the rest.

Looking at the one line though I'd guess the issue is that this line of text is being floated to the right, which takes it out of the normal document flow. I assume it isn't aligning with something that is in the normal document flow. If you add a margin-top to one or the other you can probably get things to align where you want. You can set the margin-top to be positive or negative too.

Spider
06-11-2011, 01:13 AM
It's not online, nor is it active. It's pretty isolated as I read the instructions, to see what they do.

The text is not floated to the right, the panel the text is in is floated to the right. The text itself is aligned to the left within the panel. The problem is that I was trying to get the text to sit midway vertically within the panel, not scrunched up at the top. As in " vertical-align:middle "

vangogh
06-11-2011, 01:21 AM
I realize it's the div itself being floated and not the text. Unfortunately vertical-align isn't going to work since you're dealing with a block level element. There are a variety of ways to vertically center block level elements or what's inside of them. Since the div is being floated it's been removed from the normal document flow and shifting the whole div probably won't affect other elements on the page. That's why I suggested using margin-top.

It's hard to give you a definitive solution though without seeing the page, though.

Spider
06-11-2011, 01:27 AM
Oh. I was thinking I was not finding the right place to put the vertical-align:middle code. I mean, vertical-align:middle must mean align something vertically inside something else, right?

So, you think floating the panel is the problem?

Spider
06-11-2011, 01:43 AM
Okay. In the morning I'll make this up into a simple bit of text inside a box and put it up on the web to see what that tells us. Thanks for your latenight response.

vangogh
06-11-2011, 02:05 AM
vertical-align works, but only for inline elements and table cells. There are two kinds of elements in the css visual formatting model (http://www.w3.org/TR/CSS2/visuren.html#block-formatting), block level elements, and inline level elements. The link takes you to the part of the page talking about block and inline elements.

When you float or position an element you change how normal elements behave. I'm guessing a little at the float causing your problem based on experience, but it could be other things. CSS and html work together and often the problem you see in css is really the way things are structured in the html. That's sometimes why it can be hard to solve what seems like a css issue.

Harold Mansfield
06-11-2011, 02:07 PM
The text is not floated to the right, the panel the text is in is floated to the right. The text itself is aligned to the left within the panel. The problem is that I was trying to get the text to sit midway vertically within the panel, not scrunched up at the top. As in " vertical-align:middle "

A quick way to position text inside the box is by using your padding. If you want to push the text down from the top you an use "padding-top:?px;". If you want to push it away from the sides you can use padding-left or padding-right. Or just use it alone for equal distance within the box.


<div style="float:right;width:22%;height:120px;background:#a00 ;color:#e1e79f;font:bold 80% Arial,Helvetica,sans-serif;text-align:left; padding-left:20px;">

Create your own Wealth Program. You already know how to be wealthy!
</div>">

You can also use margins.

Spider
06-11-2011, 02:22 PM
Thanks for joining in, Harold. That is a nice solution for a fixed layout, but I am into making my design as fluid as possible. For variably smaller and smaller screen widths the extra padding at the top would extend the height unnecessarily as the text wraps and crowds the bottom of the box and then extends the height of the box.

VG, I tried to write a simple chunk of standalone code for this box and text for you to see, and I'm finding other alignment issues besides the text. Let me work on it and when done, I'll put it up on my site.

Harold Mansfield
06-11-2011, 02:46 PM
Thanks for joining in, Harold. That is a nice solution for a fixed layout, but I am into making my design as fluid as possible. For variably smaller and smaller screen widths the extra padding at the top would extend the height unnecessarily as the text wraps and crowds the bottom of the box and then extends the height of the box.



You've already screwed the pooch on fluidity by defining a specific size of the box. Try using your <div>'s without set dimensions of width and height and using the padding or margins to place the content inside the box.

Harold Mansfield
06-11-2011, 02:55 PM
Also, smaller screens doesn't mean that you necessarily see the website any differently. Websites on my iPod (4" screen) are just as I see them on my desktop (3x20" screens). It's not like it was 3 years ago anymore. Only older phones are going to have a problem and from experience, no one spends a lot of time on an older phone surfing the web and they are almost phased out anyway.

Also, you need to think about where we are going, not where we have been. Pads are where we are going and you don't need to design for a pad, it's the same as a computer.
You also have to be realistic about what types of sites people will access on a smaller screen ( basically a phone) and what they don't.
Laptops and Desktops are still where people do their work. No matter how advanced they are now, people don't work on their phone's internet.

Spider
06-11-2011, 03:17 PM
You've already screwed the pooch on fluidity by defining a specific size of the box. Try using your <div>'s without set dimensions of width and height and using the padding or margins to place the content inside the box.I purposely haven't defined a specific size of the box, unless I'm not reading something right.


Also, smaller screens doesn't mean that you necessarily see the website any differently. Websites on my iPod (4" screen) are just as I see them on my desktop (3x20" screens). ..Interesting. What is the resolution of your ipod screen, then?

Harold Mansfield
06-11-2011, 03:28 PM
I purposely haven't defined a specific size of the box, unless I'm not reading something right.

<div style="float:right;width:22%;height:120px;padding:10px;ba ckground:#a00;color:#e1e79f;font:bold 80% Arial,Helvetica,sans-serif;text-align:left;">

Create your own Wealth Program. You already know how to be wealthy!
</div>

You don't necessarily need to define the height as long as you are closing the tag it will still wrap around the content. Use padding and margins to place the content in the area inside where you want it. Of course if you are using multiple horizontal boxes and you want them to all be the same size, you may have to define the height of each box to make them all symmetrical, or define the content in each to be equal.


Interesting. What is the resolution of your ipod screen, then?
960x640
http://www.apple.com/ipodtouch/features/safari.html

Spider
06-11-2011, 03:34 PM
height:120px does not eliminate fluidity. It sets a minimum height. When the screen narrows or the font is made bigger the text wraps, and the height of the box expands to accommodate it. I do believe in css, one can stop that happening but I haven't got to that part yet.

Re the ipod, so if I can get my page to view comforably down to 640 px wide, I should be good for ipods. That's good. Thanks.

Spider
06-11-2011, 03:42 PM
...Also, you need to think about where we are going, not where we have been. Pads are where we are going and you don't need to design for a pad, it's the same as a computer.
You also have to be realistic about what types of sites people will access on a smaller screen ( basically a phone) and what they don't.
Laptops and Desktops are still where people do their work. No matter how advanced they are now, people don't work on their phone's internet.I certainly believe that to be true, and I am taking a less demanding view of how my site looks below 500px wide. In any case, I don't think anyone searching for a business coach on their cellphone is going to be the sort of client I want to attract. But, you never know.

Harold Mansfield
06-11-2011, 03:45 PM
Re the ipod, so if I can get my page to view comforably down to 640 px wide, I should be good for ipods. That's good. Thanks.

No. You really don't have to do anything. If your page is coded well and you don't have some strange design issues going on, anyone with a late model phone using Safari, Android or Windows will be able to view your page just like they do the rest of the web. Today's mobile browsers are displaying websites in their regular state. No need for social coding anymore. It's the same web now.

Harold Mansfield
06-11-2011, 04:53 PM
I don't think anyone searching for a business coach on their cellphone is going to be the sort of client I want to attract....

And there you go. It's not exactly the kind of search that you do on a phone, especially an older phone that doesn't display web pages normally.

Of course anything is possible, but concentrate on the most likely possibilities.
Design for the majority, and the majority will be able to view it.

Don't design for the small percentage of cell phones that no one is likely using to do this type of search anyway.

vangogh
06-11-2011, 05:04 PM
height:120px does not eliminate fluidity. It sets a minimum height.

That's only true in Internet Explorer (which gets it wrong by the way). Other browsers will treat it as an absolute measurement and fix the height at 120px. min-height is what you should use to set a minimum height, though IE doesn't support min-height at the moment. IE9 might, though don't hold me to that. The proper way to set a minimum height is to use min-height and then use conditional comments to serve the height to IE only.


You really don't have to do anything. If your page is coded well and you don't have some strange design issues going on, anyone with a late model phone using Safari, Android or Windows will be able to view your page just like they do the rest of the web.

Yes and no. Mobile browsers are doing a great job displaying websites, however that doesn't mean you should just let your site default to how the mobile browser renders it. Mobile browsers first render your site as it would display at a larger width and then they shrink everything back down to 320px or so. We can all zoom in on parts of the page to read the text, but that may not always be what you want.

Your site may have a large image at the top, which might be all that shows on the mobile browser. It's probably better to either make sure that image is smaller or remove it so the content appears closer to the top.


I don't think anyone searching for a business coach on their cellphone is going to be the sort of client I want to attract.

Studies are showing that most mobile surfing occurs while people is sitting on their couch. I wouldn't make assumptions about whether or not someone is an ideal client based on what device they use. More and more people are using mobile devices instead of desktop or laptop computers. I'd also think people who use mobile devices have businesses in the same or even greater proportion to those who don't.

Spider
06-11-2011, 07:20 PM
I have been playing with css for most of the day and covering more ground than we are discussing here. The results of my labors are at Trying to align text in css (http://frederickpearce.com/aligntext.html)

Notes on the page mention what I have not been able to discover. I am now looking at this in FF and Safari to see what it looks like in those browsers.


Okay - it looks pretty much the same in all three browsers, and the tables version and css version look pretty much the same as each other (or would once the borders are blanked out. So, back to the original question. How can I get the text in the lower red box to place in a mid-vertical position like it does in the upper red box, using some vertical alignment command? (Yes, I got the padding idea, Harold, but Id like to think that aligning the text vertically is as easy as aligning it horizontally.)

vangogh
06-13-2011, 12:51 PM
1. When trying to center something horizontally you want to set a width of the element you're trying to center and then give left and right margins of auto. Here's an old post I wrote about centering with css (http://www.vanseodesign.com/css/centering-with-css/). The post is about centering things horizontally and not vertically.

2. see above. You did find a way to make it work, but there are easier ways to center elements on the page.

3. On the second box you set a min-height of 200px.

4. There are a variety of methods for centering things vertically in css. Here's a post from In the Woods on vertical centering (http://blog.themeforest.net/tutorials/vertical-centering-with-css/). There are other posts and other methods. Just search for 'vertical centering css' and you'll find plenty. Which method you use depends on what you specifically want to center.

Spider
06-13-2011, 04:25 PM
1. When trying to center something horizontally you want to set a width of the element you're trying to center and then give left and right margins of auto. Here's an old post I wrote about centering with css (http://www.vanseodesign.com/css/centering-with-css/). The post is about centering things horizontally and not vertically...
2. see above. You did find a way to make it work, but there are easier ways to center elements on the page.Ok! We are making progress - thank you, VG. Margin:0 auto; seems to have done the trick for placing the lower red box in the horizontal center of the page.



3. On the second box you set a min-height of 200px.Still haven't worked this out. The outer frames of both are defined at 100% wide and 200px high. Both red boxes are defined as 25% wide and 150px high. I cannot understand why the lower box is wider than 25% (approx.30%) and taller (approx 180px.)



4. There are a variety of methods for centering things vertically in css. Here's a post from In the Woods on vertical centering (http://blog.themeforest.net/tutorials/vertical-centering-with-css/). There are other posts and other methods. Just search for 'vertical centering css' and you'll find plenty. Which method you use depends on what you specifically want to center.After reading this report, I do not find it contains a suitable solution. Of the five methods described, none of them provide the simple attributes that are accomplished with tables (and which I find indispensible.)
-- operates in MSIE
-- content frame expands to accommodate wrapped text when larger font (user-adjusted font size or zoom) without being cut off.

I will look for other methods.

Incidentally, it seems quite clear from all these alternative methods that no-one is expecting "vertical-align:middle;" to align anything in the middle vertically. Can you explain - or point me to a plain English explanation - of what "vertical-align:middle;"is supposed to do. I could not understand the W3Schools explanation at all.

Thanks.

vangogh
06-13-2011, 04:58 PM
The horizontal centering is simple once you know how. If you ever find it doesn't work in IE it's likely you need to add a doctype. Certain versions of IE need that, but you'll generally have a doctype anyway.

Looking again at the second box you've given it a padding of 15px. The height of a block level element will be the height + the padding + borders. In this case you've given 15px of padding to the top and bottom which adds 30px to the height of 150px for a total of 180px.

There's a good diagram on this Wikipedia page (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug) that explains a bug in IE. Internet Explorer uses their method for determining heights and widths in the box model. I actually think the way IE does this makes more sense, but the standards say they're wrong and everyone else is right. I think IE has corrected the bug, but it's there for older versions.

The basic idea though is that padding will get added to either height or width. If you want the box to be 150px in height and want to have 15px of padding on top and bottom you really want to set the height to be 120px.

The way I would vertically center your text is to not define a height on the box. I'd just have the top and bottom padding be equal. If the box isn't big enough or small enough adjust the padding until it's the size you want.

Spider
06-13-2011, 05:50 PM
...Looking again at the second box you've given it a padding of 15px. The height of a block level element will be the height + the padding + borders. In this case you've given 15px of padding to the top and bottom which adds 30px to the height of 150px for a total of 180px...So, the padding sits OUTSIDE the box? How odd! Okay, if that's how it is.

Okay, I think I have understood that. Now I have to discover how to write the code so that it will appear the same in MSIE and other browsers using a single set of code. That will be my next challenge.

Thinking further - I suspect this is not a difference between different browsers, it's a difference between tables and css. If both IE and FF is rendering the same css code, they should look the same. I will check later to see if that is so.


Still at a loss as to how and where I would use, "vertical-align:middle;"? What does it do?

vangogh
06-13-2011, 07:06 PM
The padding doesn't actually site outside the box, though we may be referring to different boxes. When you set a width or height you're setting it only on the content itself. The full box includes the content area, the padding, and the border. Outside the box is the margin.

The total width or height you see displayed on the page equals all of these. It's confusing, because like you my first instinct is to assume when I set width or height it's the total width or height that includes the paddings and borders. That's how older versions of IE treat it and I do think that's more intuitive. However the standards say when you set width and height it's only on the content area.

Just remember that when you give something padding (or a border) you then have to reduce the width of height value you used by the amount of the padding (or border-width). Once you get used to doing that it's not too hard, though it is confusing at first.