Volledige versie bekijken : Beginners site



veysie
25 August 2009, 15:44
Hallo Iedereen

Willen jullie eens kijken naar mijn site en opmerkingen geven of dingen die kunnen veranderen?

http://www.kljwortegem.Be (http://www.kljwortegem.be/)

Greetz
Veysie

ultddave
25 August 2009, 16:43
Ziet er goe uit ;D. Alleen zou'k eventueel nog zorgen dat als ze op 1 van de tabbladen (menu) duwen, dat het geselecteerde menu gehightlight wordt, of een andere achtergrond krijgt ;).

Dus als je bijvoorbeeld op "Foto's" duwt,,,, dat dan in het menu, de menuoptie "Foto's" een witte achtergrond krijgt ipv grijs. Zo weet ge direct waar ge zit.

Greetz,
Dave

veysie
25 August 2009, 17:22
En hoe doe ik dit dan ultddave?
Alvast erg bedankt voor je reactie

ultddave
25 August 2009, 19:44
Hetzelfde als je dat nu hebt gedaan, met CSS/HTML code.

Dit heb je:
<div id="header">
<div id="logo"><p>KLJ Wortegem</p></div>
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="De Leiding.php">De Leiding</a></li>
<li><a href="De Leden.php">De Leden</a></li>
<li><a href="Activiteiten.php">Activiteiten</a></li>
<li><a href="Foto's.php">Foto's</a></li>
<li><a href="Contact.php">Contact</a></li>
<li><a href="Leidingspagina.php">Leiding</a></li>
</ul>
</div>

Nu moet ge bij elke pagina een style definieren voor het huidige menu. Bijvoorbeeld op de pagina foto's.php:

<div id="header">
<div id="logo"><p>KLJ Wortegem</p></div>
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="De Leiding.php">De Leiding</a></li>
<li><a href="De Leden.php">De Leden</a></li>
<li><a href="Activiteiten.php">Activiteiten</a></li>
<li><a href="Foto's.php" style="color:red;" >Foto's</a></li>
<li><a href="Contact.php">Contact</a></li>
<li><a href="Leidingspagina.php">Leiding</a></li>
</ul>
</div>

Ge kunt ook eventueel een aparte class in uw CSS file maken. "SelectedMenu" bijvoorbeeld, die ge dan aan uw "<li>" tag geeft. :)

<li class="SelectedMenu"><a href="Foto's.php">Foto's</a></li>

Momenteel gebruikt een menu item deze image:
images/menu_bckg.jpg

Dus eventueel kunt ge die editeren (andere kleur geven ofzo) en dan saven onder een andere naam en dan hebt ge dus de originele background en de nieuwe background (voor geselecteerde items).

PS: Die style="color:red;" zorgt er normaal gezien voor dat de tekst van het item in het rood komt. Inline CSS code heeft prioriteit op degene gedefinieerd in de CSS file (External).


Greetz,
Dave

veysie
25 August 2009, 21:26
Voila dit is gebeurd. heb het wel gedaan met inline css. hoe ik het external juist moest doen versta ik niet goed dusja! Wat vind je er nu van?

Nog enige veranderingen nodig volgens jou?

Greetz
Veysie

carl
25 August 2009, 21:53
External code komt in je css bestand. Zoals UltDave zei kan je de geimporteerde css regels overriden met inline opmaak. Het is nogtans vrij simpel hoor, je stelt gewoon een class in voor het lijst element:
<li class="klassenaam"...>tekst</li>
En dan moet je deze gewoon opnemen in uw css bestand:

.klassenaam{
stijlregels
}
Waarvoor je uw stijlregels voor dat ellement dus instelt.
Maar inline code is dus even goed als het voor zoiets is ;)

veysie
25 August 2009, 22:46
Ahzo dus het is eigenlijk geen probleem om die 2 door elkaar te gebruiken! Vind het langs de ene manier gemakkelijk external maar voor sommige dingen is inline code toch ook erg gemakkelijk!

Jij anders nog opmerkingen Carl?

Groeten
Veysie

carl
25 August 2009, 22:51
Nee hoor, het ziet er in mijn ogen prima uit :) Hij resized ook redelijk mooi mee met het venster en is gemaakt voor gemiddelde resolutie schermen (ergens tussen 800 600 en 1024 768) wat allemaal heel goed is :)
1 klein dingetje, vele van de fotos daar zitten nog met rode ogen :lol:
Je kan anders hem even aflopen met de w3 validator (http://validator.w3.org/) moest je dat nog niet weten/gedaan hebben. Let er wel op dat je het juiste document type hebt ;)
PS: ik gebruik safari op mac osx ;) Zo weet je meteen in welke browsers hij goed wordt weergegeven.

veysie
25 August 2009, 23:06
This document was successfully checked as XHTML 1.0 Transitional!

Niet slecht zou ik zeggen :)

Dank u wel voor jullie hulp jongens!

Nu ik zou graag nog een gastenboek op mijn site krijgen. iets moois maar dit is wat moeilijker. hebben jullie tips om hier goed aan te beginnen?

