Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I get my text to align with the rest of the page?

    Hi everyone

    Let me first say how awesome it is for the web to have a place like this where other html coders can relate. I'm new to the scene and enjoying it.

    So onto my question..
    I'm an assistant on a web design project and I'm having trouble aligning text on a website. I used divs on a WYSIWYG editor to place the text and when I opened the page everything looked fine, of course that was because it was done on this computers resolution specs.

    Now if you look you will see that when you are either:
    A) On a different resolution on another computer the text look ambiguous and doesn't align propery
    B) Minimizing the window or changing its shape the text also doesn't align.

    So my question is, how do I resolve this matter.
    Any html pro's or programmers in whatever arena would be truly appreciated in taking a look at this issue for me.

    Oh and about styles..I don't know much about css as I'm still a beginner and I'm thinking I can't even use styles since I already have that <style> code in there already, but it's not a css one. So I've written that off.

    Here is the website so you can see the issue (assuming you're not on 1280 for your width in resolution and not in full screen).

    URL - http://blendsphere.com/mailconnect/

    Once at the site you can pull up the html code to see it too.
    I'll paste the code down below too if you don't want to go there.

    Again thanks for any support or solutions on this.
    I am relatively new to the web design world so if you do have any solutions if you could make it brief that would be fantatstic.

    Ok thanks again. Please enlighten this noob, so far I've been enjoying html and hope to do so for much longer.

    Alright then.

    -- CODE BELOW THIS LINE --

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Untitled</title>
    <script>
    window.resizeTo(1280, 1024);
    </script>

    <style>
    .txt{font-family:Tahoma; font-size:11px; color:#C2D7E9; padding-left:15px; padding-right:15px;}
    .href{font-family:Tahoma; font-size:11px; color:#C3AD31; text-decoration:none;}
    .tab1{font-family:Tahoma; font-size:11px; color:#003466; font-weight:bold;}
    .tab2{font-family:Tahoma; font-size:11px; color:#C2D7E9; }
    </style>
    </head>

    <body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
    <table width="100%" align="center">

    <tr>
    <td rowspan="10" width="50%" height="100%" background="images/bg1222.jpg" style="BACKGROUND-POSITION: right top; BACKGROUND-REPEAT: repeat-y"></td>
    <td rowspan="10" width="1" bgcolor="#c2d7e9"></td>
    <td colspan="2">
    <object style="WIDTH: 944px; HEIGHT: 46px;" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0">
    <param name="movie" value="images/blendconnect/header.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#C2D7E9">
    <embed style="WIDTH: 944px; HEIGHT: 46px;" src="images/blendconnect/header.swf" quality="high" bgcolor="#C2D7E9" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
    </embed>
    </object>
    </td>
    <td rowspan="10" width="1" bgcolor="#c2d7e9"></td>
    <td rowspan="10" width="50%" height="100%" background="images/bg1223.jpg" style="BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: repeat-y"></td>
    </tr>

    <tr>
    <td colspan="2" width="944" height="54" background="images/blendconnect/blendconnectdiv.jpg" align="middle" valign="top">
    </td>
    </tr>

    <tr>
    <td colspan="2" width="944" height="756" background="images/blendconnect/blendconnectback.jpg" align="middle" td="">
    <div class="centerdiv"><div style="Z-INDEX: 100; LEFT: 169px; WIDTH: 600px; POSITION: absolute; TOP: 138px; HEIGHT: 44px">
    <p align="left"><font face="Arial" color="#0d446d" size="2"><strong>Stay connected
    with other Multiracial &amp; Multicultural
    enthusiasts</strong></font></p></div>
    <div style="Z-INDEX: 100; LEFT: 173px; POSITION: absolute; TOP: 240px"><font face="Arial" size="1">Please enter your name and e-mail address above</font></div>
    <div style="Z-INDEX: 100; LEFT: 172px; POSITION: absolute; TOP: 287px">
    <p align="left"><font face="Arial" size="2"><strong>Other benefits
    include:<br></strong>- Ability for immediate networking with other
    Multiracial &amp; Multicultural enthusiasts<br>- Invitations to online
    conferences<br>- Free access to group meetups around the
    country<br>- Frequent news snippets on the latest pertaining to
    the community at large<br>- Immediate notices*for the latest updates
    on BlendSphere and its sister sites</font></p></div>
    <div style="Z-INDEX: 100; LEFT: 172px; WIDTH: 602px; POSITION: absolute; TOP: 165px; HEIGHT: 44px">
    <p align="left"><font face="Arial" size="2">
    Join our mailing list and get immediate access
    to live e-mail conversations and exchanges online, delivered right to your inbox.<br><form action="http://blendsphere.com/blendconnect/blendconnect.php" method="post"><input type="hidden" name="recipient" value="blendconnect@blendsphere.com"><input type="hidden" name="subject" value="Form Response"><input type="hidden" name="required" value="e_mail"><input name="e_mail"><input type="submit" value="Submit"></form></p></div></font></td>

    <tr>
    <td colspan="2" width="944" height="33" background="images/blendconnect/trademarkblendconnect.jpg" align="middle" valign="top">
    </td>
    </tr></table>

    </body>
    </html>

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Welcome to the forum.

    I thought that I would show you this site as someone else will if I do not.

    Best wishes.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    hey newcoder-

    the very first problem you have is this bad boy right here

    Code:
    <div style="z-index: 100; left: 169px; width: 600px; position: absolute; top: 138px; height: 44px;">
    That absolute position is not necessary here. If you are aligning text or a div onto a table or background image always use padding or margins. There is no reason to use positioning here.

    try this instead, you will need to play with this for a bit to get it right though.

    Code:
    <div style="z-index: 100; padding-left:20px; width: 600px; position: absolute; padding-top: 45px; height: 44px;">
    <p align="left">
    <font size="2" face="Arial" color="#0d446d">
    <strong> Stay connected with other enthusiasts</strong>
    </font>
    </p>
    </div>
    look into using link sheets for CSS when you learn more about the language instead of in-line CSS. Let us know if you have questions.

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks jc for that

    I think that may have solved it.
    Ok and when you said "play with it a bit" you mean in regards to the padding-left and padding-top variables right? So that it is placed correctly..such that whenever someone changes their window size or views the page in another resolution it will come up correctly right?

    Also one last thing I noticed it moves with the background only for "Stay connected with other enthusiasts" but when it comes to the text below and the form and stuff they don't move too. How may I resolve this?

    Thank you so much jc

    Also thank you effpeetee I browsed that page, I'm gonna have a more in depth look later on that today.

    Ok
    Quote Originally Posted by jcdevelopment View Post
    hey newcoder-

    the very first problem you have is this bad boy right here

    Code:
    <div style="z-index: 100; left: 169px; width: 600px; position: absolute; top: 138px; height: 44px;">
    That absolute position is not necessary here. If you are aligning text or a div onto a table or background image always use padding or margins. There is no reason to use positioning here.

    try this instead, you will need to play with this for a bit to get it right though.

    Code:
    <div style="z-index: 100; padding-left:20px; width: 600px; position: absolute; padding-top: 45px; height: 44px;">
    <p align="left">
    <font size="2" face="Arial" color="#0d446d">
    <strong> Stay connected with other enthusiasts</strong>
    </font>
    </p>
    </div>
    look into using link sheets for CSS when you learn more about the language instead of in-line CSS. Let us know if you have questions.

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I tried it jc and it still doesn't work properly.
    No matter how far to the left I want it to go (because Stay connected ends up being in the middle of the screen) it won't go anymore to the left. Any thoughts?

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    your major problem is that you, or the WYSIWYG, are using position absolute. That is not necessary. use padding's and margins. The real and only reason, IMO, to use absolute is for a pop up CSS window. Use padding and margins and if you need extra help PM me and we can try and figure this out if need be.


  •  

    Posting Permissions

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