website maken

[Rubensky]

Het is de website die ik nog aan het opbouwen ben. Mijn beginnende code staat in bericht #1 en daar moet onder het kopje fietsten een aantal merken komen met een uitschuif menu. Het liefst dat het menu er uit komt rollen als je er met je muis overheen gaat.

Ik bouw nu een nieuwe website ter vervanging van de oude daarom staat de code dus ook in mijn eerste bericht daar ben ik dus nu op aan het verder gaan.

 

[csshunter]

Hoi Rubensky1995,
Aaaaaaaah! Daar komt de aap uit de mouw!
Om verwarring te voorkomen is het het beste om heel duidelijk je vragen en antwoorden te formuleren.

• In post nummer #2 gaf jeskimo een link naar een tutorial voor een puur css dropdown-menu.
• In post nummer #13 zei je dat je er toch nog niet uit kwam (maar niet waarom niet).
• Intussen zag ik op de online site dat er geen tabel-opzet was (zoals in de startvraag nr. #1), maar een puur css-uitklapmenu. Daarom ging ik er van uit dat de code van je startvraag nu vervallen was.
• In post nummer #14 gaf ik een screenshot van hoe het nu is, en vroeg of je een tekeningetje wilde maken van hoe het moest worden.
• Er kwam geen tekeningetje, maar je zei dat je onder het kopje "fietsen" alleen de 3 merken wilde hebben.
• Ik ging dus verder met het model zoals het op de huidige site staat, en maakte daar aanpassingen bij (in post nr. #17).
• Op die suggesties reageerde je helemaal niet.
• Er kwam alleen nog een keer de vraag of iemand je wilde helpen.

Nu blijkt:
Je wilt helemaal geen verticaal menu met horizontale uitklappers, maar je wilt juist een horizontaal menu met verticale uitklappers!!!

Dus we moeten helemaal terug naar je startvraag-code.

• Daarin staat het hoofdmenu inderdaad horizontaal, en er is ook een blauwe balk.
• Maar het is nog steeds een tabel-opmaak.

Tips:

1. Zet altijd een testversie online (gewoon ergens op de bestaande site), dan kunnen er nooit misverstanden ontstaan.
2. Haal die testpagina eerst door de html-validator, en kijk of er iets mis is.
3. Haal die testpagina dan door de css-validator, en kijk of er iets mis is.
4. Overweeg of het principe van de opmaak geschikt is voor verschillende beeldschermformaten.

=======
Tot dusverre
We gaan even kijken:

• Dit is je versie van de startvraag: gdb-ori2.htm
  
  
• De html-validator zegt: 3 Errors, 4 warnings.
• De css-validator zegt: 5 fouten.
• De opmaak gaat uit van een inhoud-breedte van 1500px, plus een margin-left van 170px. De pagina-breedte vraagt dus een beeldscherm van minstens 1670px breed.
• Op mijn scherm van 1280*1024px kan ik daarom ongeveer een kwart van de paginabreedte (aan de rechterkant) niet zien: daarvoor moet ik eerst link-rechts scrollen. Op kleinere schermen (bv. tablets van 1024*768px of 800*600px) wordt dit alleen maar erger: horizontaal is ongeveer maar de helft of minder van de pagina te zien.
• Over mobieltjes hebben we het dan nog niet gehad...

tablet 800*600px

mobiel 320*480px​

=======
Wat nu?
Een ander model (zonder tabel en met css), waarbij de breedte flexibel is. Als er in de breedte niet genoeg menu-items op kunnen, moet wat er niet op past automatisch naar de volgende regel zakken. Een maximale pagina-breedte van ca. 1250px is daarbij wenselijk, zodat de tekstregels van de inhoud niet veel te lang gaan worden om prettig te kunnen lezen.

• Als opzetje om op verder te borduren: gdb-nw2.htm
  Verklein het browser-window, sleep de rechter-zijkant naar links, en kijk wat er gebeurt!

desktop 1280*1024px

tablet 800*600px

mobiel 320*480px​

• Leesvoer over o.a. het noodzakelijke Doctype en over Vreselijk Verboden Voorwerpen in de html-code: zie hier!

Met vriendelijke groet,
CSShunter

 

[Rubensky]

Dank voor je heldere uitleg ik zal het allemaal even op proberen te schrijven zoals ik het graag zou willen hebben en als ik vragen heb zal ik die proberen zo duidelijk mogelijk te formuleren.

Je hebt in zijn geheel gelijk met wat je allemaal schrijft. Ik zal bij het linkje beginnen(gdb-nw2.htm): Dit is nu precies zoals ik het wil hebben!! Maar dan alleen de kleuren even aanpassen. Mijn tweede vraag aan u is wilt u de code die u hier nu voor geschreven heeft ook even los plaatsen? En dan gaat het mij om de code waarmee het uitschuif menu word gemaakt en de code waarmee het inspringen van de pagina word geregeld.

Wat betreft het online zetten waar kan ik dit het beste (het liefst gratis) doen? en wat betreft de code fout hulp dit is echt super handig en ga het zeker gebruiken.

4 kan ik de code die u heeft gebruikt om het uitschuif-menu bij fietsen te maken zo kopiëren de tekst aanpassen en dan onder een ander menu plakken?

 

[csshunter]

1. "Dit is nu precies zoals ik het wil hebben!!"
Mooi zo!
De kleuren aanpassen zal geen probleem zijn.

=======
2. "... code ook even los plaatsen?"
Ja hoor, die staat eigenlijk al klaar als je de broncode van de pagina bekijkt.
De css is:

<style type="text/css">
html {
	height: 100%;
	padding-bottom: 1px;
	}
body {
	width: 95%;
	max-width: 1250px;
	margin: 0 auto;
	}
#menubalk {
	margin-top: 20px;
	padding: 15px;
	background: blue;
	border-radius: 20px;
	text-align: center;
	}
ul#main-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#main-nav li {
	margin: 5px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	position: relative;
	}
