[RESOLVED] Controlling Vertical Placement of Text

**BobH** · 02-23-2006 02:07 PM

Another newbie ?

I'm having difficulty using CSS to position text vertically. In using very large and large page headings, I want each to appear in a particular vertical position relative to the top of the page (and to each other). I've been able to do so by putting inline CSS statements in HTML code but it seems this defeats the purpose of CSS when one wants to define a standard that will apply across multiple pages. I've tried 'position : absolute; top ; value;' but can't seem to get it to work. One of the requirements is that the text must be right-aligned and of variable length; so "fixing" the top left corner will not work.

Suggestions appreciated.

BobH

**Neczy** · 02-23-2006 02:18 PM

Do you have an example I could look at?

**BobH** · 02-23-2006 04:32 PM

In the CSS file named broughtonstyle.css:
.bigfont {
font-family: "comic sans ms";
font-size: 5em;
color: #70009F;
background-color: transparent;
}

.bigfont_h1 {
font-family: "comic sans ms";
font-size: 5em;
color: #70009F;
text-align : right;
background-color: transparent;
margin-right: 1in;
margin-top : 0in;
}

Bigfont is a style that can appear where ever I place it in a page. Bigfont_h1 is the one that I want to position in a specific vertical position, right aligned to fill whatever space the actual text requires. Other styles used in the HTML were left out to conserve space.

The HTML (note that is not yet complete; I haven't made links out of the text at the bottom yet and various other changes that will come):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>NBHS Class of '60 Latipac Page
</title>
<style type="text/css">

</style>
<link rel="stylesheet" href="broughtonstyle.css" type="text/css">
<base href="http://home.hot.rr.com/broughton1960/">
</head>

<body>


<div id="navbuttonpanel">
<a href="index.html"> Home Room <br></a>
<a href="hitimes.html">Hi Times <br></a>
<a href="studentlounge.html">Student Lounge <br></a>
<a href="reunions.html">Reunions <br></a>
<a href="addresses.html">Addresses<br></a>
<a href="inmemorium.html">In Memorium <br></a>
<a href="latipac.html">Latipac <br></a>
<a href="links.html">Links & Credits <br></a>
<a href="contactus.html">E-Mail Us</a> <br>
</div>


<div class="bigfont_h1">
Latipac
</div>

<div class="page_headline">
N. B. Broughton High School - Raleigh NC - Senior Class - 1960
</div>

<div id="latipac_col_1r1">
Thomas Eugene McAllister "Tom"
</div>

<div id="latipac_col_1r2">
Thomas Eugene McAllister "Tom"
</div>

<div id="latipac_col_1r3">
Thomas Eugene McAllister "Tom"
</div>

<div id="latipac_col_2">
<img src="mcclellande.jpg" alt="dottie">
Dorothy Elaine McClellan "Dottie"
</div>

<div id=bottom_menu>
[A-B] [C-D] [E-F] [G-H] [I-J] [K-L] [M-N] [O-P]
[Q-R] [S-T] [U-V] [W-X] [Y-Z]
</div>

</body>
</html>

Thanks for the help! I really appreciate it!

Before I go, can anyone tell me how Charlyne caused her submitted code to appear in a scroll boxes as it did? Are there tools here for that or did she put some code in her post?

BobH

**WebJoel** · 02-23-2006 06:46 PM

Before I go, can anyone tell me how Charlyne caused her submitted code to appear in a scroll boxes as it did? Are there tools here for that or did she put some code in her post?

BobH

Did so by

click/hold & drag your mouse over text you want highlighted and then in this box's 'toolbar' (above), select either [.CODE] (#), [.HTML] (<>), [.PHP] (php) or [.QUOTE] (quotation bubble) icon.
Doing this 'seperates' your entered code and prevents it from running or in otherwords, stops treating it as if it were normal text and applies code-appropriate color-cues to your markup tags. It is sort of a VisualBasic thing. But if ever in doubt, just 'quote' (that little yellow-ish quotation bubble thing, top-right icon).

The really long/tall sections treated this way are defaulted into vertical scrollbars.
It took me a few posts to figure out what everyone was telling me to do...

-Joel

**WebJoel** · 02-23-2006 07:11 PM

You've got some seriously twisted code going on in there...

I examined your external style sheet, looking for some clues, among some things, found this:

Code:

#navbuttonpanel {
	border: 5px; 
	border-style: ridge;
	border-color: #4F1386;
	margin-top: 225px;
	margin-right: 18px;
	margin-bottom: 18px;
	margin-left: 80px;
	padding: 10px;
	background-image: url(buttonandgraphics/buttonsbox.jpg); 
	font-family: "comic sans ms"; 
	color: #4F1386; 
	background-color: transparent;
	font-size: 12pt;
	line-height: 23pt;
	position: absolute; top : -60px; left : -15px;

And if you think about it for a moment, you've got things working against each other. Seriously, trim some of this down. You just shoved this DIV down 225px from the top, and the 'absolute position' you assign it at the bottom then negative-shoves it 60 pixels back up again... wasted effort (and ditto for the left, you send it 80-pixels to the right, and then abs-pos it negative 15 again). -Giving some browsers a good hearty work-out, eh?

I see that you have got that 'Latipac' text positioned using ..."inches"?? Browsers measure pixels "px", points "pt", M-space/X-space "em" and "ex" but to my knowledge they do not faire so well using inches, feet and yards, cubits, etc...

-I'd stick to pixels for the greatest control over spacing, or em at least.

My biggest suggestion though, is get rid of the 'absolute' positioning that you're using... it just makes things more difficult because it takes the affected element 'off the drawingboard' and nothing else floats or aligns because of it.
Simplify some of this, -you've got things fist-fighting each other...

-Joel

**BobH** · 02-23-2006 07:18 PM

Thanks WJ!

I KNEW I was twisted - mentally at least. I'm using TopStyle lite for the CSS and it makes it easy to do stupid things like I did and not notice them. And -- as if you couldn't tell -- I'm a newbie to this type of coding (old COBOL mf programmer). Thanks for the pointers on posting, too.

Could you amplify your statements about getting rid of the absolute spacing because it takes the element 'off the drawingboard'? I really AM trying to understand how these statements interact.

Thread: [RESOLVED] Controlling Vertical Placement of Text

Thread Tools

Display

Hybrid View