Site verbetering

gast0510 · 13 mrt 2016

Wat bedoel je met ctrl-i qua code?

het menu heb ik aangepast omdat ik ook op een categorie wil klikken als 'tussenlink'.

ik snap niet wat er anders is aan jouw 404 dan aan mijnes?

Wat mij nog steeds niet wilt lukken is:
- die rechterkant/aside:
* als je de browser klein maakt staan de headers rechts prima naast elkaar maar op maximale grote gaan ze opeens onder elkaar staan. (en hier staat geen datum, dus h6 heeft hier niets mee te maken, hoeft ook geen datum bij hoor

.)
* de ruimte tussen de rechter en linkerkant in het midden dus is te groot.
* de padding kan ik niet wijzigen van de text in de article.
- Aan de linker kant kan ik ook niet de padding wijzigen van de text in iedere article.
- ik kan dit zelfs niet eens doen met de datum in de header of de header zelf.
- helemaal onderaan aan de linker kant de datum valt onder elkaar omdat deze regel met UPDATED erin wat langer is.

bron · 14 mrt 2016

RE: Wat bedoel je met ctrl-i qua code?
Op je toetsenbord: Ctrl + I (bij Windows)

RE: het menu heb ik aangepast omdat ik ook op een categorie wil klikken als 'tussenlink'.
Er zaten fouten in de html.

RE: ik snap niet wat er anders is aan jouw 404 dan aan mijnes?
Zie regel 22-29 in mijn index.php

RE: Wat mij nog steeds niet wilt lukken is: ....
Al deze vragen werken goed in mijn index.php, ook de padding. In een eerdere post heb ik aangegeven hoe je de tekstgrootte van de header kan aanpassen.

RE: helemaal onderaan aan de linker kant de datum valt onder elkaar omdat deze regel met UPDATED erin wat langer is.
Responsive design kan dit veroorzaken omdat kolommen smaller worden. Heb je Updated echt nodig? Je kunt ook in de tekst beginnen met Updated: dd mm jjjj

gast0510 · 9 apr 2016

OK het is alweer een tijdje geleden en er is het een en ander veranderd aan de site.
zie: www.gast0510.tk voor de huidige.

