Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Trying to align vertical bar in table

Options
  • 17-01-2006 9:21pm
    #1
    shamrock2004
    Closed Accounts Posts: 603 ✭✭✭


    Hi all. I have what i am sure is a relatively trivial HTML question. Bear with me!
    Looking at the first attached "image", i have a table with site navigation as the table header and 12 subsequent rows. The first row houses a single <td> element with "Home", the next row houses a single <td> element with the horizontal dotted line and so on. Problem is, I want that Vertical dotted line to run down the left hand side of the table from the top to the bottom. I cant seem to get it. I tried having <tr><td rowspan="12"><img src="verticaldottedline.jpg"></td></tr> but this just places the vertical line below the table header and pushes all the other 12 rows out to the right as in "image2". Any help would be greatly appreciated!!
    Many thanks.


Comments

  • Options
    #2
    jjmax
    Closed Accounts Posts: 240 ✭✭jjmax


    If you shortened the verticaldottedline.jpg so it was contained in a cell at the right of each row would that do the trick?
    Something like: 
    <table>
<tr>
<td>
<img src="verticaldottedlinesmall.jpg>
</td>
<td>
<Home>
</td>
</tr>
<tr>
<td>
<img src="verticaldottedlinesmall.jpg>
</td>
<td>
<img src="horizontaldottedline.jpg>
</td>

.....etc

    Not sure if this will do it, but it might be worth a try.


  • Options
    #3
    lkman
    Closed Accounts Posts: 145 ✭✭lkman


    Something like this? 
    <table>
<tr>
	<td rowspan="15"><img src="vline.jpg" /></td>
	<th>Navigation</th>
