Soort van iframe

[Romy92]

Hallo!

Ik ben bezig met een eigen site maken, maar na al uren op google zoeken kom ik er nogsteeds niet uit.

De bedoeling is om een soort frame in het midden van de pagina te krijgen waarin nieuwe tekst wordt geladen als je op de navigatie knoppen drukt.
Dus het blijft allemaal binnen dezelfde server.
Daarbij is het belangrijk dat het frame zich automatisch aanpast aan de inhoud, dus ik wil geen scrollbar.

Dit is me bijna helemaal gelukt met gebruik van iframes, helaas werkte het niet in Chrome, maar wel in IE en FF.
Zover ik heb gevonden is de nieuwste versie van Chrome het probleem en heeft het in het verleden wel gewerkt.
Maargoed, ik zoek dus of een oplossing om de iframes ook in Chrome te laten werken, of een alternatief waarmee ik hetzelfde doel kan bereiken.
Aangezien ik overal lees dat iframes uit de tijd is, heb ik liever een alternatief zolang het maar op alle browsers werkt.
Zo heb ik iets gelezen over Javascript met div tags en iets over AJAX wat zou kunnen werken, maar ik snap daar echt helemaal niks van.

Ik hoop dat iemand mij kan helpen!

 

[quintoo]

Zoals je hier zelf al zegt iFrame is uit de tijd.

hier een tutorial over div's waar je miscchien iets aan hebt : div tutorial.

Ik hoop dat ik je hier mee geholpen hebt en eruit komt. Anders hoor ik het graag!

Gr Robert

 

[Romy92]

Het gaat mij er vooral om dat wanneer ik op de navigatieknoppen druk een html bestand zich opent in de div frame.
Zodat dat gedeelte alleen vernieuwd wordt naar nieuwe tekst in de div ipv heel de pagina opnieuw maken voor elke link.
Helaas stond dat niet in de div tutorial..
Ik snap er niks van, het lijkt wel alsof elke site er gebruik van maakt, maar ik kan maar niet vinden hoe ik het aan de praat krijg.

Ik had ook gevonden dat ik met object data="" wél een html bestand kan toevoegen, maar het probleem daarbij is dat ik in het frame geen scrollbar wil, maar dat de frame zich in de hoogste automatisch aanpast aan de inhoud.

 

[csshunter]

Hoi Romy92,
Ja, ook met een <object> met data zou je tevoren moeten weten hoe hoog de inwendige content is, en dat weet je niet tevoren.
Met enige pijn en moeite zou het wel met "AJAX" gerealiseerd kunnen worden, d.w.z. met geavanceerd javascript.
Nadeel is, dat het dan in feite een één-pagina website blijft: elke pagina heeft dezelfde <title>, slecht toegankelijk, slecht vindbaar in Google, enz. (alle nadelen van een frame-opzet).

Maar als je op elke pagina alles hetzelfde wilt laten behalve de echte inhoud, dan is er ook een hele makkelijke andere methode: de gelijkblijvende delen automatisch door de server laten invoegen met PHP.

• Zie hier in dit topic: het Omgekeerd Denken!

Met vriendelijke groet,
CSShunter
______________
PS:

het lijkt wel alsof elke site er gebruik van maakt, maar ik kan maar niet vinden hoe ik het aan de praat krijg.

Het kan ook nog anders. Vrij veel sites gebruiken Dreamweaver als html-editor, en daarin kan je "Dreamweaver-templates" (.dwt-bestanden) aanmaken die automatisch de gelijkblijvende delen op elke pagina invoegen (dat zijn dan "non-editable regions" = pagina-onderdelen waar je niets aan kan veranderen). Bij het uploaden door DW stopt deze het er dan zelf bij.
Het resultaat is hetzelfde als met PHP, maar moet er op een bepaald moment iets in de "gelijkblijvende standaard-onderdelen" veranderen (bv. een aanpassing van een menu), dan moet Dreamweaver de hele site opnieuw gaan uploaden.
Bij PHP-includes hoeft dat niet, dan hoef je alleen maar het gewijzigde menu-fragment te uploaden, en het draait meteen op alle pagina's.
Ik ben daarom voor PHP!

• Zie verder in dit topic: Verschil Dreamweaver-template (dwt) en php-include

 

[quintoo]

zoals csshunter hierboven zegt een php include functie werkt uitstekend!
Als je dit met behulp van een switch en case doet kom je een heel eind.
Zelf gebruik ik nooit DW en ben er ook geen voorstander van.

Hopelijk is alles nu duidelijk

Hier nog even een handig linkje dat aantoont hoe je gebruikt maakt van switches en cases!

Switches / Cases

Als er nog meer vragen zijn hoor ik het graag, hoop dat je er nu uit komt!

Gr Robert

 

[csshunter]

Hoi quintoo,

... php include functie werkt uitstekend!
Als je dit met behulp van een switch en case doet kom je een heel eind.

Met alleen maar recht voor z'n raap een php-include kom ik zonder switch of case altijd precies waar ik wezen moet:

<?php include("includes/header.htm"); ?>
...
<?php include("includes/menucolumn.htm"); ?>
...
<?php include("includes/footer.htm"); ?>

Waarvoor gebruik je de switch- of case-functie?
(En waar komen de variabelen vandaan die daarvoor als input dienen?)

Met vriendelijke groet,
CSShunter

 

[Romy92]

Ahh, ik zal het eens gaan proberen!
Ik had de hoop al opgegeven en wilde voor elke pagina steeds dezelfde lijst codes voor de achtergrond en navigatie etc gaan neerzetten.
Maar wat je nu uitlegt is dus dat ik die lijst kan vervangen door een link naar die lijst via php en dat zorgt ervoor dat dat gedeelte ook sneller laadt, als ik het goed begrijp
Nouja, laat ik maar eerst de tutorial doorlezen

 

[quintoo]

hoi csshunter,

ik dacht dat het hier ging als je op een navigatie button klikt dat bv er alleen de div "main" veranderd zo worden

dus ik dacht zo mijn code:
PHP Code voorbeeld :

<div id="menu">
<ul>
<li><a href="index.php?p=home">Homepage</a></li>
<li><a href="index.php?p=guides">Handleidingen</a></li>
<li><a href="index.php?p=info">Informatie</a></li>
<li><a href="index.php?p=about">Over ons</a></li>
<li><a href="index.php?p=guestbook">Gastenboek</a></li>
<li><a href="index.php?p=contact">Contact</a></li>
</ul>
</div>
<div id="content">

<?php
if (isset($_GET['p'])) {
switch($_GET['p'])
{
case "home":
include("pages/home.php");
break;

case "handleidingen":
include("pages/guides.php");
break;

case "informatie":
include("pages/info.php");
break;

case "over_ons":
include("pages/about.php");
break;

case "gastenboek":
include("pages/guestbook.php");
break;

case "contact":
include("pages/contact.php");
break;

default:
include("pages/home.php");
}
} else {
include("pages/home.php");
}

?>
</div>

Met vriendelijke groet,

Robert

 

[Romy92]

Ik ben net klaar met de tutorial van csshunter, ik heb me er misschien niet 100% aan gehouden, dus het werkt ook niet.
Maarja misschien dacht ik veel te simpel...
De site deed het prima toen het nog één geheel was.
Nu heb ik het onderverdeeld zoals in de tutorial en het werkt totaal niet.
(de codes zien er vast heel slordig uit )

kop.htm

<table align="center" width="953" height="252" background="/afbeeldingen/topbg.png">
<tr>
    <td> 
<div align="center">
<A href="http://" target="_self"><img src="/afbeeldingen/head.png" width="647" height="121"></A>
</div>

<br>

<div align="center">
<P STYLE="word-spacing: 12pt;">
<A href="http://" style="text-decoration: none;" target="_self"><font color="000000"><b>Home</b></font></A>
<A href="http://" style="text-decoration: none;" target="_self"><font color="000000"><b>Nieuws</b></font></A>
<A href="http://" style="text-decoration: none;" target="_self"><font color="000000"><b>Kalender</b></font></A>
<A href="http://" style="text-decoration: none;" target="_self"><font color="000000"><b>Forum</b></font></A>
<A href="http://" style="text-decoration: none;" target="_self"><font color="000000"><b>Donaties</b></font></A>
<A href="http://" style="text-decoration: none;" target="_self"><font color="000000"><b>Overig</b></font></A>
</P></div>
</td>
</tr>
</table>

pagina.css

<style type="text/css">
@font-face {
    font-family: 'ElementaryGothicRegular';
    
src: url('elementary_gothic-webfont.eot');
    
src: url('elementary_gothic-webfont.eot?#iefix') 
format('embedded-opentype'),
         
url('elementary_gothic-webfont.woff') format('woff'),
         
url('elementary_gothic-webfont.ttf') format('truetype'),
         
url('elementary_gothic-webfont.svg#ElementaryGothicRegular') format('svg');
    
font-weight: normal;
    font-style: normal;}
	</style>
    
    <style type="text/css">
