| 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 |
|
|
| |
|
|
|