Solved

Left Nav bar aesthetic Blending

Posted on 2007-04-04
9
230 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

717 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