Aja en bij mijn foto's; als ik doorklik naar een andere foto gaat mijn pagina altijd terug omhoog. is dit mogelijk om hetzelfde te blijven zodat je altijd de volledige foto ziet?

GRoeten
Veysie

carl
25 August 2009, 23:19
Je kan dit doen (denk ik) door gebruik te maken van interne links (info (http://www.activejump.com/g-3.shtml)). Dit zorgt ervoor dat de pagina wordt ingeladen op de hoogte van het benoemde ellement. Dat is dan wel altijd de tekst "volgende foto" ofzo die bovenaan zal staan, niet de exact zelfde plaats op de site.
Mogelijk is er nog een andere manier, maar die zou ik je niet kunnen vertellen, dat is voor de echte pro's hier :D (hetzelfde geldt voor je gastenboek, daarvoor zal je vermoed ik moeten gaan gebruik maken van een database, maar dat is (nog)niet echt aan mij besteed)

ultddave
26 August 2009, 15:01
Over dat scrollen bij het openen van een nieuwe foto, bekijk de link van Carl maar eens. Dat werkt door een <a> te plaatsen met een href naar een ID of Naam van een element. Voorafgegaan door een # .

Voorbeeld is bijvoorbeeld hier:

http://nl.wikipedia.org/wiki/Website#Geschiedenis

Zoals ge ziet, wordt in de link van wikipedia zo een hekje gebruikt om je direct naar het onderwerp "Geschiedenis" te leiden.

De titel geschiedenis is zo geplaatst in de pagina:
<a name="Geschiedenis" id="Geschiedenis">

Het moet geen <a> element zijn, je mag ook bijvoorbeeld:

<p id="Titel">Dit is een titel</p>
En dan <a href="#Titel">Ga naar Titel</a> gebruiken.

PS: Ge kunt op die manier ook een <a> plaatsen die je helemaal naar boven brengt (handig bij een lange site bijvoorbeeld). Dat doet ge door <a href="#">Terug naar boven</a> te gebruiken.

****************************

Over dat gastenboek. Er zijn wel een aantal sites die van die gratis gastenboeken aanbieden etc etc, maar ik schrijf alles liever zelf :P. Dan weet ik dat het werkt, en dan hebk geen onnodige reclame etc :D.

Ge kunt ofwel een file gebruiken waarin ge alle entries van het gastenboek zet, en dan gewoon heel de tijd een nieuw bericht appenden (Achteraan in de file toevoegen). Nadeel is dat ge het laatst ingelezen bericht het eerst geplaatst moet worden op de site :D. Dus echt goed is die manier niet aangezien ge die berichten moet opslaan in het geheugen en dan pas uitschrijven.
En ge kunt niet prependen in een normale tekst file, anders was het makkelijk :D.

Een database is inderdaad makkelijker (Daar kunt ge sorteren op datum).

Voorbeeld code is bijvoorbeeld: (PHP met MySQL database)



<?php
$host="localhost";
$login="root";
$pass="";
$database ="gastenboek";
$db = mysql_connect($host,$login,$pass);

if (!mysql_select_db($database,$db)) {
echo "Connectie met database mislukt ";
}
else
{
$result = mysql_query("SELECT * FROM `gastenboekentries`");
while($row = mysql_fetch_array($result)){
extract($row);
// Doe iets met de data (uitprinten ofzo)
}
}

?>


Eerste regels = connectie met database maken. :)

Deze regel:
$result = mysql_query("SELECT * FROM `gastenboekentries`");

Haalt alle regels uit de geselecteerde tabel (gastenboekentries).

De fetch array functie zet 1 entry van de tabel om naar een array. Vanwege de while lus, worden dus alle entries naar een array omgezet.

PS: Op google vindt ge een pak handleiding voor MySql + PHP interacties ;).

veysie
26 August 2009, 16:27
Over dat scrollen bij het openen van een nieuwe foto, bekijk de link van Carl maar eens. Dat werkt door een <a> te plaatsen met een href naar een ID of Naam van een element. Voorafgegaan door een # .

Voorbeeld is bijvoorbeeld hier:

http://nl.wikipedia.org/wiki/Website#Geschiedenis

Zoals ge ziet, wordt in de link van wikipedia zo een hekje gebruikt om je direct naar het onderwerp "Geschiedenis" te leiden.

De titel geschiedenis is zo geplaatst in de pagina:
<a name="Geschiedenis" id="Geschiedenis">

Het moet geen <a> element zijn, je mag ook bijvoorbeeld:

<p id="Titel">Dit is een titel</p>
En dan <a href="#Titel">Ga naar Titel</a> gebruiken.

PS: Ge kunt op die manier ook een <a> plaatsen die je helemaal naar boven brengt (handig bij een lange site bijvoorbeeld). Dat doet ge door <a href="#">Terug naar boven</a> te gebruiken.



Ik snap het niet echt goed.(zal wel aan mij liggen hoor)
Dus elke keer als ik op volgende duw gaat mijn pagina terug volledig omhoog bij de foto's. Nu zou ik graag hebben dat als ik op volgende duw de volledige foto zie en niet moet nr beneden scrollen om hem dan volledig te zien.
Snap niet echt goed hoe ik dit zou moeten toepassen dan!

