Solved

left column navigation

Posted on 2009-05-18
14
395 Views
Last Modified: 2012-05-07
Hello,

I am trying to create a web page layout where the left side contains the menu navigation
and the right side the content display depending what link is clicked on the left.

I am not sure how this is achieve. I have the basic design, but i now need to make the link work

this is the url so you can see the layout: http://fishywilly.com/
<html>
<head>
<title>Fishy Willy | Paradise is waiting for you...</title>
<style type="text/css">
<!--
body
	{
  	font-family: Comic Sans MS, lucida console, verdana, tahoma, arial, verdana, sans-serif;
	background: #023368;
	}
#header
	{
  	background: #023368;
  	position: absolute;
  	top: 50px;
  	left: 150px;
  	width: 900px;
  	height: 135px;
 
	}
 
#line
	{
  	position: absolute;
  	top: 185px;
  	left: 150px;
  	width: 900px;
  	height: 2px;
  	}
 
#leftcol
	{
  	background: #6faaf4;
  	position: absolute;
  	top: 186px;
	left: 150px;
  	width: 170px;
  	height: 400px;
	}
#content
	{
  	background:#9fcbfd;
  	position: absolute;
  	top: 186px;
	left: 300px;
  	width: 750px;
  	height: 400px;
 
 
	}
#footer
	{
  	background: #0f0;
  	position: absolute;
  	top: 585px;
  	left: 150px;
  	width: 900px;
  	height: 25px;
 
 
	}
#list a, #list a:visited
	{
  	display:block;
  	width:100%;
  	font-family: Comic Sans MS, lucida console, verdana, tahoma, arial, verdana, sans-serif;
  	font-size: 1.0em;
  	text-decoration:none;
  	color:#4b0000;
  	padding:0.25em;
  	}
#list
  	{
    padding:0;
    margin: 10px 10px 10px 10px;
    }
li
  	{
  	list-style-type:none;
  	width:100%;
  	font-family: Comic Sans MS, lucida console, verdana, tahoma, arial, verdana, sans-serif;
   	font-size: .9em;
   	text-decoration:none;
   	color:#4b0000;
   	padding:0.25em;
	}
 
#list a:hover
	{
	background:#3782d6;
	color:#f6eb67;
	}
 
.contentText {
  color: #00FF00;
  font-family: Comic Sans MS, lucida console, verdana, tahoma, arial, verdana, sans-serif;
  font-size:.9em;
  color:#4b0000;
  padding: 10px 0px 20px 0px;
  margin: 10px;
 
}
 
#container
{
	top: 10px;
	width: 900px;
  	border-right: 2px	 solid #CFCFCF
  	border-bottom: 2px	 solid #CFCFCF
  	border-left: 2px	 solid #CFCFCF
  	border-top: 2px	 solid #CFCFCF
 
}
 
-->
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/header.large.gif" border=0 /></div>
<div id="line"><img src="images/redRow.gif" border=0 height=2 width=100% /></div>
<div id="leftcol">
 
<ul id="list">
<li>
<a href="#">Home</a>
<a href="#">Reel Angel</a>
<a href="#">Casa Tamarindo</a>
<a href="#">Package Deals</a>
<a href="#">Calendar</a>
<a href="#">Contact Us</a>
</li>
</ul>
</td>
</tr>
</table>
</div>
<div id="content">
<img src="images/horizon.large.gif" width=750 height=120 />
<div class="contentText">Take a vacation from the vacation planning. Let us do it all for you. From picking you up at the airport,
to offering you the comfort of our Bed & Breakfast (Casa Tamarindo), to Sport Fishing & Snorkeling,
Tours to Cozumel & Tulum, we are all in one!
</div>
</div>
<div id="footer"><img src="images/footer.large.gif" border=0 /></div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:itortu
  • 6
  • 6
  • 2
14 Comments
 
LVL 2

Assisted Solution

by:rrattie
rrattie earned 500 total points
ID: 24414765
itortu,

If you are using just HTML and not some other web development language then the usual method would be to create a separate html page for each of your menu items and link each of the menu items to those pages.

<ul id="list">
<li>
<a href="index.htm">Home</a>
<a href="reel_angel.htm">Reel Angel</a>
<a href="casa_tamarindo.htm">Casa Tamarindo</a>
etc..
</li>

SO to recap and clarify, you would create your index.htm (homepage) with the layout you want and then in program that you are working in, save as that file 5 more times (one for each menu item) giving them each easy to understand file names. Then go into each file and edit them for the content you want to have on each page.

Then when a visitor clicks on the menu item link, it will load that html file.

Does this make sense to you?

Regards,
Ron R.
0
 

Author Comment

by:itortu
ID: 24414816
would it be possible to only have one shell
lets say the header, the left nav and footer,
and when the user clicks on the left nav the only thing that loads is the part in the middle/ center?
0
 

Author Comment

by:itortu
ID: 24414851
what language would achieve this functionality? do you know of any examples I can look at?
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 2

Expert Comment

by:rrattie
ID: 24414978
What you want can be achieved by almost any web development language.

PHP
ASP
Coldfusion

I personally recommend PHP for anyone getting started and probably not wanting to layout any extra money.

This tutorial here should be what you need to get started http://www.stevedawson.com/article0012.php
I think the layout used is the same too.

Regards,
Ron R.
0
 
LVL 2

Expert Comment

by:rrattie
ID: 24415043
If that doesn't work for you, I can code up a frame work later when I get home.
0
 
LVL 4

Expert Comment

by:Thorn007
ID: 24415081
You should try ajax, however, if you use ajax you need to consider the accessibility problems it creates. Blind users and those with disability may have a hard time accessing our content, this includes Google your #1 blind user.

With a page like yours I wouldn't go with ajax because its simple, you may want to look into some JavaScript.

You cause JavaScript to change text and element nodes in your DOM on the click event. However, the same problem will come about with accessibility.
0
 
LVL 2

Accepted Solution

by:
rrattie earned 500 total points
ID: 24418042
0
 

Author Comment

by:itortu
ID: 24422132
Thank you that is such a nice job what you did!

I have a question not really related to the original question, and I hope you don't mind me asking without opening a new question.

I have seen that when I open the web page on a wider monitor, the square where all the content is displayed, is not centered.

I worked on the page on a 1280 x 800 monitor, but last night I opened using a 1680 x 1050 and its position was more towards the left. Do you know how can this be corrected using CSS?

Thank you so much.
0
 
LVL 4

Expert Comment

by:Thorn007
ID: 24422550
here is an updated CSS I did in frebug, it works in FF don't know about other browsers.
body {
background:#023368 none repeat scroll 0 0;
font-family:Comic Sans MS,lucida console,verdana,tahoma,arial,verdana,sans-serif;
}
#header {
background:#023368 none repeat scroll 0 0;
height:135px;
left:150px;
position:absolute;
top:50px;
width:900px;
}
#line {
height:2px;
left:150px;
position:absolute;
top:185px;
width:900px;
}
#leftcol {
background:#6FAAF4 none repeat scroll 0 0;
height:400px;
left:150px;
position:absolute;
top:186px;
width:170px;
}
#content {
background:#9FCBFD none repeat scroll 0 0;
height:400px;
left:150px;
position:absolute;
top:186px;
width:750px;
}
#footer {
background:#00FF00 none repeat scroll 0 0;
height:25px;
left:150px;
position:absolute;
top:585px;
width:900px;
}
#list a, #list a:visited {
color:#4B0000;
display:block;
font-family:Comic Sans MS,lucida console,verdana,tahoma,arial,verdana,sans-serif;
font-size:1em;
padding:0.25em;
text-decoration:none;
width:100%;
}
#list {
margin:10px;
padding:0;
}
li {
color:#4B0000;
font-family:Comic Sans MS,lucida console,verdana,tahoma,arial,verdana,sans-serif;
font-size:0.9em;
list-style-type:none;
padding:0.25em;
text-decoration:none;
width:100%;
}
#list a:hover {
background:#3782D6 none repeat scroll 0 0;
color:#F6EB67;
}
.contentText {
color:#4B0000;
font-family:Comic Sans MS,lucida console,verdana,tahoma,arial,verdana,sans-serif;
font-size:0.9em;
margin:10px;
padding:10px 0 20px;
}
#container {
margin:0 auto;
position:relative;
top:10px;
width:900px;
}

Open in new window

0
 
LVL 2

Expert Comment

by:rrattie
ID: 24422571
Try changing the body and container entries in your css file to these.
body
        {
        font-family: Comic Sans MS, lucida console, verdana, tahoma, arial, verdana, sans-serif;
        background: #023368;
	text-align: center;
}
 
