[HTML/CSS] Iframes naast elkaar, waarvan één fixed width.

vrijdag 24 februari 2012 12:29

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo Allen,

Ik heb een probleem met Iframes. Ik zou 2 div tags met vaste content moeten hebben boven en onderaan. Hiertussen moet links een menu komen dat aangeroepen moet worden vanuit een iframe met width:200px. Hiernaast moet een iframe komen met een variabele breedte (schermvullend). De footer heb ik met een truukje vastgeplakt aan de bottom. De twee iframes zitten in DIV's met een float left en right. Hieronder mijn HTML en CSS:

HTML:

<!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=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Wrapper">
<div id="Top"><img src="images/logoifb.png" width="166" height="61" />
</div>
<div id="Menu">
</div>
<div id="Content">
<iframe id="APPLIC"></iframe>
</div>
<div class="push"></div>
</div>
<div id="Bottom"><img src="images/COMPANY_LOGO.jpg" width="210" height="85" class="FooterImageLeft" /><img src="images/COMPANY_FOOTER.jpg" width="554" height="85" class="FooterImageRight" /> </div>

</body>
</html>

Cascading Stylesheet:

html, body {
    height: 100%;
}

#Top {
    height: 61px;
}
#Menu {
    float: left;
}
#Content {
    float: right;
    }
#Wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -85px; /* the bottom margin is the negative value of the footer's height */
}
.FooterImageRight {
    float: right;
}
.FooterImageLeft {
    float: left;
}

#Bottom, .push {
    clear:both;
    height: 85px;
}

#APPLIC{
    width:100%
}

#MenuFrame{
    width:200px;
    }

Het probleem zit er nu in dat de Iframe APPLIC de volledige schermgrootte gebruikt en niet 100% van de grootte van zijn div.

Dit resulteert in de menu links correct en de content van de iframe daaronder weergegeven waar die er eigenlijk moet langs staan, dynamisch aangepast aan de breedte van het scherm.

Heeft iemand hier een oplossing voor?

P.S. Ik weet dat iframes niet zo ideaal zijn maar deze applicatie brengt content vanuit PL/SQL en deze packages genereren dat, dus dat kan zeer moeilijk veranderen.

Alvast bedankt

Niels

vrijdag 24 februari 2012 12:37

Acties:

0 Henk 'm!

q-enf0rcer.1

Heb je ergens een testcase online staan? Dan firebug ik er even op los. Dit zou gewoon moeten kunnen!

Wellicht doet position: relative; op de content de truuk, of width: auto op #applic.

Dit is meestal gewoon een beetje puzzelen, ik kan me herinneren uit de Frontpage tijd dat het wel mogelijk is. En ik denk ook zonder JavaScript.

vrijdag 24 februari 2012 12:49

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Alvast heel fel bedankt q-enf0rcer.1 voor je antwoord.

Sorry, niet direct een testcase online. Werkt hier op interne server en FTP geblokt via de firewall om het ergens extern te plaatsen. Maar ik probeer je suggesties wel eens en post dan wel eens terug.

Onderwerpen