Div + Iframe lopen beeld uit - Softwareontwikkeling

woensdag 2 april 2008 19:34

Acties:

Verwijderd

Topicstarter

Ik ben al een paar daagjes bezig met het volgende probleem, dat het iframe (geplaatst in een div) buiten me beeld loopt. Dit komt omdat ik 100% geef bij height en width, dit doe ik zodat me achtergrond door loopt, als het scherm breder/hoger wordt en er geen wit vlak komt.

In Diverse browsers krijg ik het goed, door left,top, right, en bottom een aantal px te geven, maar zodra ik hem dan open in IE 5 - 6.0 is me hele div met iframe weg. Dit komt volgens mij omdat IE 5 - 6 het niet helemaal wil snappen met right en bottom heb ik het idee.

Ik heb al diverse dingen geprobeerd, met margin, padding, etc.. wat in diverse topique's te sprake komt, maar echter zonder resultaat.

Ik weet er zijn diverse topique's over, maar kan nou niet echt een oplossing vinden, of is dit wel op te lossen?

Hier onder de code zoals deze nu te zien is in de link.

Cascading Stylesheet:

body {
    height: 100%;
    width: 100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
    }
    
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    }

#main {
    position: absolute;
    border: 0px;
    height: 100%;
    width: 100%;
    z-index: 0; 
    }
    
#top_ext {
    border: 0px;
    position: absolute; 
    left: 0px;
    width: 100%;
    top: 0px; 
    height: 150px;
    z-index: 1; 
    background-image: url('../Images/Main_page/Main_03.gif');
    }

#menu_bg {
    border: 0px;
    position: absolute; 
    left: 0px;
    top: 0px; 
    height: 100%; 
    width: 171px; 
    z-index: 1;
    background-image: url('../Images/Main_page/Main_10.gif'); 
    }

#top_left {
    border: 0px;
    position: absolute; 
    left: 0px;
    top: 0px; 
    height: 150px;  
    width: 171px; 
    z-index: 2;
    background-image: url('../Images/Main_page/Main_01.gif'); 
    }

#menu {
    border: 0px;
    position: absolute; 
    left: 0px;
    top: 150px; 
    height: 525px; 
    width: 171px; 
    z-index: 2;
    }
    
#center {
    border: 0px;
    position: absolute; 
    left: 176px;
    top: 150px; 
    height: 100%;
    width: 100%; 
    z-index: 1; 
    background-color:#00FFFF
    }

#mainframe {
    border: 0px;
    position: absolute; 
    height: 100%;
    width: 100%;
    overflow: auto; 
    }

HTML:

<!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">
<meta http-equiv="Content-Language" content="nl">

<title>TEST</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <div id="main">
        <div id="top_left">top_left
        </div>
        <div id="top_ext">top_ext
        </div> 
        <div id="menu">menu
        </div>
        <div id="menu_bg">menu_bg
        </div>
        <div id="center">
        <iframe id="mainframe" name="mainframe" frameborder="0" src="iframepage.htm">
        Your browser does not support inline frames or is currently configured not to display inline frames.
        </iframe>
        </div>
    </div>
</body>
</html>

[ Voor 16% gewijzigd door Verwijderd op 05-04-2008 17:58 . Reden: Link verwijderd ]

woensdag 2 april 2008 19:38

Acties:

Verwijderd

ergens gok ik dat die position: absolutes roet in het eten gooien, die worden namelijk zelden gebruikt in dit soort simpele opbouwen.

woensdag 2 april 2008 19:58

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op woensdag 02 april 2008 @ 19:38:
ergens gok ik dat die position: absolutes roet in het eten gooien, die worden namelijk zelden gebruikt in dit soort simpele opbouwen.

Wat zou ik dan kunnen doen, relative gebruiken? of met float gaan werken?
Ik vraag me af of ik dan dit probleem wel op los hoor...
Nog even te verduidelijking Plaatje (verkleinde site met IE 7) hier is duidelijk te zien, dat de div met iframe buiten het groene beeld loopt, dus ik kan niet bij de scrollbalken.

[ Voor 13% gewijzigd door Verwijderd op 02-04-2008 20:02 ]

woensdag 2 april 2008 20:34

Acties:

kalizec

Verwijderd schreef op woensdag 02 april 2008 @ 19:58:
[...]

Wat zou ik dan kunnen doen, relative gebruiken? of met float gaan werken?

Wat dacht je van geen van die drie, je hebt positioning pas nodig als iets buiten de normale flow moet komen te staan. Kortom, je hebt absolute, relative en float niet nodig. Mocht je er toch een of meer van willen gebruiken geef dan voorkeur aan float en anders relative. Absolute geeft vele malen meer problemen dan die twee.

