Solved

left column navigation

Posted on 2009-05-18
14
393 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

760 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

19 Experts available now in Live!

Get 1:1 Help Now