body,td,th {font-family: "ElementaryGothicRegular"; font-size: 12px;}
</style>
<style>
  body { 
  background-image: url(newbg.png); 
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top center
  }
  </style>

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<link rel="stylesheet" type="text/css" href="/css/pagina.css">
<?php include("/includes/kop.htm"); ?>
</head>

<body>

<table align="center" width="730">
<tr>
    <td>
<div class="container" style="width:730px; padding:3px; height:300px; background:none; z-index:2">
Tekst </div>
</td>
</tr>
</table>
</body>
</html>

Ik dacht dat het zo simpel was, maar dat is dus niet zo
En ja, ik heb een deel van de links weggehaald, normaal link ik ze allemaal http://---.nl/etc
Maargoed, wat doe ik hier verkeerd en hoe kan ik het qua code veranderen zodat het wel werkt, maar qua uiterlijk het helemaal hetzelfde blijft?

Dat van Robert zou anders ook wel mooi zijn, maar als ik dit al niet voorelkaar krijg....

En dat te bedenken dat dit nog het makkelijkste gedeelte is van wat ik nog allemaal met de site wil gaan doen..!

 

[csshunter]

Robert quinto: ik dacht dat het hier ging als je op een navigatie button klikt, dat bv er alleen de div "main" veranderd zou worden.

Juist, dat bedoel je. Dat klopt ook met de oorspronkelijk vraag, maar het blijft op deze manier wel een nagebootste frameset-pagina: een één-pagina website met (bijna) alle nadelen van dien.

• O.a.: de homepage moet nu gaan heten www.mijnmooiesite.nl/index.php?p=home,
  i.p.v. gewoon www.mijnmooiesite.nl/index.php.
• Om de website bereikbaar te houden voor bezoekers die alleen de site-naam www.mijnmooiesite.nl gebruiken, moet er dan nog een soort case bij: als géén parameter p is opgegeven, dan include("pages/home.php") gebruiken.

Romy92: (...) Dat van Robert zou anders ook wel mooi zijn, maar als ik dit al niet voor elkaar krijg....

Mijn suggestie is om je oorspronkelijke idee te verlaten, en er echte stuk-voor-stuk php-pagina's van te maken. Dan is de Robert-oplossing niet nodig, en zijn de nadelen daarvan ook niet meer van toepassing.

• Bv. elke pagina is met een eigen bestandsnaam op te vragen.
• I.p.v. www.mijnmooiesite.nl/index.php?p=contact wordt het dan gewoon:
  www.mijnmooiesite.nl/contact.php.
• Je kunt dan ook elke pagina een eigen <title> en een eigen <description> geven: goed voor de Google-vindbaarheid en de ranking door Google.
• Dat soort dingen zou je ook nog kunnen inbouwen op een parameter-pagina (met extra series cases), maar dat maakt het nodeloos ingewikkeld en minder overzichtelijk; en het wordt ook wel proppen aan php-code op die ene pagina.

=======

Nu heb ik het onderverdeeld zoals in de tutorial en het werkt totaal niet.

Dat is bijzonder tragisch!
Maar ik zie dat je een essentieel onderdeel van de tutorial hebt weggelaten:
Je homepage heet nog: index.html.
In de mini-tut staat op blz.6:

... en hopla: php!
Nu hoeft er nog maar één ding te gebeuren: de php-verwerkingsmachine op de server moet aangeslingerd worden. Maar dat is supereenvoudig:

• Verander de uitgang .htm van de pagina in .php
• Deze pagina met de .php extensie uploaden
• En klaar: zie het wonder!

Met .html als extensie werkt het dus niet.
En als de pagina niet is geüpload naar een server met php werkt het ook niet.

Want lokaal doet een php-pagina het niet (behalve als je lokaal een php-server hebt geïnstalleerd).
En je provider ondersteunt toch wel het gebruik van php?
Maak anders even een testpagina met een linkje hier, dan kunnen we exact zien wat er loos is.

Met vriendelijke groet,
CSShunter
_______
PS: Nette valid html (zonder deprecated elementen), geen tabellen voor opmaak, en alle opmaak bij elkaar in de css zou ook wel erg mooi zijn.