Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

DIVjes en links

5 antwoorden
  • Hoi Allemaal, Ik ben al een poosje bezig met een website, maar nu lees ik heel vaak dat frames achterhaald zijn en het beter is om DIVs te gebruiken. via het sticky dat Drewster geschreven heeft ben ik op de site [url]http://www.sceneone.nl/[/url] gekomen en daar staat een hoop info. maar toch mis ik nog wat. met frames kan je heel makkelijk het scherm opdelen in 3 rijen. de middelste maak ik 48px hoog (voor het menu) en de andere 2 nemen boven en onder de overgebleven ruimte in beslag. dat ziet er dan zo uit [code:1:1b6c0e68e9]<FRAMESET rows="*,48,*" framespacing=0 frameborder="no">[/code:1:1b6c0e68e9] vanuit het menu in het midden kun je dan boven en onder laten verversen. De indeling krijg ik bijna goed. Ik kan de middelste div een hoogte maken van 48px alleen weet ik niet hoe ik de rest van de overgebleven hoogte van de pagina netjes over boven en onder verdeel. maar hoe kan ik bestanden laden in die DIVs? Vanuit het menu in de middelste div wil ik bijvoorbeeld de contact gegevens (die staan in een appart html-bestand) in de onderse div laden. dat staat niet uitgelegd op die site en ik kan het ook nergens anders vinden. dit is wat ik tot nu toe heb: [code:1:1b6c0e68e9] <html> <head> <title>Architectenburea</title> <style type="text/css"> body { margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; color: #000000; font-family: Arial; font-size: 12pt; background-color: #ffffff;} a {text-decoration: none;} A:hover {color: #000000; background-color: #C0C0C0;} A:link {color: #808080;} A:visited {color: #808080;} A:active {color: #808080;} #Boven { margin-left: 0px; margin-top: 0px; width: 100%; height: auto; border: 1px solid #FF6600; text-align: center; background-color: #333333;} #Midden { margin-left: 0px; width: 100%; height: auto; border: 1px solid #FF6600; text-align: left; background-color: #666666;} #Onder { margin-left: 0px; width: 100%; height: auto; border: 1px solid #FF6600; text-align: left; background-color: #999999; overflow: auto;} #title { display: inline; margin-left: 0px; width: 100%; height: 50px; border: 1px solid #FF0000; text-align: left;} #menu { display: inline; margin-left: 0px; width: 100%; height: 50px; border: 1px solid #FF0000; text-align: left;} ol { display: inline; list-style: none; padding: 0px 0 0 0;} li { width: 100px; margin: 0 10px 0 0; background-color: #E0B51F} h1 { font-size: 24px; font-weight: bold;} </style> </head> <body> <div id="Boven">Boven</div> <div id="Midden"> <div id="title"> <h1>Architectenburea</h1> </div> <div id="menu"> <ol> <li><a href="Onder.html" target="Onder" onClick="parent.Boven.location.href='Boven.html';">HOME</a></li> <li><a href="Prijzen.html" target="Onder" onClick="parent.Boven.location.href='Boven.html';">PRIJZEN</a></li> </ol> <ol> <li><a href="Bureau.html" target="Onder" onClick="parent.Boven.location.href='Boven.html';">BUREAU</a></li> <li><a href="Projecten.html" target="Onder" onClick="parent.Boven.location.href='Boven.html';">PROJECTEN</a></li> </ol> <ol> <li><a href="Biografie.html" target="Onder" onClick="parent.Boven.location.href='Boven.html';">BIOGRAFIE</a></li> <li><a href="Contact.html" target="Onder" onClick="parent.Boven.location.href='Boven.html';">CONTACT</a></li> </ol> </div> </div> <div id="Onder">Onder</div> </body> </html> [/code:1:1b6c0e68e9] alle kleurtjes en randen zijn alleen maar om te kunnen zien wat er gebeurt als ik iets aanpas. dat soort opmaak wordt pas aangepast als alles werkt zoals het moet. Ik hoop dat iemand me verder kan helpen. mvg PepijnG
  • Het punt is nu juist dat die hele benadering met de nodige gebreken komt. Het is dus ook zeker niet de bedoeling dat je hetzelfde gedrag gaat imiteren met divs. Er zijn twee dingen die je kunt doen. Keuze één: als je per sé frames wil gebruiken moet je dat gewoon doen. Weet dat je werkt met een verouderde techniek en dat deze de nodige nadelen kent, maar om frames als geheel volledig uit de overweging weg te laten is niet nodig. De belangrijkste vraag is eigenlijk: wat is je doelgroep? Voor een familiesite volstaan frames prima en het is lekker makkelijk. Wil een een breder publiek trekken, dan doen frames (of een imitatie ervan) erg amateuristisch aan. Keuze twee: je kiest bewust voor het afzweren van frames. In dit geval moet je ook het hele idee erachter laten varen. Met moderne en minder moderne technieken is het allang mogelijk om sites te maken die net zo snel of sneller laden dan sites gebouwd met frames. Ook het gemak van onderhoud is geen (zwaarwegend) argument meer, met simpele Server Side Includes (SSI) of enkele regels PHP/ASP.net hoef je ook niet langer de herhalende onderdelen van een site te kopiëren en plakken. Mocht je toevallig voor een Content Management System (CMS) kiezen, dan zijn frames al helemaal onzin, dan wordt de vaste opmaak volledig door het CMS uit handen genomen en hoef je alleen maar één keer een paar templates te maken. De uiteindelijk vraag is dan ook: wat is je doelgroep en kies je voor frames of niet? Maar ga niet frames imiteren met divs, dat is een beetje onzinnig. - Bas
  • Mijn vader is architect en wil een site om zijn projecten te laten zien en om zijn contact gegevens te verspreiden. dus de doelgroep zal voornamelijk uit andere architecten bestaan. je hebt gelijk als je zegt dat ik probeer frames te immiteren, maar de indeling moet wel zo worden. met frames kan ik dit zonder problemen, maar de zoekmachines moeten de site ook kunnen oppikken. het afdrukken van pagina's schijnt ook lastig te zijn met een frames-site. en voor deze doelgroep moet het afdrukken natuurlijk wel zonder problemen verlopen. ik heb er dus over nagedacht en besloot toen om te proberen DIVs te gebruiken. wat is het advies van de forumgebruikers hierover?
  • Dan "moet" je werken met includes of een CMS, zoals Bas al zei. Het laatste doe je blijkbaar niet, dus dan zijn includes het logische alternatief. Includes zijn relatief simpel: je maakt een complete basispagina, welke je vervolgens in stukjes hakt (dus de header, het menu, de footer, dat soort dingen). Dit moet je vrij letterlijk nemen. Zet het stuk wat de header wordt en op iedere pagina exact zo terug moet komen in een apart bestand, noem dat bijvoorbeeld header.html. Dito met de footer en het menu. Vervolgens maak je een inhoudspagina. Die komt er dan bijvoorbeeld zo uit te zien, als je gebruik maakt van PHP includes: [code:1:8f63c3fa81] <?php include('header.html'); include('menu.html'); ?> **paginaspecifieke inhoud** <?php include('footer.html'); ?>[/code:1:8f63c3fa81] Dit sla je vervolgens op als pagina.[b:8f63c3fa81]php[/b:8f63c3fa81]. Wat ik hierboven als paginaspecifieke inhoud heb genoemd, is dus alleen het stukje wat de pagina onderscheid van andere pagina's. Als je de complete <head> sectie al include via header.html, kun je dat achterwege laten in pagina.php. Heb je de <body>-tag al opgenomen in header.html of menu.html, mag je die niet nogmaals noemen in pagina.php. Zelfde verhaal natuurlijk met afsluitende tags. Bovenstaande is natuurlijk een vrij simpele weergave, en ook zo'n beetje de meest simpele toepassing van PHP. Je kunt er nog veel meer mee natuurlijk, maar dan gaan we denk ik veel dieper dan waar je (nu) behoefte aan hebt. Succes!
  • In de post van BasHamar las ik ook al iets over CMS. Ik heb geen idee wat dat is en wat dat doet. PHP heb ik nog nooit mee gewerkt, maar een week geleden had ik ook nog nooit met CSS gewerkt, dus dat moet ik wel kunnen leren. als ik de uitleg goed begrijp bedoel je dit: - het bestand pagina.php vervangt het bestand index.html en bevat de code uit de vorige reactie (een voor mij aangepaste versie natuurlijk). - die code werkt ongeveer hetzelfde als de frameset. - ik kan nog steeds het menu in een appart html-bestand hebben en die op een vaste plaats invoegen in pagina.php. - om de nieuwe code te kunnen maken zal ik eerst moeten leren hoe php werkt. wat je zegt over de head sectie en body tag, begrijp ik niet. kun je dat nog verder uitleggen?

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.