Help!

PC-Problemen?
De vrijwilligers van Oplossing.be zoeken gratis met u mee!

Hulp bij posten

Recente topics

Auteur Topic: webdesign met css en basic php-pagina’s  (gelezen 2502 keer)

0 leden en 1 gast bekijken dit topic.

Offline BlackDevil

  • Ervaren lid
  • ***
  • Berichten: 317
  • Geslacht: Vrouw
  • Oplossing.be
webdesign met css en basic php-pagina’s
« Gepost op: 02 juni 2021, 10:41:53 »
Beste helpers,

Ik wist niet goed onder welk subforum ik mijn vraag moest plaatsen dus zet ik het gewoon hier.

Zo’n 22 jaar geleden maakte ik mijn eerste website in zuivere html.
Zo’n 15 jaar geleden besloot ik me toe te leggen op css en mijn websites op te bouwen in basic php-pagina’s met de gekende structuur om via php-include de header, het menu, de content en de footer toe te voegen.
Wegens allerlei omstandigheden heb ik een aantal jaren niets meer gedaan aan mijn websites maar nu wens ik één van hen een opfrisbeurt te geven.

De globale structuur van mijn site binnen de “body”-tags is :
<div id="wrapper">
    <div id="header">
    <?php include('header.php'); ?>
    </div><!-- closetag header -->
  <div id="content">
<div id="nav">
            <?php include('menu.php'); ?>
            </div><!-- closetag menu -->
           
            <?php include('home.php'); ?><!-- pagina afhankelijk van gekozen menu-link -->
           
        </div><!-- closetag content -->
</div><!-- closetag wrapper -->
<div id="footer">
<?php include('footer.php'); ?>   
</div><!-- closetag footer -->

Nu zou ik dus graag binnen de content (onder het menu) na het klikken van één specifieke menu-link een weergave willen krijgen met 2 delen, links een lijst met namen (hyperlinks) en rechts de tekst waarin anchors geplaatst staan waarnaar dan die hyperlinks (namen) verwijzen.
Maw enkel dat rechtse deel mag wijzigen bij het aanklikken van één der namen in het links gedeelte van die pagina. De rest van de website-structuur moet ongewijzigd blijven tenzij er in het hoofdmenu een andere menu-link word aangeklikt.
 
Ten tijde van mijn zuivere html website maakte ik gebruik van de gekende framesets om bijkomende navigatie binnen een bepaalde pagina toe te passen.

Maar met mijn huidige structuur heb ik totaal geen idee hoe ik ervoor moet zorgen dat dus bij het aanklikken van de namen in het linkse deel, enkel het rechtse deel wijzigt. Als dit dan al mogelijk zou zijn.

Iemand een idee hoe ik dit klaargespeeld kan krijgen?

Alvast mijn oprechte dank.

groetjes,
BlackDevil
« Laatst bewerkt op: 03 juni 2021, 17:30:24 door BlackDevil »
Windows 10 Home v. 20H2 / Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz 2.40GHz / RAM : 8,00 GB (7,89 GB beschikbaar) / 64-bits besturingssysteem, x64-processor / Intel(R) 7 Series Chipset Family SATA AHCIController / Qualcomm Atheros AR8161 PCI-E Gigabit Ethernet Controller (NDIS 6.30) / Qualcomm Atheros AR9485 Wireless Network Adapter / HGST HTS541010A9E680 / Seagate Backup+ Hub 6TB / Seagate BUP Slim 2TB / Seagate Expansion Desk 5TB / HP OfficeJet 3831
Bullguard Premium Protection

Offline Firebirdy

  • Ambassadeur
  • *****
  • Berichten: 2.406
  • Geslacht: Man
Re: webdesign met css en basic php-pagina’s
« Reactie #1 Gepost op: 03 juni 2021, 09:17:39 »
Hoi BlackDevil,

Bij een klik op een link op het linkergedeelte wil je dat er een bepaalde anchor op het rechtergedeelte zichtbaar wordt zonder dat er een pagina herladen wordt. Hiervoor denk ik aan javascript - tenzij de hoeveelheid data zodanig groot zou zijn dat het niet praktisch is om alles in één keer in te laden.

De jQuery library is zowat de meest populaire library om met javascript om te gaan omdat het browserverschillen wegwerkt. Het is wat ik hier zou gebruiken maar als dit volledig nieuw voor je is komt er wat uitleg bij kijken.

Kan ik je website (of de nieuwe versie ervan?) ergens bekijken zodat ik hier kan omschrijven hoe ik die zou aanpassen? Als je je site liever niet adverteert mag je me de link ook via persoonlijk bericht sturen.

