473,320 Members | 1,884 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Center one span inside another

In this HTML:

<html>
<head>
<title>Page 1</title>
</head>
<body style="background:#C2BFA5;">
<span style="background-color:#F9DFB2;
position: absolute;
border:thin inset;
height:53; width:185;
left:14; top:310;
text-align: center;
vertical-align: middle">
<span style="font-family:'MS Sans Serif';
position: relative;
font-size:8px;">
Panel
</span>
</span>
</body>
</html>

Using "text-align: center" works for horizontal alignment but
"vertical-align: middle" doesn't center the text in the middle.

Any tips on doing something like this?
Jul 21 '05 #1
13 14176
MrBaseball34 wrote:
Any tips on doing something like this?


Don't use <span>. Positioning is for block elements, and unless you use
display:block;, a span is an inline element.

--
Mark.
http://tranchant.plus.com/
Jul 21 '05 #2
Mark Tranchant <ma**@tranchant.plus.com> wrote:
Positioning is for block elements


Nope: http://www.w3.org/TR/CSS21/visuren.h...opdef-position

--
Spartanicus
Jul 21 '05 #3
On Tue, 19 Oct 2004 08:16:44 +0100, Mark Tranchant
<ma**@tranchant.plus.com> wrote:
MrBaseball34 wrote:
Any tips on doing something like this?


Don't use <span>. Positioning is for block elements, and unless you use
display:block;, a span is an inline element.

Well, more accurately, large-scale positioning is 'easier' with block.

Mr Baseball should use div here, not span.
Jul 21 '05 #4
Mark Tranchant <ma**@tranchant.plus.com> wrote in message news:<41***********************@ptn-nntp-reader04.plus.net>...
MrBaseball34 wrote:
Any tips on doing something like this?


Don't use <span>. Positioning is for block elements, and unless you use
display:block;, a span is an inline element.


It doesn't work for DIV's either.
Jul 21 '05 #5
In article <op**************@news.individual.net>, ne*****@yahoo.com
says...
On Tue, 19 Oct 2004 08:16:44 +0100, Mark Tranchant
<ma**@tranchant.plus.com> wrote:
MrBaseball34 wrote:
Any tips on doing something like this?


Don't use <span>. Positioning is for block elements, and unless you use
display:block;, a span is an inline element.

Well, more accurately, large-scale positioning is 'easier' with block.

Mr Baseball should use div here, not span.


How 'bout an example as I haven't been able to get div to
work either.
Jul 21 '05 #6
On Tue, 19 Oct 2004 11:34:03 -0500, Mr.Clean <mrclean@p&g.com> wrote:
Mr Baseball should use div here, not span.


How 'bout an example as I haven't been able to get div to
work either.


I've seen a site which went into it, but I can't turn it up at the
moment...
Jul 21 '05 #7

"MrBaseball34" <mr**********@hotmail.com> wrote in message
news:a5**************************@posting.google.c om...
In this HTML:

<html>
<head>
<title>Page 1</title>
</head>
<body style="background:#C2BFA5;">
<span style="background-color:#F9DFB2;
position: absolute;
border:thin inset;
height:53; width:185;
left:14; top:310;
text-align: center;
vertical-align: middle">
<span style="font-family:'MS Sans Serif';
position: relative;
font-size:8px;">
Panel
</span>
</span>
</body>
</html>


(You haven't specified what units the outer span's dimensions and position
are supposed to be.)

Vertical-align doesn't do what you think it does--it only does that in table
cells. Otherwise, it just determines the vertical alignment of a string of
text with the other text *on the same line*. See

http://gavelcade.com/tests/vertical-align.html

