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 Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Text spacing question

Status
Not open for further replies.
CliveC

CliveC

Programmer
Nov 21, 2001
1,222
US
I am trying to position different size & font text so that they are closer but no overlapping. In this example I am using position:absolute. The problem is with some fonts other than comic sans, overlapping can occur.

Can anyone think of a way to get the text items closer together without ever overlapping? I don't want to use images.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>Font Contrast</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body   {text-align:center} 
#main  {text-align:left; width:500px; 
        margin:0 auto; background:yellow;
        padding:20px 20px 10px 20px; 
        border-top: thick solid black;
        border-bottom: thick solid black}
.small {font:normal normal 16px "Palatino Linotype", Georgia, serif}
.big   {font:normal bold 64px "Comic Sans MS", "Lucida Calligraphy",
        cursive; position:relative; top:-36px} 
.right {float:right; font:normal bold 8px verdana, sans-serif}
.left  {float:left;  font:normal bold 8px verdana, sans-serif}
</style></head><body>
<div id="main">
<span class="small">A N O T H E R</span><br />
<span class="big">newsletter</span><br />
<span class="left">Volume 1 &bull; Number 1</span>
<span class="right">April &bull; 2005</span>
</div></body></html>

Clive
 
Sort by date Sort by votes
I think I have a solution that works when the big font in all lower-case. I basically removed the position:absolute
and gave the small text a line-height of zero and the big text a line-height of 70%.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>Font Contrast</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body   {text-align:center} 
#main  {text-align:left; width:500px; 
        margin:0 auto; background:yellow;
        padding:20px 20px 20px 20px; 
        border-top: thick solid black;
        border-bottom: thick solid black}
.small {font:normal normal 16px "Palatino Linotype", Georgia, serif;
        line-height:0%}
.big   {font:normal bold 64px "Comic Sans MS", "Lucida Calligraphy",
        cursive; line-height:70%} 
.right {float:right; font:normal bold 8px verdana, sans-serif}
.left  {float:left;  font:normal bold 8px verdana, sans-serif}
</style></head><body>
<div id="main">
<span class="small">A N O T H E R</span><br />
<span class="big">newsletter</span><br /><br />
<span class="left">Volume 1 &bull; Number 1</span>
<span class="right">April &bull; 2005</span>
</div></body></html>

Clive
 
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
258
jjgupta915
jjgupta915
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
145
jason.lex
jason.lex
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
182
coldbohemia
coldbohemia
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
249
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
What does a question mark (?) stands for in ancho tag ? 1
Replies
2
Views
422
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top