Align Text With Table 2

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ashraf02
    New Member
    • Feb 2008
    • 53
    #1

    Align Text With Table 2

    hi

    i have tried to take up the advice of yoda and harshmaul for aligning text with the table however i have not succeeded. the funny thing is that they both come in line when i set to table align right however when i try moving the table back to the center the links slip back down. can anyone help me please. i have used the table to create a form. if there is another way to create the form so that everything is aligned neatly without the use of tables i would appreciate any suggestions.

    for further insight i have copied the code below for the css file if it helps and also a print screened image of my webpage.

    code:

    [HTML]body{background-image:url(http://www.nigelfrench .com/psunmasked/brown_texture.j pg)}
    h1{font-family:Creamina l; font-size:large; text-align:center; color:#FF0000}
    h2{font-family:"Goudy Old Style"; font-size:18px; color:#FFFFFF}
    img{border:none }
    p{vertical-align:top}
    [/HTML]
    Tags: None
    • ronverdonk
      Recognized Expert Specialist
      • Jul 2006
      • 4259
      #2
      You should make your 'tables' using CSS only and without the use of html table. See the following tutorial on webpages without tables

      Ronald

        Comment

        • ashraf02
          New Member
          • Feb 2008
          • 53
          #3
          thanks alot ronald u've been a great help. i have managed to make the forms look how i wanted without the annoying tables. however i'm still have problems with aligning my html links with the form. i have used vertical align on the form but my links still end up at the bottom of the page.

          any suggestions?

          Ashraf

            Comment

            • ronverdonk
              Recognized Expert Specialist
              • Jul 2006
              • 4259
              #4
              I cannot see from nothing how your links are rendered on the page. So better show some code, within the appropriate code tags, of course!

              Ronald

                Comment

                • ashraf02
                  New Member
                  • Feb 2008
                  • 53
                  #5
                  here's the html code:

                  [HTML]<body>
                  <h1><img src="Web Images/Banners/SuitFormTitle1. jpg"></img></h1>
                  <h4>
                  <a href="Suit_Form .html"><img src="Web Images/Buttons/Smart.jpg"></img></a><br />
                  <a href="Casual_Fo rm.html"><img src="Web Images/Buttons/Casual.jpg"></img></a><br />
                  <a href="Suit_Form .html"><img src="Web Images/Buttons/Urban.jpg"></img></a><br />
                  </h4>
                  <div>
                  <form action="Insert_ Suit.php" method="post">
                  <div class="row">
                  <span class="item"><h 2>ID</h2></span>
                  <span class="formw">< input type="text" name="SuitID" size="5" /></span>
                  </div>
                  <div class="row">
                  <span class="item"><h 2>Suit Brand</h2></span>
                  <span class="formw">< input type="text" name="SuitBrand " size="20"/></span>
                  </div>
                  <div class="row">
                  <span class="item"><h 2>Suit Type</h2></span>
                  <span class="formw">< input type="text" name="SuitType" size="20"/></span>
                  </div>
                  <div class="row">
                  <span class="item"><h 2>Suit Colour</h2></span>
                  <span class="formw">< input type="text" name="SuitColou r" size="20"/></span>
                  </div>
                  <div class="row">
                  <span class="item"><h 2>Suit Price</h2></span>
                  <span class="formw">< input type="text" name="SuitPrice " size="10"/></span>
                  </div>
                  <div class="row">
                  <span class="item"><h 2>Suit Description</h2></span>
                  <span class="formw">< textarea name="SuitDesc" rows="5" cols="20"></textarea></span>
                  </div>
                  <div class="row">
                  <span class="item"></span>
                  <span class="formw">< input type="image" name="submit" src="Web Images/Buttons/Submit.jpg"/></span>
                  </div>
                  </form>
                  </body>[/HTML]

                  here's the CSS code:
                  [HTML]
                  body{background-image:url(http://www.nigelfrench .com/psunmasked/brown_texture.j pg)}
                  h1{font-family:Creamina l; font-size:large; text-align:center; color:#FF0000}
                  h2{font-family:"Goudy Old Style"; font-size:18px; color:#FFFFFF}
                  img{border:none }
                  h3{text-align:center}
                  div.row {clear: both; padding-top: 5px;}
                  div.row span.item {float: left; width: 100px; text-align: right;}
                  div.row span.formw {float: right;width: 235px; text-align: left;}
                  div {width:360px; border: 1px groove #FF0000; padding:5 px; margin:0px auto; vertical-align:top}[/HTML]

                  thanks

                  ashraf

                    Comment

                    • ronverdonk
                      Recognized Expert Specialist
                      • Jul 2006
                      • 4259
                      #6
                      On my screen the 3 links are all three in the left upper corner, stacked.
                      I noticed that your 'table' is centered in FF but not in IE. So I changed the CSS a bit and your first div and positioned the last </div> behind the </form> and now it also centers in IE. Here it is:[html]<style>body{bac kground-image:url(http://www.nigelfrench .com/psunmasked/brown_texture.j pg);
                      text-align:center;}
                      h1{font-family:Creamina l; font-size:large; text-align:center; color:#FF0000}
                      h2{font-family:"Goudy Old Style"; font-size:18px; color:#FFFFFF}
                      img{border:none }
                      h3{text-align:center}
                      div.row {clear: both; padding-top: 5px;}
                      div.row span.item {float: left; width: 100px; text-align: right;}
                      div.row span.formw {float: right;width: 235px; text-align: left;}
                      div {width:360px; border: 1px groove #FF0000; padding:5 px; margin:0px auto; vertical-align:top}
                      </style>
                      <body>
                      <h1><img src="Web Images/Banners/SuitFormTitle1. jpg"></img></h1>
                      <h4>
                      <a href="Suit_Form .html"><img src="Web Images/Buttons/Smart.jpg"></img></a><br />
                      <a href="Casual_Fo rm.html"><img src="Web Images/Buttons/Casual.jpg"></img></a><br />
                      <a href="Suit_Form .html"><img src="Web Images/Buttons/Urban.jpg"></img></a><br />
                      </h4>
                      <div style='margin:0 auto;width:800p x;'>
                      <form action="Insert_ Suit.php" method="post">
                      <div class="row">
                      <span class="item"><h 2>ID</h2></span>
                      <span class="formw">< input type="text" name="SuitID" size="5" /></span>
                      </div>
                      <div class="row">
                      <span class="item"><h 2>Suit Brand</h2></span>
                      <span class="formw">< input type="text" name="SuitBrand " size="20"/></span>
                      </div>
                      <div class="row">
                      <span class="item"><h 2>Suit Type</h2></span>
                      <span class="formw">< input type="text" name="SuitType" size="20"/></span>
                      </div>
                      <div class="row">
                      <span class="item"><h 2>Suit Colour</h2></span>
                      <span class="formw">< input type="text" name="SuitColou r" size="20"/></span>
                      </div>
                      <div class="row">
                      <span class="item"><h 2>Suit Price</h2></span>
                      <span class="formw">< input type="text" name="SuitPrice " size="10"/></span>
                      </div>
                      <div class="row">
                      <span class="item"><h 2>Suit Description</h2></span>
                      <span class="formw">< textarea name="SuitDesc" rows="5" cols="20"></textarea></span>
                      </div>
                      <div class="row">
                      <span class="item"></span>
                      <span class="formw">< input type="image" name="submit" src="Web Images/Buttons/Submit.jpg"/></span>
                      </form>
                      </div>
                      </body>
                      [/html]Ronald

                        Comment

                        • ashraf02
                          New Member
                          • Feb 2008
                          • 53
                          #7
                          hi ronald thanks for ur time but when i used ur code it aligned the links and the table in the middle of the page with the links being on top and not the links and table aligned on the same row.

                          i am trying to do the same with my insert html page. i will post the code below along with the stylesheet code if u can help i would really appreciate it.

                          HTML Code:

                          [HTML]<head>
                          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                          <link rel="stylesheet " type="text/css" href="Insert_Fo rms/NobleForms.css"/>
                          <title>Suit Form</title>
                          </head>

                          <body>
                          <h1><img src="Web Images/Banners/SmartFormTitle. jpg"></img></h1>

                          <h3 align="center">
                          <A href="Suit_Form .html"
                          onmouseover="do cument.Suits_Bu t.src='Web Images/Web Page/SuitsOn.jpg'"
                          onmouseout="doc ument.Suits_But .src='Web Images/Web Page/SuitsOff.jpg'" >
                          <img src="Web Images/Web Page/SuitsOff.jpg" border="0"
                          ALT="Suits Sand" NAME="Suits_But " />
                          </A>

                          <A href="Shirt_For m.html"
                          onmouseover="do cument.Shirts_B ut.src='Web Images/Web Page/ShirtOn.jpg'"
                          onmouseout="doc ument.Shirts_Bu t.src='Web Images/Web Page/ShirtOff.jpg'" >
                          <img src="Web Images/Web Page/ShirtOff.jpg" border="0"
                          ALT="Shirts Sand" NAME="Shirts_Bu t" />
                          </A>

                          <A href="Trouser_F orm.html"
                          onmouseover="do cument.Trousers _But.src='Web Images/Web Page/TrousersOn.jpg' "
                          onmouseout="doc ument.Trousers_ But.src='Web Images/Web Page/TrousersOff.jpg '" >
                          <img src="Web Images/Web Page/TrousersOff.jpg " border="0"
                          ALT="Trouser Sand" NAME="Trousers_ But" />
                          </A>
                          </h3>
                          <p>
                          <a href="Smart_For m.html"><img src="Web Images/Buttons/Smart.jpg"></img></a><br />
                          <a href="Casual_Fo rm.html"><img src="Web Images/Buttons/Casual.jpg"></img></a><br />
                          <a href="Urban_For m.html"><img src="Web Images/Buttons/Urban.jpg"></img></a><br />
                          </p>

                          </body>
                          </html>[/HTML]

                          CSS code:
                          Code:
                          body{background-image:url(http://www.nigelfrench.com/psunmasked/brown_texture.jpg)}
h1{font-family:Creaminal; font-size:large; text-align:center; color:#FF0000}
h2{font-family:"Goudy Old Style"; font-size:18px; color:#FFFFFF}
img{border:none}
div.row {clear: both; padding-top: 5px;}
div.row span.item {float: left; width: 100px; text-align: right;}
div.row span.formw {float: right;width: 235px; text-align: left;}
div {width:360px; border: 1px groove #FF0000; padding:5 px; vertical-align:top}
p {vertical-align:top}

                            Comment

                            Previous template Next
                            Working...