Layout Question [Archive] - Lissa Explains it All: Web Design Forums

twilitegxa

11-11-2006, 07:39 PM

I tried using Lissa's layout, listed below:

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images,

text links, etc. in this div. To change the

properties of this div you can change the #header

selector in the style sheet that is located on this

page between the head tags.

</div>

<div id="left">

Your left menu will go here. You can place images,

text links, etc. in this div. To change the

properties of this div you can change the #left

selector in the style sheet that is located on this

page between the head tags.

</div>

<div id="center">
All of your content goes in this div. This section

is fluid so that if the window is collapsed, your

div will collapse also and fit the screen

perfectly. To change the properties of this div

you can change the #center selector in the style

sheet that is located on this page between the head

tags.
</div>

</body>
</html>

Okay, here's my problem. I want to use a layout so I can have my links on the left side, and my banner on top of course, and my main page where the links load on the right side of the page. I can't figure out how to get this layout to make the links open on the right side of the screen so that after people click on a link, they can open the link on the right side of te screen and still see the links on the left side of the screen (you know, like a navigation bar). Can anyone help me please??? I know some html and css is fairly new to me and I just don't completely understand how to use it. Please, anyone?

Thanks,

Liz

bourdelson

11-12-2006, 03:56 PM

There are three solutions for this:

iframe: http://www.lissaexplains.com/frames.shtml#inline
server-side includes: http://www.lissaexplains.com/html6.shtml#ssi
php includes: http://www.lissaexplains.com/html6.shtml#php

An iframe creates a window where the links are targeted to and the pages load into. SSI and PHP includes reload the entire page, but make it easier so that you don't have to copy and paste all of your navigation bar and header coding into page after page of content. :)

twilitegxa

11-12-2006, 10:47 PM

According to my last post, which of those am I using with Lissa's example?

bourdelson

11-12-2006, 11:54 PM

With Lissa's example, you're not using any of them.

You'd have to copy and paste all of the coding into each new page, just changing whichever part changes for each new page.

twilitegxa

11-13-2006, 12:12 AM

Okay, thank you so much for the help. I'll try one of those.

twilitegxa

11-13-2006, 12:18 AM

How would I use SSI to work with my navigation bar? I'm sorry. I feel really stupid because I don't understand how to do all of this stuff. If the navigation bar was just a text file, then how would the links work? Can you help me out any more with this or direct me on how I'd find that information or a tutorial on how to do this type of thing? Thanks.

bourdelson

11-13-2006, 12:29 AM

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">
Header
</div>

<div id="left">
Menu
</div>

That would be your first include. You could call it header.shtml or whatever else you want, as long as it ends in .shtml

You'll save that just like that, and then the rest of your pages will look like this:


<div id="center">
This is where all of the stuff that changes goes.
</div>
</body>
</html>

And when you upload it and view the source of your pages, it'll be the complete coding instead of everyone being able to see the  in your source.

Hopefully this makes a bit more sense now. :)

twilitegxa

11-13-2006, 12:43 AM

Okay, I don't think I'll ever understand this. I copied and saved the first code you sent, and saved it as header.shtml. So how do I get the links to work? Where can I save them to make them work with this code?

bourdelson

11-13-2006, 12:53 AM

Okay, you have the header.shtml

Now make a new document and put this in it:


<div id="center">
This is where all of the stuff that changes goes.
</div>
</body>
</html>

Changing "this is where all of the stuff that changes goes" to your actual content.

Save that as a separate page with a .shtml extension, and upload that as well. Then, go to the page you just created, and everything should be there. :)

twilitegxa

11-13-2006, 01:06 AM

Okay, so where do I need to type my links at? On the header page or the other page?

bourdelson

11-13-2006, 03:39 PM

If you're talking about your navigation links, you'll want to type them in the header include, inside of one of the divs-- if you want your links at the top, put them in the div with the id "header"; if you want them on the left-hand side, put them in the div with the id "left".

twilitegxa

11-13-2006, 06:41 PM

So, can I check that it is working without uploading it to a site? As in, can I preview it in my internet explorer like I can with regular html pages or do I have to upload the pages to a site, like tripod.com or something first?

amyaurora

11-13-2006, 06:43 PM

twilitegxa

11-13-2006, 07:05 PM

Okay, well, I decided to just try uploading it to my tripod account, and it looks like it loads properly, but how can I get my links to display on the right side of the screen? This is my code:

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">
Header
</div>

<div id="left">
<a href="Home.htm">Home</a><br>
<a href="Profiles.htm">Profiles</a><br>
<a href="Guestbook.htm">Guestbook</a><br>
<a href="Credits.htm">Credits</a>
</div>

amyaurora

11-13-2006, 07:13 PM

Okay, well, I decided to just try uploading it to my tripod account, and it looks like it loads properly, but how can I get my links to display on the right side of the screen? This is my code:

<div id="left">
<a href="Home.htm">Home</a><br>
<a href="Profiles.htm">Profiles</a><br>
<a href="Guestbook.htm">Guestbook</a><br>
<a href="Credits.htm">Credits</a>
</div>

If you want links on the right you have to change the above to say right not left.

bourdelson

11-13-2006, 08:31 PM

It goes beyond just changing the name from left to right. You have to make some amendments to that first coding so that you have your links on the right, not the left.

Remove these from your CSS:

#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}

And put this in:

#right {
position: absolute;
right: 5px;
top: 160px;
width: 150px;
}

#center {

margin-left: 0px;
padding: 0px;
margin-right: 200px;
}

And then change the id name of your links from "left" to "right" and it should work. :)

twilitegxa

11-14-2006, 04:24 AM

But, I want the links to be on the left, and I want them to open up on the right, but when I changed the script like you said, the links were on the right, and when I clicked on one, they just opened up on the entire page and the links part disappeared. I want them to stay, so people can click on the different links and then the content show up beside the links on the right side of the page.

bourdelson

11-14-2006, 01:30 PM

Well, you said you wanted your links to display on the right side of the screen, which usually means that you want them on the right side, not the left side.

Switch back to the original coding so that they're on the left hand side again. :)

Going back to my original post, you're going to have to use either an iframe or server-side includes, because I don't think Tripod supports PHP.

If you've already started with SSI, then you continue to use that. Each page's coding has to look like this:


<div id="center">
This is where all of the stuff that changes goes.
</div>
</body>
</html>

Just with the stuff inside of the center div changed for each page.

twilitegxa

11-14-2006, 05:34 PM

Is this code we've been working with an SSI?
Also, do you know any free pages that support PHP? I want to eventually convert my page over to PHP, but right now I am not ready to pay for a server because my page is not even close to ready to really publish.

One more thing, how do I get an avatar on my profile? When I go to the edit avatar option under edit profile, it only says, "No specified avatar." And it has the option selected, "Do not use avatar." My options are only "Save changes" or "Reset fields". What can I do?

amyaurora

11-14-2006, 06:30 PM

bourdelson

11-14-2006, 08:02 PM

Is this code we've been working with an SSI?

This portion is a server-side include:



There are more free hosts that support PHP listed in the Web Site Goodies forum, as well. http://www.lissaexplains.com/forum/forumdisplay.php?f=10