Positioning a Table

[rshick]

Hey guys - I'm a beginner - trying to position a table vertically underneath a specific image. You can see the page at the link below. I want that table containing to the video to sit underneath the second image on the line above and to the right of the third image to complete the grid.

Thanks,

Rachel

http://presidio.com/template-interior2.php

[sudarshan.t · Accepted solution]

Replace Lines 79 - 90 of your HTML code with this:

<div class="interior-body-full">

      <h1>Presidio Cisco Profile</h1>

      <table>

      <tr>

      <td>

      <img src="images/Quadrant1.png" width="400" height="400" /></td>

      <td><img src="images/Quadrant2.png" width="400" height="400" /></td></tr>

<tr>   

    <td>

      <img src="images/Quadrant1.png" width="400" height="400" /></td>

      <td><img src="images/Quadrant4.png" width="400" height="80" border="0" />

        <br />

        <iframe width="400" height="315" src="http://www.youtube.com/embed/RtjEz8e_XbI?list=UUFiRYYo7EyMpX-YEj0Kholg&hl=en_US" frameborder="0" allowfullscreen></iframe></td>

        </tr>

      </table>

Just a quick suggestion - while I do understand you mentioned you're still a beginner, you should consider learning CSS instead of tables.

One of our senior forum members has written a beautiful tutorial that you can follow to create stunning CSS based websites. You can see it here: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

All the best!

[rshick]

Thank you, that worked.

And yes, I have played around with CSS, though I have not gotten enough training to really make CSS work for me.

I actually have an additional question related to this page that deals with CSS. I dropped a form into one of those quadrants - it's a form we use elsewhere on the site and so I just copied and pasted code. However, I'm having trouble getting the form to fit the way I want into the table. I can't change the style sheet as that will effect other forms on the site. I'm assuming I need to add some code to this page only to adjust where it sits as well as the size of the input boxes. Can you advise? Page and Style sheet below.

http://presidio.com/template-interior2.php

http://presidio.com/styles/default.css

Thanks,

Rachel

[sudarshan.t]

In your CSS, from line 30, add this code:

form.form-interior1 label { clear: both; display: block; float: left; width: 150px; margin-top: 10px; height: 24px; line-height: 24px; text-align: right; padding-right: 10px; }

form.form-interior1 input { width: 200px; height: 20px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; line-height: 20px; color: #999; font-family: Arial, Helvetica, sans-serif; margin-top: 10px; padding-left: 4px; border: 1px solid #CCC; }

form.form-interior1 select { width: auto; height: 40px; min-height: 40px; font-size: 14px; line-height: 40px; color: #999; font-family: Arial, Helvetica, sans-serif; margin-top: 10px; border: 1px solid #CCC; padding: 4px; }

In your HTML, remove lines 85-93. Add this at Line 85:

<td>

<form class="form-interior1" method="POST" action="/fall" id="">

    <label>*First Name:</label>

    <input type="text" style="" value="" name="fname"><br>

    <label>*Last Name:</label> <input type="text" value="" name="lname">

    <input type="text" style="margin-left: 40px;" value="" class="l_name" id="xname" name="xname"><br>

    <label>*Company:</label>

    <input type="text" style="" value="" name="company"><br>

    <label>*Email Address:</label>

    <input type="text" style="" value="" name="email"><br>

    <label>*Phone:</label>

    <input type="text" style="" value="" name="phone"><br>

    <input type="submit" style="margin-left:170px;" class="submitbtn" id="submit" value="Submit" name="Submit">

   </form>

[rshick]

Wow. Thank you. But what happened to the Submit button? See below:

http://presidio.com/template-interior2.php

http://presidio.com/styles/default.css