website opmaak help.

Status
Niet open voor verdere reacties.
Je kunt hooguit de code zo neerzetten dat ze voor mensen moelijk te lezen is, al maakt dat de site voor jezelf ook moeilijker te onderhouden. Vergeet niet dat code van je site uiteindelijk door de browser gedownload en geïnterpreteerd moet worden. Echt een probleem lijkt me dat niet

goed beter laat ik het zo nu het is.

maare... krijgt iedere pagina een aparte css bestand????

ik heb nu inmiddels de css in een aparte style.css bestand gezet.

verder heb ik vele menu items vervangen dooor: "- - -" omdat deze toch niet werken. dan zie je iets staan, en denk je van zo even op klikken. en dan werkt die pagina niet. ja dan ga je als bezoeker direct weg. vandaar ik het op deze manier hebt opgelost.

me gastenboek opent in een nieuwe venster. dit is niet echt juist. hij moet in het zelfde venster komen met de menu's.

en ja dan zit ik echt in de knoei. de <h1> en de <h2> moet dit ook in een gastenboek????

pffff... het wordt eventjes moelijk nu.

hoe ga ik te werk?

die popup met muziek speler lijkt mij geen probleem? of wel?
 
maare... krijgt iedere pagina een aparte css bestand????
Nee! Dat is juist een van de (vele) voordelen van css. Stel dat je tien pagina's gaat maken waar hetzelfde menu op moet komen. Dan kopieer je de html voor het menu. En je zet in de <head> van alle pagina's diezelfde link naar je css-bestand. Nu werkt de css in ál die tien pagina's, vanuit dat éne bestand.
Als je nu de letters in 't menu iets groter wilt maken, dan zijn dat dus op 10 pagina's 10 x 20 = 200 plaatsen. Met <font> had je op 200 plaatsen de maat mogen veranderen. Nu hoef je alleen maar in dat éne css-bestand de maat te veranderen, en op álle 200 menu-knoppen is de letter iets groter.
Als je 't menu op die tien pagina's hetzelfde wilt hebben, maar op 1 pagina moet de kleur van het menu groen zijn (en voor de rest het hele menu hetzelfde), zijn daar ook simpele trucjes voor.

(Er zijn ook manieren om het hele menu, als dat steeds hetzelfde is op 'n aantal pagina's, vanuit 'n apart bestand toe te voegen. Dan hoef je ook in 't menu maar op 1 plaats iets te veranderen. Maar dat gaat niet met css. Dat komt ooit wel, als 't de moeite waard is om te doen.)

me gastenboek opent in een nieuwe venster. dit is niet echt juist. hij moet in het zelfde venster komen met de menu's.
Daar is niets aan te doen. Dat komt omdat het gastenboek op 'n andere site staat. Jij hebt 'n gratis gastenboek, maar in ruil daarvoor willen zij reclame maken voor hun betaalde versie.
Als je 't op je eigen site wilt, dan moet je zelf iets installeren. Maar daarvoor zal wel php (iets wat op de server gebeurt) en sql ('n database om de berichten in te bewaren) nodig zijn.
Als je zoekt op 'php gastboek' vind je o.a. het gratis http://www.phpgb.net/index/phpGB

