5 Replies - 3323 Views - Last Post: 21 January 2007 - 08:16 PM

#1 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

CSS: align text at a specific point

Posted 21 January 2007 - 12:58 PM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS: align text at a specific point

#2 m2s87  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 390
  • Joined: 28-November 06

Re: CSS: align text at a specific point

Posted 21 January 2007 - 03:24 PM

View PostWilliam_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

Was This Post Helpful? 0
  • +
  • -

#3 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: CSS: align text at a specific point

Posted 21 January 2007 - 03:28 PM

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.
Was This Post Helpful? 0
  • +
  • -

#4 m2s87  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 390
  • Joined: 28-November 06

Re: CSS: align text at a specific point

Posted 21 January 2007 - 04:21 PM

View PostWilliam_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?
Was This Post Helpful? 0
  • +
  • -

#5 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: CSS: align text at a specific point

Posted 21 January 2007 - 07:17 PM

i don't see why not, how does css 3 help?
Was This Post Helpful? 0
  • +
  • -

#6 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: CSS: align text at a specific point

Posted 21 January 2007 - 08:16 PM

View PostWilliam_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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1