www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Controlling Vertical Placement of Text

Hybrid View

  1. #1
    Join Date
    Feb 2006
    Location
    Texas
    Posts
    100

    resolved [RESOLVED] Controlling Vertical Placement of Text

    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

  2. #2
    Join Date
    Mar 2004
    Location
    Maine
    Posts
    473
    Do you have an example I could look at?

  3. #3
    Join Date
    Feb 2006
    Location
    Texas
    Posts
    100
    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><!-- Inserts the background graphic-->

    <!-- Inserts navigation links-->
    <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>

    <!-- Content: Latipac Page -->
    <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
    Last edited by BobH; 02-23-2006 at 04:42 PM.

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    here is how


    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

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    wow... *grin*

    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
    Last edited by WebJoel; 02-23-2006 at 07:17 PM.

  6. #6
    Join Date
    Feb 2006
    Location
    Texas
    Posts
    100
    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.
    BobH - The Ancient Noob
    "Just because you can doesn't mean you should!"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles