HTML Help Forum HTML Help
Please Search for the answer to your question before asking it! Thanks.
 

New to CSS - please help me with source/target frames!
Post a Reply to this Topic Ask a New Question
Click here to go to the original topic
       HTML Help Forum -> HTML Frame
View previous topic :: View next topic  
Author Message
jacarikes



Joined: 13 Mar 2009
Posts: 3

Posted: Fri Mar 13, 2009 4:50 pm     New to CSS - please help me with source/target frames!  

Hello,

I am making a website for a lawyer and decided to use a CSS template from Dynamic Drive. The template has fixed left, top, and right frames with main content in the center. I have linked images in the top frame that i would like to be sources for the main frame. In other words, when you click on one of those links, i'd like the page to show up in the main frame rather than in a new page. i can do this when i just have one sidebar (and i can do frameset cols in the index) but i don't know how to set this one up. please please help me.

i only have one page so far, here is the code:

<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 120px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: darkred;
color: white;
}

#framecontentRight{
left: auto;
right: 0;
width: 120px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: darkred;
color: white;
}

#framecontentTop{
position: absolute;
top: 0;
left: 120px; /*Set left value to WidthOfLeftFrameDiv*/
right: 120px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
height: 200px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color:black;
color: white;
}

#maincontent{
position: fixed;
top: 200px; /*Set top value to HeightOfTopFrameDiv*/
left: 120px; /*Set left value to WidthOfLeftFrameDiv*/
right: 120px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 120px 150px 0 200px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}

</style>

</head>

<body>

<div id="framecontentLeft">
<div class="innertube">
<h1></h1>
<h3></h3>

</div>
</div>

<div id="framecontentRight">
<div class="innertube">
<h3></h3>
</div>
</div>

<div id="framecontentTop">
<div class="innertube">
<h3></h3>
<p align=center>
<img src="macron_title.jpg">
<br><br><br> //**THESE ARE THE LINKS BELOW**\\
<a href="home.html" target="maincontent"><img src="macron1_home.jpg"></a>
<a href="contact.html" target="maincontent"><img src="macron1_contact.jpg"></a>
<a href="services.html" target="maincontent"><img src="macron1_services.jpg"></a>
<a href="about.html" target="maincontent"><img src="macron1_about.jpg"></a>
</p>

</div>
</div>


<div id="maincontent">
<div class="innertube">
<h1></h1>
<p align=center>
FILLER SAMPLE TEXT
</p>

</div>
</div>


</body>
</html>

i know i need an index, navigation, and content page, but i dont know how to set it up with this template...

thank YOUuu
thank you thank you thank you.
jacarikes



Joined: 13 Mar 2009
Posts: 3

Posted: Fri Mar 13, 2009 4:52 pm     p.s.  

here is the current state of the page, on a temp. domain:

http://www.geocities.com/kesslerjaci/macron.html


Corey Bryant



Joined: 15 May 2004
Posts: 8748
Location: Castle Pines North, CO USA

Posted: Sat Mar 14, 2009 2:34 pm      

Are you wanting frames actually (if so, why - they are not good for any website), but if so and if you want something with a nav and main:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 2</title>
</head>

<frameset cols="150,*">
   <frame name="contents" target="main" src="nav.html">
   <frame name="main" src="home.html">
   <noframes>
   <body>

   <p>This page uses frames, but your browser doesn't support them.</p>

   </body>
   </noframes>
</frameset>

</html>
Or are you wanting to use styles (hopefully) to layout your website? You might check out Open Web Design for some ideas.

_________________
Corey
Toll Free Phone Numbers | Processing Credit Cards | Microsoft Expression Web Blog
jacarikes



Joined: 13 Mar 2009
Posts: 3

Posted: Sat Mar 14, 2009 3:09 pm      

thanks so much, i figured it out last night. i always hear that frames aren't good for websites, i dont understand why, they make layouts much easier for me. what do you use as an alternative? i have been coding in HTML for a while and have never used a web design program...recently got dreamweaver but haven't had the time to figure it out yet.
Corey Bryant



Joined: 15 May 2004
Posts: 8748
Location: Castle Pines North, CO USA

Posted: Sun Mar 15, 2009 12:10 pm      

If you are referring to the ease of updating one page and having that reflect on hundreds / thousands of pages, then you would use server side includes.

_________________
Corey
Toll Free Solutions | Mile High Merchant Accounts | Expression Web Blog
 
 
DARFUR
HOSTING / DESIGN
MAKE MONEY

       HTML Help Forum -> HTML Frame
Page 1 of 1


Powered by phpBB Search Engine Indexer
Powered by phpBB 2.0.19 © 2001, 2002 phpBB Group