dynamische links

Status
Niet open voor verdere reacties.

gast0510

Gebruiker
Lid geworden
8 mei 2015
Berichten
289
Als je een vaststaande header hebt met links daarin en je klikt op een link kan die pagina dan geladen worden onder dat vaste menu/header?
Zodat je 3 delen krijgt, 1 header die nooit veranderd en niet scrollbaar is, 1 footer die nooit veranderd maar die wel scrollbaar is, 1 content in het midden die dus scrolbaar is maar ook steeds vervangbaar is met een klik op 1 van de links in header.
 
Je omschrijft het principe van een normale website:
De website bezoeker gaat via een linkje naar een andere pagina die dezelfde header, menu en footer heeft. De content op die pagina is anders.
Wat is de reden dat je dit op een andere manier wilt doen?

Of wil je een website met een html frameset ombouwen?
 
Je omschrijft het principe van een normale website:
Of wil je een website met een html frameset ombouwen?
Begin nou niet met deze antieke meuk :p

Een iframe zou nog kunnen, maar ik raad het niet aan.
Ikzelf raad aan om include() in PHP te gebruiken. Op die manier werk ik ook vaak.
 
php4u, er staat "Of wil je een website met een html frameset ombouwen". Er is geen uitleg bij nodig dat ik hier het ombouwen van een oude site naar een site met de techniek van nu bedoel. Je leest 1 woord en reageert, daar heeft niemand wat aan.

Wil je aan de TS uitleggen hoe de browser een php include (server-side) kan inlezen bij het klikken op een linkje (client-side) zonder de pagina opnieuw te laden.
 
Het valt mij op dat vroeger veel php werd gebruikt op websites maar nu zijn ze bijna allemaal gebouwd met kant en klare apps op websites en zijn ze allemaal html en toch wordt er iedere keer een nieuwe content geladen en ik snap niet hoe ze het doen.
 
Dit is wat ik nu heb:
Code:
$(document).ready(function() {
	$('#content').load('content/index.html');
	
	$('nav ul li a').click(function() {
		var page = $(this).attr('href');
		$('#content').load('content/' + page + '.html');
		return false;
	});
});

Code:
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<link rel="stylesheet" href="css/styles.css">
	</head>
	<body>
		<div id="container">
			<header>
				<img class="logo" src="logo.png">
				<nav>
					<ul>
						<li><a href="index">Home</a></li>
						<li><a href="404">404</a></li>
						<li><a href="contact">Contact</a></li>
					</ul>
				</nav>
			</header>
			
			<content>
			<div id="content"></div>
				<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
				<script src="js/general.js"></script>
			</content>
			
			<footer>
				<p>Footer</p>
			</footer>
		</div>
	</body>
</html>

Op dit moment werkt alleen contact en dan niets meer.
- Dus hij wilt nog niet content/content.html laden als je klikt op home
- Hij laat ook standaard de content/content.html op de index pagina tussen <content>
- En hoe voeg je een eigen gemaakte 404 toe al de pagina niet bestaat?

Wat is het beste voor google, java of php?
 
Laatst bewerkt door een moderator:
Vrijwel alle moderne websites zijn gebouwd met php en mysql. Html en Javascript (Java is iets anders) worden gebruikt in de browser terwijl php en mysql worden gebruikt op de server.

In de bijlage een minimum opzetje zoals je het wilt maken.

Suc6. Have fun.
 

Bijlagen

  • ext-content.zip
    2,9 KB · Weergaven: 32
Laatst bewerkt:
Dank je, dit is wat ik heb nu:
Code:
<FilesMatch ".(cgi|pl|py|txt)">Deny from all
</FilesMatch>
<FilesMatch robots.txt>
Allow from all


SetEnvIfNoCase User-Agent libwww-perl bad_bots
order deny,allow
deny from env=bad_bots


RewriteEngine On


Options -Indexes


<Files "wp-config.php">
  order allow,deny
  deny from all
</Files>


