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
Solved

Left Nav bar aesthetic Blending

Posted on 2007-04-04
9
226 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Place text over image using CSS 6 48
Hide cell in a table 2 26
Html CheckBox obtain Its Value 5 27
send email part1 9 22
For many of us, the  holiday season kindles the natural urge to give back to our friends, family members and communities. While it's easy for friends to notice the impact of such deeds, understanding the contributions of businesses and enterprises i…
A great marketing strategy is diverse.  Read about the not so popular, yet effective, marketing tactics you can start using today!
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…

791 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