PDA

View Full Version : Frame different size when live


kcoulton30
03-06-2013, 12:48 PM
I finally finished my website, but the top frame is too large when I visit the site!

In Dreamweaver Live preview it is fine - and I have tested it in 2 different browsers BEFORE putting it online and it was also fine.

And yet when it is live, the header is too large? I set the frame size to 100 pixels
Here is the code for the frame:



<frameset rows="100,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="jontopframe.html" name="topFrame" scrolling="no" noresize="noresize" marginwidth="250" marginheight="100" id="topFrame" title="topFrame" />
<frame src="jonhomepagepic.html" name="mainFrame" marginwidth="0" marginheight="0" id="mainFrame" title="mainFrame" />
</frameset>


And here is the code for the frameset



<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #333333;
margin-left: 252px;
margin-top: 0px;
margin-bottom: 0px;
}


</style>
<style>


.style1 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style1:visited {
text-decoration: none;
color: #999999;
}

a.style1:link {
text-decoration: none;
color: #999999;
}

a.style1:hover {
text-decoration: none;
color: #ff3366;

}


.style2 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style2:visited {
text-decoration: none;
color: #999999;
}

a.style2:link {
text-decoration: none;
color: #999999;
}

a.style2:hover {
text-decoration: none;
color: #ff3300;
}

.style3 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style3:visited {
text-decoration: none;
color: #999999;
}

a.style3:link {
text-decoration: none;
color: #999999;
}

a.style3:hover {
text-decoration: none;
color: #FFCC33;
}
a.style3:active {
text-decoration: none;
color: #FF6600;
}

.style4 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style4:visited {
text-decoration: none;
color: #999999;
}

a.style4:link {
text-decoration: none;
color: #999999;
}

a.style4:hover {
text-decoration: none;
color: #66ff33;
}

.style5 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style5:visited {
text-decoration: none;
color: #999999;
}

a.style5:link {
text-decoration: none;
color: #999999;
}

a.style5:hover {
text-decoration: none;
color: #3366cc;
}

.styletitle {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.styletitle:visited {
text-decoration: none;
color: #FFFFFF;
}

a.styletitle:link {
text-decoration: none;
color: #FFFFFF;
}

a.styletitle:hover {
text-decoration: none;
color: #FFFFFF;
}



.styletumblr {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.styletumblr:visited {
text-decoration: none;
color: #999999;
}

a.styletumblr:link {
text-decoration: none;
color: #999999;
}

a.styletumblr:hover {
text-decoration: none;
color: #9933cc;

}
a.styletumblr:active {
text-decoration: none;
color: #FF6600;
}


body,td,th {
color: #999999;
}
</style>
</head>

<body>
<p><a href="jonhomepagepic.html" target="mainFrame" class="styletitle"><br />
JONATHAN MCCREE</a><br />
<br />
<a href="newmenupage.html" target="mainFrame" class="style1">PROJECTS</a> // <a href="recent paintings.html" target="mainFrame" class="recent style2"> RECENT PAINTINGS</a> // <a href="joncontact.html" target="mainFrame" class="style3">CONTACT</a> // <a href="jon-cv.html" target="mainFrame" class="style4">CV</a> // <a href="news.html" target="mainFrame" class="style5">NEWS</a> //
<a href="http://JONATHANMCCREE.TUMBLR.COM" target="parent" class="styletumblr"> TUMBLR</a></p>
</body>
</html>

d a v e
03-06-2013, 05:12 PM
seriously, framesets? why did you do it... why?

kcoulton30
03-06-2013, 07:55 PM
Thanks Dave, I've already been enlightened on this - any suggestions?

edbr
03-07-2013, 12:35 AM
use relative divs for layout generally

domedia
03-07-2013, 12:54 PM
kcoulton30, framesets are meant to bring in external/other pages, it's not meant at all for any kind of structure of the page. For a regular site, it actually breaks it. One of the underlying principles of the web is that one page is one page, and a frameset defragments this, and turns the page into a frameset page.

Check out abookaparts web design bundle:
http://www.abookapart.com/products/html5-css3-bundle or any other book that teaches web design based on modern web standards.

You kinda have to do this. Your current development method is not going to take you anywhere. That site will not work on the web. The good thing, is that after a little time, Web Standards will become your second nature, and you'll be looking back at this with a smile :)

.

d a v e
03-07-2013, 05:53 PM
obviously you haven't been enlightened because you're still pursuing them - weclome to the dark side.
you didn't even post a link to the live site (which is by far the easiest way for us to see what's happening) and you've mispelt ariel (i.e. it should be "arial")

everyone's going to give you pretty much the same answer ;) some might be more diplomatic than me but it's going to come down to the same thing.

kcoulton30
03-09-2013, 08:37 AM
Here's a link to the site: http://www.jonathanmccree.com/

As you can see, something is telling the top frame to be 218 pixels high but I can find what. I tried dreamweaver's search function but "218" couldn't be found in the whole site. Very confused by this? :/

d a v e
03-10-2013, 01:03 PM
if you look at the html for the frameset (not each frames) you'll see
<frameset rows="218,*" cols="*" frameborder="no" border="0" framespacing="0">

you can change the 218 to whatever you need, but of course you won't need to cos you won't be using frames ;)

kcoulton30
03-10-2013, 01:25 PM
This is what it says for the code - 100, not 218? So it seems impossible that it is 218px? Can't think what else would be telling the frame to be the wrong size:

<frameset rows="100,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="jontopframe.html" name="topFrame" noresize="noresize" marginwidth="250" id="topFrame" title="topFrame" />
<frame src="jonhomepagepic.html" name="mainFrame" scrolling="yes" marginwidth="0" marginheight="0" id="mainFrame" title="mainFrame" />
</frameset>

kcoulton30
03-10-2013, 01:27 PM
P.s. Frames can burn in hell as far as I'm concerned, if they are this much trouble

d a v e
03-10-2013, 02:34 PM
on your live site it says so - it is 218px high

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<frameset rows="218,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="jontopframe.html" name="topFrame" scrolling="No" noresize="noresize" marginwidth="250" id="topFrame" title="topFrame" />
<frame src="jonhomepagepic.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>

kcoulton30
03-12-2013, 01:50 PM
Ok, so I just went ahead and DELETED the whole frameset thing! I put the code for the header into each separate page instead - it was fairly simple actually.

However, after I deleted the frameset/topframe from the server and uploaded my new html pages, my frameset is still HAUNTING me! As you can see from this link, there is a big dead topframe at the top of each page :/ How can I make it go away? (P.S. I cleared my cache)

http://www.jonathanmccree.com/

kcoulton30
03-12-2013, 02:58 PM
It works if I type http://www.jonathanmccree.com/index.html in the address bar - think I just need to find a way to make that the first page which appears when www.jonathanmccree.com is typed. (at the moment it isn't)

Anyone know how to do that? It's probably pretty simple ... basically trying to change the home page from /jonframeset.html to /index.html

d a v e
03-12-2013, 05:52 PM
what else have you got in the root (same directory as index.html)? try deleeting the frameset

d a v e
03-12-2013, 05:53 PM
no frames there now?! not as far as i see

d a v e
03-12-2013, 05:54 PM
and resize your images in a graphics application ;)