Mvg
Firebirdy

Offline BlackDevil

  • Ervaren lid
  • ***
  • Berichten: 317
  • Geslacht: Vrouw
  • Oplossing.be
Re: webdesign met css en basic php-pagina’s
« Reactie #2 Gepost op: 03 juni 2021, 09:58:35 »
Hey Firebirdy,

Hartelijk dank voor je reactie.
Echte php-code ken ik eigenlijk niet, het enige wat ik ken is de php-include.
Ook van jQuery en Javascript ken ik absoluut niets.
Verder dan html, css en php-include reikt mijn kennis spijtig genoeg niet.

De website betreft een genealogische website (in zeer simpele structuur en opmaak) en op de huidig gepubliceerde site staat nog maar weinig op.
De nieuwe pagina die ik wens toe te voegen is eigenlijk het volledige parenteel (volledige gezinsoverzichten) van mijn genealogie (stamboomonderzoek).
Links zou dus de alfabetische lijst komen met alle namen van de personen behorende tot die genealogie en rechts komt dan het parenteel waarbij elk gezin zijn eigen anchor (bookmark) heeft. Op het parenteel zelf kan dan ook doorgelinkt worden naar andere posities op die pagina. Omdat de genealogie zelf uit letterlijk duizenden personen bestaat worden beide pagina's echt wel héél lang, vandaar dat ik dus de anchors wens te gebruiken. Die nieuwe pagina staat wel nog niet online (ben ze nog aan het aanvullen).
Ik was er wel reeds in geslaagd om de pagina in twee delen op te maken en het rechtse deel te laten reageren volgens de aangeklikte link uit het linkse deel maar elke keer ik dit deed verdween mijn hoofdmenu (horizontaal) van mijn pagina. Ik heb dan de menu-blok tijdelijk tussen de header en de content geplaatst maar hierdoor is een deel van de opmaak (borders) verdwenen die ik tot nu toe niet goed krijg, dit moet dus zeker anders gestructureerd worden. In de oorspronkelijke structuur staat de menu-blok binnen de content-blok waarbij de opmaak dus wel goed was.



groetjes,
BlackDevil
« Laatst bewerkt op: 03 juni 2021, 17:36:26 door BlackDevil »
Windows 10 Home v. 20H2 / Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz 2.40GHz / RAM : 8,00 GB (7,89 GB beschikbaar) / 64-bits besturingssysteem, x64-processor / Intel(R) 7 Series Chipset Family SATA AHCIController / Qualcomm Atheros AR8161 PCI-E Gigabit Ethernet Controller (NDIS 6.30) / Qualcomm Atheros AR9485 Wireless Network Adapter / HGST HTS541010A9E680 / Seagate Backup+ Hub 6TB / Seagate BUP Slim 2TB / Seagate Expansion Desk 5TB / HP OfficeJet 3831
Bullguard Premium Protection

Offline Firebirdy

  • Ambassadeur
  • *****
  • Berichten: 2.406
  • Geslacht: Man
Re: webdesign met css en basic php-pagina’s
« Reactie #3 Gepost op: 03 juni 2021, 11:04:31 »
Hoi BlackDevil,

Dankjewel voor de info & link!

Waar ik nog aan denk - ik ging er misschien verkeerdelijk van uit dat je dit al geprobeerd had: je raakt er dus niet als je je linker & rechtergedeelte als volgt opmaakt?

Links:
<a href="#naam123">Naam 123</a>
Rechts:
<a id="naam123"/><h2>Naam 123</h2><p>Lorem ipsum dolor...</p>
Een link met '#testje' in gaat immers de pagina doen scrollen naar de overeenkomstige anchor met id 'testje'.

Mocht dit niet werken: ik had gehoopt een kijkje te kunnen nemen op de pagina die in ontwikkeling is :). Zou je overwegen om de code voor Genealogie die je al had (je zei dat het gedeeltelijk werkte) een tijdje live te plaatsen, of zet je dat liever niet publiek?

Mvg
Firebirdy

Offline BlackDevil

  • Ervaren lid
  • ***
  • Berichten: 317
  • Geslacht: Vrouw
  • Oplossing.be
Re: webdesign met css en basic php-pagina’s
« Reactie #4 Gepost op: 03 juni 2021, 11:22:58 »
Hey Firebirdy,

Hartelijk dank voor je respons.

De twee 'codes' die je opgeeft is ook hoe ik het heb aangemaakt en dat op zich werkt dus wel maar als ik dit toepas in de structuur zoals aangegeven in mijn codeblok in mijn vraag-bericht dan verdwijnt mijn horizontaal menu volledig als het rechts gedeelte scrollt en moet ik de oorspronkelijke pagina opnieuw laden om mijn menu terug te krijgen.