@bron, zou je mij even verder willen helpen met dit..
1. ik zou graag als content in het midden van links naar rechts een soort van slideshow willen hebben waarin bijvoorbeeld foto 1 voor foto 2 wordt vervangen na ong 7 seconden.
2. daaronder wil ik 3 losse cellen hebben (nergens hoeft meer een datum in, alleen een titel, en een foto links erin + prijs en een link eronder. (dit is voor een toekomstige ecommerce site)
3. het menu wil niet helemaal lukken, zoals je ziet het ik het helemaal verwijderd, is nu overbodig, dus het zijn gewoon linkjes geworden. maar ik krijg het gewoon niet in het midden van de balk.
4. als je op een link klikt dan krijg ik die tekst (titel + wat daaronder staat) gewoon ook niet in het midden van mijn scherm. (sommige paginas weer wel, snap er niets van!)
5. Ik wil een login linkje rechtsboven in het scherm hebben maar ik krijg het daar niet.
6. De grootte van het menu is anders als de grootte van alle titel bars, waar verander ik dit?
7. Je hebt het steeds over een juiste 404 zou je mij dit eens kunnen uitleggen door de code te herschrijven en te posten.
8. Ik wil graag dat ik met verschillende mapjes kan werken in mijn ftp en site structuur. nu werkt mijn php include zo: index.php, content.php, 404,php en dan 1 map met pages waarin alle losse php bestanden staan. Kun je een php scriptje maken waarbij meerdere folders kunnen worden geopend zo iets: index.php, content.php, 404.php + Login folder met daarin alle dingen die beveiligd moeten blijven + pages folder + contact folder.
En dat dan toch alle pagina's kunnen worden geopend vanuit die verschillende mapjes via 1! include script op de index.

Zo iets: http://demo.themebrain.com/#metroz
En dan het eerste bovenaan met que werking, alleen de inhoud hoe het er uit moet zien wil ik dan hebben zoals je de 3e op die pagina ziet, genaamd po***ar, dan die linker kant, zo wil ik het uiterlijk hebben. (dit wil ik bovenaan hebben als 1 grote in het midden en 3 kleine eronder)

Alvast hartstikke bedankt :thumb:

En hier is de code voor alles, zoals ik het nu heb.

index.php

PHP:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="HandheldFriendly" content="True" />

	<meta name="robots" content="index, nofollow" />

	<title>Zenco Delivery</title>
	<!-- <base href="http://www.gast0510.tk/"> -->
	<meta name="description" content="" />

	<meta property="og:title" content="Zenco Delivery" />
	<meta property="og:description" content="" />
	<meta property="og:site_name" content="Zenco Delivery" />

	<link rel="shortcut icon" href="images/favicon.ico" />
	<link rel="stylesheet" href="css/index.css" />

</head>

<body>
	<div id="container">

		<header id="header">
			<div id="logo">
				<img src="images/header.gif" alt="The Resistance logo." />
			</div>
		</header>

		<nav id="menu">
			<ul>
				<li><a href="index.php">Home</a></li>
				<li><a href="index.php?page=about">About</a></li>
				<li><a href="index.php?page=products">Products</a></li>
				<li><a href="index.php?page=mail">Contact</a></li>
				<li><a href="index.php?page=login">Login</a></li>
			</ul>
		</nav>      

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

		<footer id="footer">
			<div id="footleft">
					<img src="images/footer.gif" alt="Join the fist!" />
			</div>
			<div id="footright">
				Design by gast0510, 2014-2016
				<br />
				All information on this website is private property!
			</div>
		</footer>

	</div> <!-- container -->

</body>
</html>

content.php

PHP:

<section id="middlecontainer">

	<article>
		<header>
			<h1>What we do / Bio</h1>
		</header>
		<img class="right" width="170px" src="images/eye.jpg" alt="The all-seeying eye of the Illuminati." />
		<p>Right now i'm working on the layout of the website, it is a hard thing to do, i tell you that.</p>
		<p><a href="index.php?page=intro">Learn more</a></p>
	</article>

</section> <!-- middle container -->

<section id="leftcontainer">

	<article>
		<header>
			<h1>New website</h1>
			<h6>Posted: 8 april 2016</h6>
		</header>
		<p>Nothing here yet!</p>
	</article>
	
	<article>
		<header>
			<h1>Testing</h1>
			<h6><s>4 march 2015</s> | Updated: 27 februari 2016</h6>
		</header>
		<p>
			Testing some quote layout.
			<br /> What do you think?
			<blockquote>
				<q>All ****h goes through three stages.
				First it is ridiculed, then it is violently opposed and finally it is accepted as self-evident.</q>
				<br /><br />
				<p>—Schoepenhouer</p>
			</blockquote>
			Great it works!
		</p>
	</article>

</section> <!-- left container -->

<aside id="rightcontainer">

	<article>
		<header>
			<h1>Website statistics</h1>
		</header>
		<p>Online viewers: <script src="stats/online.php"></script>
		<br />Total visitors: <?php $bestand = "stats/visits.php"; if(!is_file($bestand)) { $fp = fopen($bestand, 'a'); fwrite($fp, "<?\\n//"); fclose($fp); chmod($bestand, 0666); } $con = file_get_contents($bestand); $st = substr_count($con, ";"); if(strpos($con, $_SERVER['REMOTE_ADDR']) === FALSE) { $fp = fopen($bestand, 'a'); fwrite($fp, $_SERVER['REMOTE_ADDR'].";"); fclose($fp); $st++; } unset($con); echo "" . $st; ?></p>
		<p><?php echo "Last modified: ".date( "j F Y", getlastmod() ); ?></p>
	</article>

	<article>
		<header>
			<h1>Donate & Support</h1>
		</header>
		<p>If you like our services feel free to donate some cash. Click the PayPal logo below to donate.</p>
		<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GF64WWQHWL39G" onclick="javascript:window.open('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GF64WWQHWL39G','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img width="60px" src="images/paypal.png" alt="Click here to donate!" /></a></p>
	</article>

	<article>
		<header>
			<h1>Tags</h1>
		</header>
		<p>
			<a href="index.php?page=****h">Private labeling</a>
			<a href="index.php?page=****h">Ali Baba</a>
			<a href="index.php?page=****h">Amazon FBA</a>
		</p>
	</article>

	<article>
		<header>
			<h1>Sponsors</h1>
		</header>
		<p>None so far.</p>
	</article>

</aside> <!-- right container -->

mail.php (hier staat ook niets in het midden!!)

PHP:

<head>
	<meta name="robots" content="noindex,nofollow" />
	<link rel="stylesheet" href="../css/contact.css" />
</head>

	<article align="center">
		<header>
			<h1>Contact form</h1>
		</header>
		<form id="form" action="index.php?page=send-mail" method="post">
			<div class="row">
				<div class="label">Your name:</div>
				<div class="input">
					<input class="inputbox" name="name" placeholder="Full name please" />
				</div>
			</div>

			<div class="row">
				<div class="label">Your email:</div>
				<div class="input">
					<input class="inputbox" name="email" placeholder="yourname@gmail.com" />
				</div>
			</div>

			<div class="row">
				<div class="label">Your message:</div>
				<div class="input">
					<textarea name="message" placeholder="What's on your mind?"></textarea>
				</div>
			</div>
			
			<div class="row">
				<input type="submit" name="submit" value="Send message" />
			</div>
		</form>
	</article>

index.css:

HTML:

/*** fonts ***/

@font-face {
	font-family: 'Segoe UI';
	src: url('segoeui.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Segoe UI Light';
	src: url('segoeuil.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Segoe UI Bold';
	src: url('segoeuib.ttf');
	font-weight: normal;
	font-style: normal;
}

/*** costum vertical scrollbar ***/

::-webkit-scrollbar {
	width: 12px;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/*** default ***/

* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

html {
	height: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	overflow: -moz-scrollbars-vertical;
	overflow-y: scroll;
}
body {
	height: 100%;
	background-color: #213D65;
	color: #2f5388;
	font-size: 13px;
	font-family: 'Segoe UI';
}

.clearfix:before,
.clearfix:after  {
	display: table;
	content: " ";
}
.clearfix:after {
	clear: both;
}

.center {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.right {
	float: right !important;
	margin-right: 60px
}
.left {
	float: left !important;
}

/*** links ***/

a:link, a:visited {
  color: #2F5388;
  text-decoration: none;
  border-bottom: 1px dotted #A4CAF3;
}
a:hover, a:active {
  color: #A4CAF3;
  text-decoration: none;
  -moz-transition:color .2s ease-out;
  -webkit-transition:color .2s ease-out;
  transition:color .2s ease-out;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.link:link, .link:visited {
	outline: none;
	font-family: 'Segoe UI Bold';
	color: #2F5388;
	background-color: #FFFFFF;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid #2B4A7B;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.link:hover, .link:active {
	outline: none;
	font-family: 'Segoe UI Bold';
	color: #A4CAF3;
	background-color: #2B4A7B;
	padding: 6px 15px;
	text-decoration: none;
	border: 1px solid #2B4A7B;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/*** quotes ***/

blockquote {
	display: block;
	width: 90%;
	margin: 10px 10px 10px 0px;
	padding: 15px 15px 0px 18px;
	border: 1px dotted #A4CAF3;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
			border-radius: 5px;
	background: #FCFDFF;
}
	q {
		width: 90%;
		margin: 0 auto;
		quotes: "\201C" "\201D";
		color: #213D65;
	}

/*** audio ***/	
	
.audio-player {
	position: relative;
	width: 100%;
	margin: 15px auto 10px auto;
}

.audio-player audio {
	width: 99%;
	max-width: 100%;
	height: 50px;
	margin: 0;
	outline: none;
}

/*** container ***/

#container {
	min-height: 100%;
	margin: 0 auto;
	padding: 0 15px 0 15px;
	overflow: hidden;
}
	@media (min-width: 768px) {
		#container {
			width: 750px;
		}
	}
	@media (min-width: 992px) {
		#container {
			width: 970px;
		}
	}
	@media (min-width: 1150px) {
		#container {
			width: 1125px;
		}
}
#container > *:before,
#container > *:after {
	display: table;
	content: " ";
}
#container > *:after {
	clear: both;
}

/*** middle, left, right container ***/

#middlecontainer {
    width: 100%;
    margin-bottom: 20px;
    min-height: 60px;
    background-color: #fff;
	border-radius: 6px 6px 6px 6px;
}

#leftcontainer,
#rightcontainer {
	position: relative;
	float: left;
	min-height: 1px;
}

#leftcontainer {
	width: 100%;
}
#rightcontainer {
	width: 100%;
}

@media (min-width: 768px) {
	#leftcontainer {
		width: 58%;
		margin-right: 2%;
	}
	#rightcontainer {
		width: 38%;
		margin-left: 2%;
	}
}

@media (min-width: 992px) {
	#leftcontainer {
		width: 68%;
		margin-right: 2%;
	}
	#rightcontainer {
		width: 28%;
		margin-left: 2%;
	}
}

#middlecontainer > *:first-child,
#leftcontainer > *:first-child,
#rightcontainer > *:first-child {
	margin-top: 0;
}

/*** header ***/

#header {
	margin-bottom: 10px;
}
  #logo {
	width: 280px;
	margin: 0 auto;
  }
	@media (min-width: 768px) {
	  #logo {
		width: 395px;
	  }
	}
	#logo img {
	  display: block;
	  max-width: 100%;
	  height: auto;
	}

/*** menu ***/

#menu {
	width: 100%;
	margin-bottom: 20px;
	background-color: #2F5388;
	border: 1px solid #2B4A7B;
	border-radius: 5px;
	box-shadow: 2px 2px 5px #1D1E23;
}
@media (min-width: 768px) {
	#menu {
		display: block;
	}
}
	ul {
		margin-top: 0;
		margin-bottom: 10px;
	}
		li a:link, li a:visited {
			outline: none;
			font-family: 'Segoe UI Bold';
			color: #FFF;
			font-size: 14px;
			background-color: #2F5388;
			padding: 6px 15px;
			text-decoration: none;
			border-bottom: none;
		}
		li a:hover, li a:active {
			outline: none;
			font-family: 'Segoe UI Bold';
			color: #A4CAF3;
			font-size: 14px;
			background-color: #2B4A7B;
			padding: 6px 15px;
			text-decoration: none;
		}
		li {
			float: left;
		}
		li a {
			display: block;
		}