Greetz

ultddave
26 August 2009, 17:07
Ye sorry het was idd nogal vaag :P.

Dit gebruikt ge bijvoorbeeld voor een foto:
<img title="DSCF0327.JPG" class="thumbs" alt="DSCF0327.JPG" src="fotoalbum/Foto's KLJ-jaar 2008-2009/thumbs/groot_DSCF0327.JPG" complete="complete"/>

Nu moet ge da veranderen naar:

<img title="DSCF0327.JPG" name="foto" class="thumbs" alt="DSCF0327.JPG" src="fotoalbum/Foto's KLJ-jaar 2008-2009/thumbs/groot_DSCF0327.JPG" complete="complete"/>

En de URL moet niet:

http://www.kljwortegem.be/Foto's.php?pagina=fotoalbum&album=fotoalbum/Foto's KLJ-jaar 2008-2009&afbeelding=DSCF0327.JPG

zijn, maar wel:

http://www.kljwortegem.be/Foto's.php?pagina=fotoalbum&album=fotoalbum/Foto's KLJ-jaar 2008-2009&afbeelding=DSCF0327.JPG#foto
(#foto op het einde)

zijn na de aanpassing.

PS: Beter even testen met 1 foto, kben niet zeker of het goed werkt op die manier. :)

Greetz,
Dave

veysie
26 August 2009, 17:29
Ja man daar snap ik niets van hoor.
Ik vind nergens in mijn code dit terug: <img title="DSCF0327.JPG" class="thumbs" alt="DSCF0327.JPG" src="fotoalbum/Foto's KLJ-jaar 2008-2009/thumbs/groot_DSCF0327.JPG" complete="complete"/>

Dit wordt allemaal met een php script gedaan. Dit scriptje heb ik ergens van een pagina gekopieerd. maar met php kan ik volledig niet werken. Moest ik u de 2 pagina's doorsturen kan jij er dan wat mee doen? Of lukt dit ook niet :s

ALvast Bedankt voor je vlugge en goede reactie's!

ultddave
26 August 2009, 18:56
Yep dat moet aangepast worden in de PHP pagina foto's.php. Die inhoud wordt met php gegenereerd, dus daarin moet ge dat daar aanpassen. Ge moogt die altijd zenden ze, men emailadres staat in men profiel. (kmag die niet op het forum posten ;P)

Kheb wel morgen en overmorgen herexamens, dus kga zien ofk tijd heb, anders ist int weekend :D.

Greetz,
Dave

veysie
26 August 2009, 19:01
Kheb wel morgen en overmorgen herexamens, dus kga zien ofk tijd heb, anders ist int weekend :D.

Greetz,
Dave

Kzal ze u doorsturen en als je tijd hebt en wilt natuurlijk moe je dit dan maar eens doen!
Heb vrijdag ook herexamen dusja! ook niet veel tijd eigenlijk

Pjj
27 August 2009, 10:59
Ik denk wel dat je niet met 'name' maar met 'id' moet werken. # is ook de ID-selector in CSS.

veysie
27 August 2009, 13:50
Ik zou graag bovenaan mijn pagina ook nog een banner hebben. dus nu staat er zo klj wortegem gewoon geschreven. zou dit graag in een banner hebben of gewoon iets mooier met bewegingen ofzo.
Kan er dit iemand hier?

ultddave
27 August 2009, 14:27
Kunt ge beter hier eens vragen: http://www.minatica.be/forumdisplay.php?f=52 . Eventueel ook nog de grootte vermelden. :)

@Pjj; True. Name wordt alleen gebruikt voor Anchors denk ik :). http://www.w3schools.com/HTML/html_links.asp (onderaan)

Greetz,
Dave

Pjj
27 August 2009, 23:42
Ikzelf gebruik het name attribute enkel bij inputs & forms. Maar goed, 't lijkt valid?

tom906
8 December 2009, 21:00
Mooi gedaan.

Spoorzoeker
16 December 2009, 08:50
Je moet witruimte aan de zijkanten houden, dit is veel te onrustig.

En je moet je gastenboek opschonen. Het is een gastenboek, geen chatruimte.

YannickWillems
23 December 2009, 20:59
Je moet witruimte aan de zijkanten houden, dit is veel te onrustig.
Kan ik alleen maar be-amen, witruimte is ongelooflijk belangrijk aangezien je je lezer een plaats geeft om zijn ogen te laten "rusten".
Ook zou je je banner bovenaan ook links moeten uitlijnen aangezien dit niet strookt met de uitlijning van de gehele website:)
Maar toch mooie prestatie als eerste site! Over mijn geocities-gedrochten van 7 jaar geleden hoor je mij niet spreken:p

J.W.
23 December 2009, 21:50
De tekst onder tabblad home:

Bij "Nieuws" en "Verjaardagen" loopt deze gewoon ineen.
Een beetje meer afstand bij de terugloop tussen de regels zou veel beter zijn.
Bij een 17 inch scherm moet ik de pagina op 80% zetten om het een beetje duidelijk beeld te krijgen.