Core i5-3570K/ASRock Z75 Pro3/Gigabyte Radeon HD7850/Corsair XMS3 2x4GB/OCZ Vertex2 64GB/3x640GB WD Black/24" B2403WS Iiyama x2/Nec 7200S

woensdag 2 april 2008 21:06

Acties:

Verwijderd

Topicstarter

kalizec schreef op woensdag 02 april 2008 @ 20:34:
[...]

Wat dacht je van geen van die drie, je hebt positioning pas nodig als iets buiten de normale flow moet komen te staan. Kortom, je hebt absolute, relative en float niet nodig. Mocht je er toch een of meer van willen gebruiken geef dan voorkeur aan float en anders relative. Absolute geeft vele malen meer problemen dan die twee.

Ik ben flink aan het stooeien, en heb inderdaad door, dat er een heleboel zonder absolute kan, zelfs zonder position of float. Door onder andere div's wat meer te neste.
Maar ik heb nog niet het eind resultaat wat ik wil.

Ik heb ook even de HTML code aangepast, hier stond een verkeerde...

vrijdag 4 april 2008 18:40

Acties:

Verwijderd

Topicstarter

Ik ben een heel eind verder, dankzij de tips
Alleen de hoogte wil nog niet erg mee werken, misschien dat iemand met een verse blik kan zeggen wat ik fout doe..? Ik zie hem nog even niet...
Linkje voor online voorbeeld

Momenteel werkend voor zo ver in IE7, zal zo even controleren of het ook klopt in andere brwosers.
Niet echt heel succesvol zie Link

Cascading Stylesheet:

body {
    height: 100%;
    width: 100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
    }
    
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    }

#main {
    border: 0px;
    height: 100%;
    width: 100%;
    }
    
#container {
    border: 0px;
    height: 100%;
    width: 100%;
    }   
    
#top_ext {
    border: 0px;
    width: 100%;
    height: 150px;
    background-image: url('../Images/Main_page/Main_03.gif');
    }

#menu_bg {
    float: left;
    border: 0px;
    height: 100%; 
    width: 171px; 
    background-image: url('../Images/Main_page/Main_10.gif'); 
    }

#top_left {
    border: 0px;
    height: 150px;  
    width: 171px; 
    background-image: url('../Images/Main_page/Main_01.gif'); 
    }

#menu {
    border: 0px;
    top: 150px; 
    height: 525px; 
    width: 171px; 
    }
    
#center {
    float: left;
    border: 0px;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    background-color:#00FFFF;
    }

#mainframe {
    height: 100%;
    width: 100%;
    border: 0px;
    overflow: auto;
    margin: 0px;
    }

HTML:

<!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">
<meta http-equiv="Content-Language" content="nl">

<title>TEST</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <div id="main">
        <div id="top_ext">
            <div id="top_left">top_left
            </div>
        </div> 
    <div id="container">
        <div id="menu_bg">
            <div id="menu">menu
            </div>      
        </div>
        <div id="center">
        <iframe id="mainframe" name="mainframe" frameborder="0" src="iframepage.htm">
        Your browser does not support inline frames or is currently configured not to display inline frames.
        </iframe>
        </div>
    </div>  
    </div>
</body>
</html>

[ Voor 2% gewijzigd door Verwijderd op 05-04-2008 17:59 . Reden: Link verwijderd ]

dinsdag 8 april 2008 19:05

Acties:

Verwijderd

Topicstarter

Ik heb het probleem opgelost, dankzij de volgende link uit een ander topique hier op GoT : http://www.cssplay.co.uk/layouts/basics2.html#Top
en
http://www.cssplay.co.uk/layouts/body4.html

Door de bron te bekijken en toe te passen op me eigen site, alles werk nu goed in diverse nieuwe en oude browsers, ik denk dat de oplossing was me doctype aan te passen naar:

HTML:

<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Nog wel gewoon alles met psoition: absolute; trwouens.

Helaas valideerd me site nu niet meer, vanwege een iframe wat er in zit, maar hij werkt wel goed.
Wat is er nu belangrijker?

Maar goed, tevens nog een klein vraagje over een ander onderwerp...

Ik ben deze site aan het maken voor me werk, deze hebben hosting bij planet.
Nu maak ik gebruik van een klein nieuws systeempje in php, waar in collega's een bericht kunnen plaatsen met een foto.
Nu is het alleen dat dat foto gedeelte niet werkt, wat juist het mooie van alles was.
Op me eigen hosting werkt het wel gewoon goed.
Het map je waarin de images worden geupload, is "777" dus daar ligt het niet aan lijkt mij.

Gebeld met planet, maar die zijn niet echt behulpzaam, en uiteindelijk werd er gezegt dat planet het uploaden naar de site had dicht getimmerd.

Zijn er nog meer mensen met dit probleem? Is er een oplossing voor, of te omzijlen?