Solved

Left Nav bar aesthetic Blending

Posted on 2007-04-04
9
221 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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Marketers need statistics and metrics like everybody else needs oxygen. In this article we explain how to enable marketing campaign statistics for Microsoft Exchange mail.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now