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 9 of 9

Thread: Aligning Text

  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning Text

    I have a table I made with 3 columns and all the CSS is working well but I can't figure out how to do this...

    [ Login ]
    [ Input ]
    [Blah ^]

    What I want is the blah text to be centered and then the caret to be right aligned. The text that needs to be right aligned will always stay the same - The test that needs to be centered will usually be different. If anyone knows a workaround using CSS it'd be appreciated! Thanks!

    The reason for the caret is an arrow to collapse the center content...Does anyone know how to do that?

    Here is the code

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Admin</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    </head>
    
    <body>
    <table width="303" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td><div class="box"> Admin Login </div></td>
      </tr>
      <tr class="middlebox">
        <td cellspacing class="middlebox"><form action="process.php" method="post">
          <div align="center"><br>Username:
              <input type="text" name="username" size="20">
              <br><br>
              Password:
              <input type="password" name="pw" size="20">
              <br><br>
              <input type="submit" value="Login">
          </div>
        </form></td>
      </tr>
      <tr>
        <td class="box">Powered By Phillysfun CMS^</td>
      </tr>
    </table>
    </body>
    </html>
    Last edited by pbjorge12; 04-06-2005 at 08:48 PM.

  2. #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post

    maybe

    using tables for design is bad..... im sure one of the elite members will scold you for that....

    does the character have to be a character? or can it be a bg image and padding?

    your could try floating it or absolutly positioning it to take it out of the flow.


    EDIT//

    i didnt see the code...
    which line is it?
    <td class="box">Powered By Phillysfun CMS^</td>
    ??

    and u want the carrot on the right side of the box and the "powered by" centered or left?


    ...like this?

    Code:
        <td class="box"><span style="float:left;">Powered By Phillysfun CMS</span><span style="float:right;"> ^</span><br style="height:0; clear:both"/></td>
    Last edited by zro@rtv; 04-06-2005 at 08:57 PM. Reason: o there's code.! ...answer
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  3. #3
    New Coder
    Join Date
    Apr 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by zro@rtv
    using tables for design is bad..... im sure one of the elite members will scold you for that....

    does the character have to be a character? or can it be a bg image and padding?

    your could try floating it or absolutly positioning it to take it out of the flow.


    EDIT//

    i didnt see the code...
    which line is it?
    <td class="box">Powered By Phillysfun CMS^</td>
    ??

    and u want the carrot on the right side of the box and the "powered by" centered or left?


    ...like this?

    Code:
        <td class="box"><span style="float:left;">Powered By Phillysfun CMS</span><span style="float:right;"> ^</span><br style="height:0; clear:both"/></td>
    What should I use instead of tables? Divs or what? I am using Dreamweaver and am a novice dreamweaver user and have just recently stopped using iframes so any help will be appreciated. You are looking at the right line and I want the caret to the right and powered by centered. Thanks!

  4. #4
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post

    links

    Quote Originally Posted by pbjorge12
    What should I use instead of tables? Divs or what?
    Yeah.... well hard to say.... not seeing the entire layout.... or is this the whole page.... just a login... You should write your markup semantically and style those elements w/ css...
    css drive :: tableless forms
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  5. #5
    New Coder
    Join Date
    Apr 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is the whole page -It's just a login to an admin section...But I want to make a page with a layout similar to this - http://wiredphp.net - And this is just a basic design/color scheme that I plan to use w/ my wholse site. What should I use? And is it safe to store my username/password in a MySQL database unencrypted?
    Last edited by pbjorge12; 04-06-2005 at 09:29 PM.

  6. #6
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post

    ish

    prolly shouldn't do this.. you should do it yr self... and learn....
    heres a VERY ruff mockup just as an example....
    not very elegant.... just tableless.... CHECK THAT CSS DRIVE LINK (above)

    Code:
    <style type="text/css">
    <!--
    #panel {
    width:300px;
    }
    
    label {
    float:left;
    margin-left:0.5em;
    margin-right:0.5em;
    }
    
    .box {
    display:block;
    margin:0.5em;
    }
    
    form {
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    }
    
    .pwrd {
    text-align:center;
    }
    
    .rght{
    float:right;
    display:block;
    }
    
    -->
    </style>
    </head>
    
    <body>
    
    <div id="panel">
    <h1>&raquo; admin login &laquo;</h1>
    
    <form class="box" action="process.php" method="post">
    <div class="box">
    <label for="username">username:</label>
     <input type="text"name="username" size="20">
    </div>
    <div class="box">
    <label for="pw">password:</label>
    <input type="password" name="pw" size="20">
    </div>
    <input class="box" type="submit" value="Login">
     </form>
    <div class="box"><span class="rght">^</span><span class="pwrd">powerd bi</span> </div>
    </div>

    as far as that site.... well.... you can look at their css...
    http://wiredphp.net/styles.css

    ...but they are using tables (yuck)....
    if u just want 3 column layout ... google is your friend
    Last edited by zro@rtv; 04-06-2005 at 09:30 PM. Reason: typo
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  7. #7
    New Coder
    Join Date
    Apr 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by zro@rtv
    prolly shouldn't do this.. you should do it yr self... and learn....
    heres a VERY ruff mockup just as an example....
    not very elegant.... just tableless.... CHECK THAT CSS DRIVE LINK (above)

    Code:
    <style type="text/css">
    <!--
    #panel {
    width:300px;
    }
    
    label {
    float:left;
    margin-left:0.5em;
    margin-right:0.5em;
    }
    
    .box {
    display:block;
    margin:0.5em;
    }
    
    form {
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    }
    
    .pwrd {
    text-align:center;
    }
    
    .rght{
    float:right;
    display:block;
    }
    
    -->
    </style>
    </head>
    
    <body>
    
    <div id="panel">
    <h1>&raquo; admin login &laquo;</h1>
    
    <form class="box" action="process.php" method="post">
    <div class="box">
    <label for="username">username:</label>
     <input type="text"name="username" size="20">
    </div>
    <div class="box">
    <label for="pw">password:</label>
    <input type="password" name="pw" size="20">
    </div>
    <input class="box" type="submit" value="Login">
     </form>
    <div class="box"><span class="rght">^</span><span class="pwrd">powerd bi</span> </div>
    </div>

    as far as that site.... well.... you can look at their css...
    http://wiredphp.net/styles.css

    ...but they are using tables (yuck)....
    if u just want 3 column layout ... google is your friend

    Thanks for all your help! I have one more question...What is so bad about tables?

  8. #8
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post

    ...

    google is your friend

    tables are for tabular data... like multiplication tables.
    css is for design and layout.
    nested tables dont make any sense, semantically.... decreases accessability and search engine ranks...
    also inabilty to creat truly fluid action (float is yr friend)

    really, i guess only nerds care.... but truly it is "correct".

    theres more on that i guess.... but im sure you'll figure it out.
    search search search
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  9. #9
    New Coder
    Join Date
    Apr 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by zro@rtv
    google is your friend

    tables are for tabular data... like multiplication tables.
    css is for design and layout.
    nested tables dont make any sense, semantically.... decreases accessability and search engine ranks...
    also inabilty to creat truly fluid action (float is yr friend)

    really, i guess only nerds care.... but truly it is "correct".

    theres more on that i guess.... but im sure you'll figure it out.
    search search search
    I'll be sure to search next time...Thanks!


 

Posting Permissions

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