Skip to main content
R
rshick
Participant
September 19, 2012
Answered

Positioning a Table

  • September 19, 2012
  • 1 reply
  • 2026 views

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

This topic has been closed for replies.
Correct answer sudarshan.t

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!

1 reply

sudarshan.t
sudarshan.tCorrect answer
Inspiring
September 19, 2012

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!

R
rshickAuthor
Participant
September 21, 2012

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
sudarshan.t
Inspiring
September 21, 2012

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>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices