div menu aanpak - Softwareontwikkeling

donderdag 28 september 2006 23:06

Acties:

Verwijderd

Topicstarter

Ik ben begonnen met een heel simpel conceptje dat je hieronder kunt bewonder.:shock: Hierbij wil ik gebruik maken van een menu. De htm heeft de beschikking over een mainpage waar ik de tekst wil laten zien. Nu wil ik dat op het moment van bv het klikken op contact dat ipv mainpage de info van de div contact komt te staan. Hoe zorg ik dat ik van div wissel en doe ik dit zo goed?

HTML:

<html>

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

  <head>
    <title>Try Me</title>
  </head>

  <body>
    <div id="sideMenu">
    <center><a href="">mainpage</a></center>
    <center><a href="">contact</a></center>
    <center><a href="">dono</a></center>
    </div>

    <div id="topBar">
    Logo
    </div>

    <div id="mainpage">
    </div>

    <div id="contact">
    </div>

    <div id="dono">
    </div>
  </body>
</html>

Cascading Stylesheet:

#topBar
{
  background-color: #B8C4A9;
  text-align: center;
  position: absolute;
  top: -190;
  height: 180px;
  width: 800px;
  left: 0px;
}

#sideMenu
{
  background-color: #707867;
  position: absolute;
  top: 200px;
  height: 100px;
  width: 200px;
  left: 10px;
}

#mainpage
{
  background-color: #A9C4AC;
  position: absolute;
  top: 190px;
  height: 600px;
  width: 590px;
  left: 210px;
}

donderdag 28 september 2006 23:10

Acties:

Verwijderd

PHP gebruiken

PHP:

<html>

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

  <head>
    <title>Try Me</title>
  </head>

  <body>
    <div id="sideMenu">
    <center><a href="index.php?url=mainpage">mainpage</a></center>
    <center><a href="index.php?url=contact">contact</a></center>
    <center><a href="index.php?url=dono">dono</a></center>
   </div>

    <div id="topBar">
    <center>Logo</center>
   </div>    

    <div id="content">
    <? include($_GET['url'] .'.html'); ?>
    </div>

  </body>
</html>

[ Voor 31% gewijzigd door Verwijderd op 28-09-2006 23:15 ]

donderdag 28 september 2006 23:14

Acties:

Reinier

\o/

HTML:

1	<center>bwoeeaaap</center>

Dat kan dus echt niet meer in 2006 heh

[ Voor 6% gewijzigd door Reinier op 28-09-2006 23:14 ]

donderdag 28 september 2006 23:15

Acties:

Pkunk

niks

typo

[ Voor 85% gewijzigd door Pkunk op 28-09-2006 23:15 ]

Hallo met Tim

donderdag 28 september 2006 23:22

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op donderdag 28 september 2006 @ 23:10:
PHP gebruiken

PHP:

<html>

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

  <head>
    <title>Try Me</title>
  </head>

  <body>
    <div id="sideMenu">
    <center><a href="index.php?url=mainpage">mainpage</a></center>
    <center><a href="index.php?url=contact">contact</a></center>
    <center><a href="index.php?url=dono">dono</a></center>
   </div>

    <div id="topBar">
    <center>Logo</center>
   </div>    

    <div id="content">
    <? include($_GET['url'] .'.html'); ?>
    </div>

  </body>
</html>

Okay, ik wou me eerst storten op het gebied van HTML/CSS maar dan moet ik dus direct maar beginnen met php.

donderdag 28 september 2006 23:26

Acties:

Verwijderd

Nouja, je kunt het ook met iets als een iframe proberen, maar zo moeilijk is php nou ook weer niet

Sla die code die ik je gegeven heb als index.php op (op een server met php) en maak nieuwe bestanden met mainpage.html, contact.html, dono.html etc voor de inhoud van je content div

edit
ohja, ook nog even

PHP:

1	<? if (!isset($_GET['url'])) $_GET['url'] = 'mainpage'; ?>

Helemaal vooraan je bestand zetten

[ Voor 20% gewijzigd door Verwijderd op 28-09-2006 23:28 ]

donderdag 28 september 2006 23:29

Acties:

Matthiasje

Ik mis de technische kennis ervoor, maar ik heb het idee dat het prima met HTML en CSS te doen moet zijn. Je kunt meerdere DIV's namelijk over elkaar leggen (layers) en enkel de actuele DIV vertonen.

Vraag me niet naar de technische details, maar ik zou even geduld hebben tot er iemand langskomt die het je wel kan vertellen.

donderdag 28 september 2006 23:32

Acties:

Verwijderd

Verwijderd schreef op donderdag 28 september 2006 @ 23:26:
Nouja, je kunt het ook met iets als een iframe proberen, maar zo moeilijk is php nou ook weer niet

Sla die code die ik je gegeven heb als index.php op (op een server met php) en maak nieuwe bestanden met mainpage.html, contact.html, dono.html etc voor de inhoud van je content div

edit
ohja, ook nog even
PHP:
1
<? if (!isset($_GET['url'])) $_GET['url'] = 'mainpage'; ?>
Helemaal vooraan je bestand zetten

