Re: [css-d] trouble centering a span
Josh, On Aug 29, 2005, at 3:07 PM, joshua hough wrote: Can someone take a quick look at http://lblesd.k12.or.us/test.php and http://lblesd.k12.or.us/default.css and help me to vertically and horizontally center the date stamp near the upper-right corner? It's outlined in red and currently says August 29, 2005. This is a span set within the div that contains the blue tabs. The div is text-align: left and fills the width of its parent. I'd like to center the date in the remaining 19px by 160px blue space to the right of the last tab. It refuses to be 160px wide or 19px tall. Making it a div pushes it below the tabs. The date is in a span, which is an 'inline' element by default. It will not obey the width or height box properties. The simplest approach that comes to mind is use the text properties 'vertical-align: top; line-height: 1.4' Tweak the line-height to alter the vertical position. hth Roger, Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] trouble centering a span
joshua hough wrote:
Can someone take a quick look at http://lblesd.k12.or.us/test.php
and http://lblesd.k12.or.us/default.css and help me to vertically
and horizontally center the date stamp near the upper-right corner?
Joshua,
You could try to put #date *before* your navigation bar in the markup and
then float it right, like this:
#date {float:right;width:155px;text-align:center;
font-size:.9em;color:#fff;line-height:19px}
HTH,
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] trouble centering a span
Can someone take a quick look at http://lblesd.k12.or.us/test.php and http://lblesd.k12.or.us/default.css and help me to vertically and horizontally center the date stamp near the upper-right corner? It's outlined in red and currently says August 29, 2005. This is a span set within the div that contains the blue tabs. The div is text-align: left and fills the width of its parent. I'd like to center the date in the remaining 19px by 160px blue space to the right of the last tab. It refuses to be 160px wide or 19px tall. Making it a div pushes it below the tabs. Thanks, -Josh __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] trouble centering a span
From: joshua hough This is a span set within the div that contains the blue tabs. The div is text-align: left and fills the width of its parent. I'd like to center the date in the remaining 19px by 160px blue space to the right of the last tab. It refuses to be 160px wide or 19px tall. Making it a div pushes it below the tabs. Joshua, text-align isn't applicable to a span or other inline elements. As you note using a block level element like div places the content below your other block level element. Even if you set the span to display: block and text-align: center you'll find that the centered span appears on a line by itself. The problem is what is the container that you want the span centered in? How is something centered when it is part of some text that is flowed in a block level element? You probably need to rethink your design/layout and see if there is another way to achieve what you want to do with the layout of this content. Maybe float the nav div left and put the date in its own div that could then sit to the right of nav if you set a large left margin on it. Or set the date in a paragraph or div and float it right. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