en ja dan zit ik echt in de knoei. de <h1> en de <h2> moet dit ook in een gastenboek????
Nee hoor. Dat kan ook helemaal niet. Want dan moet je bij hun html komen, en dat kan niet. En vaak worden gastboeken helemaal niet geïndexeerd door zoekmachines.
Maar je kunt wel aan 'n zoekmachine duidelijk maken dat je 'n gastboek hebt. Je hebt nu:
HTML:
<li><a href="http://apresskihutinfo.mygb.nl">gastenboek</a></li>
Als je dat verandert in
HTML:
<li><a title="Schrijf wat in mijn gastboek" href="http://apresskihutinfo.mygb.nl">gastenboek</a></li>
(of 'n andere title natuurlijk) dan weet Google (en andere zoekmachines, en spraakbrowsers e.d.) in ieder geval waar de link over gaat. Zo'n title moet je eigenlijk bij elke link zetten:
HTML:
<li><a title="Zin in 'n muziekje? Klik hier" href="javascript:void(0)" onclick="open('http://www.radio538.nl/web/show/id=675518','miniwin','width=320,height=280')">muziek speler</a></li>

die popup met muziek speler lijkt mij geen probleem? of wel?
Op geen enkele manier 'n probleem. Alleen opent in Firefox geen pop-up, maar wordt naar de site van de radio gegaan. Ik weet helaas te weinig van JavaScript af om dat op te lossen. Mogelijk dat 'n ander dat kan oplossen, en anders zou ik daar even 'n vraag over stellen in het JavaScript-deel.

't Gaat trouwens prima, volgens mij. Dat je 't rustig aan doet is alleen maar 'n voordeel, denk ik. En voor 'n forum maakt 't niets uit, al laat je 't drie maanden rusten.
 
Laatst bewerkt:
(of 'n andere title natuurlijk) dan weet Google (en andere zoekmachines, en spraakbrowsers e.d.) in ieder geval waar de link over gaat. Zo'n title moet je eigenlijk bij elke link zetten:

heb dat nu ook gedaan. netjes alles een titel gegeven wat een link bevat.
Even eens voor het menu met pagina's die niet werken. (heb zoals eerder gezecht "---" erinstaan.)

behalve de teller heb ik geen titel gegeven, omdat deze niet intressant is. (mag gerust zichtbaar blijven)

de muziek speler werkt naar mij zin goed. ook voor andere browsers in mij ogen geen probleem. ziet het zelfde eruit. ik zie in firefox op de zelfde manier openen als in ie8 en safari,opera enzo... misschien komt dit door een bepaalde versie van firefox. (of de popup staat idd. uitgeschakeld) hoewel... voor mij geen probleem. ik laat het zo.

de gastenboek laat ik voorlopig dan nog staan, voorlopig werkt het nog goed. stel iemand wil wat in het gastenboek schrijven, dan hebben ze vooraf al de site bekeken voordat ze reageren. dus dat die niet opent op mijn site zelf, is voorlopig ook geen punt.

aan boven genoemde punten geef ik voorlopig geen aandacht meer aan, het werkt goed. en het bevat geen fouten.


Maar nu terug naar de index pagina (home)

Het plaatje boven aan ('welkom") ga ik nog een keer aanpassen in een eigen gemaakte logo voor de website.

Maar nu eerst het volgende:

Ik wil 3 foto's onderaan de pagina hebben. dus: uiterst links foto1, midden(gecentreerd) foto 2 en uiterst rechts foto 3 (op een regel)

Nu denk ik dat het mooiste is als ik die onder het menu plaatst en onder de inleiding's text.
(dus ipv waar nu de tip van de dag, de update, en de teller staan)
dan komen de tip van de dag, de update en de teller helemaal onder de foto's te staan. zodat de pagina nu redelijk gevuld is.

dus: zeg maar even voor het gemak:

regel 1: plaatje welkom (word vervangen door logo)
regel 2: het menu met inleidings text
regel 3: de 3 foto's
regel 4: de tip van de dag, update en de teller.

Ok de foto's....
Hoe ga ik te werk???

Vooraf vertel ik er even nu bij:

Op bijna iedere pagina komt dan: dat plaatje welkom
Het menu
En 3 foto's onderaan!
met daaronder de update, zoals de index pagina. (maar geen teller of tip van de dag)

Ik wil dan wel op iedere pagina steeds 3 andere foto's plaatsen. (indien mogelijk)
en dan later ga ik ze zelf weer aanpassen. De foto's moeten kwa grote duidelijk te zien zijn, zonder ze te vergroten door er op te klikken. (ik wil er geen link van maken

dus even in het kort:

3 foto's komen steeds onder het menu te staan, en op bijna iedere pagina (dus niet op alle pagina's) maar wel steeds 3 andere foto's. per pagina. (hoe moet dit???)

Het zelfde menu komt ook steeds terug op bijna iedere pagina.

Dat plaatje welkom komt ook steeds terug op bijna iedere pagina.

Dus die 3 komen zeker terug op iedere pagina.

daarnaast komt de update van de betreffende pagina helemaal onderaan te staan, zodra een pagina actief is. (dit kan later nog wel)
 
Die radiospeler zal dan wel met 'n extensie van Firefox bij mij te maken hebben. Firefox zit bij mij propvol met allerlei extra's, dus dat gaat wel 'ns mis.

In je css staat bij ul.navigatie 1 em. Dit moet zijn: 1em aan elkaar vast. (Die typefout blijft me de rest van m'n leven achtervolgen...)

De <meta> met de charset moet de eerste regel in de <head> zijn, de bovenste, anders negeren sommige browsers hem.

In de keywords zou ik die zin "Wat is een skihut? Lees op deze site daar meer over" weghalen. Dat is geen keyword, maar 'n description :D Dat kan 'n zoekmachine aanzien als keyword-spam, en dan heb je 'n probleem.

3 foto's komen steeds onder het menu te staan, en op bijna iedere pagina (dus niet op alle pagina's) maar wel steeds 3 andere foto's. per pagina. (hoe moet dit???)
Andere foto's is heel simpel: gewoon in de html 'n andere src gebruiken (en 'n andere alt-tekst). De foto's zijn inhoud, dus die komen gewoon in de html. In principe komt daar ook de maat van de foto's te staan.
De OPMAAK van de foto's kan in de css komen, want die is voor elke pagina hetzelfde (neem ik aan), dus dat kan dan prima op 1 centrale plaats.
Die afbeeldingen kan heel simpel (nu ga je de voordelen van het niet gebruiken van 'n tabel merken):
HTML:
<p id="fotos" style="text-align: center; clear: both;">
	<img id="links" src="foto-1.jpg" alt="Foto 1" width="..." height="...">
	<img id="rechts" src="foto-2.jpg" alt="Foto 2" width="..." height="...">
	<img src="foto-3.jpg" alt="Foto 3" width="..." height="...">
</p>
(width en height bij de foto's nog invullen. Alleen 'n getal, zonder px)
Deze html zet je gelijk boven <div id="tip"> en onder de paragraaf met <p
Code:
p#fotos {
     clear: both;           /* Zodat het altijd ONDER het menu komt, en niet ertussen */
     text-align: center;    /* Afbeeldingen in het midden zetten */
     }
img#links {
     float: left;              /* Deze foto helemaal links in de <p> zetten */
    }
img#rechts {
     float: right;         /* Deze foto helemaal rechts in de <p> zetten */
     }
Plaatjes zijn inline-elementen, net zoals tekst, dus ze komen op dezelfde regel.
Eerst zet je ze alle drie met text-align in het midden. Daarna zet je er eentje met float naar links, en eentje naar rechts. Dan blijft er eentje eenzaam en alleen over in het midden.

Het zelfde menu komt ook steeds terug op bijna iedere pagina.
Dan kan dat dus ook prima centraal worden aangestuurd met css.
Als het menu vaak wordt gebruikt, kan het eventueel ook in 'n apart bestand worden gezet en dan met ssi of php overal worden ingevoegd. In plaats van de html komt er dan 'n aanroep naar 'n ander bestand te staan, waar vanuit het menu dan wordt ingevoegd. Dan hoef je bij 'n wijziging niet op 47 plaatsen het menu te wijzigen, maar ook maar op 1 plaats. Maar dat komt wel.

Dat plaatje welkom komt ook steeds terug op bijna iedere pagina.
Is de externe stylesheet dus alweer handig. Alleen de html moet op elke pagina, maar de css kan centraal. Je kunt zo'n afbeelding ook gaan aanroepen met php of ssi, maar dat is meer werk dan gewoon die simpele regel in de html te zetten.
php en ssi zijn alleen maar zinvol als het gaat om 'n groter iets op veel pagina's, zoals 'n uitgebreid menu.

Dus die 3 komen zeker terug op iedere pagina.
Dus gewoon de pagina kopiëren en de namen van de foto's aanpassen, en de tekst in het midden. (En de <h1>, title, description, e.d. natuurlijk).

daarnaast komt de update van de betreffende pagina helemaal onderaan te staan, zodra een pagina actief is. (dit kan later nog wel)
Die foto's drukken de update en zo omlaag, dus dat komt prima uit.

Nog 'n kleine aanvulling: je kunt die foto's met margin en zo precies goed neerzetten. Float voor het ruwe werk, margin e.d. voor de fijne afstelling.
Je kunt de foto's het best met 'n grafisch programma de maat geven die ze ook in de browser krijgen. Dan is het bestand niet te groot. En 'n browser vergroot/verkleint 'n foto veel slechter dan 'n gespecialiseerd grafisch programma.
 
Laatst bewerkt:
Je kunt zo'n afbeelding ook gaan aanroepen met php of ssi, maar dat is meer werk dan gewoon die simpele regel in de html te zetten.
php en ssi zijn alleen maar zinvol als het gaat om 'n groter iets op veel pagina's, zoals 'n uitgebreid menu.


Dus gewoon de pagina kopiëren en de namen van de foto's aanpassen, en de tekst in het midden. (En de <h1>, title, description, e.d. natuurlijk).

php of ssi heb ik niet echt geweten wat dat is. en begrijp er nog niet veel dus over.
Maar mij intresse gebruik ik wel om dit te lezen in google.... (wikipedia bv)

Maar ik begrijp dus dat je alles moet gaan linken dan als je php of ssi gebruikt?

en voor de meeste pagina's (dus niet alle) gebruik ik de zelfde:

menu
welkom plaatje
zelfde manier van de 3 foto's (maar dan 3 anderen)
en de update regel daaronder.

dit komt steeds terug. de rest niet!

de text op me index (home) pagina is een inleiding's text die enkel op deze pagina komt.

straks maak ik andere pagina's en dan moet ipv die text iets anders komen.
bv.

ik wil nu een pagina met "evenementen" maken.

dan wil ik links en rechts weer dat menu zien.
en boven in dan... mijn logo (wat nu nog "welkom" plaatje is.)
daaronder wil ik dan 3 andere foto's plaatsen.

en daaronder komt de update regel te staan (gecentreerd)

en dus tussen de 2 menu's en onder dat welkom plaatje en boven de 3 foto's komt de inhoud van de volgende pagina. (bv "evenementen")


ik heb de foto's nog niet echt hernoemd. maar dit komt vanzelf.
het zijn ook geen juiste foto's maar gaat ff als voorbeeld. veranderen kan altijd nog.
voorlopig is dit nog even goed zo.

maar het einderesultaat is wel momenteel top!:thumb:

ik ondervind in de validator geen fouten.

edit: hoe moet ik de fouten controleren van de css?????:confused: want ken enkel de validator controleren door de url in te vullen. maar ja zag bv gisteren die fout niet van 1 em:mad:
 
Die php of ssi komt later wel, als er wat pagina's af zijn. Dan kun je zien waar 't nuttig is en waar niet. En misschien is 't op jouw site wel helemaal overbodig.

De css kun je valideren op http://jigsaw.w3.org/css-validator/
Je kunt gewoon het adres van je html-pagina opgeven, of van de aparte stylesheet. Ook als de css in de pagina zelf staat wordt die gecontroleerd.
Als je met Firefox werkt en de extensie Web Developer, kun je de html voortdurend laten controleren. En voor het controleren van de css is maar één klik nodig. Erg handig.
 
De css kun je valideren op http://jigsaw.w3.org/css-validator/
Je kunt gewoon het adres van je html-pagina opgeven, of van de aparte stylesheet. Ook als de css in de pagina zelf staat wordt die gecontroleerd.
Als je met Firefox werkt en de extensie Web Developer, kun je de html voortdurend laten controleren. En voor het controleren van de css is maar één klik nodig. Erg handig.

ok heb het bij me favoriete geplaatst:thumb: nu kan ik voortaan de css en de html controleren en ik zou dan ook geen fouten meer moeten kunnen vinden.

maar goed.... nu werkt me index pagina prima. (kleuren en texten enzo pas ik tussen door wel aan)

Maar wil nu eerst met de volgende pagina verder.

ik wil nu een pagina gaan maken met een overzicht wanneer bv een evenement plaats gaat vinden. dus een soort agenda overzicht.

ik heb dit simpel in een tabel gemaakt:

HTML:
<html><TABLE BORDER="5" BGCOLOR="#000000">
<TR BGCOLOR="#000000">
<TD WIDTH="200" HEIGHT="30" BGCOLOR="#cc3300"><center><FONT COLOR="#C0C0C0" <FONT SIZE=4><b>Naam evenement:</b></FONT></TD></center>
<TD WIDTH="200" BGCOLOR="#cc3300"><center><FONT COLOR="#C0C0C0" <FONT SIZE=4><b>Locatie:</b></FONT></TD></center>
<TD WIDTH="200" BGCOLOR="#cc3300"><center><FONT COLOR="#C0C0C0" <FONT SIZE=4><b>Datum:</b></FONT></TD></center>
<TD WIDTH="200" BGCOLOR="#cc3300"><center><FONT COLOR="#C0C0C0" <FONT SIZE=4><b>Bijzonderheden:</b></FONT></TD>
</TR>
<TD HEIGHT="40" BGCOLOR="#0000CC"><center><FONT COLOR="#ffff00"> go apres ski</FONT></TD></center>
<TD HEIGHT="40" BGCOLOR="#0000CC"><center><FONT COLOR="#ffff00"> ahoy Rotterdam </FONT></TD></center>
<TD HEIGHT="40" BGCOLOR="#0000CC"><center><FONT COLOR="#ffff00"> 20-03-2010 </FONT></TD></center>
<TD HEIGHT="40" BGCOLOR="#0000CC"><center><FONT COLOR="#ffff00"> evenement </FONT></TD></center>
</TR>
</TABLE>

hoe plaats ik dit dan juist op mijn website???

Ik wil dan:

het menu wat nu op mijn index pagina staat gebruiken. (gewoon de zelfde weergave)
de welkom's plaatje erboven hebben staan. (ga binnen kort dit aanpassen naar een logo)
en 3 andere foto's eronder hebben staan, en daaronder de update van die pagina.

ik begrijp dat ik dingen moet kopieren.

maar wat kan weg???? en wat juist niet???

Ik begrijp een beetje dat waar nu de text staat in de index pagina dat dat mijn "evenementen" pagina wordt. maar zit nu ermee dat ik de <h1> en <h2> moet gebruiken???

hoe moet ik nu stap voor stap verder???

misschien als ik dit ga begrijpen ik al veel meer zelf straks kan met andere pagina's (hoop ik dan - maar ben blij dat men mij dit leert)
 
Laatst bewerkt:
Ik zou het als volgt doen.
'n Heel groot deel van die pagina (ik noem hem even de agenda voor het gemak) is dus precies hetzelfde: menu, header, wanneer geüpdate. In principe kun je dus gewoon de héle pagina home kopiëren en dan als naam agenda.html geven (of 'n andere naam natuurlijk).
Ik had het al eerder over kopiëren. En ik bedoel dus echt gewoon de héle pagina. Het is veel makkelijker om alles te kopiëren en dan weg te halen wat er niet in hoeft. Dat is veel makkelijker dan stukje voor stukje onderdelen te kopiëren. (In dit geval, niet altijd natuurlijk.)