#container
{
        width: 900px;
        border-right: 2px        solid #CFCFCF
        border-bottom: 2px       solid #CFCFCF
        border-left: 2px         solid #CFCFCF
        border-top: 2px  solid #CFCFCF
	margin: 0 auto;
	text-align: left;
}

Open in new window

0
 

Author Comment

by:itortu
ID: 24423954
I am still not able to center the square in the dark blue bckground regardless of the monitor size.

I tried both of your suggestions and also did some research but no luck.

I am pasting a newer version of my css file

html,body
	{
	height:100%;
	overflow:hidden;
	}
	
body
	{
  	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
	background: #023368 none repeat scroll 0 0;
	
 
	
	}
	
#centeredcontent 
	{
	
	align:center;
	position:relative;
	
	} 
 
 
 
#header
	{
  	background:#023368 none repeat scroll 0 0;
  	position: absolute;
  	top: 20px;
  	left: 180px;
  	width: 900px;
  	height: 135px;
 
	}
 
#line
	{
  	position: absolute;
  	top: 155px;
  	left: 180px;
  	width: 900px;
  	height: 2px;
  	}
 
#leftcol
	{
  	background:#6FAAF4 none repeat scroll 0 0;
  	position: absolute;
  	top: 156px;
	left: 180px;
  	width: 170px;
  	height: 440px;
  	text-align: left;
	}
 
#content
	{
  	background:#9FCBFD none repeat scroll 0 0;
  	position: absolute;
  	top: 156px;
	left: 330px;
  	width: 750px;
  	height: 440px;
  	
 
 
	}
 
#footer
	{
  	position: absolute;
  	top: 595px;
  	left: 180px;
  	width: 900px;
  	height: 25px;
 
 
	}
#list a, #list a:visited
	{
	color:#4B0000;
  	display:block;
  	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
  	font-size: 1em;
  	padding:0.25em;
  	text-decoration:none;
  	width:100%;
  	}
 
#list
	{
    	padding:10px;
    	margin: 0;
    	}
 
li
  	{
  	color:#4B0000;
  	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
  	font-size:0.9em;
  	list-style-type:none;
  	padding:0.25em;
  	text-decoration:none;
   	width:100%;
	}
 
#list a:hover
	{
	background:#3782D6 none repeat scroll 0 0;
	color:#F6EB67;
	}
 
.contentText 
	{
	color:#4b0000;
 	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
 	font-size:0.9em;
 	margin:10px;
  	padding:10px 0 20px;
	}
 
.title
	{
	font-size:1.3em;
	padding-left: 180px;
	margin-bottom: 50px;
	}
 
.label
	{
	display:inline;
	font-size:1.0em;
	font-weight: bold;
	padding: 0px 0px 0px 3px;
    	letter-spacing: 1px
	}
.para
	{
	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
	display:inline;
	font-size:.9em;
	padding: 5px 0px 0px 2px;
    	letter-spacing: 1px;
    	line-height: 13pt;
    	
	}
 
#tulin
	{	
	padding: 5px 0px 10px 450px;
	color:#4b0000;
	}
.video
	{
  	background:#9fcbfd none repeat scroll 0 0;
  	position: absolute;
  	top: 156px;
	left: 330px;
  	width: 750px;
  	height: 440px;
	}
	
.pushit
	{
	margin-left: 175px;
	margin-top: 5px;
	}
	

Open in new window

0
 

Author Comment

by:itortu
ID: 24423973
I have also updated the html in the pages, pasting one of them.
<html>
<head>
<title>Fishy Willy | Paradise is waiting for you...</title>
<link rel="stylesheet" href="css/fishywillystyle.css" type="text/css">
</head>
<body>
<div id="centeredcontent">
 
 
 
		<div id="header"><a href="index.html"><img src="images/header.large.gif" border=0 /></a></div>
		<div id="line"><img src="images/redRow.gif" border=0 height=2 width=100% /></div>
		<div id="leftcol">
			<ul id="list">
				<li>
					<a href="index.html">Home</a>
					<a href="#">Reel Angel</a>
					<a href="casa.html">Casa Tamarindo</a>
					<a href="#">Package Deals</a>
					<a href="#">Calendar</a>
					<a href="contact.html">Contact</a>
					<a href="about.html">About Us</a>
				</li>
			</ul>
		</div>
		<div class="video">
			<img src="images/horizon.large.gif" width=750 height=120 />
			<div class="pushit">
				<object width="410" height="302">
					<param name="movie" value="http://www.youtube.com/v/c3BUhmCjSkk&hl=en&fs=1&rel=0&color1=0x006699&color2=0x54abd6"></param>
					<param name="allowFullScreen" value="true"></param>
					<param name="allowscriptaccess" value="always"></param>
					<embed src="http://www.youtube.com/v/c3BUhmCjSkk&hl=en&fs=1&rel=0&color1=0x006699&color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="410" height="302"></embed>
				</object>
			</div>
		</div>
		<div id="footer"><img src="images/footer.large.gif" border=0 /></div>
 
 
</div>
 
 
</body>
</html>

Open in new window

0
 
LVL 2

Assisted Solution

by:rrattie
rrattie earned 500 total points
ID: 24424203
This should fix it, just replace your css with this one. Works in FF and IE.
@charset "UTF-8";
/* CSS Document */
 
html,body
	{
	height:100%;
	overflow:hidden;
	text-align:center;
	margin: 0 auto;
	}
	
body
	{
  	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
	background: #023368 none repeat scroll 0 0;
	
 
	
	}
	
#centeredcontent 
	{
	
	
	position:relative;
	text-align:left;
	margin: 0 auto;
	width:900px;
	
	} 
 
 
 
#header
	{
  	background:#023368 none repeat scroll 0 0;
  	position: absolute;
  	top: 20px;
  	left: 0px;
  	width: 900px;
  	height: 135px;
 
	}
 
#line
	{
  	position: absolute;
  	top: 155px;
  	left: 0px;
  	width: 900px;
  	height: 2px;
  	}
 
#leftcol
	{
  	background:#6FAAF4 none repeat scroll 0 0;
  	position: absolute;
  	top: 156px;
	left: 0px;
  	width: 170px;
  	height: 440px;
  	text-align: left;
	}
 
#content
	{
  	background:#9FCBFD none repeat scroll 0 0;
  	position: absolute;
  	top: 156px;
	left: 0px;
  	width: 750px;
  	height: 440px;
  	
 
 
	}
 
#footer
	{
  	position: absolute;
  	top: 595px;
  	left: 0px;
  	width: 900px;
  	height: 25px;
 
 
	}
#list a, #list a:visited
	{
	color:#4B0000;
  	display:block;
  	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
  	font-size: 1em;
  	padding:0.25em;
  	text-decoration:none;
  	width:100%;
  	}
 
#list
	{
    	padding:10px;
    	margin: 0;
    	}
 
li
  	{
  	color:#4B0000;
  	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
  	font-size:0.9em;
  	list-style-type:none;
  	padding:0.25em;
  	text-decoration:none;
   	width:100%;
	}
 
#list a:hover
	{
	background:#3782D6 none repeat scroll 0 0;
	color:#F6EB67;
	}
 
.contentText 
	{
	color:#4b0000;
 	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
 	font-size:0.9em;
 	margin:10px;
  	padding:10px 0 20px;
	}
 
.title
	{
	font-size:1.3em;
	padding-left: 180px;
	margin-bottom: 50px;
	}
 
.label
	{
	display:inline;
	font-size:1.0em;
	font-weight: bold;
	padding: 0px 0px 0px 3px;
    	letter-spacing: 1px
	}
.para
	{
	font-family: calibri, majandra, verdana, tahoma, arial, verdana, sans-serif;
	display:inline;
	font-size:.9em;
	padding: 5px 0px 0px 2px;
    	letter-spacing: 1px;
    	line-height: 13pt;
    	
	}
 
#tulin
	{	
	padding: 5px 0px 10px 450px;
	color:#4b0000;
	}
.video
	{
  	background:#9fcbfd none repeat scroll 0 0;
  	position: absolute;
  	top: 156px;
	left: 150px;
  	width: 750px;
  	height: 440px;
	}
	
.pushit
	{
	margin-left: 175px;
	margin-top: 5px;
	}
	

Open in new window

0
 

Author Closing Comment

by:itortu
ID: 31582705
rrattie thank you so much for your help, your solution was perfect for what i needed. excellent job!
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from 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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

813 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

14 Experts available now in Live!

Get 1:1 Help Now