</tr>
<tr><td>Home</td></tr>
<tr><td><img src="hline.jpg" /></td></tr>
<tr><td>News</td></tr>
<tr><td><img src="hline.jpg" /></td></tr>
<tr><td>Events</td></tr>
<tr><td><img src="hline.jpg" /></td></tr>
<tr><td>Images</td></tr>
<tr><td><img src="hline.jpg" /></td></tr>
<tr><td>Audio</td></tr>
<tr><td><img src="hline.jpg" /></td></tr>
<tr><td>Video</td></tr>
<tr><td><img src="hline.jpg" /></td></tr>
<tr><td>Contact us</td></tr>
<tr><td><img src="hline.jpg" /></td></tr>
</table>


  • Options
    #4
    shamrock2004
    Closed Accounts Posts: 603 ✭✭✭shamrock2004


    Thanks for the help guys, ill give it a try this evening and report back!
    Many thanks,
    regards :D


  • Options
    #5
    shamrock2004
    Closed Accounts Posts: 603 ✭✭✭shamrock2004


    Thanks for the help jjmax and lkman. Im not far off the finish line lkman, i got the following output from using your suggestion (See image2 attached).Unfortunately the width of the cell containing the dotted bar will not alter when i supply different parameters!Any other ideas?
    Cheers!
    Shamrock
    Heres my code so far!
    <table cellpadding="5">
    <tr>
    <td rowspan="12"><img src="../navigationdottedbarvertical.jpg" /></td>
    <th><img src="../navigationbar.jpg" /></th>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Home</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> News</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Events</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Images</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Audio</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Links</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    </table>


  • Options
    #6
    frodo_dcu
    Closed Accounts Posts: 119 ✭✭frodo_dcu


    there are many problems with above code i won't go in to them all but approching this the wrong way you nedd to use css not images
    one ploblem is that <th> = table header and must be the first thing in the table

    on to the soloution
    to use a css soulution put this between <head> and </head> on your page

    [HTML]<style type="text/css">

    .nav {
    width: 200px;
    align: left;
    padding: 15px;
    }
    .navContent {
    border-Left: 1px dotted #BBBCCC;
    border-bottom: 1px dotted #BBBCCC;
    padding: 15px;
    }
    .navHeader {
    border-Left: 1px dotted #BBBCCC;
    border-top: 1px dotted #BBBCCC;
    border-bottom: 1px dotted #BBBCCC;
    padding: 15px;
    }

    img }
    border: 0px;
    }

    </style>[/HTML]

    Then change your table code to this: (note it does not require the use of the navigationdottedbarhorizontal.jpg images)

    [HTML]<table class="nav">
    <tr>
    <td class="navHeader"><img src="../navigationbar.jpg" /></td>
    </tr>
    <tr>
    <td class="navContent">   <img src="../menutab_arrow_moff_bus.gif" /> Home</td>
    </tr>
    <tr>
    <td class="navContent">   <img src="../menutab_arrow_moff_bus.gif" /> News</td>
    </tr>
    <tr>
    <td class="navContent">   <img src="../menutab_arrow_moff_bus.gif" /> Events</td>
    </tr>
    <tr>
    <td class="navContent">   <img src="../menutab_arrow_moff_bus.gif" /> Images</td>
    </tr>
    <tr>
    <td class="navContent">   <img src="../menutab_arrow_moff_bus.gif" /> Audio</td>
    </tr>
    <tr>
    <td class="navContent">   <img src="../menutab_arrow_moff_bus.gif" /> Links</td>
    </tr>
    </table>[/HTML]

    The "navHeader" class may not be required it depends on how you want the placement of the "navigationbar.jpg" image in relation to the rest of the table

    this should work fine let me know


  • Advertisement
  • Options
    #7
    frodo_dcu
    Closed Accounts Posts: 119 ✭✭frodo_dcu


    just looking back at ur code the problem was easly fixed the way it was but i would really recomend the css route above ^^^ as it will make the page load quicker .... yada yada yada ... (insert loads of good reasons to use css here)

    but if u wish to insist on using the "pre historic" route here ya go:

    [HTML]
    <table cellpadding="5">

    <tr>
    <td colspan="2"><img src="../navigationbar.jpg" />navigation bar</td>
    </tr>
    <tr>
    <td rowspan="12" width="2px"><img src="../navigationdottedbarvertical.jpg" /></td>
    <td width="85" align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Home</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> News</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Events</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Images</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Audio</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    <tr>
    <td align="left">   <img src="../menutab_arrow_moff_bus.gif" /> Links</td>
    </tr>
    <tr>
    <td><img src="../navigationdottedbarhorizontal.jpg" /></td>
    </tr>
    </table>
    [/HTML]

    i can't stress enough is that top way is the "propper" way by all accounts but then each to his own

    let me know which you pick or if you need more info on CSS just ask here

    Ps please excuse my spelling in post


  • Options
    #8
    shamrock2004
    Closed Accounts Posts: 603 ✭✭✭shamrock2004


    No, I will most certainly adopt the css route. I will take a look through it myself and ascertain exactly what is going on. Can't thank you enough for the help (and every1 else for that matter!)
    Thanks again,
    Shamrock


  • Options
    #9
    frodo_dcu
    Closed Accounts Posts: 119 ✭✭frodo_dcu


    no worries sham let us know if u run ito any probs and i'll do my best to help out


  • Options
    #10
    shamrock2004
    Closed Accounts Posts: 603 ✭✭✭shamrock2004


    Will do, cheers mate.


  • Options
    #11
    shamrock2004
    Closed Accounts Posts: 603 ✭✭✭shamrock2004


    Bling Bling! Got the layout I wanted. Getting the hang of this css, seems fairly handy!I used the following code in the end: 
    <html>
  <head>
    <style type="text/css">

    .nav  {
	  width: 150px;
    }
    .navContent  {
	  border-left-style: dotted;
          border-bottom-style: dotted;
	  border-left-width: thin;
	  border-bottom-width: thin;
	  border-color: #6633FF;
	  padding: 5px;
    }
    .navHeader   {
    	  
    }

    </style>
  </head>
  <body>
    <table class="nav">
      <th><img src="header.jpg" /></th>
      <tr>
        <td class="navContent">&nbsp;&nbsp;&nbsp;<img src="menutab_arrow_moff_per.gif" />&nbsp;Home</td>
      </tr>
      <tr>
        <td class="navContent">&nbsp;&nbsp;&nbsp;<img src="menutab_arrow_moff_per.gif" />&nbsp;News</td>
      </tr>
      <tr>
        <td class="navContent">&nbsp;&nbsp;&nbsp;<img src="menutab_arrow_moff_per.gif" />&nbsp;Events</td>
      </tr>
      <tr>
        <td class="navContent">&nbsp;&nbsp;&nbsp;<img src="menutab_arrow_moff_per.gif" />&nbsp;Images</td>
      </tr>
      <tr>
        <td class="navContent">&nbsp;&nbsp;&nbsp;<img src="menutab_arrow_moff_per.gif" />&nbsp;Audio</td>
      </tr>
      <tr>
        <td class="navContent">&nbsp;&nbsp;&nbsp;<img src="menutab_arrow_moff_per.gif" />&nbsp;Links</td>
      </tr>
    </table>
  </body>
</html>
    I have attached an image of the table.I have one final question, if I may. If i set the width of the border to thin (as in the bottom border in the image) the dots seem a little too close together. If i set the width to 1px (as in the left border) I dont get dots, I get dashes. I was wondering if there was a way to disperse the dots more? I have looked through the css section on w3schools, but cant make any headway. Im happy to have got the layout I wanted! Thanks!
    Shamrock


  • Advertisement
Advertisement