De <h1> kun je gewoon aanpassen naar iets als 'Evenementen', of wat dan ook.
Als je geen <h2> nodig hebt, haal je die gewoon weg. Alleen 'n <h1> is min of meer echt nodig, <h2>, <h3>, enz. alleen als 't zo uitkomt.
Als de tip van de dag er niet in moet, haal je die er gewoon uit.
Enz. Tot er alleen nog maar staat wat er in moet blijven staan. Dus de tekst in het midden haal je ook weg.

Nu kun je de tabel er gewoon in kopiëren. Maar niet deze tabel, want ik word hier 'n beetje bedroefd van :confused:
Ik zie dat width, height, bgcolor, en o gruwel zelfs font, color en center hebben toegeslagen.
Dat geeft foutmeldingen bij 'n strict doctype, en dat was eigenlijk ook precies de bedoeling. Dit zijn allemaal afgekeurde eigenschappen, die in de css thuishoren. Daardoor wordt de code veel kleiner en veel en veel makkelijker te onderhouden.
'n Tabel kun je net zo met css behandelen als alle andere elementen.
HTML:
<TABLE BORDER="5" BGCOLOR="#000000">
Kan ook als
Code:
table {
     border: black solid 5px;
     background-color: black;          /* of #000000, of #000, net wat je wilt */
     text-align: center;                    /* 
    }
Zo kun je al die opmaakdingen uit de tabel verplaatsen naar de css. Als je dan later 'n kleurtje wilt veranderen of zo, kan dat gewoon op 1 plaats, in plaats van op tig plaatsen in de tabel.

In dit geval is 'n tabel trouwens prima geschikt. 'n Tabel hoort niet voor lay-out gebruikt te worden, maar juist wel voor dit soort dingen als agenda's.

Dat zou er dan ongeveer zo uit gaan zien:
HTML:
<head>
	<title></title>
	<style type="text/css">
		table {text-align: center; border: black outset 5px; background: black;}
		tr#kop {height: 30px; font-size: 1.1em; font-weight: bold; color: #c0c0c0; background: #c30;}
		tr#kop td {width: 200px;}
		tr {height: 40px; background: #00c; color: #ff0;}
	</style>
</head>
<body>
	<table>
		<tr id="kop">
			<td>Naam evenement:</td>
			<td>Locatie:</td>
			<td>Datum:</td>
			<td>Bijzonderheden:</td>
		</tr>
		<tr>
			<td>go apres ski</td>
			<td>ahoy Rotterdam</td>
			<td>20-03-2010</td>
			<td>evenement</td>
		</tr>
	</table>
</body>
* De letters in de tweede rij zijn erg klein in Google Chrome en Opera, moet je nog even naar kijken misschien.
* De bovenste rij wijkt af. Die heb ik 'n id="kop" gegeven. Als ik nu in de css tr#kop gebruik, dan heeft die meer gewicht dan alleen tr. Omdat er naast het element (tr) nog 'n id (kop) bij staat. Dus ik kan afwijkende css opgeven voor tr#kop en daarna css voor alleen tr. Die is dan voor de rest van de tabel, want ik neem aan dat alle rijen verder hetzelfde moeten zijn.
Dus hoewel tr ná tr#kop komt in de css, 'wint' tr#kop door de id die erbij staat.
* De border moet je misschien ook nog even mee spelen. Dat is nogal verschillend in de diverse browsers. Ik zou even kijken welke breedte en welke soort (outset, inset, groove, ridge) er het best uitzien. En de kleur wil ook nog wel 'ns enorm schelen, grijs in plaats van zwart of zo.
* Ik heb kleine letters voor de tags gebruikt. Bij html mogen kleine en hoofdletters, dus als jij liever met hoofdletters werkt is dat prima.
 
Laatst bewerkt:
* De bovenste rij wijkt af. Die heb ik 'n id="kop" gegeven. Als ik nu in de css tr#kop gebruik, dan heeft die meer gewicht dan alleen tr. Omdat er naast het element (tr) nog 'n id (kop) bij staat. Dus ik kan afwijkende css opgeven voor tr#kop en daarna css voor alleen tr. Die is dan voor de rest van de tabel, want ik neem aan dat alle rijen verder hetzelfde moeten zijn.
Dus hoewel tr ná tr#kop komt in de css, 'wint' tr#kop door de id die erbij staat.
* De border moet je misschien ook nog even mee spelen. Dat is nogal verschillend in de diverse browsers. Ik zou even kijken welke breedte en welke soort (outset, inset, groove, ridge) er het best uitzien. En de kleur wil ook nog wel 'ns enorm schelen, grijs in plaats van zwart of zo.

dit stukje is een beetje chinees voor me..... begrijp het niet echt wat je hiermee precies bedoeld.:confused:

maar ik heb een groot deel gekopiert en in de html en css toegepast.

ik heb de zelfde fotos gebruikt. (dit kan straks wel worden aangepast - lijkt me niet echt moelijk :P)

Op de "evenementen.html" pagina (zo heb ik hem toch genoemd)

staat nu zoals je ziet:

het welkom's plaatje netjes boven aan. in het midden waar hij hoort.
het menu links en rechts zoals het hoort.
de fotos daaronder staan ook juist.

dit kan kloppen want heb alles gekopiert en dus niets aangepast.

maar nu....

de <h1> heb ik gewoon de kop titel vervangen door "apresski evenementen 2010"

meer belangrijke text komt er niet te staan. en dit zou ik dan willen tonen als koptitel...... dus daarom belangrijk in de <h1> geplaatst.

vraag me af.... of de <h1 id="home" dan wel klopt:( het is nu geen "home" maar "evenementen"

eigenlijk idd. is het maar een naam, en het werkt goed. maar toch vraagme af... moet het toch anders????:rolleyes:

Ook wanneer geupdate staat uiterst links op de pagina.

wel mooi onderaan de foto's maar toch uiterst links.

in de index pagina stonden deze mooi in het midden.

ik ben het ff kwijt hoe het nu zit om ze mooi in het midden te krijgen.


en oja....

de tabel zelf... die staat nu te veel naar rechts. en centreerd niet mooi mee in het menu.

edit: ik heb even tijdelijk geen andere browsers om te testen.

wel test ik ze via de validators. en in ie8
 
Laatst bewerkt:
dit stukje is een beetje chinees voor me..... begrijp het niet echt wat je hiermee precies bedoeld.:confused:
Het betekent dat de css die achter tr#kop staat alleen wordt toegepast op <tr> elementen met het id kop. Des te preciezer de CSS is des te zwaarder zij weegt. Als de css voor tr en tr#kop met elkaar in tegenspraak zijn dan zal de browser die voor tr#kop gebruiken.

vraag me af.... of de <h1 id="home" dan wel klopt:( het is nu geen "home" maar "evenementen"
Als je wilt dat het uiterlijk van die h1 anders is dan die van de h1 op de voorpagina dan moet je id="home" inderdaad weghalen of door iets anders vervangen. Anders kun je het rustig laten staan, ook al is het niet erg logisch. Trouwens, als alle h1 er hetzelfde uit moeten zien dan heet een apart id helemaal geen zin en kun je in de css gewoon naar h1 refereren. (ik heb de draad neit compleet gevolgd en wet dus niet waarom die id daar staat)


Ook wanneer geupdate staat uiterst links op de pagina.

wel mooi onderaan de foto's maar toch uiterst links.

in de index pagina stonden deze mooi in het midden.

ik ben het ff kwijt hoe het nu zit om ze mooi in het midden te krijgen.
Hij staat op de voorpagina alleen maar een beetje in het midden omdat hij door de tip van de dag naar rechts wordt gedrukt. Als je hem overal precies in het midden wilt hebben dan moet je bij de CSS van h2#update het volgende doen.
float:left; weghalen
text-align:center; toevoegen, dit zorgt ervoor dat de tekst in het midden van z'n element komt te staan.
clear:both; toevoegen, dit zorgt ervoor dat het element niet links of rechts van iets anders komt te staan en dus onder de tip van de dag uit al komen.

de tabel zelf... die staat nu te veel naar rechts. en centreerd niet mooi mee in het menu.
ik zie niet wat je bedoeld.
 
Laatst bewerkt:
Als je wilt dat het uiterlijk van die h1 anders is dan die van de h1 op de voorpagina dan moet je id="home" inderdaad weghalen of door iets anders vervangen. Anders kun je het rustig laten staan, ook al is het niet erg logisch. Trouwens, als alle h1 er hetzelfde uit moeten zien dan heet een apart id helemaal geen zin en kun je in de css gewoon naar h1 refereren. (ik heb de draad neit compleet gevolgd en wet dus niet waarom die id daar staat)

De <h1> op de index pagina moet het zelfde zijn als de titel en de desrcription vandaar dat we dan id=home hebben gebruikt. hij verwijst hiernaar in de css.

Maar omdat het enkel een doorverwijzing is naar de css vraag ik me af of ik dit volgens de evenementen ook moet toepassen???
de pagina met evenementen gaat helemaal niet over de index pagina. (het is een andere pagina)

moet ik het nu wel of niet aanpassen:rolleyes:


Hij staat op de voorpagina alleen maar een beetje in het midden omdat hij door de tip van de dag naar rechts wordt gedrukt. Als je hem overal precies in het midden wilt hebben dan moet je bij de CSS van h2#update het volgende doen.
float:left; weghalen
text-align:center; toevoegen, dit zorgt ervoor dat de tekst in het midden van z'n element komt te staan.
clear:both; toevoegen, dit zorgt ervoor dat het element niet links of rechts van iets anders komt te staan en dus onder de tip van de dag uit al komen.

Ja maar nu komt die juist onderelkaar op de index pagina te staan. wel netjes links de tip van de dag. in het midden een regel lager de geupdated en weer een regel lager en uiterst rechts de teller.

dit klopt niet. het moet op 1 regel blijven. (of gaat dit gewoon niet?)

op de pagina van "evenementen" moet de wanneer geupdate in het midden staan. door (:o<center></center>-zeg maar:o) ik weet het die code mag niet.... maar hoe dan wel???

op de index pagina moet die wanneer geupdated ook in het midden komen. (naarst de tip van de dag en tussen de teller in. precies zoals dat nu is.)

hoe moet t nu dan met de pagina evenementen???

ik zie niet wat je bedoeld.

Goeroeboeroe heeft mij toen gelleerd dat de letters iets van het menu af moesten staan: margin: 0 0 1em 10px;n (geloof ik)
dan stonden ze niet te dicht tegen het menu. (ze=de text)

nu staat de tabel meer tegen het rechter menu dan tegen het linker menu aan. (staat ongelijk en is geen gezicht)

hoe los ik dat op?
 
ik weet niet hoe ik nu dan verder meer moet.


iemand enige idee? of is mijn vraag nog te ingewikkeld misschien?
 
iemand enige idee? of is mijn vraag nog te ingewikkeld misschien?
Niet ingewikkeld, alleen even vergeten.

moet ik het nu wel of niet aanpassen:rolleyes:
Als het er uit ziet oals je wilt dan hoeft dat niet nee.

Ja maar nu komt die juist onderelkaar op de index pagina te staan. wel netjes links de tip van de dag. in het midden een regel lager de geupdated en weer een regel lager en uiterst rechts de teller.

dit klopt niet. het moet op 1 regel blijven. (of gaat dit gewoon niet?) [/QUOTE]
De tip van de dag neemt 42% van de breedte van het venster in, net teveel om die <h2> in het midden te kunnen krijgen. Je zou die h2 natuurlijk onder de teller kunnen plaatsen in de html, dan komt de <h2> netjes in het midden onder tip en teller te hangen.

op de pagina van "evenementen" moet de wanneer geupdate in het midden staan. door (:o<center></center>-zeg maar:o) ik weet het die code mag niet.... maar hoe dan wel???
text-align:center; dus, zoals ik hierboven aangaf.

op de index pagina moet die wanneer geupdated ook in het midden komen. (naarst de tip van de dag en tussen de teller in. precies zoals dat nu is.)
dat past domweg niet, sommige van die tips zijn te breed.


Goeroeboeroe heeft mij toen gelleerd dat de letters iets van het menu af moesten staan: margin: 0 0 1em 10px;n (geloof ik)
dan stonden ze niet te dicht tegen het menu. (ze=de text)

nu staat de tabel meer tegen het rechter menu dan tegen het linker menu aan. (staat ongelijk en is geen gezicht)

hoe los ik dat op?
Ah! Nu ie ik het probleem denk ik. Toevallig staat die evenemententabel op mijn scherm netjes in het midden tussen de twee menu's. Maar als ik in- of uitzoom blijft het rechtermenu inderdaad aan de rechterkant van het scherm hangen. Is makkelijk op te lossen. Zet de rechtermarge van het linker menu op 0 en geef de tabel margin:0 auto; mee dan komt hij netjes midden in het scherm te hangen tussen de twee menu's.
 
Ah! Nu ie ik het probleem denk ik. Toevallig staat die evenemententabel op mijn scherm netjes in het midden tussen de twee menu's. Maar als ik in- of uitzoom blijft het rechtermenu inderdaad aan de rechterkant van het scherm hangen. Is makkelijk op te lossen. Zet de rechtermarge van het linker menu op 0 en geef de tabel margin:0 auto; mee dan komt hij netjes midden in het scherm te hangen tussen de twee menu's.

Ik ken css en html nog niet goed, maar begrijp wel een beetje de codes en ongeveer hoe je iets aanpast. en leer nu steeds meer hierover.

Het is u eindelijk gelukt om de "geupdated" in het midden te krijgen op de evenementen pagina. op de index pagina staat deze wel naar mij zin. (ik wil ze toch op 1 regel houden) misschien dat ik de tips aanpas naar iets korters.

ik heb zelf de <h1> nog aangepast. Deze stonden niet in het midden. ik heb de code: text-align:center; gebruikt in de css en nu staan die <h1> netjes in het midden. (het is mijn kop titel voor de meeste pagina's)

dankzij jullie uitleg heb ik deze code onthouden en wist wat die zou doen met de text.

nu ging ik de site testen en vind zowel in de css als de html 2 kleine foten door de VALIDATOR:p jaja heb hem weer gebruikt.

de menu heeft 3x de zelfde kleur ofzoiets.... begrijp heel die fout niet.

en de ID "HOME" komt al 2x voor. dus dit moet ik ook nog aanpassen. dus ik moet wel steeds een andere naam gebruiken voor elke id.


maar nu het laatste nog:(

ik begrijp helemaal niets van je uitleg over die tabel netjes in het midden te krijgen op de evenementen pagina.

ze moeten ongeveer op deze pagina netjes tussen de 2 menu's staan. met aan beide kanten even veel ruimte.

op de index pagina staat alles al goed.

wat en hoe en waar verander ik iets dan?


edit: het probleem met die validator heb ik beide nu opgelost. ik moest de 2x home id even veranderen. heb die beide een aparte naam gegeven en aangepast in de html. en die kleuren ofzoiets van de tabel begreep ik ff niet.

nu heb ik de code van de css die de css validator gaf over gekopiert en toen was het goed.

goh! wat handig zo validator, nu weet ik wat ik er aan heb.

alleen die antwoord over dat centreren van me tabel begrijp ik nog steeds niet.
 
Laatst bewerkt:
Allereerst, de tekst op je voorpagina staat alleen bij sommige venstergrotes in het midden. He rechtermenu heeft een rechtermarge van 50px dus alle inhoud naast het menu komt 50px verder naar rechts terecht. Daardoor kan het in het midden komen maar dat hoeft niet. Om dit te bereiken moet je een aantal dingen doen. Allereerst moet je die rechtermarge bij het rechtermenu weghalen in de CSS.

Vervolgens:
je hebt op de voorpagina een div met id="inhoud", de tags zitten echter niet om de inhoud heen dus die haalt niets uit, dit moet gerepareerd worden.
HTML:
 <div id= "inhoud"> 
		</div>

        <h1 id="home">Wat is een skihut? Lees op deze site daar meer over.</h1>
		<p id="inleiding">Want hier vertellen wij u veel informatie van wat nu in en om de skihut gebeurt. Waar je de 
		aprésski feesten kan vinden, en waar zich nu een skihut bevind. Maar er is meer... Maar dit vertel ik later 
		weer wel, want zoals je ziet zijn we druk bezig met de website.</p>
moet zijn:
HTML:
 <div id= "inhoud"> 


        <h1 id="home">Wat is een skihut? Lees op deze site daar meer over.</h1>
		<p id="inleiding">Want hier vertellen wij u veel informatie van wat nu in en om de skihut gebeurt. Waar je de 
		aprésski feesten kan vinden, en waar zich nu een skihut bevind. Maar er is meer... Maar dit vertel ik later 
		weer wel, want zoals je ziet zijn we druk bezig met de website.</p>
</div>
De inhoud tussen de menu's valt dan dus volledig in de div met id="inhoud". Die div kun je het beste op iedere pagina gebruiken, alle tekst die je er in zit zal in het midden terecht komen. In de CSS moet je dan welhet volgende zetten.
#inhoud{margin:0 12.5em;} Dit geeft aan die div boven en onder een marge van 0 en links en rechts een marge van 12.5em. Je menu's zijn 12 em breed dus de tekst zal mooi in het midden komen, ook op een klein scherm.

Voor de tabel heb je dan nog wat nodig in het CSS bestand, namelijk:
table{margin:0 auto;} dat geeft boven en onder een marge van 0 en links en rechts een automatische margin. In niet antieke browers komt een element met margin:0 auto; in het midden terecht van het element waar het in zit.

Ik hoop dat dit duidelijk is.
 
Laatst bewerkt:
Allereerst, de tekst op je voorpagina staat alleen bij sommige venstergrotes in het midden. He rechtermenu heeft een rechtermarge van 50px dus alle inhoud naast het menu komt 50px verder naar rechts terecht. Daardoor kan het in het midden komen maar dat hoeft niet. Om dit te bereiken moet je een aantal dingen doen. Allereerst moet je die rechtermarge bij het rechtermenu weghalen in de CSS.

de menu's valt dan dus volledig in de div met id="inhoud". Die div kun je het beste op iedere pagina gebruiken, alle tekst die je er in zit zal in het midden terecht komen. In de CSS moet je dan welhet volgende zetten.
#inhoud{margin:0 12.5em;} Dit geeft aan die div boven en onder een marge van 0 en links en rechts een marge van 12.5em. Je menu's zijn 12 em breed dus de tekst zal mooi in het midden komen, ook op een klein scherm.

Voor de tabel heb je dan nog wat nodig in het CSS bestand, namelijk:
table{margin:0 auto;} dat geeft boven en onder een marge van 0 en links en rechts een automatische margin. In niet antieke browers komt een element met margin:0 auto; in het midden terecht van het element waar het in zit.

Ik hoop dat dit duidelijk is.

ik snap helemaal niets van die nieuwe codes, en begrijp echt niet wat je weg moet halen in de css. ik moet die rechtermarge wegahalen in het rechter menu. die 50px is.
ul.navigatie {
margin : 0 50px 1em 0;
}

maar dat is geen rechtermenu toch! er staat bij ul.navigatie.

daaronder staat wel die ul.rechts en een stukje erug op regel 17 ook.
maar daar staan geen 50px erbij. dus ik snap het totaaaaaaal niet wat ik weg moet halen. :(:(

en dan de /div heb ik op iedere pagina juist geplaatst. dit staat op mij pc alvast goed. (nog niet geupload)

maar die menu juist plaatsen, blijft een moeilijke uitleg.

je zecht: deze code plaatsen in de css:#inhoud{margin:0 12.5em;} maar ik heb geen enkele idee op welke regel in de css ik deze moet plaatsen:confused: ik kan op iedere regel dit plaatsen na een } teken.

waar komt die precies? die code?

en deze css code dan?

table{margin:0 auto;}

waar komt die dan???

ik begrijp echt niet hoe en waar je zoiets plaatst. ik ga wel een beetje begrijpen wat de code bv dan gaat doen.
ik weet het ik leer langzaam, maar zo leer ik wel de css code's en de nieuwe html strict kennen.

ik hoop dat je me wat duidelijkere voorbeelden kan geven hoe en vooral exact waar ik iets plaats.

ik begrijp niet als je zecht iets weghalen, als ik geen voorbeed hebt van: deze code weghalen. en/of vervangen.

dus waar plaats ik ze precies in de css dan? nu is nog niets veranderd aan mij menu.
 
Ik moet me diep schamen, ik had natuurlijk linkermenu moeten zeggen (waar Home en contact in staan). Dus ja bij ul.navigatie moet je 50px in 0 veranderen.

#inhoud wordt in je CSS nog niet genoemd dus waar je dat neerzet maakt geen biet uit, als het inderdaad maar niet tussen de {} van een ander element is.

table wordt al wel genoemd in de css, je kunt dus
Code:
table { 
text-align : center; 
border : 5px outset black; 
background : black; 
}
veranderen in
Code:
table { 
text-align : center; 
border : 5px outset black; 
background : black; 
[B]margin:0 auto;[/B]
}

Bij de volgorde van definities in een CSS bestand hoef je eigenlijk alleen rekening te houden met het feit dat CSS bestanden dor de browser van boven naar beneden gelezen worden en dat van twee conflicterende definities de laatste zal worden gevolgd. Als in een CSS bestand dus staat...
#p{color:black;}
#p{color:red;}
dan zal paragraaf tekst rood worden. Voor de rest kun je het gewoon in een volgorde zetten die voor jou overichtelijk is.
 
Laatst bewerkt:
Ik moet me diep schamen, ik had natuurlijk linkermenu moeten zeggen (waar Home en contact in staan). Dus ja bij ul.navigatie moet je 50px in 0 veranderen.

#inhoud wordt in je CSS nog niet genoemd dus waar je dat neerzet maakt geen biet uit, als het inderdaad maar niet tussen de {} van een ander element is.

Daarom snapte ik het al ff niet, ik begreep wel wat de css deed, maar bergreep ff niet waar je zoiets plaatste.



table wordt al wel genoemd in de css, je kunt dus

veranderen in
Code:
table { 
text-align : center; 
border : 5px outset black; 
background : black; 
[B]margin:0 auto;[/B]
}

dit idee had ik idd, al wel. maar twijfelde over de plaatsing in de css. tja wist ik het op welke regel.


Bij de volgorde van definities in een CSS bestand hoef je eigenlijk alleen rekening te houden met het feit dat CSS bestanden dor de browser van boven naar beneden gelezen worden en dat van twee conflicterende definities de laatste zal worden gevolgd. Als in een CSS bestand dus staat...
#p{color:black;}
#p{color:red;}
dan zal paragraaf tekst rood worden. Voor de rest kun je het gewoon in een volgorde zetten die voor jou overichtelijk is.


wel is me opgevallen toen ik bv een div id code maakte met 2x de zelfde naam ook niet mag.
dus als ik 2x de zelfde id heb dan verander ik deze gewoon van naam.

edit: ik zal morgen ofzo wel even verder gaan en de boel aanpassen en uploaden. je hoort me nog.

bedankt voor je goede hulp en uitleg:thumb: je hoort/leest me reactie nog.
 
wel is me opgevallen toen ik bv een div id code maakte met 2x de zelfde naam ook niet mag.
dus als ik 2x de zelfde id heb dan verander ik deze gewoon van naam.
Als het zinnig is om twee of meer elementen op dezelfde pagina dezelfde naam te geven kun je beter class gebruiken dan verschillende namen (moeilijker te onthouden en je CSS wordt er zo vol van). .class namen kun je zo vaak herhalen als je wilt.
 
edit: ik kan er niet van slapen.... toch maar ff bezig nog.

Ik moet me diep schamen, ik had natuurlijk linkermenu moeten zeggen (waar Home en contact in staan). Dus ja bij ul.navigatie moet je 50px in 0 veranderen.

ik heb dus in de css veranderd naar:

Code:
ul.navigatie { 
margin : 0 0 1em 0; 
}

dit werkte niet. de pagina "evenementen" komt de tabel juist uiterst links tegen het menu dan te staan. (nu weer de andere kant uit) ik dacht huh..... klopt weer niet.

ik dacht ik probeer die 0 weg te laten, ik dacht 2x een 0 ??? klopt dan weer niet.

ik dacht probeer de volgende css code:

Code:
ul.navigatie { 
margin : 0 1em 0; 
}

wat denk je? staat deze bijna perfect in het midden van de menu's. ook bij een andere scherm resolutie blijft het zelfde eruit zien. dus nu lijkt hij wel perfect.

maar of ik het juist hebt gedaan??? zoals ik zie wat ik heb, werkt hij goed.

de rest van de code heb ik aangepast, en staat er nu ook in. heb alles geupload dus, t werkt.

p.s. dat van dubbel plaatsen begrijp ik nu ook. ik begin nu de css beter te lezen.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan