Solved

Left Nav bar aesthetic Blending

Posted on 2007-04-04
9
224 Views
Last Modified: 2010-04-27
Hi Everyone,

I am making a left navigation bar and i want to it to look more blended into the page.  Right now it appears to be boxed off almost just placed on to of the page.  I want it to be set into the left side of the page.  All i pretty much want is to have a blue line extend down the page to almost section of the nav bar. I tried playing around with the borders but i haven't been able to get it to where i want it to be. Here is the table whichthe navigation is inside of.  I just want a blue line to run down the right side of the navigation all the way down the page.  Any suggestions are appreciated thanks.


            <table cellpadding="0" height="800" cellspacing="0" border="0">
                  <tr valign="top">
                        <td>      
                              <table cellpadding="0" cellspacing="1" border="0">
                                    <tr>
                                          <td valign="top">
      <!--**********************************Menu Bar****************************************-->
      <ul id="nav"
      ><li
      ><a href="#">Home</a
      ></li
      ></li
      ><li
      ><a href="#">Synagogue</a
      ><ul
      ><li><a href="#">History</a></li
      ><li><a href="#">Clergy</a></li
      ><li><a href="#">Membership</a></li
      ><li><a href="#">Executive Board</a></li
      ><li><a href="#">Board of Trustees</a></li
      ><li><a href="#">Directory</a></li
      ><li><a href="#">Donations</a></li
      ><li><a href="#">Directions</a></li
      ><li><a href="#">Congregant Testimony</a></li
      ></ul></li><li><a href="#">Worship</a><ul
      ><li><a href="#">Services</a></li
      ><li><a href="#">Schedule</a></li
      ><li><a href="#">Holiday Services</a></li
      ><li><a href="#">Life Cycle Events</a></li
      ><li><a href="#">Ritual Committee</a></li
                                    ></ul>
                                    </li
                                    ><li><a href="#">Education</a><ul><li
                                    ><a href="#">Religious School</a></li><li><a href="#">Confirmation</a></li
                                    ><li
                                    ><a href="#">Adult Education</a></li
                                    ></ul>
                                    </li
                                    ><li><a href="#">Community</a><ul><li
                                    ><a href="#">Sisterhood</a></li><li><a href="#">Men's Club</a></li
                                    ><li
                                    ><a href="#">Chai Club</a></li><li><a href="#">Choir</a></li
                                    ><li
                                    ><a href="#">Social Action Committee</a></li><li><a href="#">Caring Committee</a></li
                                    ></ul>
                                    </li
                                    ><li><a href="#">Calendar/Events</a></li
                                    ><li><a href="#">Temple News</a><ul><li
                                    ><a href="#">Shofar</a></li><li><a href="#">Archives</a></li
                                    ></ul>
                                     </li
                                    ><li><a href="#">Jewish World</a><ul><li
                                    ><a href="#">Submit Recipies</a></li><li><a href="#">Submit Book Titles</a></li
                                    ></ul>
                                    </li
                                    ><li><a href="#">Donations</a></li
                              ></ul>
      <!--***************************************************************************************-->
                                          </td>
                                    </tr>
                                    <tr>
                                          <td width="155" height="69">
                                          </td>
                                    </tr>                                                
                              </table>
                        </td>
                        <td valign="top">
                              <table align="left" width="430">
                                    <tr>
                                          <td>
                                                <img src="http://www.rapidshutter.com/images/announcements.png" border="0">
                                          </td>
                                    </tr>
                                    <tr>
                                          <td>
                                                <table height="135" width="430" background="http://www.rapidshutter.com/images/textbox.jpg">
                                                      <tr>
                                                            <td valign="top">
                                                                  <br>&nbsp;&nbsp;&nbsp;Happy New Year
                                                                  <br>&nbsp;&nbsp;&nbsp;Happy Chanukkah!
                                                            </td>
                                                      </tr>
                                                </table><br><br><br>
                                          </td>
                                    </tr>
                                    
                                    <tr>
                                          
                                          <td bgcolor="#0099FF" width="600" height="5">
                                                <font color="#FFFFFF"  size="3"><b>Announcements</b></font>
                                          </td>      
                                    </tr>      
                                    <tr>
                                          <td bgcolor="#FFFFFF">
                                                <font color="#0099FF">Bar Mitzvah Service</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td bgcolor="#66CCFF">
                                                <font color="#FFFFFF">Carnival</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td bgcolor="#FFFFFF">
                                                <font color="#0099FF">Happy Holidays</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td bgcolor="#0099FF" width="600">
                                                <font color="#FFFFFF" size="3"><b>Shofar Headlines</b></font>
                                          </td>      
                                    </tr>
                                    <tr>
                                          <td  bgcolor="#FFFFFF">
                                                <font color="#0099FF">Bar Mitzvah Service</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td bgcolor="#66CCFF">
                                                <font color="#FFFFFF">Carnival</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td  bgcolor="#FFFFFF">
                                                <font color="#0099FF">Happy Holidays</font>
                                          </td>
                                    </tr>
                              </table>
                        </td>
                  </tr>
            </table>
