|
CSS - Opening Up A Page At The Top Wich Contains An Iframe
We have a page which contains an iFrame.
The page which contains the iFrame opens up half way down and not at the top. is there a way in css to open up the page at the top? This is the code which calls the iFrame: Code: <iframe src="Page1.aspx#myAnchor" width="975" height="180"> If I remove the #myAnchor from the url - it does work ok. But we want the anchor tag there to open up the iFrame window at that point. (Its the parent page which we need to open up at the top). thanks. Similar TutorialsI found this CSS sample over the internet.. http://www.crafta.com/look1.html look that it keeps the active menu yellow color, from the main list until the sub and sub-sub list im triying to do some like that on my menu http://www.crafta.com/te2.html but no same result and i have no CSS skills... could you please take a look into that.. any help will be apreciated. thanks Hi, I've been stuck on this for the last few days and was wondering if you could help me. I'm not even sure if using javascript is the best option to do this, but if you could help me anyway that would be great. My dilemma is I'm designing a website which has several links in the left hand navigation bar. But at the moment, the links open in a new window. I don't want that. I want them to open in the main area of the parent window. Normally if i'd used frames, opening the links within that same page wouldn't have been a problem because I could just use the target attribute. But I didn't use frames, I used CSS layouts but when I set the target attribute to _parent, the links open up across the whole page rather than just in the main section.Can some one provide some code to point me in the right direction of how to do this? Hello everyone! my apologies if this is a dumb/old question - I did a search but didn't find anything like this... Question is, how can I make a page within an Iframe inherit the parent pages css? Reason is, I have a site with a css switcher (using php - a copy and paste job, still learning!) that uses iframes. Or would I be better ditching the iframes and using hidable DIV's? cheers guys! Hi Im am stuck with a couple of things on my website, I am completly new to HTML and CSS and need some help please 1st problem is pages are desplaying fine in every browser I have tried barr IE 6 any ideas what would be wrong, its seems to be aligning to the left (just the text not the heading banner or menu) 2nd problem I have is I am trying to use a lightbox (lightview) which works fine on the local computer but once uploaded to my test site it stops working cant post URL so code as follows: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Quay Cargo Services</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="" />
<meta name="description" content="Quay Cargo Services" />
<meta name="keywords" content="Quay Cargo Services, Shipping Belfast, Hapag Lloyd Belfast" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/andy.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
</head>
<body>
<div id="header-wrap">
<div id="header-photo"> <img alt="header photo" src="images/banner.jpg" width="890" height="195" />
</div>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="european.html">European Trailers</a></li>
<li><a href="hapaglloyd.html">Hapag Lloyd</a></li>
<li><a href="qcnews.html">QCS in the community</a></li>
<li><a href="library.html">Library</a></li>
<li><a href="faq.htm">FAQ</a></li>
<li id="current"><a href="contacts.html">Contacts</a></li>
</ul>
</div>
</div>
<!-- header ends here -->
<!-- content starts -->
<div id="content-outer" class="clear">
<div id="content-wrapper">
<div id="content">
<div class="centerwrap"> <br />
<h1> Meet the Team</h1>
<br /><br /><br />
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
<table align="center">
<tr>
<th>
<a href="contacts/andycontact.htm" rel="iframe" title=' :: :: width: 530, height: 330' class='lightview'>
<img src="images/andy.jpg" width="100" height="148" border="0"/>
<br />Andy - Hapag Lloyd Operations </th>
<th><a href="contacts/arroncontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/arron.jpg" width="100" height="148" border="0"></a><br />Arron - Hapag Lloyd Operations </th>
<th><a href="contacts/carolinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/caroline.jpg" width="100" height="148" border="0"></a><br />Caroline - Hapag Lloyd Operations </th>
<th><a href="contacts/catherinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/catherine.jpg" width="100" height="148" border="0"></a><br />Catherine - Hapag Lloyd Rates </th>
<th><a href="contacts/charlenecontact.htm" rel="iframe" title=' :: :: width: 580, height: 350' class='lightview'><img src="images/charlene.jpg" width="100" height="148" border="0"></a><br />Charlene - Accounts / Admin </th>
<th><a href="contacts/dianecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/diane.jpg" width="100" height="148" border="0"></a><br />Diane - Hapag Lloyd Operations </th>
<th><a href="contacts/garycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/gary.jpg" width="100" height="148" border="0"></a><br />Gary - European Sales </th>
</tr>
</table><br /><br />
<table align="center">
<tr>
<th><a href="contacts/gillycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/gilly.jpg" width="100" height="148" border="0"></a><br />Gillian - European Operations </th>
<th><a href="contacts/jacquicontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/jacqui.jpg" width="100" height="148" border="0"></a><br />Jacqui - Hapag Lloyd Sales </th>
<th><a href="contacts/lynseycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/lynsey.jpg" width="100" height="148" border="0"></a><br />Lynsey - Accounts / Admin </th>
<th><a href="contacts/patriciacontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/patricia.jpg" width="100" height="148" border="0"></a><br />Patricia - Admin </th>
<th><a href="contacts/tommycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320' class='lightview'><img src="images/tommy.jpg" width="100" height="148" border="0"></a><br />Tommy - European Operations </th>
<th><a href="contacts/wendycontact.htm" rel="iframe" title=' :: ::width: 560, height: 320' class='lightview'><img src="images/wendy.jpg" width="100" height="148" border="0"></a><br />Wendy - Hapag Lloyd Customer Services </th>
</tr>
</table>
</div><br /><br /><br />
<font face="impact" size="+2"><CENTER>Quay Cargo Services<br /><br />Victoria House<br /><br />28 Westbank Road<br /><br />Belfast<br /><br />BT3 9JL</CENTER></font><br />
</div>
</div><br />
</div><br /><br />
<!-- contents end here -->
<!-- footer starts here -->
<div id="footer-bottom">
<img src="images/localpeopleblue.jpg" width="463" height="100"/>
<br />
<a href="http://www.bifa.org/content/Home.aspx"> <img src="images/bifa.gif" width="80" height="50"/></a>
<a href ="http://www.rha.uk.net"> <img src="images/rha_logo.jpg" width="80" height="50"/> </a>
</br></br>
<p class="bottom-right" >
<font color="#999999">Quay Cargo Services: Telephone: +44 (0)28 90 371195 | Fax: +44 (0)28 90 371195 | Email: <A title="Contact Quay Cargo by E-Mail" href="mailto:info@quaycargo.co.uk ">
<font color="#999999">info@quaycargo.co.uk </A></font></font>
</p>
</div>
<!-- footer ends here -->
</body>
</html>
CSS Code: * { margin: 0; padding: 0; outline: 0 }
body {
font: 11px/165% "Georgia", Geneva, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin: 0; padding: 0 0 50px 0;
text-align: center;
background: #2f25dc url(images/bg.jpg) repeat-x;
}
/* Images */
img {
background: #2F25DE;
border: 0px solid #dcdcdc;
}
code {
margin: 5px 0;
padding: 15px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Georgia', 'courier new', monospace ;
border: 1px solid #EBEBEB;
background: #000000;
}
/* ------------------------------------------
LAYOUT
------------------------------------------- */
h1 {font-family: Georgia, sans-serif; font-size: 25px; text-align: center;}
p {font-family: Tahoma, sans-serif; font-weight: bold; color: black; font-size: 18px; }
p1 {font-family: Georgia, sans-serif; color: white; font-size: 50px; }
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
#header-wrap {
position: relative;
background: #fff url(images/wrap-bg.jpg) no-repeat;
margin: 0 auto;
width: 940px;
height: 285px;
text-align: left;
}
#header-photo {
position: absolute;
top: 90px; left: 24px;
padding: 0;
height:195px;
width: 890px;
clear: both;
}
#header-photo img {
border: none;
margin: 0; padding: 0;
}
/* Navigation */
#nav {
position: absolute;
margin: 0; padding: 0;
width: 880px;
left: 25px; top: 0px;
}
#nav ul {
float: left;
list-style: none;
width: 880px;
height: 40px;
margin: 0; padding: 0;
display: inline;
}
#nav ul li {
display: inline;
margin: 0; padding: 0;
}
#nav ul li a {
float: left;
margin: 0; padding: 18px 11px 0 11px;
font: bold 14px/35px 'Georgia', Tahoma, Helvetica, Arial, Geneva, Sans-serif;
text-decoration: none;
color: #999999;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #080091;
background: none;
border: none;
}
#nav ul li#current a {
color: #999999;
background: #d5d3d6 url(images/nav-current.jpg) repeat-x;
}
#header-wrap h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: normal 62px Georgia, 'Verdana', Times, serif;
letter-spacing: -1.5px;
color: #000000;
text-decoration: none;
top: 135px; left: 48px;
}
#header-wrap h1#logo-text a:hover {
background: none;
border: none;
}
#header-wrap p#intro {
position: absolute;
margin: 0; padding: 0;
font-family: Georgia, 'Verdana', Times, serif;
font-weight: normal;
font-size: 18px;
line-height: 1.6em;
font-style: italic;
text-transform: none;
color: #000000;
top: 205px; left: 60px;
}
#content-outer {
background: #fff;
width: 100%;
}
#content-wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
}
#content {
float: left;
width: 100%;
background: #fff url(images/content-bg.jpg) no-repeat;
}
.innerwrap {
margin-top: 10px;
margin-right: 250px;
width: 865px;
padding-left: 25px;
}
.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.floatimgright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:100px;
margin-left:10px;
}
.textright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
.textmid {
display: block;
margin-left: auto;
margin-right: auto
}.textleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.floatimgcentre {
display: block;
margin-left: auto;
margin-right: auto
}
.centerwrap {
text-align: center;
margin-top: 10px;
margin-right: 250px;
width: 865px;
padding-left: 25px;
}
/* footer */
#footer-bottom {
clear: both;
border-bottom: 1px solid #111;
width: 880px;
margin: 0 auto;
}
/* clearing - required */
.clearer { clear: both; }
.clear { display:inline-block; }
.clear:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: ".";
}
any help would be much appriciated Thanks Andy I got this snippet from the Whateverhover website ...
Code: li.folder:hover { z-index: 10 }
ul ul, li:hover ul ul { display: none }
li:hover ul, li:hover li:hover ul { display: block }
I've managed to get it to work properly in IE and Firefox, but not in Netscape. The problem (rather, the symptom) in Netscape is that when one hovers an anchor that's inside a line item (<li><a ...></a></li>), the submenues don't pop up, but when the line item that contains the anchor is hovered, the menu pops up but won't stay up as the mouse pointer is moved from the line item to the submenu's line item. Again, this works fine in IE and Firefox. Here's how I've used it: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
* { font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif; font-size: 10px }
table.nav { border-width: 1px; border-color: #000000; background-color: #FFFFFF }
td.links { vertical-align: top; width: 155px }
ul,li,a { margin: 0; padding: 0; border: 0 }
ul { width: 155px; background-color: #E2E2EF; list-style: none }
li { position: relative; border: 1px solid #FFFFFF; text-indent: 3px; padding: 1px; z-index: 9 }
li.folder { }
li.folder ul { position: absolute; left: 150px; /* IE */ top: 0px }
li.folder>ul { left: 145px /* others */ }
a { }
a.submenu { }
li>a { width: auto } /* others */
li a.submenu { }
/* regular hovers */
a:hover { color: #FFFFFF; letter-spacing: 1px; font-variant: small-caps }
li.folder a:hover { background-color: #000080 }
/* hovers with specificity */
li.folder:hover { z-index: 10 }
ul ul, li:hover ul ul { display: none }
li:hover ul, li:hover li:hover ul { display: block }</style>
</head>
<body>
<table class="nav">
<tr>
<td class="links">
<!-- Start Navigation Menues -->
<table>
<tr>
<td nowrap>
<ul>
<li class="folder">
<a class="submenu" href="#">Kitchenware ></a>
<ul>
<li class="folder">
<a href="#" class="submenu">Cutlery ></a>
<ul>
<li><a class="submenu" href="#">Cased Sets</a> </li>
<li><a class="submenu" href="#">Poultry Shears</a> </li>
<li><a class="submenu" href="#">Scissors</a> </li>
<li><a class="submenu" href="#">Sets</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I've replace the URLs with #s for readbility. How can I make it so that Netscape knows the mouse pointer is over the line item when it's hovering the anchor? Hi guys, I've used a Dynamic Drive CSS script to create a drop down menu for my website... everything was working fine but now I've noticed that the script is now opening all links within the menus in a new browser window. I need to make sure all links open in the same window... other links within the pages that aren't part of the menu are working fine and not opening new windows... I'm not sure what I did to make this happen but I'm pretty sure this wasn't happening before. Any help would be greatly appreciated!! Thanks! I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks Hi. I wondered if there was anyway to make this iframe auto resize (heightwise) so that there is never a vertical scrollbar if the browser is shrunk down... <iframe name="I1" src="frame.html" width="776" height="391" align="top" border="0" frameborder="0"> Your browser does not support inline frames or is currently configured not to display inline frames.</iframe> I dont think you can do that with an iframe but have to use framesets but I just need another voice! To get an idea of what I mean... www.isolace.net (view the source) Cheers! Is it possible to control the attributes of an IFRAME with CSS? Hi all, I am having great difficulty in setting a CSS style for an element in my IFrame. I know how to set the stylesheet for the IFRame using the function "createStyleSheet(strCSS);", however, I want to be able to set the stylesheet for the line that I am currently adding text. This would be like clicking on 'Bold' in Microsoft Word and having the ability to write text using this font until I click on the button again to turn it off. I know that there is an execCommand function that I can use to execute commands on the IFrame. However, I can not find a command identifier that will allow me to set the css style for my current position. Has anyone come across this problem before?!? Any help would be greatly appreciated! Cheers, gavC I am trying to put an iframe into css but it's not working, when i do the iframe screws up and it does not hold the information. I have tried everything I can think of, I even went into dreamweaver to fix it but I got nothing. Here is the code. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nintendo DS</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #DEDEDE;
background-image: url(images/back.jpg);
}
a:link {
color: #0000FF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style6 {font-family: Verdana, Arial, Helvetica, sans-serif}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:5px; top:4px; width:791px; height:43px; z-index:1">
<table width="789" border="0">
<tr>
<td width="147" height="31"><a href="sound.html"target="myiframe">Sound</a></td>
<td width="179"><a href="dualscreens.html"target="myiframe">Dual Screens </a></td>
<td width="168"><a href="touch.html"target="myiframe">Touch</a></td>
<td width="110"><a href="voice.html"target="myiframe" class="style6">Voice</a></td>
<td width="151"><a href="connect.html" target="myiframe" class="style6">Connect</a></td>
</tr>
</table>
</div>
<table width="800" height="402" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<iframe src="back.html" name="myiframe" id="myiframe" width="400" height="600" frameborder="0" scrolling="AUTO" noresize> </iframe>
</div></td>
</tr>
</table></body>
</html>
Does anyone know of a way to make an IFrame go to 100% of the height of its container, in this case a DIV. I have to load in some external tools for a site and I don't want to have to split up my CSS layout into frame parts when I can just use an IFrame. I've considered using javascript to detect the browser size on load and redoing the height and also onResize but that's just ugly. I've tried t r b l all set to 0px with position:absolute that did nothing. Height:100% gives me no height at all, so far the only thing that works is width:100% and a fixed pixel height value dave I've created a page with an iframe. The page that is being displayed in the iframe is as follows:
Code: <html>
<head>
<title></title>
<link href="mainsite.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width=100% height=100% border=1>
<tr>
<th id="welcome">Welcome to the American Communications Web Site</th>
</tr>
</table>
</body>
</html>
The page loads fine in the iframe, but the css th style is not being implemented on it. The css file has this in it: This is in the mainsite.css file Code: #welcome th
{
border:1px solid black;
font-size: 20px;
background: #FF9966;
}
Any reason why the css style isn't being used? I'm guessing it's because of the iFrame. The main page has no trouble displaying the css styles. I've searched the web hi and low yet I have not found any answers. I am using an iframe (it's a love-hate relationship) for my website. I have my index page loaded up with a flash .swf which influences the iframe to switch pages when the user clicks on any of the provided links. *PROBLEM* One of my links consists of a blogger- formulated with 'cryptic blogger code' which I have no intention on learning- just working around. However, no matter how hard I try and mess around with the blogger page's html code, I cannot get rid of the x-axis scrollbar- it appears when it is not needed at all and I am unsure of doing anymore messing around for fear of messing up the code. I've also tried adjusting the actual iframe script but still no results. Please- if any html/css demi-gods/goddesses can help me get rid the the iframe's horizontal scrollbar BUT keep the vertical one, you'll be my best friend :P Here are the websites: (ps- tell me what you think- and it isnt finished) URL <- actual site URL <- blogger page (you can see where i've tried to edit it but still no results) -Jason (i posted this in the html section hoping some html guys would help me- but it was a dud ) ok there is this trick that i saw that you can get a div to "act" as an iframe, by that i mean have it with a scroll bar and all but not call the info from a diff page like an iframe, anyone know what im talking about? Just a quick question. Do IFrames inherit css from the parent window? Because in firefox is seem to but in IE it doesn't. Any explaination? i've been designing a website and decided to use IFRAMES (try them out really). I'm using firefox, i've got an IFRAME that is correctly positioned when i view it locally in firefox, but when i upload it to the web (free host till i get hosting) the iframe is in the top left and not wide enough or tall enough. All the iframe attributes are in a stylesheet, and i am sure it is uploaded to the right spot and the links are correct Question is, why would firefox view it correctly when its viewed locally, and not when it is uploaded it to the web. thanks in advance Does anyone know how to style an iFrame for IE so that it does not look sunken in? <iframe src="imageUploadForm.sphp" title="Image Upload Form" style="border: 1px solid #eaeaea; height: 70px;" marginwidth="0" marginheight="0"> the border above matches the page color that it is on .. however, it looks like the iframe is sunk in to the page. Firefox render's this great and it looks like it is part of the page.. any way i can get IE to look like that too? Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I've fiddled with the widths and container widths with no luck. Can anyone tell me why this is happening? thanks -Sean hi all, i am a beginner to html world ... hope someone can help me out.. i use iframe to display an external html page (maybe www.download.com), i can't use css to control the appearance of the iframe src page as i try it before. Is there anyway i can do so that my main page standardize the appearance, even displaying others web? Thank for ur attention..... Regards.... K |
|||||||