/*** content ***/

article {
	position: relative;
	width: 100%;
    min-height: 100px;
	margin-bottom: 20px;
	padding: 0 15px 20px 25px;
	background-color: #FFF;
	border: 1px solid #2B4A7B;
	border-radius: 0 0 5px 5px;
	box-shadow: 2px 2px 5px #1D1E23;
}
article:before,
article:after  {
	display: table;
	content: " ";
}
article:after {
	clear: both;
}
article header {
	position: relative;
	margin: -5px -15px 25px -25px;
	padding: 7px 15px 8px 25px;
	background-color: #2F5388;
	border: 1px solid #2B4A7B;
	border-width: 1px 1px 0 1px;
	border-radius: 5px 5px 0 0;
}
		article header h1 {
			display: block;
			margin: 0 0 0 0;
			font-size: 16px;
			color: #FFF;
			font-family: "Segoe UI Bold";
		}
		article header h6 {
			display: block;
			margin: 10px 0 10px 0;
			color: #A4CAF3;
			font-size: 11px;
			font-family: "Segoe UI Light";
		}
		@media (min-width: 992px) {
			article header h1 {
				padding-right: 200px;
			}
			article header h6 {
				position: absolute;
				top: 0;
				right: 0;
				width: 180px;
				margin-top: 0;
				margin-bottom: 0;
				padding: 9px 15px 0 0;
				text-align: right;
			}
		}
	p {
		margin: 0 0 20px 0;
	}
		article img {
			margin-top: 8px;
			margin-bottom: 8px;
		}

/*** footer ***/

#footer {
	margin-bottom: 20px;
	background-color: #2F5388;
	border: 1px solid #2B4A7B;
	border-radius: 5px;
	box-shadow: 2px 2px 5px #1D1E23;
}
	#footleft,
	#footright {
		font-size: 12px;
		color: #a4caf3;
	}
	#footleft {
		float: left;
		width: 17%;
		padding-left: 7%;
	}
	#footleft img {
		width: 37px;
		margin: 0 auto;
		padding-top: 7px;
	}
	#footright {
		float: left;
		width: 81%;
		padding-right: 1%;
		padding-top: 17px;
	}

contact.css:

HTML:

#form {
	width: 60%;
	margin: 0 auto;
}
	form .row {
		display: block;
		overflow: auto;
		margin-top: 10px;
	}
	form .row .label {
		float: left;
		width: 100px;
		text-align: right;
		line-height: 28px;
		padding-right: 10px;
		margin-right: 10px;
	}
		.inputbox {
			outline: none;
			float: left;
			color: #2B4A7B;
			height: 30px;
			width: 250px;
			padding: 3px 10px 3px 10px;
			background: #FFFFFF;
			border: 1px solid #2B4A7B;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
		}
		textarea {
			outline: none;
			float: left;
			color: #2B4A7B;
			width: 400px;
			max-width: 400px;
			height: 150px;
			max-height: 150px;
			padding: 7px 10px 7px 10px;
			border: 1px solid #2B4A7B;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
		}
		input:hover, textarea:hover {
			border: 1px solid #A4CAF3;
		}
		input:focus, textarea:focus {
			color: #A4CAF3;
			background: #2F5388;
			-webkit-box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
			-moz-box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
			box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
		}
		::-webkit-input-placeholder {
		   color: #A4CAF3;
		}
		::-moz-placeholder {
		   color: #A4CAF3;  
		}
		:-ms-input-placeholder {  
		   color: #A4CAF3;  
		}
		input[type=submit] {
			float: left;
			outline: none;
			font-family: 'Segoe UI Bold';
			color: #2B4A7B;
			background-color: #FFFFFF;
			margin: 10px 0 0 110px;
			padding: 6px 15px;
			border: 1px solid #2B4A7B;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			cursor: pointer;
		}
		input[type=submit]:hover {
			color: #A4CAF3;
			background-color: #2B4A7B;
		}

bron · 9 apr 2016

Hoi, je vraagt eigenlijk om een complete website met alle toeters en bellen. Het "even verder helpen" gaat dan niet. Je kunt zo'n vraag wel in deze categorie kwijt. Iemand op weg helpen vind ik een goede zaak maar een uitgebreide website voor nop doe ik niet. Misschien iemand anders die je verder kan helpen?

Site verbetering

gast0510

Gebruiker

bron

Moderator

gast0510

Gebruiker

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy