[William_Wilson]

my problem is i am trying to align text like such:

label1: 1 2 3 4
label2_is_longer: 1 2 3 4

such that they line up on the : or even the space between label and links.

They are just within a div, as a header and footer, but there has become more than 1 row on a specific page and thus i want to align them.
(this is not my choice on how to do it, it's a stupid, stupid assignment)

anyway i can't use tables... not that i'd want to, and inline css is not allowed either.

This is what i currently have on my header, the question is if i run this on more than one subheader, is there any way to align on a point that is not based on the side of the browser, but instead on the text itself?

.subheader {
		white-space:nowrap;
		text-align:center;
		word-spacing:6pt;
		margin:0;
		margin-top:1px;
		margin-bottom:3px;
		padding-bottom:3px;
		border-bottom: 2px solid #000000;
		color:#000000;
}
.subheader a:hover {
		background-color: red;
}

*If they are aligned right they look the way i'm aiming for, but then i run into resizing issues if i base it on that.

[m2s87]

William_Wilson, on 21 Jan, 2007 - 12:58 PM, said:

my problem is i am trying to align text like such:

label1: 1 2 3 4
label2_is_longer: 1 2 3 4

such that they line up on the : or even the space between label and links.

They are just within a div, as a header and footer, but there has become more than 1 row on a specific page and thus i want to align them.
(this is not my choice on how to do it, it's a stupid, stupid assignment)

anyway i can't use tables... not that i'd want to, and inline css is not allowed either.

This is what i currently have on my header, the question is if i run this on more than one subheader, is there any way to align on a point that is not based on the side of the browser, but instead on the text itself?

.subheader {
		white-space:nowrap;
		text-align:center;
		word-spacing:6pt;
		margin:0;
		margin-top:1px;
		margin-bottom:3px;
		padding-bottom:3px;
		border-bottom: 2px solid #000000;
		color:#000000;
}
.subheader a:hover {
		background-color: red;
}

*If they are aligned right they look the way i'm aiming for, but then i run into resizing issues if i base it on that.

And you want to do this with CSS? Or you can use any server based/client based scripts?

Quote

anyway i can't use tables... not that i'd want to, and inline css is not allowed either.

Can you use another div element inside of it?

This post has been edited by m2s87: 21 January 2007 - 03:29 PM

[William_Wilson]

it must be css or basic html, nothing else is allowed.
I am hoping to center or somewhat center the result, otherwise i would just simply right justify them.

[m2s87]

William_Wilson, on 21 Jan, 2007 - 03:28 PM, said:

it must be css or basic html, nothing else is allowed.
I am hoping to center or somewhat center the result, otherwise i would just simply right justify them.

I meant actually what can you use. Can you use CSS 3?

[William_Wilson]

i don't see why not, how does css 3 help?

[Arbitrator]

William_Wilson, on 21 Jan, 2007 - 01:58 PM, said:

my problem is i am trying to align text like such:

label1: 1 2 3 4
label2_is_longer: 1 2 3 4

such that they line up on the : or even the space between label and links.

I think you should clarify which browsers this needs to work in. You can use the correct method that doesn’t work with Internet Explorer for one. It works in Opera, but Firefox doesn’t understand display: inline-block, so the proprietary declaration display: -moz-inline-block needs to be used for that browser.

HTML:

<h1>label1</h1>
1 2 3 4
<h1>label2_is_longer</h1>
1 2 3 4

CSS:

h1 { display: inline-block; width: 10em; }
h1::after { content: ":"; }

Float Method:

HTML:

<h1>label1</h1>
<span>1 2 3 4</span>
<h1>label2_is_longer</h1>
<span>1 2 3 4</span>

CSS:

h1, span { float: left; }
h1 { clear: left; width: 10em; }
h1::after { content: ":"; }

Text Alignment Method:

HTML:

<div>
  <h1>label1</h1>
  1 2 3 4
  <h1>label2_is_longer</h1>
  1 2 3 4
</div>

CSS:

div { text-align: right; }
h1 { display: inline; }
h1::after { content: ":"; }

Since the :after pseudo‐element of CSS2 is not supported by Internet Explorer, you can alternatively put the stylistic mark (colon) in the HTML instead.

This post has been edited by Arbitrator: 21 January 2007 - 08:17 PM