Cant get the Frame site to the way I need it

HTMLlearner313 · Joined: 27 Jul 2007 Posts: 1

Ok...first off I am pretty new at doing frames.
I got all the basics down on where the target frames and so forth.

The only problem Im having is editing a template I got.

Could someone help me with the HTML code I have?

The problem is FRAMES!
Im having the hardest time trying to get this webpage the way I want it to.

First off...
I have 3 frames.
The top part and the bottom part are two seperate frames that holds my clickable links.

The middle part is the one I want to change with each cooresponding click of
the links either above or below.

I managed to get the "targets" taken care of when you click a link the middle page changes
but the only problem Im having is this:

The page Im TRYING to develop:
I want it to take place in a small centered area of the persons screen.
This is where I want all the action to take place...
Not the whole lenght of the screen...

My top, middle, and bottom frame have symmetric "Bleed" zones on the left and right.
I dont want this area visible.

The webpages I made as links take up the whole middle part of the screen when clicked.

Im not exactly sure on how to accomplish centering the whole page and fixing my link pages to fit squarely
into the "centered" part of my web page.
I will try to find an example site for reference.

Can anyone help me out on this?
I hope I didnt confuse anyone.

I have attached the files cooresponding to the site Im making.

The "excess" is all the the Red and yellow that is outside of my "Box"
How do I ge rid of that and have the webpage centered?

Also, concerning the additional pages that I have linking to the center page...
How do I have the content centered?
As you can see when you click on members, the page is all the way at the top.
I would like to have it centered.

Lastly, the bottom frame...I cannot seem to get the picture to line up correctly.
I want it to look like the flip image of the top section.
Thanks again for the help.

Well...a lot of people have been telling me not to do frames...
but, again, Im new at this and not exactly sure on how to achieve the function without frames.

Well...heres an example of what Im trying to achieve
The template is here.
http://www.freewebsitetemplates.com/preview/nightclub2/

Ive attached my html code and my css sheet.
If I need to email what I have I can do that as well.

TOP FRAME
<title>TopNaviPage</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />

<style type="text/css">

</style></head>

<body>
<div id="container">
<div id="menu">

<ul>
<li id="m01"><a href="index.html" target="mainFrame">Home</a></li>
<li id="m02"><a href="Members.html" target="mainFrame">Members</a></li>
<li id="m03"><a href="recruits.htm" target="mainFrame">Recruits</a></li>
<li id="m04"><a href="store.htm" target="mainFrame">Store</a></li>
<li id="m05"><a href="contact.htm" target="mainFrame">Contact</a></li>
</ul>

</div>
</div>
</body>

TaRGET FRAME
<title>MainPage</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />

<style type="text/css">

</style></head>

<body>
<div id="container">

<div id="logo">
<a href="http://www.freewebsitetemplates.com"><img src="images/logo.gif" alt="logo" border="0" /></a>
</div>
<div id="dj"></div>
<div id="welcome">
<h2>Welcome</h2>
<img src="images/welcome.gif" alt="photo 1" />
<p>Ok...so far its looking pretty damn good.<br />
Now I just have to figure out the target linking</p>
<a class="more" href="http://www.freewebsitetemplates.com">more</a>
</div>
<div class="clear"></div>

</div>

BOTTOM FRAME
<title>BottomNaviPage</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<base target="contents">
<style type="text/css">

</style></head>

<body>
<div id="container">
<div id="bottommenu">

<ul>
<li id="bm01"><a href="BlitzInfo.htm" target="mainFrame">Interstate Blitz</a></li>
<li id="bm02"><a href="meetings.html" target="mainFrame">Meetings</a></li>
<li id="bm03"><a href="squadrons.html" target="mainFrame">Squadrons</a></li>
<li id="bm04"><a href="link1.html" target="mainFrame">Link 1 </a></li>
<li id="bm05"><a href="link2.html" target="mainFrame">Link 2 </a></li>
</ul>

</div>

</div>

<div id="">
<p align="center">Copyright Â© 2007 Turbulence all rights reserved. | <a href="termsofuse.html">Terms of use</a></div>

</body>

CSS SHEET

* {
margin: 0px;
padding: 0px;
}
body {
padding-top: 0px;
background-color: #01111d;
color: #FFF;
font-family: verdana, arial, sans-serif;

text-align: left;
letter-spacing: 1px;
}
a {color: #FFF;font-size: 14px;}
a:hover {color: #01a9c0;}
.more{float: left;}
.clear{clear:both;}
p{ margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}
#container {
margin: 0px auto;
width:862px;
background-color:pink;
}
#menu {
background-image:url(images/menualpha.jpg);
width:862px;
height:90px;
position:relative;
}
#menu li{
position:absolute;
top:50px;

list-style-type: none;
}
#m01 {left:160px;}
#m02 {left:305px;}
#m03 {left:450px;}
#m04 {left:590px;}
#m05 {left:730px;}
#menu a{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
}
#menu a:hover {color: #01a9c0;}
#header {
background-image:url(images/header.gif);
background-repeat:repeat-y;
width:873px;
}
#logo {
width:240px;
height:46px;
margin: 0px 0px 0px 80px;
float:left;
display:inline;
}
#dj {
background-image:url(images/dj.jpg);
width:498px;
height:405px;
float:right;
margin-right:40px;
display:inline;
}
#welcome {
width:210px;
margin: 50px 0px 0px 100px;
float:left;
display:inline;
}
#welcome h2{
margin: 0px 0px 20px 0px;
}
#welcome p{
width:200px;
}
#welcome img{
border: solid 3px #FFFFFF;
}
#middle {
background-image:url(images/middle.gif);
width:873px;
height:20px;
}
#middle2 {
background-image:url(images/middle2.gif);
width:873px;
height:22px;
}
#content {
background-image:url(images/content.gif);
width:873px;
}
#left {
float:left;
width:435px;
margin: 0px 0px 0px 85px;
display:inline;
}
#right {
float:right;
width:258px;
height:auto;
margin: 0px 62px 20px 0px;
display:inline;
}
#right a img{
margin: 8px 8px 8px 0px;
border: none 0px #FFFFFF;
}
#footer {
background-image:url(images/footer.gif);
background-repeat:no-repeat;
width:873px;
}
#footer p{
height:58px;
width:873px;
text-align:center;
margin: 0px 0px 0px 0px;
padding: 30px 0px 0px 0px;
font-size:11px;
}
#footer a{
font-size:11px;
}
#bottommenu {
background-image:url(images/bottommenualpha.jpg);
width:862px;
height:90px;
position:absolute;
}
#bottommenu li{
position:absolute;
bottom:250px;
list-style-type: none;
top: 32px;
}
#bm01 {left:145px;}
#bm02 {left:305px;}
#bm03 {left:450px;}
#bm04 {left:590px;}
#bm05 {left:730px;}
#bottommenu a{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
}
#bottommenu a:hover {color: #01a9c0;
}

Corey Bryant · Posted: Sat Jul 28, 2007 4:34 am

Where are you frames? One the URL you provided, there was no frames, and all the source code you gave us was for each of the frames but there needs to be a frame, something like