ul#main-nav li a {
	text-decoration: none;
	display: inline-block;
	width: 6.2em;
	padding: 0.3em 0;
	color: white;
	background: #003366;
	border-left: 2px solid #000066;
	}
ul#main-nav li a:hover, 
ul#main-nav	li a:focus {
	background: #336699;
	border-left: 2px solid yellow;
	}
ul#main-nav li ul {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	z-index: 2;
	display:none;
	}
ul#main-nav li:hover ul {
	display: block;
	}
ul#main-nav li ul li {
	margin: 0;
	display: block;
	}
ul#main-nav li ul li a {
	background: #008080;
	width: 6.9em;
	font-size: 0.9em;
	}
</style>

En het menu in de html is:

<div id="menubalk">
	<ul id="main-nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Over ons</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Fietsen</a>
			<ul>
				<li><a href="#">Gazelle</a></li>
				<li><a href="#">Batavus</a></li>
				<li><a href="#">Goldline</a></li>
			</ul>
		</li>
		<li><a href="#">Werkplaats</a></li>
		<li><a href="#">Winkel</a></li>
		<li><a href="#">Bezorging</a></li>
		<li><a href="#">Verzekering</a></li>
		<li><a href="#">Zadelmetingen</a></li>
		<li><a href="#">Aanbiedingen</a></li>
		<li><a href="#">Nieuws</a></li>
	</ul>
</div>

=======
3. "... online zetten: waar kan ik dit het beste (het liefst gratis) doen?"

• In feite is de site er al, en dan kan je het gratis doen door in een hoekje van de site (dat voor niemand te zien is) een map aan te maken waar je alle bestanden en mappen van de nieuwe versie in zet.
• Daarvoor is alleen nodig: de inlognaam en het wachtwoord van de site, dan kan je met een ftp-programma als FileZilla alles uploaden en daarna testen in verschillende browsers enz.
• Behalve als je niet helemaal zeker van je zaak bent, en bang bent om iets van de draaiende site te verknallen.
• In dat geval zou de webmaster van de site het uploaden voor zijn/haar rekening kunnen nemen.

=======
4. "Kan ik de code om het uitschuif-menu bij fietsen te maken zo kopiëren, de tekst aanpassen en dan onder een ander menu plakken?"
Ja, dat zou moeten lukken!

Succes!
Met vriendelijke groet,
CSShunter

 

[Rubensky]

