[xhtml] navigatie bar, link naar midden kolom

[pietjepuk|IAA]

Ik ben een site een xhtml aan het maken voor het eerst, en heb wat problemen met de navigatie

ik wel met frames vroeger sites gemaakt, en dat gebruikte je gewoon target om ervoor te zorgen dat hij een link opende in je "middelste" content frame zeg maar.

hoe doe ik dat nu?

code:

<div class="rightcolumn">
            <ul>
            <li><a href="http://www.iets.nl">Home</a></li>
            <li><a href="http://www.nu.nl">nu</a></li>
            </ul>
</div>

moet ik gewoon een complete pagina maken voor elke link? wordt het niet echt sneller van zeg maar, of wordt dat probleem opgevangen door de css?


ik zal wel het antwoord krijgen dat ik google moet gebruiken maar ben al een poos opzoek en waarschijnlijk kan iemand me hier zo het antwoord geven

ik las iets over een java script om het te regelen maar is dat niet omslachtig?

alvast bedankt!

[ Voor 5% gewijzigd door pietjepuk|IAA op 02-10-2008 12:45 ]

[NielsNL]

Tegenwoordig worden veel pagina's dynamisch berekent door de server.
Je menu, je kader, en de inhoud zijn allemaal losse bestanden, desgewenst met inhoud uit een database. Dus elke keer wanneer iemand een pagina oproept, wordt deze speciaal voor hem in elkaar berekent, en als 1 bestand verstuurd.

Waarschijnlijk ben jij met statische pagina's bezig, probeer eens een iframe.
Deze set je in je middelste div, en je kunt weer net als voorheen met target werken.

[Reinier]

Ik ga er niet vanuit dat je met bijvoorbeeld PHP en een database bezig bent, dus als je alleen maar statische content hebt ben je inderdaad aangewezen op een aparte pagina voor elke link (AJAX-achtige oplossingen met tekstbestandjes met content daargelaten).

[pietjepuk|IAA]

Ja klopt, puur statisch.

het is nu redelijk goed gelukt met een java scriptje:

code:

function changeSource()
{
document.getElementById("frame1").src="test1.html";
}

en in de body:

code:

<iframe frameborder="0" src="test.html" id="frame1">

(misschien zoekt iemand er nog es op)

[Verwijderd]

Wat is er mis met

HTML:

<a href="test1.html" target="frame1">Test 1</a>

Dan werkt het ook nog eens voor mensen zonder JavaScript (en zoekmachines).

[Reinier]

Let er wel op dat je geen XHTML-strict gebruikt, want daarin zijn iframes niet toegestaan

[ZanomiX]

Zijn frames niet wat oud?

Ja, zoals hierboven gezegd zijn de meest aangewezen oplossingen frames of iframes. Ondersteund jouw hostingprovider php?

Dan gebruik je best de volgende oplossing. Maar dit brengt ons naar het andere forum onderdeel . Ik geef het toch even mee

Upload dit in je standaard map en noem het bijvoorbeeld pageClass.php

PHP:

<?php
class clsPagina{

var $p;

    function getPagina(){
        if(isset($_GET['p'])){
            $this->p = htmlspecialchars($_GET['p']);
        }else{
            include 'home.php';
        }
        
        $this->p = $this->page.'.php';
        return $this;
    }
    
    function setPagina(){
        if(file_exists($this->p)){
            include ($this->p);
        }else{
            include '404.php';
        }
    }

}
?>

Zet dan dit bovenaan je xhtml code

PHP:

<?php include 'pageClass.php'; ?>

Dan zet je dit tussen je xhtml code waar de inhoud moet komen.

PHP:

<?php 
$pagina = new clsPagina;

$pagina->getPagina();
$pagina->setPagina();
?>

Als je dan je index.php gaat openen zal home.php automatisch geinclude worden. Voor de andere paginas maak je de url: bestandsnaam.php?p=paginanaam

Voorbeeld: voor je 'about' pagina zet je als link index.php?p=about .
zo hoef je about.php niet van opmaak te voorzien en kan hierin gewoon de tekst staan.

Succes

[ Voor 5% gewijzigd door ZanomiX op 02-10-2008 17:37 ]

[Bosmonster]

Dit soort wijze 'adviezen' aub niet opvolgen. Wederom zo lek als een mandje.

Wat ik in het andere topic ook al zei.. wat je vaak ziet bij beginnende webdevelopers is dat ze eigenlijk frames willen en dus maar op zulke rare systemen uitkomen met een soort van 'dynamische page includes'.

Beter is simpelweg je herhalende onderdelen in includes te stoppen, zodat je gewoon kan linken naar normale pagina's. Hiermee ben je ook veel flexibeler in je pagina opbouw.

[pietjepuk|IAA]

ik begrijp trouwens niet waarom die content in het frame zo klein blijft, halvewege de breedte ophoudt zeg maar

Bosmonster schreef op donderdag 02 oktober 2008 @ 17:41:
Dit soort wijze 'adviezen' aub niet opvolgen. Wederom zo lek als een mandje.