Warning: main(.html): failed to open stream: No such file or directory in /var/www/index.php on line 21

Warning: main(): Failed opening '.html' for inclusion (include_path='.:/usr/share/php:/usr/share/pear') in /var/www/index.php on line 21

Ik heb het ook ff getest, dus hij wil door deze regel: <? include($_GET['url'] .'.html'); ?>
ook main.html laden

[ Voor 5% gewijzigd door Verwijderd op 28-09-2006 23:33 ]

donderdag 28 september 2006 23:32

Acties:

Verwijderd

Matthiasje schreef op donderdag 28 september 2006 @ 23:29:
Ik mis de technische kennis ervoor, maar ik heb het idee dat het prima met HTML en CSS te doen moet zijn. Je kunt meerdere DIV's namelijk over elkaar leggen (layers) en enkel de actuele DIV vertonen.

Vraag me niet naar de technische details, maar ik zou even geduld hebben tot er iemand langskomt die het je wel kan vertellen.

Nope, kan niet. Hoe vertel je dan aan je 'html' welke div 'actief' moet zijn?
Het zou misschien wel met wat javascript kunnen maar ...

Als je het echt niet met php wilt doen is een IFrame de beste oplossing

@boven: Zie mijn edit, als er geen url is geset moet hij de mainpage.html pakken

[ Voor 6% gewijzigd door Verwijderd op 28-09-2006 23:33 ]

donderdag 28 september 2006 23:34

Acties:

Verwijderd

Was vergeten ge-edit bestandje te uploaden

sorry

dat PHP werkt goed btw

offtopic:
Matthiasje ik heet ook matthias

[ Voor 48% gewijzigd door Verwijderd op 28-09-2006 23:36 ]

donderdag 28 september 2006 23:45

Acties:

Verwijderd

Vervang dat eerste stukje code maar door:

PHP:

<? 
if (isset($_GET['url']))
  $_GET['url'] = stripslashes($_GET['url']);
else
  $_GET['url'] = 'mainpage';
?>

Maakt het wat veiliger

donderdag 28 september 2006 23:54

Acties:

Verwijderd

Topicstarter

Okay ik heb een

moment. Ik ben net een beetje HTML en CSS onder de knie (css is bagger) maar zoals matthiasje zei, moet het toch ook in HTML willen, niet dat ik php niet wil leren maar dan leer ik eerst goed verkeerd met html bezig te zijn:P.

[ Voor 3% gewijzigd door Verwijderd op 28-09-2006 23:55 ]

donderdag 28 september 2006 23:58

Acties:

Verwijderd

okay, met een iframe

HTML:

<html>

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

  <head>
    <title>Try Me</title>
  </head>

  <body>
    <div id="sideMenu">
    <center><a href="mainpage.html" target="content">mainpage</a></center>
    <center><a href="contact.html" target="content">contact</a></center>
    <center><a href="dono.html" target="content">dono</a></center>

    <div id="topBar">
    <center>Logo</center>
    
    <div id="content">
      <iframe name="content" src="mainpage.html" height="400" width="200" frameborder="0">
    </div>

    <div id="dono">
    </div>
  </body>
</html>

Maar van frames word ik persoonlijk niet zo vrolijk
Ik zou ook nog een stukje javascript voor je kunnen schrijven maar daar word ik nog minder vrolijk van

En je bent vergeten je sidemenu en topbar divs af te sluiten

[ Voor 3% gewijzigd door Verwijderd op 28-09-2006 23:59 ]

vrijdag 29 september 2006 00:01

Acties:

samo

yo/wassup

Volgens mij zou je ook zonder php en zonder iframes met objects aan de slag kunnen.Hiermee kan je de content van een extern bestand binnen een html bestand plaatsen. Via wat simpel java-script zou je dan de source van het te embedden object kunnen bepalen.
Alleen heb ik er zelf nog niet echt mee gespeeld, en weet ik dus niet of het goed werkt,

Bekend van cmns.nl | ArneCoomans.nl | Het kindertehuis van mijn pa in Ghana

vrijdag 29 september 2006 00:02

Acties:

ID-College

Dit probleem had ik ook.
Echter toen heb ik maar als oplossing gedaan om de data in een mysql database gezet.
Deze heb ik gewoon opgehaald met php

PHP:

1	$_GET['menu_id']

Ik gebruikte id's en dat werk gewoon perfect. Je hebt dan gewoon index.php?menu_id=$id
Waar $id wordt gedefinieerd in een for lus

[ Voor 9% gewijzigd door ID-College op 29-09-2006 00:04 ]

vrijdag 29 september 2006 00:12

Acties:

Verwijderd

Mijn PDA ondersteund bijvoorbeeld niet (goed) javascript en frames. Daarom vind ik het wel fijn dat een site zoals tweakers.net gewoon goed werkt omdat die gewoon goed geprogrammeerd is.

Liever een oplossing die iets meer werk is en waarvan je gelijk leert hoe het in vervolg wel moet dan een halve oplossing die afhankelijk is van wat voor browser je gebruikt voor de javascript ondersteuning

Dus als het even kan gebruik je gewoon php dan is je site afhankelijk van de server en niet van de client

