|
CSS - Posible To Make Iframe Content Inherit Parent Page's Css?
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! Similar TutorialsHello there, I have a question about floating and automatic heights. First, i don't want to use tables becouse of layout etc... I want to have a "row" with 3 seperate "columns". Each "Cell" should have the same height as the heighest "Cell". Now this is where the problem is. The height isn't correct . I Tryed height: auto and 100%. But nothing is working. How can i fix this? Thx in advance. CSS: Code:
.divRow {
float: left;
position: relative;
height: auto;
margin: 2px 0;
}
.columnTo, .columnMessage, .columnDate {
height: 100%;
float: left;
padding: 0;
padding-right: 2px;
background-color: #f0f0f0;
vertical-align: middle;
}
.columnTo {
width:75px;
overflow: hidden;
background-color: #ff0000;
}
.columnMessage {
margin-left: 2px;
width:270px;
overflow: hidden;
background-color: #00ff00;
}
.columnDate {
margin-left: 2px;
width:40px;
overflow: hidden;
background-color: #0000ff;
}
HTML Code: <div class="divRow"><div class="columnTo" style="background:#ffad39">Column#1:</div><div class="columnMessage" style="background:#ffad39">Column#2:</div><div class="columnDate" style="background:#ffad39">Column#3:</div><div class="clearBoth"></div></div> <div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div> <div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div> 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 have a base page that i use for a multi-page site, but i'd like to be able to insert more and more content, and have the page size accordingly. i think the problem is that the content is technically floating...or something, it's a cold fusion search result in a cart. i don't know, i might be asking for a miracle here- if you have an idea, let me know. Hi guys, I'm changing a simple page from a table style layout to CSS Positioning style. Here's a common line...it's working fine in IE, but not in Firefox (which immediately tells me there's something wrong with my coding). The code is: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Overflowing Box</title>
<style type="text/css">
div.row{
padding-top : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}
.image{
float : left;
font-weight : bold;
width : 210px;
}
.description{
float : right;
width : 235px;
}
</style>
</head>
<body>
<div style="width: 450px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto">
<div class="row">
<div class="image">An image will go here</div>
<div class="description">
<strong>Heading:</strong> Text <br>
<a href="http://www.somesite.com" target="_blank">http://www.somesite.com</a><br>
<br>
This is some meaningless text. This is some meaningless text. This is some meaningless text. This is some meaningless text.<br>
<br>
This is some meaningless text.
This is some meaningless text. This is some meaningless text. This is some meaningless text. This is some meaningless text.<br>
<br>
This is some meaningless text.
This is some meaningless text. This is some meaningless text. <br>
<br>
</div>
</div>
</div>
</body>
</html>
It's a very simple example, but for some reason, the container doesn't "expand" in Firefox as I'd expect. I've hunted around the web, played around and tried some of my other code to no avail. Am I missing the simplest of attributes? Any help would be GREATLY appreciated. Thanks in advance! I've looked over a couple of answers and they didn't seem to help me. I have a css "container" box defined like so, containing another "content" box. I'd like the container's height to stretch to contain whatever is in the content box. #container { width: 720px; height:????????????????; margin: auto; text-align: left; position: relative; } #content { position: relative; left:125px; top: 105px; width:500px; border:0px solid #000; } with html like so: <div id="container"> <div id="content"> </div> </div> The content always spills over, unless I set overflow, but that does not solve the problem. Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem. If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons: http://bit.ly/gL9sA8 The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway. In other words, how would you code the DIV tag so that the following two things happen: 1. It's always in view on the LEFT side of the webpage 2. The main DIV stops against it, and doesn't overlap it if resized As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that. Here is the current code for that left sided DIV column: Code: <div style="position:fixed; margin-left: -180px; top: 75px;"> // My html content for mini You Tube video & button is here </div> The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window. My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now. If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction! Ok, I have basic CSS knowledge but need some help. Here's what I'd like to do: I take trips and post pictures on my site. I use lighthouse to display the images, so each image has a separate filename and caption, and each group of images has a separate group name. Under "Ski Trip", for instance, I'll have Img 1, "Skiing"; Img 2, "More skiing"; etc. It's relatively tedious to create page after page that uses the same format. I use CSS for style, the menu, and Lighthouse, but is there way that I could create a new page entitled "New ski trip.html" and in that file just have a list of the image filenames, captions, etc., that end up all using the same html format to display the images? I don't think I'm being terribly clear (sorry) ... big kudos to anyone who can help. if you didnt understand the subject i'll try and explain it a bit better here! This is my problem in IE my page looks like this http://www.readyflowers.com.au/div-fill.gif But what i want is when there is no content for those divs not to appear so it would look like this (In firefox it works!) http://www.readyflowers.com.au/div-fill-firefox.gif Hi, I have a content box inside a layer in Dreamweaver and I want to be able to align this content box to the right hand side of the layer, rather than on the left side. Is it possible to do this? Here is the code: Code:
<head>
<style type="text/css">
.xsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #d76f0a;
}
.xsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background:transparent;
width:180px;
float:left;
margin-right:10px;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #d76f0a;
border-right:1px solid #d76f0a;
}
.xb1 {
margin:0 4px;
background:#d76f0a;
}
.xb2 {
margin:0 3px;
border-width:0 1px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
display:block;
background:#fff;
border:0 solid #d76f0a;
border-width:0 1px;
}
.color_a {
background:#f69b43;
color:#fff;
}
.color_b {
background:#d76f0a;
color:#000;
}
.color_c {
background:#758279;
color:#fff;
}
</style>
</head>
<body>
<div id="Layer9" style="position:absolute; width:176px; height:115px; z-index:8; left: 332px; top: 157px;">
<div align="center" class="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div align="center" class="xboxcontent">
<h1 align="center" class="color_a"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Shopping
Basket</font></h1>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b> <b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>
</body>
CSS newb here and this is my first full CSS page layout ever, so go easy. Some of the page elements do not stretch properly to match the page content. I also tried to add a few bits to make a sticky footer, and in doing so I sort of confused myself as to where the problem is. Here's a link to the page: http://www.crackin.com/cbled/index.html and here's the code: Code:
body {font: 75% Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;margin: 0;padding: 0;text-align: center;color: #000000;height: 100%;}
html {height: 100%;}
* html #nonFooter {height: 100%;}
.oneColFixCtr #nonFooter {width: 923px;background: #FFFFFF;margin: 0 auto;border: none;text-align: left;position: relative;min-height: 100%;z-index:3;}
.oneColFixCtr #content {padding: 0 0 56 0; height:auto;}
#mainlayout {position:relative;left:0px;top:0px;width:923px;}
#liberty-header {position:absolute;left:231px;top:0px;width:114px;height:151px;}
#logo-orb {position:absolute;left:0px;top:24px;width:231px;height:156px;}
#header-slogan {position:absolute;left:231px;top:151px;width:692px;height:29px;}
#logo-ledind {position:absolute;left:0px;top:180px;width:231px;height:66px;}
#header-breaktop {position:absolute;left:231px;top:180px;width:692px;height:66px;}
#header-breakbase {position:absolute;left:0px;top:246px;width:923px;height:57px;}
#liberty-main {position:absolute;left:211px;top:303px;width:366px;height:409px;}
#navbarbreak {position:absolute;left:231px;margin-top:10px;width:2px;height:95%;background-color:#BBB; z-index:2;}
#pagecontent {position:absolute;left:253px;top:303px;width:650px;height:10px;}
#navbar {position:absolute;left:0px;top:303px;width:233px;height:350px;}
#navbar-home {float:left;margin-top:15px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-info {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link3 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link4 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar a {display:block;width:100%;height:100%;text-decoration:none;color:#333;background-color:#EEE;padding:4px 0px;}
#navbar a:hover {background-color:#9ADF86;}
#footer {position:relative;width: 923px;margin: -56px auto 0 auto;z-index:4;}
#footer-left {position:absolute;left:31px;top:0px;width:18px;height:56px;}
#footer-bg {position:absolute;left:49px;top:0px;width:825px;height:56px;background-color:#329428}
#footer-right {position:absolute;left:874px;top:0px;width:18px;height:56px;}
#greenbreak-z {z-index:1;}
#greenbreak {position:absolute;left:0px;top:200px;width:100%;height:123px;background:url(images/mainbg_horiz.jpg);background-repeat:repeat-x;}
#page-edges-a {position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}
#page-edges-b {position:relative;margin:0 auto;width:923px;height:100%;}
#mainbg-leftvert {position:absolute;left:-16px;top:0px;width:16px;height:100%;background:url(images/mainbg_leftvert.png);background-repeat:repeat-y;}
#mainbg-rightvert {position:absolute;left:923px;top:0px;width:16px;height:100%;background:url(images/mainbg_rightvert.png);background-repeat:repeat-y;}
#clear {clear:both;}
-->
</style></head>
<body class="oneColFixCtr">
<div id="nonFooter">
<div id="content">
<div id="mainlayout">
<div id="liberty-header"><img src="images/liberty_header.jpg" width="114" height="151" alt=""></div>
<div id="logo-orb"><img src="images/logo_orb.jpg" width="231" height="156" alt=""></div>
<div id="header-slogan"><img src="images/header_slogan.png" width="692" height="29" alt=""></div>
<div id="logo-ledind"><img src="images/logo_ledind.jpg" width="231" height="66" alt=""></div>
<div id="header-breaktop"><img src="images/header_breaktop.jpg" width="692" height="66" alt=""></div>
<div id="header-breakbase"><img src="images/header_breakbase.jpg" width="923" height="57" alt=""></div>
<div id="liberty-main"><img src="images/liberty_main.jpg" width="366" height="409" alt=""></div>
<div id="navbar">
<div id="navbar-home"><a href="#">home </a></div>
<div id="navbar-info"><a href="#">company info </a></div>
<div id="navbar-link3"><a href="#">link3 </a></div>
<div id="navbar-link4"><a href="#">link4 </a></div>
<div id="navbarbreak"></div>
</div>
<div id="pagecontent" align="justify">
<p>Lorem ipsum, etc etc...</p>
</div>
</div>
</div>
</div>
<!--PAGE DROPSHADOW-->
<div id="page-edges-a">
<div id="page-edges-b">
<div id="mainbg-leftvert"></div>
<div id="mainbg-rightvert"></div>
</div>
</div>
<!--GREEN BACKGROUND-->
<div id="greenbreak-z">
<div id="greenbreak"></div>
</div>
<!--FOOTER-->
<div id="footer">
<div id="footer-left"><img src="images/footer_left.gif" width="18" height="56" alt=""></div>
<div id="footer-bg"></div>
<div id="footer-right"><img src="images/footer_right.gif" width="18" height="56" alt=""></div>
</div>
</body>
</html>
Any help is much appreciated. Hi all 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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
body {
}
.page {
background-color: red;
}
.menu {
float: left;
width: 100px;
background-color: yellow;
height: 100%;
}
.content {
margin-left: 101px;
background-color: blue;
height: 100%;
}
</style>
</head>
<body>
<div class="page">
<div class="menu">asdf</div>
<div class="content">content<br />asdf</div>
</div>
</body>
</html>
Is there a way to make the yellow div.menu exactly as high as the height of the enclosing div.page? So div.menu and div.content have always the same length no matter which of them has the longer content? Thanks for help Josh Here is a small snippet of my CSS: Code:
body {
font-family: verdana, arial, sans-serif;
color: #0A142B;
background-color: #006699;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: left;
}
#main {
background-color:#FFFFFF;
height: inherit;
padding: 5px;
}
My question is that in the <div id="main"> how can I get that to set the height to 100% from the body, I have tried both setting it to 100% and inherit and it just stays the same height. Or do I have to replicate every CSS class in print? That would double the size of my CSS file! What's the correct way? Will this work as I hope? Code:
div.news {
width:690px;
padding:10px;
margin:0;
float:left;
background-color: #DDDDDD;
}
.button_div {
width:180px;
padding:10px;
background-color:#953956;
cursor:pointer;
}
.body_text {
color:#284186;
line-height:130%;
font-size:11px;
}
@media print {
div.news {background-color:#EEEEEE;}
.button_div {display:none;}
.body_text {color:#000000;}
}
Also, is it ok to do this? Any issues I should be aware of? Code:
// CSS
p.italic {font-style: italic;}
p.large {font-size: 150%;}
// HTML
<p class="italic large">Italic and large.</p>
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? I actually have two problems... Installing hte firebug plugin for firefox may ease helping me out... The problem is with http:// kthxbai2u<dot>com I cant for the life of me center the "content" div. I have tried every method I found on the first 4 pages of Google. The only thing I can think of is that it is inheriting something wierd or I am missing something simple... The second problem, I can't seem to make the left and right side bar expand to meet up with the footer wayy down at the bottom of the page. I want that div to make a column the whole way down. If anyone can help me out, it would be more than appreciated! Thanks Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh 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. Hi all, How do you put the content div? at the top of a page's source code? I've never figured out how to do this and I'm very interested. Hey guys, My site looks fine in firefox but in IE6 it lowers the content section away from the page see the link. -ht tp://winuser.widget-it.co m/ Can anyone suggest away to fix this ? Thanks for your time, - sorry for posting the link showing is the best way of explaining the problem. If this is a problem please feel free to remove it. Hi, I want see what my page will look like with a border around it. I assume that it is done with CSS.Style file? What would be the code? And where do I put it? http://www.learn-how-to-weld.com/mig-welding.html Then how would I make the background a different color out side the border like on this page. http://www.learn-how-to-weld.com Peter |
|||||||