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.
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">
<title>NBHS Class of '60 Latipac Page
<link rel="stylesheet" href="broughtonstyle.css" type="text/css">
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?
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...
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...
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.
BobH - The Ancient Noob
"Just because you can doesn't mean you should!"