Iframe verpest lay-out om sommige pc'

[Pleuris]

Een jaartje geleden werd me gevraagd om de site van mijn jeugdbeweging te maken. Een site die begon met een 10 tal pagina's groeide ondertussen uit tot een site met een dikke 50 pagina's. Om het wat makkelijker te maken als er onderdelen weg of bij moeten was ik begonnen om een manier te zoeken om het menu aan de linkerkant zo te maken dat als ik het daar aanpas ALLE pagina's het automatisch meekrijgen. Een Iframe bleek de beste oplossing

Na 2 dagen zelf te zoeken dacht ik het in orde te hebben, maar toen ik aan enkele vrienden de vernieuwde lay-out liet zien om het te testen bleken er nog wat problemen te zijn. Aangezien ik geen idee heb waar het zit ben ik op zoek gegaan naar een forum waar men me hopelijk kan helpen.

Wat is er nu mis met de lay-out

Zo zou het er op elke pc moeten uitzien:

onder firefox ziet het soms zo uit (niet echt een probleem, maar toch), dus een kader rond het menu

Let er trouwens op dat het menu breder is dan de vorige keer

Maar het ergste is dit (zo ziet het er op de meeste pc's blijkbaar uit)

Het menu is naar rechts opgeschoven in het kader, waardoor de tekst van de site pas begint onder de lengte van het menu.

Dit is de code van het iframe (de width zou eigenlijk op 150 moeten staan, maar heb er al zoveel mee geprutst zonder verschil)

<div class="subnav">
<iframe src="menu.html" name="sidemenu" id="sidemenu"
frameborder="" height="680" scrolling="no"
width="100"></iframe></div>

Wie o wie kan me helpen

[stegisoft]

Gelieve de CSS van class="subnav" hier te vermelden zodat andere u kunnen helpen.

Volgens mij kan je beter div in div werken.

4 september 2010 aangepast door stegisoft

[Pleuris]

ik zou dat graag doen, maar waar vind ik dat stuk juist? De hele css hier posten lijkt me nogal onoverzichtelijk.

volgens mij is het dit:

#wrap .subnav h2 { margin: 5px 0px;
padding: 2px 2px 2px 5px;
font-size: 12px;
color: rgb(0, 0, 0);
display: block;
background-color: rgb(212, 208, 200);
}
#wrap .subnav .cats a { border-style: none;
color: rgb(110, 157, 225);
text-decoration: none;
text-align: left;
display: block;
float: left;
clear: left;
}
#wrap .subnav ul { margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#wrap .subnav .cats { margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#wrap .subnav .cats li { border-bottom: 1px solid rgb(228, 228, 194);
font-size: 10px;
text-align: right;
}
#wrap .subnav li { font-size: 10px;
}
#wrap .subnav a { border-bottom: 1px solid rgb(228, 228, 194);
color: rgb(110, 157, 225);
text-decoration: none;
display: block;
}

trouwens div in div, is voor mij chinees. Graag een woordje uitleg :s

4 september 2010 aangepast door Pleuris

[stegisoft]

Ik bedoeld zo:

<div>

<div></div>

</div>

[Pleuris]

en waar zet ik die dan neer? Ik heb om het is te testen het zo gezet:

<div class="subnav">

<div><iframe src="menu.html" name="sidemenu"

id="sidemenu" frameborder="" height="600"

scrolling="no" width="150"></iframe></div>

</div>

echter zonder verschil.

Toch al bedankt om me te helpen.

[stegisoft]

Ik ben geen specialist in website.

Heb wel iemand gevraagd om te helpen maar je moet wel wachten tot hij online is en dat kan even duren.

Maar ik dacht zoiets als dit:

<div class="subnav">

<div> src="menu.html" name="sidemenu"

id="sidemenu" frameborder="" height="600"

scrolling="no" width="150"></div>

</div>

Dus zonder iframe

[Pleuris]

wachten is geen probleem, want je idee hierboven lukt totaal niet. In NVU krijg ik de code te zien, en dus niet menu.html. Dreamweaver geeft een blanco stuk op de pagina en de melding dat er een invalid markup is op <src="menu.html".

[leroy]

Als ik het goed begrijp wil je een website hebben waar je maar 1x de menu-items voor moet invullen, en dat deze items dus op elke pagina zichtbaar zullen zijn? Zonder dat je elke pagina die je toevoegt op elke pagina die al bestaat erbij moet zetten door een linkje toe te voegen.

