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
i'm a bit lost here, how wide do you want 'offtitle'? and how wide do you want 'title' , you have given the <span> a width of 874px , because that is what you have applied to 'offtitle' div and so the <span> will fill up that space.

I do not understand what you are trying to acheive, maybe someone else does.

but if you want the title to be shorter in width, then either give 'title' class a width of its own, or change the width of 'offtitle'.

"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
Offtitle is 874px, and its ok for the title to fill this area of 874 px. The issue is that because the physical text can still go beyond that area, I want it to wrap to a second line, with the grey background (ie the grey background controlled by offtitle).
 
Upvote 0 Downvote
it does on my screen, look....
"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
test-centerproblem2.htm is the way I WANT it to look (as it looks on your screen and mine).

test-centerproblem.htm is the way that it is looking.

The difference between these 2 is that test-centerproblem2 isnt using table, div class etc. So my issue is trying to find the way to get test-centerproblem.htm to behave the same as test-centerproblem2.htm.

Hope that clarifies.
 
Upvote 0 Downvote
1. you've fixed the height to 24px, and the line height to 24px.

So one line of text is the height of the allowed div height, anything else on a new line will not show!

2. the background is not big enough for double lined title text, you need to make the image big enough to stretch to the max of 2 lines and it will auto cut if the line is only one high.

OR

you need to make the bg image so it looks nice when you repeat-y

OR

you simply apply a single colour to the BG of the offtitle div.


"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
So, if I understand you - your suggesting to remove the height and line-height entries, and to make the image larger (eg twice as big)?
 
Upvote 0 Downvote
yup - basically, try it and see if it gives you what you want.

"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, that seems to have done the trick! Many thanks 1DMF!
 
Upvote 0 Downvote
no probs, glad I could help.

"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
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