Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Cannot centre text - help! 1

Status
Not open for further replies.
jwhite68

jwhite68

IS-IT--Management
Jun 14, 2007
77
BG
I have a simple code segment, and I am trying to figure our why the text wont centre on its background. Its probably a css issue, but I cannot understand why its not working.

The red text should be centred on the grey background - see -
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test-wrap.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
</head>
<body>
<table cellspacing="0" class="offer">
					<tr>
						<td colspan="3">
							<div class="offtitle">
								<span class="title">test text</span>
							</div>
						</td>
					</tr>
				</table>
</body>
</html>

And the css is:

Code: 
div.offer1{
   overflow: auto;
	width: 874px;
	border: 1px solid #DDDDDD;
	margin-top: 10px;
	background: #F4F3EE !important;
	/*display: table !important; */
}
table.t874{
	width: 874px;
	/*margin: 0px 63px 0px 63px !important;*/
}
table.t874 td{
	border: 0px;
	padding: 0px;
	line-height: 16px;
	font-size: 11px !important;
}
div.offtitle{
	width: 874px;
	height: 24px;
	background: url(offertitle.gif) top left no-repeat;
	margin-top: 10px ;
}
.ref24{
	margin: 0px 6px 0px 15px;
	line-height: 24px !important;
	font-weight: bold;
	float: left;
}
.title{
	line-height:24px !important;
	font-weight: bold;
	color: #CD4527;
	float: left;
	font-size: 11px !important;
	text-align: center;
}
table.offer{
	width: 874px;
	border: 0px;
	padding: 0px;
}
table.offer td{
	vertical-align: center;
}


Can anyone see what is hopefully a simple mistake. I am trying to use text-align center on the title class to get the text centred.
 
Sort by date Sort by votes
The text is being centered, it's just that the span that it is in doesn't have a width so it's default width is just the size of the text.

Is there any reason you are using a table as well? The same result as above could be acheived with just this:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  .offtitle {width: 874px; background-color: #F4F3EE; border: 1px solid #DDDDDD;text-align: center;}
  .title {color: red}
</style>
<title>Untitled Document</title>
</head>
<body>

  <div class="offtitle">
    <span class="title">test text</span>
  </div>

</body>
</html>


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
Oh, and to fix your example, you could just remove the "float: left;" from ".title" and move the "text-align: center;" to the "div.offtitle" class.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
Yes, this is actually just a test page to highlight the problem. The red text on grey background form the headings that are displayed on a summary table, with data taken from a database.
So I want to use the title class to control the behaviour of the text in the heading.

Since the text can only be a maximum of 128 chars for this heading, I am not sure how to specify the width of the span then - because the span width would be in pixels wouldnt it?
 
Upvote 0 Downvote
Many thanks Mark. Well spotted. Thats fixed it!
 
Upvote 0 Downvote
As well as questioning the use of the table, can I ask why you are using a div with a class and then a span with another class within it?

Also, if the span is a title (as indicated by the class applied to it) then why not use a heading tag such as <h1>,<h2> etc?

You should always consider what your content actually is, what it represents, and then use an appropriate HTML tag.

Without knowing what the rest of your page is like, it's hard to be definitive, but your segment could be written thus:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  .offtitle {
      width: 874px; 
      background-color: #F4F3EE; 
      border: 1px solid #DDDDDD;
      text-align: center; 
      color: red
  }
</style>
<title>Untitled Document</title>
</head>
<body>

    <h1 class="offtitle">test text</h1>

</body>
</html>

That single HTML tag does exactly what your table,div,span combo does. Plus, you only have a single style rule. You could even possibly simplify it further by removing the need for the class, but this depends on the rest of your page.

My point is, if you understand what specific HTML tags are for and how they behave then you will be able to write much simpler code. This makes it much easier to debug and work out any problems. In fact many of the problems won't even arise. Many of the CSS/HTML problems posted in this forum are created by the author's over engineered code and this tends to be because they use the 'wrong' tags and reinvent the wheel.

Hope that's some help to you.


<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
Is there a way I can force the background (grey) section to extend down, if the text wraps? If you look at the URL now you will see the problem:



I want the text itself to wrap to a second line IF it becomes too long for first line, also with a grey background (controlled by offtitle in stylesheet).
 
Upvote 0 Downvote
you haven't given .title a width so it will 'span' the width of div.offtitle which you set to 874px;

or seings as you have wrapped it in a table why not make the table column a fixed width?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
I am not quite sure how to do this. The max width of the characters on the title line is 128 chars. Can I set the width in chars?
 
Upvote 0 Downvote
It's a background picture. How do you expect it to react? Stretch? You would need to employ the techniques that developers use when creating custom boxes in html and css. There are many examples on the net, all you need to do is google them.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Maybe you would be best off thinking about what Foamcow and I mentioned. Are you really using the best methods and elements for what you are trying to display? From the information you've given us, I don't think you are. If you can give us an example of what data this table will be showing it may make it more clear what you are trying to achieve as at the moment it appears as though you are making things harder than they need to be.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
I am trying to make best use of code that has been developed by another programmer you see - without having to re-invent the whole application.

I will look at your suggestion for using the h1 header tags with the offtitle class to see if that can address my issue.
 
Upvote 0 Downvote
Sometimes it is best to move away from the flawed code and begin again, because it will be much simpler to maintain a code that is friendlier than this.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Within the table, I will be presenting a title line (which is what I have posted), and below that a section that includes a photo and additional text/hyperlinks, with the text information taken from the database.

With the sample code provided by Foamcow, I can see how this will wrap onto 2nd line etc if the text goes over - but when I try to apply this to my code (with tables) it doesnt work.
 
Upvote 0 Downvote
This is why it's best to look at what data you will be displaying. If you can give us an example of the output, we may be able to suggest what the best methods are.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
The max width of the characters on the title line is 128 chars
Click to expand...

I think you are applying old style logic to this and old column width printer settings logic.

The max width is not 128 chars, as this is relative to the screen resolution and the font size set in the browser, especially if you have correctly used relative fonts (em not pt).

You need to think how wide the column is relative to either a screen resolution and then use px, or as a percentage of the available screen width, and allow it to expand relative to screen resolution.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
When I said 128 chars, I just meant that length of the field that is displated - ie from the database.

The format of the table, a little more specifically is:

< title line >

< [photo] text associated with photo [buttons] >

These sections get repeated in a summary format for each record from the database table.

Since the text in the title line can be upper case, it currently stretches and goes onto a second line. Its ok for it to go onto a second line, provided it has this grey background controlled by offtitle. But it doesnt, and this is what I am trying to resolve.
 
Upvote 0 Downvote
can you not change the immage to be 'repeat-y' in the css?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Yes, I have tried this - but it doesnt look good. Also, I didnt really want this area to extend horizontally.

The result I want can be seen in this example:


But on my actual page, I have a table, with div class etc. - so I just need to apply Foamcows solution to that. Have tried, but without success.
 
Upvote 0 Downvote
So with this format of my code:

Code: 
<table cellspacing="0" class="offer">
					<tr>
						<td colspan="3">
							<div class="offtitle">
								<span  class="title">test text test text test text test text test text test text test text test text test text test text test text text test text test text test text test text test text test text text test text test text test text</span>
							</div>
						</td>
					</tr>
				</table>

How can I get Foamcows idea to display the output as shown in :


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
223
jjgupta915
jjgupta915
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
167
coldbohemia
coldbohemia
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
219
ChrisHirst
ChrisHirst
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
197
ChrisHirst
ChrisHirst
AzizKamal
  • Locked
  • Question
center-align menu item text 1
Replies
8
Views
343
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top