for examples of what it *does* do. (The text-top and text-bottom values
don't seem to do what I expected, though.)
Jul 21 '05 #8
It is the line-height property that makes it work.
<span style="text-align: center;
border:thin inset;
height:53px;
width:185px;
background-color:#F9DFB2;">
<span style="font-family:'MS Sans Serif';
font-size:8px;
vertical-align: middle;
line-height: 53px;">
Panel
</span>
</span>
Jul 21 '05 #9
It is the line-height property that makes it work.
<span style="text-align: center;
border:thin inset;
height:53px;
width:185px;
background-color:#F9DFB2;">
<span style="font-family:'MS Sans Serif';
font-size:8px;
vertical-align: middle;
line-height: 53px;">
Panel
</span>
</span>
Jul 21 '05 #10
in comp.infosystems.www.authoring.stylesheets, Mr.Clean wrote:
It is the line-height property that makes it work. Maybe. Unless someone uses bigger than 53px font. Not impossible...

If possible, use em unit.
<span style=
inline styles are not good idea.
"text-align: center;
Does nothing, as it only aplies to block elements.
border:thin inset;
I really think it is ugly to have bordered multiline span, so hopefully
you don't have much text in it.
height:53px;
width:185px;
Neither should do anything, and don't on modern browsers or IE6 in
standards mode. Why aren't you using div instead of span.
background-color:#F9DFB2;">
You forgot to use color with your background color.
<span style="font-family:'MS Sans Serif';
That is bitmap font, at least in my systems. So user might get ugly font
if he overrides your size, which he most likely do.
font-size:8px;


Too small and using px unit is bad when setting font. In my version of MS
Sans Serif, there is no 8px version, I think that yours haven't have that
either - so you are actually seeing 8pt version which size 11px. (easily
tested, remove font-family rule)

If users font is true type or similar (very likely if he don't have MS
Sans Serif, which is about 99% certain if he is not using MS OS), he
don't get 8pt font like you, but he will get 8px font, and that is not
readable on any resolution, unless special fonts are used.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #11
In article <MP************************@news.individual.net> ,
la***@raittila.cjb.net says...
in comp.infosystems.www.authoring.stylesheets, Mr.Clean wrote:
It is the line-height property that makes it work.

Maybe. Unless someone uses bigger than 53px font. Not impossible...

If possible, use em unit.
<span style=


inline styles are not good idea.
"text-align: center;


Does nothing, as it only aplies to block elements.
border:thin inset;


I really think it is ugly to have bordered multiline span, so hopefully
you don't have much text in it.
height:53px;
width:185px;


Neither should do anything, and don't on modern browsers or IE6 in
standards mode. Why aren't you using div instead of span.
background-color:#F9DFB2;">


You forgot to use color with your background color.
<span style="font-family:'MS Sans Serif';


That is bitmap font, at least in my systems. So user might get ugly font
if he overrides your size, which he most likely do.
font-size:8px;


Too small and using px unit is bad when setting font. In my version of MS
Sans Serif, there is no 8px version, I think that yours haven't have that
either - so you are actually seeing 8pt version which size 11px. (easily
tested, remove font-family rule)

If users font is true type or similar (very likely if he don't have MS
Sans Serif, which is about 99% certain if he is not using MS OS), he
don't get 8pt font like you, but he will get 8px font, and that is not
readable on any resolution, unless special fonts are used.

If you'd followed the entire thread, you would have know that I was
working on producing an HTML form that mimics a form from my Delphi
application. Essentially I am creating a DFM (Delphi Form File) to HMTL
converter. I want the HTML to match the Delphi form as close as
possible. I don't want to screw with em's and funky placements. I use
the measurements off the form itself to dynamically create the CSS from
the DFM file.

So far, I've gotten pretty good results.

The "ugly...bordered multiline span" is the same as a GroupBox control
in a Windows application. This control can is a container for radio
buttons or checkboxes but other controls can be placed inside it as
well, in case you are ignorant of Windows application programming.

Jul 21 '05 #12
Mr.Clean wrote:

The "ugly...bordered multiline span" is the same as a GroupBox control in a Windows application. This control can is a container for radio
buttons or checkboxes but other controls can be placed inside it as
well, in case you are ignorant of Windows application programming.


In that case, is there a good reason why you aren't using a html
<fieldset>
around your input elements?
http://www.mozilla.org/quality/brows.../fieldset.html
That would achieve what you want without the complex CSS

MikeT

Jul 21 '05 #13
in comp.infosystems.www.authoring.stylesheets, Mr.Clean wrote:
la***@raittila.cjb.net says...
in comp.infosystems.www.authoring.stylesheets, Mr.Clean wrote:
<span style=
inline styles are not good idea.
"text-align: center;


Does nothing, as it only aplies to block elements.
border:thin inset;


I really think it is ugly to have bordered multiline span, so hopefully
you don't have much text in it.
height:53px;
width:185px;


Neither should do anything, and don't on modern browsers or IE6 in
standards mode. Why aren't you using div instead of span.
background-color:#F9DFB2;">


You forgot to use color with your background color.
<span style="font-family:'MS Sans Serif';


That is bitmap font, at least in my systems. So user might get ugly font
if he overrides your size, which he most likely do.
font-size:8px;


Too small and using px unit is bad when setting font. In my version of MS
Sans Serif, there is no 8px version, I think that yours haven't have that
either - so you are actually seeing 8pt version which size 11px. (easily
tested, remove font-family rule)
Delphi font controls used pt as unit, at least in version 5 which is last
one I have used.
If users font is true type or similar (very likely if he don't have MS
Sans Serif, which is about 99% certain if he is not using MS OS), he
don't get 8pt font like you, but he will get 8px font, and that is not
readable on any resolution, unless special fonts are used.


Snipped all parts, that were not relevant (or maybe they were...). As you
see, there is planty of them left. As you can see, you skipped over my
message too quickly. If you had bothered to read it, you might have
learned something. You did give me no reason why some of them was wrong.
If you'd followed the entire thread, you would have know that I was
working on producing an HTML form that mimics a form from my Delphi
application.
But, as I wasn't, and you had snipped most stuff, I didn't. Also, there
doesn't seem to be any information on that to be found on google. Could
you post message-id?
Essentially I am creating a DFM (Delphi Form File) to HMTL
converter. I want the HTML to match the Delphi form as close as
possible. I don't want to screw with em's and funky placements. I use
the measurements off the form itself to dynamically create the CSS from
the DFM file.
Sounds pretty useless idea... After all, what is the point, as your HTML
+ CSS is less compatible as DFM file?
So far, I've gotten pretty good results.
Only tested in IE in quirks mode, I assume. And you were told ages ago to
use block level element for block level effect.
The "ugly...bordered multiline span" is the same as a GroupBox control
in a Windows application. This control can is a container for radio
buttons or checkboxes but other controls can be placed inside it as
well, in case you are ignorant of Windows application programming.


You doesn't seem to have idea how borders should be drawn on inline
element? Surely it is not at all like group box control.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #14

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Mr. Clean | last post by:
Why would this work: <html> <head> <title>Page 1</title> </head> <body style="background:#C2BFA5;"> <span style="text-align: center; border:thin inset; position:absolute; left:14px;
3
by: Charles Crume | last post by:
Hello; I'm fairly new to CSS, but have learned that Mozilla is supposed to be the most compliant in rendering. I have a web page that uses a style sheet with a class named "page_links" that...
2
by: sylvian stone | last post by:
Hi, I'm trying to do something that has always been easy with tables - namely use a three column layout, and above the main layout, show three images - one on the absolute left, one on the absolute...
9
by: developer | last post by:
Does anyone know what is the way IE treats span tags(<span>) and table tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if it placed with other elements that are in a table? Can...
1
by: Aitham alama | last post by:
How can i make a dynamically created web label control to to be Center allignment Thanks
10
by: shapper | last post by:
Hello, I have two div's: <div class="container"> <div class="message">message</div> </div> I need to center the div "message" inside the div "container". But I also want the div "message"...
5
by: David Housman | last post by:
Hello, I'm trying to implement a navigation bar with a ul in css. The code is a template, but i'm customizing. I can handle just text in each block, but i want the first block to have an image...
2
by: donovan | last post by:
OK, so I know that there has been a lot of discussion on this topic, but none of the answers have been satisfactory. Therefore there seems to be only one thing to do: issue a challenge to all of...
14
by: gaijinco | last post by:
I was a hobbist web coder for years but I had to sidestep for a while. Now I'm trying to return to it and I'm trying to clarify how am I supposed to do somethings with CSS v.s. HTML and I'm...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.