0
Comment
Question by:JMRFan4Life
  • 3
  • 3
9 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 250 total points
ID: 18853046
Hello JMRFan4Life,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
* {padding:0;margin:0;}
html, body {height:100%;}
</style>
</head>
<body>
<table cellpadding="0" height="800" cellspacing="0" border="0">
                  <tr valign="top">
                        <td>      
                              <table cellpadding="0" cellspacing="1" border="0">
                                    <tr>
                                          <td valign="top">
      <!--**********************************Menu Bar****************************************-->
      <div style="height:100%;border-right:1px solid #369;">
      <ul id="nav"
      ><li
      ><a href="#">Home</a
      ></li
      ></li
      ><li
      ><a href="#">Synagogue</a
      ><ul
      ><li><a href="#">History</a></li
      ><li><a href="#">Clergy</a></li
      ><li><a href="#">Membership</a></li
      ><li><a href="#">Executive Board</a></li
      ><li><a href="#">Board of Trustees</a></li
      ><li><a href="#">Directory</a></li
      ><li><a href="#">Donations</a></li
      ><li><a href="#">Directions</a></li
      ><li><a href="#">Congregant Testimony</a></li
      ></ul></li><li><a href="#">Worship</a><ul
      ><li><a href="#">Services</a></li
      ><li><a href="#">Schedule</a></li
      ><li><a href="#">Holiday Services</a></li
      ><li><a href="#">Life Cycle Events</a></li
      ><li><a href="#">Ritual Committee</a></li
                                    ></ul>
                                    </li
                                    ><li><a href="#">Education</a><ul><li
                                    ><a href="#">Religious School</a></li><li><a href="#">Confirmation</a></li
                                    ><li
                                    ><a href="#">Adult Education</a></li
                                    ></ul>
                                    </li
                                    ><li><a href="#">Community</a><ul><li
                                    ><a href="#">Sisterhood</a></li><li><a href="#">Men's Club</a></li
                                    ><li
                                    ><a href="#">Chai Club</a></li><li><a href="#">Choir</a></li
                                    ><li
                                    ><a href="#">Social Action Committee</a></li><li><a href="#">Caring Committee</a></li
                                    ></ul>
                                    </li
                                    ><li><a href="#">Calendar/Events</a></li
                                    ><li><a href="#">Temple News</a><ul><li
                                    ><a href="#">Shofar</a></li><li><a href="#">Archives</a></li
                                    ></ul>
                                     </li
                                    ><li><a href="#">Jewish World</a><ul><li
                                    ><a href="#">Submit Recipies</a></li><li><a href="#">Submit Book Titles</a></li
                                    ></ul>
                                    </li
                                    ><li><a href="#">Donations</a></li
                              ></ul></div>
      <!--***************************************************************************************-->
                                          </td>
                                    </tr>
                                    <tr>
                                          <td width="155" height="69">
                                          </td>
                                    </tr>                                                
                              </table>
                        </td>
                        <td valign="top">
                              <table align="left" width="430">
                                    <tr>
                                          <td>
                                                <img src="http://www.rapidshutter.com/images/announcements.png" border="0">
                                          </td>
                                    </tr>
                                    <tr>
                                          <td>
                                                <table height="135" width="430" background="http://www.rapidshutter.com/images/textbox.jpg">
                                                      <tr>
                                                            <td valign="top">
                                                                  <br>   Happy New Year
                                                                  <br>   Happy Chanukkah!
                                                            </td>
                                                      </tr>
                                                </table><br><br><br>
                                          </td>
                                    </tr>
                                   
                                    <tr>
                                         
                                          <td bgcolor="#0099FF" width="600" height="5">
                                                <font color="#FFFFFF"  size="3"><b>Announcements</b></font>
                                          </td>      
                                    </tr>      
                                    <tr>
                                          <td bgcolor="#FFFFFF">
                                                <font color="#0099FF">Bar Mitzvah Service</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td bgcolor="#66CCFF">
                                                <font color="#FFFFFF">Carnival</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td bgcolor="#FFFFFF">
                                                <font color="#0099FF">Happy Holidays</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td bgcolor="#0099FF" width="600">
                                                <font color="#FFFFFF" size="3"><b>Shofar Headlines</b></font>
                                          </td>      
                                    </tr>
                                    <tr>
                                          <td  bgcolor="#FFFFFF">
                                                <font color="#0099FF">Bar Mitzvah Service</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td bgcolor="#66CCFF">
                                                <font color="#FFFFFF">Carnival</font>
                                          </td>
                                    </tr>
                                    <tr>
                                          <td  bgcolor="#FFFFFF">
                                                <font color="#0099FF">Happy Holidays</font>
                                          </td>
                                    </tr>
                              </table>
                        </td>
                  </tr>
            </table>
</body>
</html>

Regards,

Steggs
0
 
LVL 5

Expert Comment

by:richswyatt
ID: 18853052
Do you want the blue border to just border the right side of the left nav - to separate it from the body of the page, or how/where do you want the border?
0
 

Author Comment

by:JMRFan4Life
ID: 18853280
I want to seperate the nav bar from the body of the page
0
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 5

Expert Comment

by:richswyatt
ID: 18853294
Ok:

  <td valign="top">
      <!--**********************************Menu Bar****************************************-->
      <div style="height:100%;border-right:1px solid #369;">

change the <td valign="top"> to <td valign="top" style='border-right: 1px solid #369'> and drop the <div> enclosure.
0
 

Author Comment

by:JMRFan4Life
ID: 18853303
I am placing the left nav bar under my top banner that stretches across the page.  I just want to give it a frame kind of that extends down the page.
0
 
LVL 5

Assisted Solution

by:richswyatt
richswyatt earned 250 total points
ID: 18853313
Yes - do the above and you should get what you want.
0
 

Author Comment

by:JMRFan4Life
ID: 18854123
Awesome, can i get a line going down the left side to, i can only define 1 style within the <td> tag
0

Featured Post

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Accurate Analytics (Not Google) 2 40
execute script based on HTML event 7 23
Can't find PHP files on account that has WordPress 3 26
Problem to file 13 40
In this blog, I will share you some basic tips for content marketing and to rank your website on Google.
Preparing an email is something we should all take special care with – especially when the email is for somebody you may not know very well. The pressures of everyday working life stacked with a hectic office environment can make this a real challen…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to download your full Prezi presentation for offline presenting. Prezi doesn’t have to be viewed and shared in a web browser, even with a free account you can download your full presentation to share with others. Be sure to download any vi…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question