|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
July 27th, 2007, 06:54 PM
|
|||
|
|||
|
Need some help with a Frame template Im editing
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. freewebsitetemplates.com/preview/nightclub2/
|
|
#2
July 27th, 2007, 06:57 PM
|
|||
|
|||
|
TOP FRAME
Code:
<title>TopNaviPage</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<style type="text/css">
<!--
body {
background-color: #FF0000;
}
-->
</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 Code:
<title>MainPage</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</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 Code:
<title>BottomNaviPage</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<base target="contents">
<style type="text/css">
<!--
body {
background-color: #FF0000;
}
-->
</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>
MY SCC SHEET Code:
* {
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;
}
|
|
#3
July 28th, 2007, 03:39 PM
|
|||
|
|||
|
I'm not going to take the time to read your whole post, so what exactly are you trying to do and what is your problem? I agree with those who told you not to use frames. Read here: http://www.w3.org/TR/WCAG10-HTML-TECHS/#frames
The above link also provides alternatives to using frames.
__________________
jmurrayhead Did I help you out? Make me popular by clicking the  icon!New Members:Proper way to post a question Powered by ASP.Net
|
|
#4
July 29th, 2007, 06:56 PM
|
|||
|
|||
|
Im trying to develop a basic page that is centered on the monitor and has 2 navigation panes (frames) one at the top and one at the bottom. Basically a big square in the middle of your screen.
When you click on any of the links on the top or bottom the middle part is the one that changes.
|
|
#5
July 29th, 2007, 07:01 PM
|
|||
|
|||
|
Quote:
Did you view the example in the link I provided? You should be able to achieve this with that.
|
|
#6
July 29th, 2007, 07:31 PM
|
|||
|
|||
|
Quote:
Ok...I will check it out tonight. Thanks P.S. Will it help my achieve the function like this site akuhnmuench.com/fogg/ See how when you click the links it doesnt take the whole screen? Im just trying to get the fuction to this template freewebsitetemplates.com/preview/nightclub2/
|
|
#7
July 29th, 2007, 08:01 PM
|
|||
|
|||
|
What do you mean by "take the whole screen"? You can change the size of the contents by using CSS. Elaborate a little on this and I will try to help.
|
|
#8
August 1st, 2007, 07:01 PM
|
|||
|
|||
|
Quote:
Well...I ended up making... 5 frames. (Im New) I have a top frame with links. I have a bottom frame with links. I placed the two frames on the side of the target frame to get both my target frame and my navigation pages centered. If I didnt add the 2 frames on the side the middle frame (the target frame will open up the links the whole width of the screen. what Im trying to get is a main page that is centered and the links only open up in the target frame in between the top and bottom navigation frames. Its pretty much like a square that is centered in the screen and all web functions only happen in that square.
|
|
| Viewing: ASP Free Forums > Web Design > Web Layout > Need some help with a Frame template Im editing |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
