[RESOLVED] styling within frames

**ninjanutz** · Aug 4th, 2005, 02:32 AM

im having trouble styling the position of my frame. also wenever i click one of the links i want to display in the frame, besides it not displaying in the frame it doesnt show the styles set in the css style sheet. can anyone help me out ?

**anotherVBnewbie** · Aug 4th, 2005, 10:54 AM

Are you including the css in the frame's source code?

If the link doesn't open in the frame perhaps you have a target attribute included in the link? i.e. "target=_new" or something similar?

**ninjanutz** · Aug 4th, 2005, 02:48 PM

this is my frame <iframe src='html-framed.php' name='contents' scrolling='auto'
width='500' height='500'>
</iframe> i have the css source code in the <head> element. where should i put the css code in the frame source?

**eyeRmonkey** · Aug 4th, 2005, 04:21 PM

The CSS code needs to be in the <head> of html-framed.php.

And whenever you want a link to open in that frame it needs to be like this:

HTML Code:

<a href="mypage.html" target="contents">blah</a>

**ninjanutz** · Aug 4th, 2005, 04:33 PM

ok the links now work in the frame and the frame shows the styles (the style sheet name didnt match the link) but i cant get the iframe in the position i want it in. using css how could i get move it?

**eyeRmonkey** · Aug 4th, 2005, 05:38 PM

Blah, I have been doing too mcuh VB and am out of the habbit of CSS. Let me go refresh my memory.

What is the iFrame contained in? Just the page? Or in a table cell or what?

Can you attach your source?

**ninjanutz** · Aug 4th, 2005, 06:13 PM

its just on a standard page. everything else is workin but i cant get the frame to move. wat do u mean by source? (sry im kinda new)

**anotherVBnewbie** · Aug 5th, 2005, 01:05 AM

I probably can't help you much with using CSS to control the position of the frame....I'm kinda behind the times on CSS usage myself

eyeRmonkey was asking you to upload the html (including the CSS) of the page you are working on.

**ninjanutz** · Aug 5th, 2005, 01:52 AM

heres the frame page ... <div id='frame'>
<iframe src='html-framed.php' name='contents' scrolling='auto'
width='500' height='500' noresize marginheight='0' marginwidth='0'
frameborder='1' border='0'>
</iframe>
</div>
and heres the css part of it
#frame {
position:absolute; top:20% left:40%;
}

**ninjanutz** · Aug 5th, 2005, 01:52 AM

i was also wonderin since im usiin iframes do i need a frameset doctype? or is the html transitional the better choice

**eyeRmonkey** · Aug 5th, 2005, 01:10 PM

iframe doesn't count as frames. Your doctype only needs to be frameset one the page the holds your frames (normal frames) and every other page should still be transitional or strict.

I wouldn't use position absolute to position it, the results are always weird. Try using margin and either a % or a fixed with (px). Let me know how that works.

**ninjanutz** · Aug 5th, 2005, 04:26 PM

y does position absolute come out weird? it worked out for all the other things on my site

**eyeRmonkey** · Aug 5th, 2005, 05:03 PM

I don't know, I perfer to use relative measurements, that way if the container changes, I can predict how the things it contain will change. If it works for you thats fine. It is easier when you do everything absolute like you are though instead of just a few things absolute.

Did you get it to work yet?

**ninjanutz** · Aug 5th, 2005, 07:30 PM

no its not workin yet, the id on the frames matches the id in the styles but its not moving from the top left corner. i set height and width within the frame tag and that worx fine but with css absolute positioning and the float property arent working. is something not matching?

**ninjanutz** · Aug 6th, 2005, 10:14 PM

i tired using the id and its actualy name atribute that the other pages use to link into it but neither one works to format the frame with css. i still dont understand why i cant get it positioned to the bottom right.

**ninjanutz** · Aug 7th, 2005, 09:17 PM

is anyone there to help?

**eyeRmonkey** · Aug 7th, 2005, 11:53 PM

Sorry, I was gone for the weekend. Can you upload your source code please? Add it as attachment to your post.

**ninjanutz** · Aug 8th, 2005, 12:16 AM

attach is bein weird cause the extensions are differnt (i used php extensions caus ei wanna have some php stuff on here)
heres the frame page...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
"http://www.w3.org/TR/REC-html40/loose.dtd">

<html xml:lang='en' lang='en'>

<head>
<title>Distorted View's Site</title>

<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<meta name='keywords' content='band, ninjanutz, distorted view>
<meta name='description' content='We are a band called Distorted View 
and it is our pleasure to bring you great music.'
<meta name='author' content='ninjanutz'>
<meta name='robots' content='noarchive'>

<link rel='stylesheet' type='text/css' href='frame-styles.css' media='screen'>
</head>

<body>
<div class='header'>
<h1> Welcome to Distorted View</h1>
</div>

<div class='navigation'>
<h4>Links</h4>
<b><a href='html-framed.php' target='contents' title='Home' tabindex='1' accesskey='z'>
Home</a>
<a href='register-framed.php' target='contents' title='Join our Community' tabindex='1' accesskey='x'>
Register</a>
<a href='members-framed.php' target='contents' title='See Whose Who' tabindex='1' accesskey='c'>
Members</a>
<a href='contact-framed.php' target='contents' title='Message Us' tabindex='1' accesskey='v'>
Contact Us</a></b>
</div>