RewriteCond %{QUERY_STRING} http\: [OR]
RewriteCond %{QUERY_STRING} \[ [OR]
RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E) [NC,OR]
RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]
RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2}) [OR]
RewriteCond %{QUERY_STRING} UNION [OR]
RewriteCond %{QUERY_STRING} // [OR]
RewriteCond %{QUERY_STRING} proc\/self\/environ [OR]
RewriteCond %{QUERY_STRING} \*
RewriteRule ^.*$ - [F,L]


ServerSignature Off


# -FrontPage-


IndexIgnore .htaccess */.??* *~ *# */HEADER* */README* */_vti*


<Limit GET POST>
order deny,allow
deny from all
allow from all
</Limit>
<Limit PUT DELETE>
order deny,allow
deny from all
</Limit>


ErrorDocument 400 http://gast0510.blank.com/error.php
ErrorDocument 401 http://gast0510.blank.com/error.php
ErrorDocument 402 http://gast0510.blank.com/error.php
ErrorDocument 403 http://gast0510.blank.com/error.php
ErrorDocument 404 http://gast0510.blank.com/error.php
ErrorDocument 500 http://gast0510.blank.com/error.php
ErrorDocument 501 http://gast0510.blank.com/error.php
ErrorDocument 502 http://gast0510.blank.com/error.php
ErrorDocument 503 http://gast0510.blank.com/error.php

Alleen krijg ik deze error: [FONT=&quot]500 Error, please check your php script / enable display_errors in your cpanel
En dat komt door dit:
Code:
[/FONT][/COLOR]<FilesMatch ".(cgi|pl|py|txt)">Deny from all
</FilesMatch>
<FilesMatch robots.txt>

Allow from all[COLOR=#000000][FONT=&quot]
Wat kan ik er aan doen?[/FONT]
 
Laatst bewerkt door een moderator:
FilesMatch afsluiten...?
 
@bron; Dank je hartelijk voor de opzet. Ik ben al uren aan het rommelen met de code en wil graag alles in php hebben vandaar die content include die erin zit.
Maar zou het menu ook zo kunnen werken?

Het valt mij op de je geen id meer gebruikt bij dingen alles is class, ik dacht dat id moest worden gebruikt voor unieke divs en class voor alle andere; meerdere dezelfde divs?


Wat mij niet wilt lukken is om de header en de nav samen te voegen tot 1 geheel dat alles onder 1 header komt te staan. Links het logo en rechts het menu.

Ook wil de <main> niet lukken.

Index.php
Code:
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Test</title>
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<header>
	<div class="brand">
		<img src="images/brand.png" alt="">
	</div>
	<nav class="menu">
		<ul>
			<li class="current"><a href="index.php">Home</a></li>
			<li><a href="index.php?page=about">About us</a></li>
			<li><a href="index.php?page=products">Products</a></li>
			<li><a href="index.php?page=contact">Contact</a></li>
			<li><a href="index.php?page=login">Login</a></li>
		</ul>
	</nav>
</header>

<main>
	<div class="content">
		<?php
		if (!isset($_GET['page'])) {
			include('page/content.php');
		}
		else {
			$page = 'page/'.$_GET['page'].'.php';
			if (file_exists($page)) {
				include($page);
			}
			else {
				include ('page/404.php');
			}
		}
		?>
	</div>
</main>

<footer>
	<div class="footer">
		<div class="footer-container">
			<div class="footer-left">
				<p> <a href="https://www.Helpmij.nl.tk">Helpmij.nl</a> &copy; <?php echo date('Y'); ?>.</p>
			</div>
			<div class="footer-right">
				<p>Established: April 1st, 2016.</p>
			</div>
		</div>
	</div>
</footer>

</body>
</html>

styles.ss
Code:
/** Globals **/

::-webkit-scrollbar {
	width: 9px;
}
::-webkit-scrollbar-track {
	background-color: #C92033;
}
::-webkit-scrollbar-thumb {
	background-color: #a51a2a;
	border: 1px solid #a51a2a;
	border-radius: 10px;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(http://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff')
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
}
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 13px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	line-height: 1.4;
	color: #ffffff;
	background-color: #C92033;
}


/** Header **/

header, nav, main, footer {
	display: block;
}
	.menu:after, .menu:before {
		display:table; content:" ";
	}
	.menu:after {
		clear:both;
	}
header {
	position: fixed;
	z-index: 100;
	top: 0;
	width: 100%;
	height: 85px;
	font-size: 20px;
	background: #ffffff;
	border-bottom: 0.05px solid #e0d9e0;
	-webkit-box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.08);
	-moz-box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.08);
	box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.09);
}
	.brand {
		display: inline;
		float: left;
		padding-left: 20%;
		padding-top: 15px;
	}
		header img {
			max-width: 100%;
			height: auto;
			max-height: 150px;
		}
	nav {
		display: inline;
		float: left;
		margin-right: 20%;
		width: 100%;
		padding: 10px 0;
		background-color: #a51a2a;
	}
		nav ul {
			list-style: none;
			margin: 0;
			padding: 0 35px;
		}
			nav ul li {
				float: left;
			}
			nav ul a {
				display: inline;
				padding: 10px 15px;
				color: #888888;
				text-decoration: none;
				font-size: 16px;
			}
			nav ul a:hover {
				color: #bbbbbb;
				font-weight: bold;
			}
			nav ul .current a {
				color: #cccccc;
				font-weight: bold;
			}


