How can I center the whole iframeset??
<html>
<head>
<style>
</style>
</head>
<frameset rows="100,*" frameborder="0" border="0" framespacing="0">
<frame name="topNav" src="banner.php">
<frameset cols="200,*" frameborder="0" border="0" framespacing="0">
<frame name="menu" src="menu.php" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<frame name="content" src="dashboard.php" marginheight="0" marginwidth="0" scrolling="auto" noresize>
</frameset>
</frameset>
</html>
I tried <div> and applying text-align:center; But It didnt work? !
You are either going to have to create a frame on the left and right sides, or just create an iframe and avoid the whole issue (better option). frameset is obsolete so you should avoid using it.
replace your frameset tags with these,
<frameset class="center" rows="100,*" frameborder="0" border="0" framespacing="0">
<frameset class="center" cols="200,*" frameborder="0" border="0" framespacing="0">
Addthese css codes for the page
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
}
Declare the width of the div and apply:
margin:auto;
or
margin-left:auto;
margin-right:auto;
Working Sample
Additionally, please avoid using frameset in the future! It is obsolete in HTML5.
Cheers!
Related
Actually I am trying to make my desktop web page mobile responsive.
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="/showTopFrame.do" name="topFrame" scrolling="no" noresize="">
<frameset cols="20%,80%*" frameborder="0" framespacing="0" border="0">
<frame src="/showLeftNav.do" name="menu" marginheight="0" marginwidth="0" noresize="true" scrolling="auto" framespacing="0" border="0" frameborder="0">
<frame src="/blank.html" name="information" marginheight="0" marginwidth="0" scrolling="auto" framespacing="0" border="0" frameborder="0">
</frameset>
</frameset>
Please help me if I can achieve this with media Query or any other simple way.
You can achieve this using media queries in your css.
like this:
#media (max-width: 600px) {
}
You can find more information about this here
you need frameset id.
var width_size = '';
window.addEventListener('resize', function() {
width_size = window.innerWidth;
frameResize();
}, true);
function frameResize(){
if (width_size > 1080) {
document.getElementById('mainFrameset').rows='80,*';
} else {
document.getElementById('mainFrameset').rows='40,*';
}
}
<head>
<title>Lead Management System</title>
</head>
<frameset rows="13%,*,3%" border="0" frameborder="0" style="z-index:4">
<frame name="navigation" target="main" src="navigation.php" scrolling="No" style="z-index:100">
<frameset cols="18%,*" border="0" frameborder="0">
<frame name="menu" target="main" src="menu.php" scrolling="No" style="z-index:10">
<frame name="main" src="start.php" scrolling="auto" noresize style="z-index:11">
</frameset>
<frame name="footer" target="main" src="footer.php" scrolling="No" style="z-index:12">
</frameset>
Also i had tried z-index concept for it but it didn't help me at all..So please is there any way that my 1st frame content should always be on top of second frame if there is any dropdown or other fields which does not gets fit in its own 1st frame.
I also referd some questions already in stackverflow but i was not able to solve it...
I designed a web page with frames. It is my homework so I must use frames.
In my page there are a lot of frames, and the inner frame has scrolling bar. I ned to remove it, how can i remove it?
This is my main.html code:
<frameset frameborder="NO" framespacing="0" cols="18%,*,18%" border="0" >
<!-- Navigational Bar -->
<frame src="side.html" name="left" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize">
<!-- Interior Frame -->
<frameset frameborder="NO" framespacing="0" rows="280,*" border="0">
<frame src="header.html" name="middle" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize">
<frameset frameborder="NO" framespacing="0" cols="180,*" border="0">
<frame src="left.html" name="anasayfa" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize">
<frame src="anasayfa.html" name="mainframe" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize">
</frameset>
</frameset>
<!-- Interior Frame -->
<frame src="side.html" name="right" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize">
</frameset>
This is my page outlook:
http://download.cnet.com/YouTube-To-MP3/3000-2071_4-75810474.html >youtube to mp3
Just add to the main.html in lines with frames:
scrolling="no"
so the result is:
<frame scrolling="no" src="left.html" name="anasayfa" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" >
This is your main.html result:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="keywords" content="Webpage, design, yumakli" />
<meta name="description" content="Yumakli koyu web sayfasi" />
<style type = "text/css">
frame{
overflow:hidden;
}
</style>
</style>
<script></script>
</head>
<div style="width:5000; height:5000;">
<frameset frameborder="NO" framespacing="0" cols="18%,*,18%" border="0" >
<!-- Navigational Bar -->
<frame src="side.html" name="left" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" scrolling="no">
<!-- Interior Frame -->
<frameset frameborder="NO" framespacing="0" rows="280,*" border="0">
<frame src="header.html" name="middle" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" scrolling="no">
<frameset frameborder="NO" framespacing="0" cols="180,*" border="0">
<frame src="left.html" name="anasayfa" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" scrolling="no">
<frame src="anasayfa.html" name="mainframe" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" scrolling="no">
</frameset>
</frameset>
<!-- Interior Frame -->
<frame src="side.html" name="right" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" scrolling="no">
</frameset>
</div>
</html>
Just set overflow: hidden; on the object:
#objectID {
overflow: hidden;
}
Note: Change objectID for with your object id.
You may also try:
frame{
overflow:hidden;
}
It may work... wouldn't hurt if you try :)
Good luck!
Ok so all you need to do is add: scrolling="no" on each 'frame' tag.
It is as easy as it sounds.
But notice: you would get the full width of the items inside the frame (that's why there is a scroll bar)
Hope i help :)
Add a scrolling attribute to your frame and set the value to no.
http://www.w3schools.com/tags/att_frame_scrolling.asp
Edit:
Another option is to add another frameset around the ones you have currently created.
Found in this question and adapted to you.
file index.html:
<html>
<frameset rows="1,480" frameborder="NO" border="0" noresize="noresize" scrolling="yes">
<FRAME SRC="javascript:<HTML></HTML>" NAME="dummy" FRAMEBORDER="NO" MARGINHEIGHT="0" MARGINWIDTH="0" NORESIZE SCROLLING="NO">
<FRAME SRC="main.html" NAME="scrollcontent" FRAMEBORDER="NO" MARGINHEIGHT="0" MARGINWIDTH="0" NORESIZE SCROLLING="yes">
</frameset>
</html>
file main.html
<html><frameset frameborder="NO" framespacing="0" cols="18%,*,18%" border="0" >
<!-- Navigational Bar -->
<frame src="side.html" name="left" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize">
<!-- Interior Frame -->
<frameset frameborder="NO" framespacing="0" rows="280,*" border="0">
<frame src="header.html" name="middle" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" SCROLLING="NO">
<frameset frameborder="NO" framespacing="0" cols="180,*" border="0">
<frame src="left.html" name="anasayfa" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" SCROLLING="NO">
<frame src="anasayfa.html" name="mainframe" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize" SCROLLING="NO">
</frameset>
</frameset>
<!-- Interior Frame -->
<frame src="side.html" name="right" marginwidth="5" marginheight="5" frameborder="NO" border="0" noresize="noresize">
</frameset>
</html>
See if that works for you.
Ok so I've NEVER worked with frames before but a higher power has forced my hand this time.
What I need to be able to do is resize the 'footer.html' frame within this template.
<html>
<head>
<title>Store Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="*,1034,*" frameborder="NO" border="0" framespacing="0">
<frame name="sideblanks" scrolling="NO" src="blank_left.html">
<frameset rows="135,*,25" frameborder="NO" border="0" framespacing="0">
<frame name="top" scrolling="NO" noresize src="top_nav.html" >
<frameset cols="200,*" frameborder="NO" border="0" framespacing="0">
<frame name="meny" noresize scrolling="NO" src="menu_1.html">
<frame name="content" src="content.html">
</frameset>
<frame name="chart" scrolling="NO" noresize src="footer.html">
</frameset>
<frame name="sideblanks" scrolling="NO" src="blank_right.html">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
I feel like a complete novice again. I don't like it, I'm scared.
Any help would be great.
Adjust the numeric values here:
<frameset rows="135,*,25" frameborder="NO" border="0" framespacing="0">
you have used "rows" and "columns" you can set the height of the frame with rows or with CSS.
if you need to dynamically alter the height of the frame you might be able to do this with javascript or JQuery but you have to reference it as parent. to make sure you are in the right window.
when are you wanting the height of the frame to change?
I'd like to have two frames with no space between them. Here's my test case:
<html>
<frameset framespacing="0" rows="50%, 50%">
<frame frameborder="0" src="red.html" scrolling="no" noresize="1" />
<frame frameborder="0" src="red.html" />
</frameset>
</html>
red.html is just:
<html><body bgcolor="red"></body></html>
When I render this, however, I get a white line between the two frames. How do I make it go away?
You need to specify the FrameBorder property in the Frameset tag.
So, your main page will look like this:
<html>
<frameset framespacing="0" rows="50%, 50%" frameborder="0">
<frame frameborder="0" src="red.html" scrolling="no" noresize="1" />
<frame frameborder="0" src="red.html" />
</frameset>
</html>
This will solve your problem.
<html>
<frameset framespacing="0" rows="50%, 50%" framespacing="0" frameborder=no>
<frame frameborder="0" src="red.html" scrolling="no" noresize="1" />
<frame frameborder="0" src="red.html" />
</frameset>
</html>
frameborder=no is very important.
It is always preferred to use css styles instead of frameborder attribute.
<frameset cols="50%,50%">
<frame src="frame_1.htm" style="border:none">
<frame src="frame_2.htm">
</frameset>
Better to use iframe and divs where ever possible.
Further frameset is not supported in HTML5.
Add border=0 to your frameset tag.
Here is an example of working code that I have used in the past that has no white line.
<frameset rows="10%,*" noresize framespacing=0 frameborder=no border=0 >
<frameset cols="140,*" noresize framespacing=0 frameborder=no border=0 >
<frame name="globe" scrolling="no" src="./GIF/globe.jpg" marginwidth="0 marginheight="0">
<frame name="logo" src="logo.htm" scrolling="no" >
</frameset>
<frameset cols="160,*" noresize framespacing=0 frameborder=no border=0 >
<frame name="userselections" src="userselections.php" scrolling="auto">
<frame name="results" src="nothing.htm" scrolling="auto">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>