Als ik mijn horizontaal menu buiten de 'content'-blok plaats tussen de header en de content dan is dat probleem ook wel opgelost maar dan krijg ik de opmaak (borders) niet meer zoals deze oorspronkelijk zijn opgemaakt.

Ik zal de betreffende pagina en bijhorende stylesheets even wat opkuisen en dan zal ik zien hoe en waar ik het eventjes 'online' kan plaatsen. Zodra het online staat zal ik het hier melden.

groetjes,
BlackDevil

*update*
Heb de pagina even online gezet achter de menu-link "genealogie".
« Laatst bewerkt op: 03 juni 2021, 11:37:59 door BlackDevil »
Windows 10 Home v. 20H2 / Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz 2.40GHz / RAM : 8,00 GB (7,89 GB beschikbaar) / 64-bits besturingssysteem, x64-processor / Intel(R) 7 Series Chipset Family SATA AHCIController / Qualcomm Atheros AR8161 PCI-E Gigabit Ethernet Controller (NDIS 6.30) / Qualcomm Atheros AR9485 Wireless Network Adapter / HGST HTS541010A9E680 / Seagate Backup+ Hub 6TB / Seagate BUP Slim 2TB / Seagate Expansion Desk 5TB / HP OfficeJet 3831
Bullguard Premium Protection

Offline Firebirdy

  • Ambassadeur
  • *****
  • Berichten: 2.406
  • Geslacht: Man
Re: webdesign met css en basic php-pagina’s
« Reactie #5 Gepost op: 03 juni 2021, 12:47:09 »
Hoi BlackDevil,

Citaat
Als ik mijn horizontaal menu buiten de 'content'-blok plaats tussen de header en de content dan is dat probleem ook wel opgelost maar dan krijg ik de opmaak (borders) niet meer zoals deze oorspronkelijk zijn opgemaakt.
Ik zie de div#nav buiten de content staan, mag ik ervan uit gaan dat het de opmaak is waar je nu nog mee zit? Ik zie verder geen grote problemen ;). Zoja, kan je het probleem met de borders even schetsen aub?

Offline BlackDevil

  • Ervaren lid
  • ***
  • Berichten: 317
  • Geslacht: Vrouw
  • Oplossing.be
Re: webdesign met css en basic php-pagina’s
« Reactie #6 Gepost op: 03 juni 2021, 17:30:14 »
Hey Firebirdy,

Er zat zeer opvallend verschil in de algemene layout van de site als je de nieuwe pagina vergeleek met de reeds bestaande pagina's (zowel de borders als de afmetingen) en ik wou toch voor de volledige site bij elke pagina dezelfde opmaak.

Omdat voor die nieuwe pagina bleek dat het horizontaal menu buiten de content-blok moest geplaatst worden maar bij de rest van de pagina's deze binnen de content-blok geplaatst was heb ik maar ineens de standaard-structuur voor de volledige site aangepast en ben ik met de stylesheets volledig van nul terug beginnen opbouwen.
Het heeft me de ganse namiddag gekost maar het is me gelukt en nu zijn ineens de volledige code en alle pagina's ook grondig opgeschoond. Ook zijn nu alle overbodige bestanden op de server weg.

Nogmaals mijn oprechte dank voor het meedenken.

groetjes,
BlackDevil
Windows 10 Home v. 20H2 / Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz 2.40GHz / RAM : 8,00 GB (7,89 GB beschikbaar) / 64-bits besturingssysteem, x64-processor / Intel(R) 7 Series Chipset Family SATA AHCIController / Qualcomm Atheros AR8161 PCI-E Gigabit Ethernet Controller (NDIS 6.30) / Qualcomm Atheros AR9485 Wireless Network Adapter / HGST HTS541010A9E680 / Seagate Backup+ Hub 6TB / Seagate BUP Slim 2TB / Seagate Expansion Desk 5TB / HP OfficeJet 3831
Bullguard Premium Protection

Offline Firebirdy

  • Ambassadeur
  • *****
  • Berichten: 2.406
  • Geslacht: Man
Re: webdesign met css en basic php-pagina’s
« Reactie #7 Gepost op: 03 juni 2021, 19:00:21 »
Hoi BlackDevil,

Blij dat het gelukt is! Sorry dat ik niet meer hulp kon bieden, het blijft moeilijk om vanop afstand in iemand's visie te duiken, dat vergt wel enig heen-en-weer. Misschien was het toch een soort motivatieboost, haha ;)

Veel succes met de site!


 


www.combell.com