/** Main **/

#main {
	width: 100%;
}
	main .content {
		width: 50%;
		margin: 0 200px 0 0;
		padding: 200px 0px 80px 150px;
	}
#showcase {
	min-height: 400px;
	background: url('../images/showcase.jpg') no-repeat 0 -200px;
	text-align: center;
	color: #FFFFFF;
	border-bottom: 1px solid #e0d9e0;
}
	#showcase h1 {
		margin-top: 60px;
		font-size: 55px;
		margin-bottom: 10px;
		text-shadow: 1px 0px black;
	}
	#showcase p {
		font-size: 14px;
		text-shadow: 1px 0px black;
	}
	#store {
		-moz-box-shadow: 0px 10px 14px -7px #238594;
		-webkit-box-shadow: 0px 10px 14px -7px #238594;
		box-shadow: 0px 10px 14px -7px #238594;
		background-color:#5989b3;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		border:1px solid #46708c;
		display:inline-block;
		color:#ffffff;
		font-family: 'Segoe UI Bold';
		font-size:15px;
		padding: 13px 32px;
		margin: 50px;
		text-decoration:none;
		text-shadow:0px 1px 14px #3d768a;
	}
	#store:hover {
		background-color:#408c99;
	}
	#store:active {
		position: relative;
		top: 1px;
	}
#boxes {
	margin-top: 20px;
}
	#boxes .box {
		float: left;
		text-align: center;
		width: 30%;
		padding: 10px;
		margin: 10px 10px 10px 10px;
	}
		#boxes .box img {
			width: 90px;
		}


/** Footer **/

footer .footer {
	width: 100%;
	height: 50px;
	bottom: 0;
	background-color: #a51a2a;
}
	footer .footer-container {
		color: #edb3b9;
		padding-top: 17px;
	}
		.footer-left {
			float: left;
			width: 30%;
			margin-left: 20%;
		}
		.footer-right {
			float: left;
			width: 30%;
			text-align: right;
		}
			.footer a {
				color: #edb3b9;
				text-decoration: none;
			}
			.footer a:hover {
				color: #ffffff;
				text-decoration: underline;
			}
			
#links {
	position: relative;
	margin-top: 20px;
}
	#links .left {
		float: left;
		text-align: center;
		width: 30%;
		height: 120px;
		padding: 10px;
		margin: 10px 10px 10px 10px;
	}
	#links .middle {
		float: left;
		text-align: center;
		width: 30%;
		height: 120px;
		padding: 10px;
		margin: 10px 10px 10px 10px;
	}
	#links .right {
		float: left;
		text-align: center;
		width: 30%;
		height: 120px;
		padding: 10px;
		margin: 10px 10px 10px 10px;
	}
		#links h4{	
			font-size: 37px;
			font-weight: bold;
		}
			#links ul li {
				
				font-family: 'Open Sans';
			}
	#links img {
		width: 90px;
	}