Wat ik in het andere topic ook al zei.. wat je vaak ziet bij beginnende webdevelopers is dat ze eigenlijk frames willen en dus maar op zulke rare systemen uitkomen met een soort van 'dynamische page includes'.

Beter is simpelweg je herhalende onderdelen in includes te stoppen, zodat je gewoon kan linken naar normale pagina's. Hiermee ben je ook veel flexibeler in je pagina opbouw.

hm kan je dit uitleggen?

lijkt veel code maar het stelt weinig voor...

ik heb wel alle plaatjes in de css staan dus (normaal in een los bestand uiteraard)

wat bedoel je precies met includes?

en wat is nu precies de normale manier om zon site te maken?
als het maar een beetje snel laad...

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changeSource(i)
{
document.getElementById("frame").src="content"+i+".html";
}
</script>
<link rel="stylesheet"type="text/css" href="style.css"/>
</head>


<style type="text/css">
<!--

body {
    background-color: #B2C9FF;
    text-align: center;
    margin: 0;
}
.wrapper {
background-color: #F4EDDF;
margin:0 auto;
width:800px;
text-align:left;
}
.header{
width:600px;
padding-left:200px;
padding-top:45px;
height:86px;
background:#1E1B16 url(images/header_02.gif) repeat-x top;
} 
.nav{
width:800px;
height:37px;
background:url(images/navbg_12.gif) repeat-x top;
} 
.nav ul {
margin:0;
font-size:11px;
font-weight:bold;
padding-left:50px;
padding-top:7px;
list-style:none;
}
.nav li {
float:left;
background:url(images/navleft_15.gif) no-repeat left top;
margin-right:10px;
padding:0 0 0 15px;
border-bottom:1px solid #ccc;
}
.nav a {
float:left;
display:block;
background:url(images/navright_16.gif) no-repeat right top;
padding-top:5px;
padding-right:20px;
padding-bottom:7px;
padding-left:6px;
text-decoration:none;
color:#FFFFFF;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
.nav a {float:none;}
/* End IE5-Mac hack */
.nav a:hover {
color:#FFF;
text-decoration:underline;
}
.clear{
clear:both;
}
.content{
width:800px;
background:url(images/undernav_22.gif) repeat-x top;
}
.leftcolumn{
float:left;
width:500px;
padding:20px;
}
.rightcolumn{
width:120px;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
float:right;
}
    .rightcolumn ul
    {
    list-style-type: none;
    padding-left:0;
    margin:0;
    text-align: left;
    width:100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    padding-top:5px;
    }
    .rightcolumn ul li{
    padding-top:6px;
    padding-bottom:6px;
    border-bottom:1px solid #E8D9BD;
    margin:0;
    }
    .rightcolumn ul li a
    {
    background:url(images/nullet_29.gif) left no-repeat;
    text-align: left;
    padding-left: 20px;
    font-size:11px;
    text-decoration: none;
    color: #4E4739;
    }

    .rightcolumn ul li a:hover
    {
    background:url(images/nullet_29.gif) left no-repeat;
    color: #4E4739;
    padding-left: 20px;
    text-decoration:underline;
    }
</style>

<body>
<div class="wrapper">
    <div class="header">
        <h1><a href="index.html">HEADERLOGO</a></h1>
    </div> 
    <div class="nav">
        <ul>
        <li><a onclick="changeSource(1)">Home</a></li>
        <li><a onclick="changeSource(2)">News</a></li>
        <li><a onclick="changeSource(3)">Products</a></li>
        <li><a onclick="changeSource(4)">Categories</a></li>
        <li><a onclick="changeSource(5)">Contact</a></li>
        </ul> 
        <div class="clear"></div>
    </div>
    
    <div class="content">
        <div class="leftcolumn">
                <iframe frameborder="0" src="content1.html" id="frame">
                </iframe>              
        </div>
        
        <div class="rightcolumn">
            <ul>
                <li><a onclick="changeSource(1)">Home</a></li>
                <li><a onclick="changeSource(2)">News</a></li>
                <li><a onclick="changeSource(3)">Products</a></li>
                <li><a onclick="changeSource(4)">Categories</a></li>
                <li><a onclick="changeSource(5)">Contact</a></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div> 
</div> 
</body>
</html>

[ Voor 4% gewijzigd door pietjepuk|IAA op 02-10-2008 18:52 ]

[Bosmonster]

Voor performance gaat geen enkele include oplossing helpen natuurlijk, maar dat maakt vandaag de dag ook niet meer uit. Alle externe bestanden worden gecachet en de html zelf meestal ge-gzipt. Die paar K die je vervolgens met een flinke pagina op moet halen is met de verbindingen vandaag de dag natuurlijk peanuts.

Includes gebruik je om het onderhoud voor jezelf makkelijker te houden, niet om de performance te verbeteren.

In jouw voorbeeld zou het dus al een heleboel schelen als je je CSS in een extern bestand zet, ipv in je html document, zodat dit gecachet kan worden. De iframe oplossing zou ik overboord gooien en gewoon losse pagina's hanteren. Dit is gebruiksvriendelijker en vinden zoekmachines ook leuker.

[ Voor 10% gewijzigd door Bosmonster op 03-10-2008 09:45 ]