How can i overlap the collapsed/expanded content display in the frameset ( i dont want top frame details to be shorten) ? I use a 3 framed frameset(top frame,left frame and right frame), and can't make this thing work (script made for overlap the expanded content in top frameset something like z-index logic). Is it possible to make this change? please give some advice. thanks
frameset page
<html>
<FRAMESET rows="18%,*" frameborder="YES">
<frame src="frame_a.htm">
<FRAMESET cols="15%,*" frameborder="YES" >
<frame src="frame_b.htm">
<frameset rows="*" frameborder="YES" border="1" framespacing="1" cols="*">
<frame src="frame_c.htm">
</frameset>
</html>
frame a page
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/>testing content
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Screenshot of current system layout.
But when i click on expand link, all the top frame details will be shorten. how to make the expanded details layout overlap the topframe instead?
expected output:
"please give some advice"
Stop using frames: they are not supported in HTML5.
Use tables when you need a table. Do not use tables for layout purposes.
Always specify a docytpe.
Use lower case for the HTML tags (or upper case if you want, but don't mix them)
Take this list as a recommendation and not as criticism. I made those mistakes too.
As you mention in the question, this can be fixed with z-index. The problem that you are facing can be solved by making both tables have absolute position (aligned to the top-left), and giving the first table a higher z-index than the second table:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/>testing content
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Related
I have a table in which the second column should have a certain width (50px for example).
When I have a textbox with a width of 100% in this column, but with a lot of text, the width of the column is always as long as the text.
see my code + screenshot
<!DOCTYPE HTML>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td style="width:50px;"><input type="text" value="very long text which doesn't fit into the whole textbox" style="width:100%" />
</td>
</tr>
</table>
</body>
</html>
How can I force the column to be 50px long in IE7?
You may achieve this by using IE conditional comments as follows
<!DOCTYPE HTML>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style>
.myInput{width: 100%;}
</style>
<!--[if IE 7]>
<style>
.myInput{width: 50px;}
</style>
<![endif]-->
</head>
<body>
<table border="1">
<tr>
<td></td>
<td style="width:50px;"><input class="myInput" type="text" value="very long text which doesn't fit into the whole textbox"/>
</td>
</tr>
</table>
</body>
</html>
I have checked this on IE tester as and looks fine. Hope this helps!
I have html like below, when I'm trying to browse this in IE9, nothing will come up until you mouseover the div. if I change the "X-UA-Compatible" to "IE=8" it will show up.
your suggestions are highly appreciated.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>
<body>
<table>
<tr>
<td>
<div style="height:400px; width:400px">
<OBJECT ID="Player" HEIGHT="100%" WIDTH="100%" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>
</div>
</td>
</tr>
</table>
</body>
</html>
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
i want to include one html file into another, but it doesnt seem to work out
the two files are
C:/wamp/www/AuctionVilla/index.html
and
C:/wamp/www/AuctionVilla/header.html
here's my index.html file
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
</head>
<body>
<div id="index_container">
<table align="center">
<tr>
<td>
<table width="1000px" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3">
<!--#include virtual="C:/wamp/www/AuctionVilla/header.html" -->
</td>
</tr>
<tr>
<td colspan="3"> 
</td>
</tr>
<tr>
<td width="350px">
</td>
<td width="5px" rowspan="3"> 
</td>
<td width="650px" rowspan="3">
<div id="product_container" class="divcontainer" style="width: 645px; height: 500px;">
</div>
</td>
</tr>
<tr>
<td width="350px" height="5px">
</td>
</tr>
<tr>
<td width="350px" height="355px">
<div id="movie_container" class="divcontainer" style="width: 350px; height: 355px;">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
and here's my header.html file
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>header</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/headerMenu.css" />
</head>
<body>
<div id="main_body">
<div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<object classid="clsid:1" codebase="../UAuction/Images/matrimony.swf" width="1000" height="228">
<param name="Images/matrimony.swf" />
<param name="quality" value="high" />
<embed src="../UAuction/Images/matrimony.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="1000" height="228" wmode="transparent">
</embed>
</object>
</td>
</tr>
</table>
</div>
<br/>
<div id="topmenu">
<table align="center" bgcolor="#000000">
<tr>
<td>
<ul id="css3menu">
<li>  Home</li>
<li>  Category
<ul>
<li>Art
<ul>
<li>Paintings</li>
<li>Sculptures</li>
</ul>
</li>
<li>Books
<ul>
<li>Book</li>
<li>Documentaries</li>
</ul>
</li>
<li>Furniture
<ul>
<li>Chair</li>
<li>Wardrobe</li>
<li>Table</li>
</ul>
</li>
<li>Sport Goods
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Rugby</li>
</ul>
</li>
</ul>
</li>
<li>  Register</li>
<li>  Top Bidders</li>
<li>  Top Sellers</li>
<li>  Contact Us
<ul>
<li>Partners</li>
<li>Offices</li>
</ul>
</li>
<li>About Us  </li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<script src="../UAuction/JQUERY/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../UAuction/JQUERY/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="../UAuction/JQUERY/script.js"></script>
</body>
</html>
i dnt knw whta seems to wrong, but it isnt workking fr me...
i tried to change the html to shtml but the file doesnt include at all..
If you only have HTML on your server, or you need only HTML files, you can use frames.
<frameset rows="25%,75%">
<frame src="header.html" />
<frame src="index.html" />
</frameset>
or iframes like this (in your index.html file):
<iframe src="header.html" />
But, it is not recommended as it creates a kind of table. If you have PHP on your server, create a PHP file, and use
include("header.html");
If you have SSI (Server Side Includes) on your webserver, then have this:
<!--#include virtual="header.html" -->
Personally, I suggest you to use PHP method.
The only "include" mechanisms in HTML itself are (i)frames and objects.
HTML doesn't have an 'include' mechanism - I'm not sure where you've seen these solutions on StackOverflow. You've probably been looking at answers for a server side language such as PHP or ASP.
I am not able to show an image in Firefox when using the img tag. In IE it's working as expected. Why is this?
<html>
<head>
<title>my PAGE</title>
</head>
<body>
<table height="100%" width="100%">
<tr>
<td>
<img border="0" src="D:\Pictures\sam.JPG" alt="wiki" width="500" height="1"/>
</td>
</tr>
</table>
</body>
</html>
The right way of referencing an image on local disk would be
file:///D:/Pictures/sam.JPG
But you will never see the image anyway - you're setting its height="1"
I've been trying to make an image resize as you resize the window of the browser. It works in all but Internet explorer. I was requested to do this without external sheets.
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; margin:0; padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tidsaxel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="dstyle.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 100%; margin:0;">
<table cellpadding="10" height="100%" width="100%" style="margin:0;">
<tr>
<td rowspan="20" height="100%" style="margin:0;">
<img src="pil.png" height="100%" width="48" />
</td>
<td class="Rubrik">Tidsaxel för krav, program, granskning och beslut</td>
</tr>
<tr>
<td>Sverige satsar på utveckling av kärnkraft (1945). Kärnavfallet betraktas inte som något problem.</td>
</tr>
And then it goes on with 20 more rows, I don't think it's nessessary to print them all.
</body>
</html>
The picture doesn't even take up 100% of the height to begin with, and when I resize the window it just gets smaller. Is there a way to fix this? I've read that it's possible with javascript, but I haven't found a solution. It's IE 7 and IE 8 that I've tried on.
In the table, set cellpadding="0" cellspacing="0". But this affects the content area as well. You might want to look into designing your site with DIVs instead.
You might want to look into a CSS solution:
<style type="text/css">
body {
background-image:url(background.png);
background-repeat:repeat-y;
}
</style>