Ik heb alweer een vraag: Is het mogelijk om van de code voor het menu een soort include-bestand te maken zodat ik niet steeds de gehele code hoef te kopiëren?

 

[csshunter]

Yessir!

• PHP-includes in een notendop

 

[Rubensky]

Ik wil nog even geen php gebruiken dus als er geen mogelijk is zonder php laat ik het even voor wat het is. In php ga ik mij later verdiepen. (als jullie vinden dat ik teveel vraag moeten jullie het zeggen)

 

[csshunter]

Nee, iets anders dan php (of shtml, dat komt voor een include op hetzelfde neer) is er niet, d.w.z. met een paar uitzonderingen.

1. Als je Dreamweaver gebruikt: die heeft een alternatief aan boord.

• In Dreamweaver kan je dan het menu in het Dreamweaver-template (.dwt) zetten, in een zogenaamde "non-editable region".
• Dat is minder elegant en ook niet echt handig (zie hier waarom), maar het kan wel.

2. Of je zou een <iframe> voor het menu moeten gaan gebruiken.

• Maar dat is erg af te raden (zie: Alles over frames van de webrichtlijnen.nl).

 

[Rubensky]

css hunter,

Jij hebt in bericht #22 voor mij een stuk code geschreven zou je voor mij die gehele code even kunnen plaatsen? Zowel de HTML als de CSS? Dan kan ik die gestructureerd in mijn programma plakken en daarop verder gaan.

Bedankt

 

[csshunter]

O-o-o!

Je bedoelt de code van de testpagina gdb-nw2.htm?

De css had ik al voor je uitgeknipt in nummer #24, en daar staat ook de html voor het menu bij.
En zoals ik zei: dat had niet eens gehoeven, want de volledige code, inclusief alle html van kop tot staart, staat ... in de broncode van de pagina!

 

[Rubensky]

Ik heb nog een vraag ik wil nu onder het menu fietsen precies het zelfde als het plaatje uit bericht #14 hoe ga ik dit aanpakken?

3 Hoe ga ik ervoor zorgen dat alles wat ik op de website zet nu mee beweegt als ik de pagina kleiner maak? Sluit ik dan de de laatste Div pas helemaal aan het einde?

4: zou je voor mij de foto uit het mee geüplode bestand willen omzetten in code? Ik wil namelijk dat de foto's die nu in de balk verwerkt zitten echt gaan werken. Het moet ongeveer net zo'n balk worden als bovenaan de pagina

5 nog een vraag waarom kan ik met de huidige opzet geen foto BOVEN de menubalk plaatsen?

6: hoe kan ik met html een roll-over afbeelding realiseren?

7: hoe kan ik ervoor zorgen dat er een achtergrond kleur of foto op mijn pagina komt? En dan het liefst ter grote van de bovenste menubalk?

8: hoe kan ik ook alweer een balkje om een link heen bouwen? het likt niet ik doe border-radius: 20px;
padding: 15px;
Maar ik zie niets


(Als ik er iets voor moet betalen is dat geen probleem want ik vraag wel erg veel.)

 

[Rubensky]

Echt niemand die mij kan helpen met de bovenstaande vragen?

 

[csshunter]

Hoi Rubensky1995,

Ik denk dat ik wel zo ongeveer weet waarom er geen reactie komt.
Je wilt als beginner een website met de hand maken. Niets aan de hand, iedereen moet eens als beginner begonnen zijn.