<div id='frame'>
<iframe src='html-framed.php' name='contents' scrolling='auto'
width='500' height='500' noresize marginheight='0' marginwidth='0'
frameborder='1' border='0'>
</iframe>
</div>
<noframes>
<div class='navigation'>
<h4>Links</h4>
<b><a href='html-framed.php' title='Home' tabindex='1' accesskey='z'>
Home</a>
<a href='register-framed.php' title='Join our Community' tabindex='1' accesskey='x'>
Register</a>
<a href='members-framed.php' title='See Whose Who' tabindex='1' accesskey='c'>
Members</a>
<a href='contact-framed.php' title='Message Us' tabindex='1' accesskey='v'>
Contact Us</a></b>
</div>


<div class='counter'>
<?php    
$filename = "site.txt";    
$whattoread = @fopen($filename, "r") or die("Error opening");    
$contents = fread($whattoread, filesize($filename));    
fclose($whattoread);    
$contents = ($contents + 1);    
$whattoread = @fopen($filename, "w") or die("Error opening count file1");    
@fwrite($whattoread, $contents) or die("Error saving");    
fclose($whattoread);    
echo $contents, " visitors";    
?>
</div>

</body>
</html>

and heres the style sheet...

/*styles for framed site*/

Code:

body {
     cursor:crosshair;
     background: #000000 url()
     fixed} body {
     background-image: url('http://img158.echo.cx/img158/3412/danny7jv.gif');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: 20% 20%;
     } 
.header {
        color:red;
        font-family:'Copperplate Gothic Bold';
        font-weight:normal;
        white-space:nowrap;
        letter-spacing:.4em;
        text-align:center;
        border-bottom: 1px solid #FFFFFF;
        padding:0;
        margin:0;
        background-color:transparent;
        position:absolute; top:10px; left:15%;
        }
.navigation a {
              display:block;
              }
.navigation {
            color:red;
            font-family:'Bradley Hand ITC';
            font-weight:bold;
            letter-spacing:normal;
            text-align:center;
            border-bottom:1px solid #FFFFFF;
            border-right:1px solid #FFFFFF;
            padding-right:2%;
            padding-bottom:10%;
            margin:0;
            background-color:transparent;
            position:absolute; top:11%; left:2%;
            }
contents {
       backround-color:transparent;
       position:absolute; top:20% left:40%;
       }
.chat {
      color:red;
      font-family:'Garamond';
      font-weight:bold;
      font-size:normal;
      letter-spacing:normal;
      text-align:center;
      border:none;
      padding:0;
      margin:0;
      background-color:transparent;
      position:absolute; top:25%; left:15%;
      }
ul {
   color:red;
   font-family:'Sylfaen';
   font-weight:bold;
   font-size:normal;
   letter-spacing:normal;
   text-align:center;
   list-style-type:none;
   border:none;
   padding:0;
   margin:0;
   background-color:transparent;
   position:absolute; top:25%; left: 35%;
   } 
#register {color:red;
          font-family:'Tempus Sans ITC'
          font-weight:bold;
          font-size:normal;
          letter-spacing:normal;
          text-align:normal;
          border:none;
          padding:0;
          margin:0;
          background-color:transparent;
          position:absolute; top:15%; left:20%; right:27%;
          }
h3 {
   color:red;
   font-family:'Copperplate Gothic Bold'
   font-weight:normal;
   font-size:normal;
   letter-spacing:normal;
   text-align:left;
   border:none;
   padding:0;
   margin:0;
   background-color:transparent;
   position:absolute; top:15%; left:15%;
   }
#contact {
         color:red;
         font-family:'Perpetua';
         font-weight:bold;
         font-size:normal;
         letter-spacing:normal;
         text-align:center;
         border:none;
         padding:0;
         margin:0;
         background-color:transparent;
         position:absolute; top:25%; left:35%;
         }
.counter {
         color:red;
         font-family:'Eurostile';
         font-weight:bold;
         font-size:normal;
         letter-spacing:normal;
         text-align:left;
         border:1px solid #FFFFFF;
         padding:0;
         margin:0;
         background-color:transparent;
         position:absolute; top: 95%; left: 2%;
         }

/*styles for all links*/
a:link {
       color: blue; text-decoration:none;
       } 
a:visited {
          color: orange; text-decoration:none;
          } 
a:focus {
        color: yellow; text-decoration:none;
        } 
a:hover {
        color: green; text-decoration:underline;
        } 
a:active{
        color: white; text-decoration:none;
        }

this is the frame part on the styles ...
contents {
backround-color:transparent;
position:absolute; top:20% left:40%;
}
the name attribut is contents the id is frame...neither work for formatting

**eyeRmonkey** · Aug 8th, 2005, 12:40 AM

I am really tired tonight, but I will have a look at it in the morning for sure.

**ninjanutz** · Aug 8th, 2005, 12:42 AM

alright cool theres no rush but its kinda frustratin to look at it and now no wats wrong

**ninjanutz** · Aug 8th, 2005, 02:55 AM

after all that i was missin a little ; in the css for the frame. i feel retarted.

thanx for all ur help

**eyeRmonkey** · Aug 8th, 2005, 12:25 PM

No problem. I'm glad you figured it out. I have done that myself quite a few times. Let me know if you ever need more help.

**ninjanutz** · Aug 8th, 2005, 01:17 PM

k i will thanx

Thread: [RESOLVED] styling within frames

Thread Tools

Display

[RESOLVED] styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: styling within frames

Re: [RESOLVED] styling within frames

Re: [RESOLVED] styling within frames

Posting Permissions