Maar dan krijgen we die discussie weer...

En je kunt inderdaad ook met een database gaan werken maar dan kun je beter gelijk een CMS installeren (of zelf bouwen

)

vrijdag 29 september 2006 00:17

Acties:

Verwijderd

Topicstarter

Mja, iFrames kan inderdaad valt me idee van design dan weer weg. Doe ook niet moeilijk ofzo. Maar zou het niet kunnen dat je intern linkt tussen div ID.

En je kunt inderdaad ook met een database gaan werken maar dan kun je beter gelijk een CMS installeren (of zelf bouwen )

Daar wil ik uiteindelijk naar toe. Alleen wil ik ook alles volledig beheersen.

[ Voor 122% gewijzigd door Verwijderd op 29-09-2006 00:21 ]

vrijdag 29 september 2006 00:21

Acties:

Boelie-Boelie

Als Starter12 in de eerste post niet [code] gebruikt, maar [code=html] en [code=css], dan zul je zien dat er op de huidige manier nogal wat schort aan de code.

Aanvullend op Reinier gebruik je tegenwoordig geen <center> meer, maar centreer je zaken door CSS te gebruiken {text-align: center}. Een menu is een lijst met links, dus daar kun je een (un)ordered list voor gebruiken (<ul> of <ol>). Lees bijv. Lijsten of het Listutorial.

Verder.. Als je via het aanklikken van een link een verandering in je pagina teweeg wilt brengen zonder PHP oid, dan kan dat niet met CSS, wel met javascript. Met CSS kun je wel gebruik maken van :hover om iets te laten zien zolang je over de link hovert, maar zodra je de link verlaat, is het weer weg. Helaas, het is niet anders.

(I)frames zou ik niet doen.

En vergeet je doctype niet.

[ Voor 4% gewijzigd door Boelie-Boelie op 29-09-2006 00:30 ]

Cogito ergo dubito

vrijdag 29 september 2006 00:22

Acties:

Verwijderd

Verwijderd schreef op vrijdag 29 september 2006 @ 00:17:
Mja, iFrames kan inderdaad valt me idee van design dan weer weg. Doe ook niet moeilijk ofzo. Maar zou het niet kunnen dat je intern linkt tussen div ID.

Jawel, met javascript

krijg je iets als

<a href="javascript: changediv('contact');">Contact</a>

Met

JavaScript:

<script language="javascript">
function changediv(name) {
 // hier je functie die al je div's op hidden zet en alleen de juiste actief maakt
}
</script>

Maar dat mag je zelf uitwerken

vrijdag 29 september 2006 00:26

Acties:

Verwijderd

Topicstarter

Okay, maar even tot conlusie met HTML en CSS is het niet mogelijk.

vrijdag 29 september 2006 00:34

Acties:

Verwijderd

Verwijderd schreef op vrijdag 29 september 2006 @ 00:26:
Okay, maar even tot conlusie met HTML en CSS is het niet mogelijk.

Jawel, met een IFrame

En die javascript oplossing is nog smeriger dan een frame, want het grootste nadeel van frames gebruiken (niet kunnen bookmarken) heeft de javascript 'oplossing' ook. Kun je nog beter frames gebruiken, die zijn zelfs voor dit soort dingen bedacht

En hoezo zou een iframe je lay-out verpesten? Je kunt de iframe ook weer een opmaak geven zodat de randen etc wegvallen en een achtergrondkleurtje geven (net zoals een div)

IMHO:
- Oplossing 1: PHP
- Wil je niet voor php, dan een iframe gebruiken

edit: @ Reinier
Tegen dat soort dingen heb ik mezelf ingedekt

krijg je iets als

[ Voor 7% gewijzigd door Verwijderd op 29-09-2006 00:40 ]

vrijdag 29 september 2006 00:35

Acties:

Reinier

\o/

Verwijderd schreef op vrijdag 29 september 2006 @ 00:22:
[...]

Jawel, met javascript

krijg je iets als

<a href="javascript: changediv('contact');">Contact</a>

Maar dan liever met een onclick

Met

JavaScript:

<script language="javascript">
function changediv(name) {
 // hier je functie die al je div's op hidden zet en alleen de juiste actief maakt
}
</script>

En je bedoelt:

HTML:

1	<script type="text/javascript">

vrijdag 29 september 2006 00:37

Acties:

Verwijderd

Topicstarter

Ik ga in de ochtend aan de slag met lijsten kijken of ik daar verder mee kom. Super bedankt voor jullie support zover.

vrijdag 29 september 2006 10:29

Acties:

Pkunk

Kijk meteen even naar de case contstructie in php. Werkt ook wel simpel en makkelijk.

PHP:

$pagina = $_GET['pagina'];
<div id="waarjehetinwilhebben">
switch($pagina)
{
case 'websites': include ('websites.html');
break;
case 'pagina2': include ('pagina2.html');
break;                                              
//als er niets is opgegeven gebruik je de hoofdpagina
default:
include('main.html');
}
</div>

waarin je linkje er dan zo uit komt te zien

code:

1	<a href="main.php?pagina=pagina2">Pagina 2</a>

Hallo met Tim