1. Je begint met een vraag over hoe je een tabel-menu uitschuifbaar kunt krijgen. Het maken van een uitschuifmenu hoort eigenlijk tot de basiskennis van html en css, maar is nu ook weer niet het allermakkelijkste. Je krijgt van diverse helpmij-vrijwilligers links naar tutorials.
2. Dan vraag je tot twee keer toe of iemand "even zo'n menu voor je wil maken". Je krijgt uitgebreide antwoorden over hoe je het zelf kan doen. En daarna een pasklaar voorbeeld dat je alleen maar hoeft te downloaden.
3. Dan komt de vraag hoe je iets bij een hover een andere kleur kan geven. Dat is pure basiskennis, maar je krijgt wel antwoord.
4. Dan komt de vraag hoe je aan de code van het pasklare antwoord van het uitschuifmenu komt. Dat is pure basiskennis: het zit gewoon in de broncode van de pagina. Maar je krijgt het ook nog eens in een kopieer- en plak venstertje aangeboden met uitleg.
5. Dan komt de vraag of het menu in een include-bestand kan komen. Is eigenlijk basiskennis van php, maar je krijgt een link naar een kant-en-klare gebruiksaanwijzing.
6. Dan komt nog een keer de vraag of de hele code van het uitschuifmenu geplaatst kan worden. - Daarop was al antwoord gegeven: herhaald wordt dat het gewoon in de broncode zit.
7. Dan komt de vraag hoe je een submenu aan het uitschuifmenu kunt toevoegen. Het principe was al uitgelegd, met wat experimenteren zou je er zelf moeten kunnen komen.
8. En de vraag hoe de pagina's zich kunnen aanpassen aan de schermbreedte. Basiskennis!
9. En de vraag of iemand een afbeelding met een rijtje logo's voor je wil omzetten in code. Basiskennis!
10. En de vraag waarom er geen foto boven de menubalk kan komen. Kan wel: basiskennis!
11. En de vraag hoe je een rollover op een afbeelding moet zetten. Basiskennis!
12. En de vraag je een achtergrondkleur of achtergrond-afbeelding op een pagina zet. Basiskennis!
13. En de vraag hoe je een kadertje om een link moet zetten. Basiskennis!
14. En ... als ik me niet heel erg vergis, zie ik nog meer van dit soort vragen aankomen.

Weet je wat het is?
Als je geen bestaand website-model wilt gebruiken (een kant en klaar sjabloon, al of niet ingebouwd in een CMS), maar handmatig een site wilt wilt opbouwen, is vakkennis nodig. Om te beginnen: basiskennis van html en css!

• Want: websites bouwen is een vak. En een vak moet je leren, zoals elk vak: dat heb je niet zomaar onder de knie.
• D.w.z. basiskennis veroveren, veel lezen, veel Google-werk en daar het beste uit plukken, veel proberen, en veel tijd in steken!
• Wat je in feite vraagt, is of we je bij de hand willen nemen en je stap voor stap leren hoe je de website in elkaar moet zetten. Dat komt er op neer: of we je html en css willen leren, of we de website voor je willen bouwen en daarbij tegelijkertijd uitleggen hoe het gedaan is, en hoe je 'm online krijgt.
• Ik ben erg bang dat er hier op helpmij geen vrijwilliger te vinden is die je op zo'n manier een persoonlijke cursus wil geven.
• Je kunt hier ook regelmatig vragen stellen (niemand die je tegenhoudt!), maar dan kan het wel eens erg lang duren voordat je antwoord krijgt op al je vragen.

Komt de vraag: en tegen betaling?
Misschien zou iemand het bovenstaande tegen betaling willen doen, maar dat betwijfel ik eerlijk gezegd.

• Wat ook tegen betaling zou kunnen (en waarschijnlijk veel goedkoper): je wensen voor de site goed op papier zetten, en een ervaren iemand de site laten bouwen.
• Blijf je bij "zelf doen", dan kan je tegen betaling een cursus webbouw volgen. Voor zover ik weet aan de prijzige kant, en geen idee welke goede zijn; daar heb ik geen ervaring mee.
• Niet tegen betaling kan je ook zelfstudie doen: de specificaties van html en css uit je hoofd leren, tutorials op internet afstruinen, en bv. Het Groene Boek downloaden (550 pagina's pdf). Het is wel in het Engels, maar ja, het meeste over website-design is nu eenmaal in het Engels.

En als je ergens vast mocht lopen en je een speciale concrete vraag hebt die boven het niveau van basiskennis uit komt ... dan kan je altijd op dit forum terecht.

Met vriendelijke groet,
CSShunter

 

[Rubensky]

Ik begrijp dus dat ik jou niets meer kan vragen csshunter fijn dat jij de kennis wel hebt GENIET DAARVAN!!!

 

[Rubensky]

Weet er iemand hoe je de tussen ruimte tussen tabbelen kan vergroten in html? Dus je hebt <td> en dan tekst</td en dan tussenruimte en dan weer <td></td> en ik wil daar ruimte tussen nu doe ik dat met &nbsp maar dat is een beetje onoverzichtelijk