[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

HTML Right Navigation

Posted on 2014-07-11
8
Medium Priority
?
380 Views
Last Modified: 2014-08-08
I have a website that uses a left navigation page that loads on the left of every page of the website.  I have recently created a page to show pictures that I want to show on the right side of the page.  How do I code my webpages to encompass both the leftnav as well as another page on the right side?

Below is the html text that adds the leftnav to each webpage.

<td bgcolor="#ffffff" height="100%" valign="top" width="2"></td> 
        <td bgcolor="#ffffff" valign="top" width="189">@@BEGIN_OF_COMMENT#include file="leftnav.html" @@END_OF_COMMENT</td> 
        <td valign="top" width="4"></td> 
        <td bgcolor="#ffffff" valign="top" width="2"></td> 
        <td valign="top" width="558"> 

Open in new window

Thanks in advance.
0
Comment
Question by:ollybuba
  • 3
  • 2
5 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40190908
Can you please provide a link to your test page.  

I am confused.  You have code for the left side, but not the right? I may be missing something but I'm  not sure how to help with that.

In simple terms you can create a wrapper class with the width, then give the left class a width and float it left and do the same for the right class.  Just make sure the 2 widths equal the width of the wrapper in px or %
<div class="wrapper">
    <div class="col-left">left</div>
    <div class="col-right">right</div>
</div>

Open in new window

0
 

Author Comment

by:ollybuba
ID: 40190975
So out of this original code where would I insert and end the div command?

<center> 
  <table border="0" cellspacing="0" cellpadding="0" width="800" bgcolor="#000000" valign="TOP"> 
    <tbody> 
      <tr> 
        <td bgcolor="#ffffff" valign="top" width="800" align="center"><img width="800" src="/spaw/getimg.php?img=home_files/header.jpg" /></td> 
      </tr> 
    </tbody> 
  </table>@@BEGIN_OF_COMMENT Main Content Table @@END_OF_COMMENT 
  
  <table border="0" cellspacing="0" cellpadding="0" width="800" bgcolor="#ffffff"> 
    <tbody> 
      <tr> 
        <td bgcolor="#ffffff" height="100%" valign="top" width="2"></td> 
        <td bgcolor="#ffffff" valign="top" width="189">@@BEGIN_OF_COMMENT#include file="leftnav.html" @@END_OF_COMMENT</td> 
        <td valign="top" width="4"></td> 
        <td bgcolor="#ffffff" valign="top" width="2"></td> 
        <td valign="top" width="558"> 
          <table border="0" width="550"> 
            <tbody> 
              <tr> 
                <td colspan="3"></td> 
              </tr> 
              <tr> 
                <td colspan="3"> 
                  <div align="center"> 
                    <p><a href="/spaw/gethref.php?

Open in new window


            (starts the rest of the main page)
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40191007
Are you using tables and tables inside of tables for a layout?    If so, stop and start over.  You are in for a mess and a broken site.

Start with a css grid and I prefer responsive.  http://getbootstrap.com/  or http://foundation.zurb.com/

In any case, you don't have enough code to help you.  I am actually even more confused. Your question states your code is for a left nav but your new code shows that in the 5th column.

Please create a very simple test page and post the link here or perhaps recreate it in jsbin.com or jsfiddle for us to look at.  

 http://css-tricks.com/reduced-test-cases/
0
 

Author Comment

by:ollybuba
ID: 40191038
Ya I did not add the right side code in yet.  I'm just modifying the page.  I didn't create it.  I was showing you the leftnav that is already in place.  I need to add a rightnav or page to it.
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 40191065
I don't condone using tables for layout.

But in simple terms
<table>
    <tr>
        <td>Left</td>
        <td>mid</td>
        <td>right</td>
    </tr>
</table>

Open in new window

If your css is jumbling things around beyond that, I wouldn't even attempt to help.   Overall, this is not good practice.  Additionally, you shouldn't use inline styles anymore.  Keep the html simple and use css.

<td bgcolor="#ffffff" valign="top" width="800" align="center">

should be
<style>
.foo{
   background-color:#fff;
   width:800px;
   text-aligin:center;
   vertical-align:text-top;
}
</style>
<td class="foo">

Open in new window

0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

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 . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

873 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