content.php (die in <main> wordt geladen met php:
Code:
<section id="showcase">
	<h1>Welcome to our new website!</h1>
	<p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p>
	<p><a href="index.php?page=store" id="store">Go To Store..</a></p>
</section>

<section id="boxes">
	<div class="box">
		<img src="images/rocks.jpg">
		<h3>Test 1</h3>
		<p>Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. </p>
	</div>
	<div class="box">
		<img src="images/rocks.jpg">
		<h3>Test 2</h3>
		<p>Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. </p>
	</div>
	<div class="box">
		<img src="images/rocks.jpg">
		<h3>Test 3</h3>
		<p>Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. </p>
	</div>
</section>

<section id="links">
	<div class="left">
		<h4>Snel naar:</h4>
		<ul>
			<li>Algemeen</li>
			<li><a href="">Home</li>
			<li><a href="">Nieuws</li>
			<li><a href="">Contact</li>							
		</ul>
	</div>
	<div class="middle">
		<ul>
			<li>Water sport</li>
			<li><a href="">Specificaties</a></li>
			<li><a href="">Bestellen</a></li>
			<li><a href="">Inloggen</a></li>
		</ul>
	</div>
	<div class="right">
		<ul>
			<li>Dealers</li>
			<li><a href="">Dealer worden</a></li>
		</ul>
	</div>
	<img src="http://sportsafetybag.nl/img/icon-idealgroot.png">
</section>

Test versie: http://gast0510.cmshost.nl/test/test2/
 
Laatst bewerkt:
Het wordt lastig als je vragen van verschillende topics door elkaar laat lopen. Jouw vraag #8 (met het juiste antwoord van php4u) hoort bij een ander topic.
Tip: Begin niet met de opmaak van je website. Begin eerst met de grove structuur en geef de belangrijkste delen in je structuur een achtergrondkleur zodat je kan zien hoe de structuur eruit ziet. Test dit eerst op smartphone, tablet en pc. Werk daarna van boven naar beneden. Het heeft geen nut de content vorm te geven als de header niet klaar is. Zelf vind ik een goed leesbaar lettertype (zonder schaduw) prettiger maar dat is persoonlijk.
Ik kom nog terug op je layout.
 
Ja je hebt gelijk dat was een foutje en dat zag ik veel te laat.

Ik heb ook even de 3 code's aangepast zoals ze er nu uit zien op de site.

Ik probeer in content.php onderaan een soort 2e footer te maken met daarin 3 kolommen met links en in de linker 1 foto.

Hier: http://gast0510.epizy.com/ kun je zien hoe mijn ontwerp er uit hoort te zien qua layout dan. dit is een oude versie die toen nog wel klopte.
 
RE: Het valt mij op de je geen id meer gebruikt bij dingen alles is class, ik dacht dat id moest worden gebruikt voor unieke divs en class voor alle andere; meerdere dezelfde divs?
Klopt bijna. Een id mag maximaal 1 keer in een document voorkomen, een class mag meerdere keren voorkomen. Steeds meer wordt gewoon overal een class gebruikt. Dit geeft je de mogelijkheid om bij een element die al een class heeft een id of extra class toe te voegen. De css van een id heeft in het algemeen prioriteut boven de css van een class. Met classes werken heeft ook het voordeel dat je niet alles hoeft om te bouwen als blijkt dat je ergens anders precies dezelfde css moet gebruiken.

Bij een andere vraag vroeg je om page=contact te veranderen in /contact
Dit vind je in de bijlage. Je kan dan gebruik maken van $root_url, $alias en $page
Neem alles wat boven <body> staat over, en ook alles tussen <nav> en <main>
En kopieer het bestand .htaccess naar de webserver (of vergelijk het met jouw bestand) anders werkt het niet.
 

Bijlagen

  • ay.zip
    44,2 KB · Weergaven: 28
Eigenlijk een kennistestje voor mijzelf maar je kan denk ik wel verder met de mobile-friendly bijlage. Geen support op wensen en aanpassingen.
 

Bijlagen

  • site-ay.zip
    241,9 KB · Weergaven: 33
Wat lukt er niet, even mijn glazen bol pakken.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan