Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Left Nav bar aesthetic Blending

Posted on 2007-04-04
9
Medium Priority
?
241 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:
Mark Steggles earned 1000 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 1000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In today's business world, data is more important than ever for informing marketing campaigns. Accessing and using data, however, may not come naturally to some creative marketing professionals. Here are four tips for adapting to wield data for insi…
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…
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…
Suggested Courses

636 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