Jump to content

Centering Issues (text)


Cryzabey
 Share

Recommended Posts

I'm attempting to get the monetary values that follow the bars on my bar graph to remain aligned with the bars. Currently, no matter how I tweak the coding, the values lay either beneath the bar or only half-way inside of them. Below is an example of what the code looks like, as well as a link:

<!--- Bar 1's Display Code ---> <div style=''> 	<div style='background: url(images/r33.gif); background-repeat: repeat; height: 33px; max-width: 500px;'> 		<font style='line-height: 33px; margin-left: 15px; color: #000000; font-size: 12px; font-style: normal; font-weight: bold;'> 			Job One		</font> 	</div> 	<font style='line-height: 0px; margin-left: 520px;'> 		 $2,000	</font> </div>

And a living example can be found here: Link

Link to comment
Share on other sites

I usually don't put style attributes in page elements, but this will get you closer to what you want.Do stop using <font> tags. They're history.The big trick was this. A div is a block-level element. Unless you give it a float property, any element that folows it will start on the next "line." You were able to push it right with the huge margin, but you couldn't get it to go up, because it wasn't allowed to go there. So I added a float property to the div. That lets the next element sit right next to it, no left margin needed. I put the text in its own div. Since the text wanted to sit at the top of its that div, I pushed it down with some padding. It's far from exact, but it shows what can be done.

<div style=''>	<div style='background: url(images/r33.gif); background-repeat: repeat; height: 33px; width: 500px; float: left; line-height: 33px; padding-left: 15px; color: #000000; font-size: 12px; font-style: normal; font-weight: bold;'>		Job One	</div>	<div style='padding-top: 9px'>		$2,000	</div></div>

Edited by Deirdre's Dad
Link to comment
Share on other sites

Thank you!This works like a charm [;Also, all of this is being created dynamically depending on the parameters the function takes in. That's why I'm using display elements rather than style sheets. Now I just have to fiddle with it to get the spacing between the bars back [;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...