Een ander topic van mij gaat hierover. (deze -> http://www.pc-helpforum.be/f129/iframes-combinatie-met-tabellen-23734/)

Hier staat uitgelegd hoe je pagina's aanmaakt op 1 html of php pagina. En deze dan kunt openen in de juiste plek. (hierdoor verdwijnt je iframe)

Maar het probleem waar je nu tegenaan loopt is heel iets anders, dit is een CSS/layout probleem.

Zo te zien heb je je website gemaakt en uitgetest op Internet Explorer. Internet Explorer gebruikt niet de standaard programmeer waardes, vandaar dat het in Internet Explorer er netjes uit kan zien, maar zodra je naar een andere browser gaat, is heel je layout kapot.

Er is een CSS bestandje dat dit verhelpt. Deze zet alle waardes (margins, paddings, h1-tag, h2-tag, etc etc) op 0. Standaard staan deze waardes op een bepaalde waarde. Deze zul je zelf aan moeten passen naar de juiste waarde.

Ik hoop dat je een beetje HTML en CSS kunt, anders ga je hier tegen de boom aanlopen.

Dit is het CSS bestandje wat je moet importeren: (hierna staat uitleg HOE je dit CSS bestandje moet importeren)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
{
 margin: 0;
 padding: 0;
}

* html #content img,
* html #header a
{ 

}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

fieldset,
img 
{
 border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var 
{
 font-style: normal;
 font-weight: normal;
}

ol,ul
{
 list-style: none;
}

caption,
th 
{
 text-align: left;
} 

h1,h2,h3,h4,h5,h6
{
 font-weight: normal;
} 

q:before,
q:after
{
 content:'';
} 

abbr,acronym 
{
 border: 0;
}

Noem dit CSS bestandje reset.css en importeer deze DIRECT onder je <head>-tag. Hij komt dus boven het originele css bestandje te staan.

Als je nu je website bekijkt, zul je zien dat waarschijnlijk heel je layout weer kapot is. Dat kan kloppen. Maar als je nu alle CSS eigenschappen aanpast (h1-tags, DIV-tags, etc etc) zul je zien dat hij op elke browser identiek hetzelfde eruit ziet. NIET je reset.css aanpassen maar je huidige CSS.

Er kunnen nog een paar kleine foutjes naar voren komen, maar die kun je hier alsnog plaatsen.

Even ter extra uitleg. Om deze manier uit te voeren zul je wel eerst de eerste stap (link naar ander topic van mij) moeten uitvoeren. Anders ga je tegen de boom aanlopen dat wanneer je op een linkje klikt, de pagina er weer niet goed uit gaat zien.

Kom je er niet uit, aarzel dan niet om het te vragen. Ik help je graag verder.

Met vriendelijke groet,

Leroy

4 september 2010 aangepast door leroy

[Pleuris]

Ik zou inderdaad op een of andere manier willen dat het menu makkelijk aan te passen is op elke pagina. Ook zou ik het graag in de nu reeds bestaande lay-out van de site krijgen. Nu heb ik tijdelijk de hoofpagina aangepast. Zoals je op bv deze pagina kan zien zijn er op de fotopagina alleen al 18 pagina's waarnaar gelinkt wordt. Als er een dus een nieuw deel bijkomt (of afgaat) is dat veel werk.

De uitleg over Iframes had ik al zien staan op websitemaken. Toch slaag ik er niet in om dat erin te krijgen met de huidige lay-out.

Het probleem ligt niet aan explorer alleen. Op sommige pc's werkt het perfect met explorer, op andere niet.

Ook hoeft het niet echt een Iframe te zijn voor mij. Het idee van stegisoft om een link te leggen naar een bestand waarin het menu staat is uiteindelijk de bedoeling. Maar hoe dat kan gedaan worden weet ik niet.

[leroy]

Wat je nu allemaal verteld over de techniek (menu in 1 pagina etc etc) kan alleen gedaan worden met PHP. Dat staat uitgelegd in die link die ik in mijn vorig antwoord heb gezet.

De titel van het topic gaat over Iframes. Maar verderop in dat topic vertel ik hoe het opgelost wordt ZONDER Iframes. Dus alles "statisch" op je pagina.

Jouw tweede probleem is de opbouw van de pagina, dat is het tweede stukje van mijn vorig antwoord. Dit hele grote CSS.

Als ik ongeveer ga nadenken hoe lang het gaat duren voordat je klaar bent met stap 1 denk ik dat we ongeveer 2 dagen verder zijn. Dat is namelijk een redelijke grote impact. Die werkt!!.

Groeten,

Leroy