Geneste weergave | Lineaire weergave

martijn1 · 14-03-2010 19:04:23

Ik heb een 2de site gemaakt.

Willen jullie kijken of ik de code nu wel goed gedaan heb?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ombouw-woerden</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script language="JavaScript" src="javascript.js"></script> 

</head>

<body onload="MM_preloadImages('images/Home+mouseover.jpg','images/wii+mouseover.jpg','images/xbox360+mouseover.jpg','images/psp+mouseover.jpg','images/nintendo+mouseover.jpg','images/contact+mouseover.jpg')">

<div id="header">

</div>

<div id="home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/Home+mouseover.jpg',1)"><img src="images/Home.jpg" alt="Home" name="Home" width="130" height="64" border="0" id="Home" /></a>

</div>

<div id="wii">

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WII','','images/wii+mouseover.jpg',1)"><img src="images/wii.jpg" alt="WII" name="WII" width="81" height="64" border="0" id="WII" /></a></div> 

<div id="xbox360">

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Xbox 360','','images/xbox360+mouseover.jpg',1)"><img src="images/xbox360.jpg" alt="Xbox 360" name="Xbox 360" width="126" height="64" border="0" id="Xbox 360" /></a></div>

<div id="psp">

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('PSP','','images/psp+mouseover.jpg',1)"><img src="images/psp.jpg" alt="PSP" name="PSP" width="86" height="64" border="0" id="PSP" /></a></div>

<div id="nintendo">

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nintendo','','images/nintendo+mouseover.jpg',1)"><img src="images/nintendo.jpg" alt="Nintendo" name="Nintendo" width="174" height="64" border="0" id="Nintendo" /></a></div>

<div id="contact">

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact+mouseover.jpg',1)"><img src="images/contact.jpg" alt="Contact" name="Contact" width="151" height="64" border="0" id="Contact" /></a></div>

<div id="maincontent">

<font style="margin-left:20px;">Hallo</font>

</div>

</body>

</html>

Style.css

Code:

* {

    padding:0;

    margin:0;

}

html, body {

    width:100%;

        background-image:url("images/bg-repeat.jpg");

}

#container

{

    position:relative;

    margin:auto;

    width:1024px;

    height:768px;

}

#header

{

    background-image:url(images/header.jpg);

    width:748px;

    height:156px;

    margin-top:10px;

    margin-left:250px;

}

#home

{

    background-image:url(images/Home.jpg);

    width:130px;

    height:64px;

    margin-top:0px;

    margin-left:250px;

}

#wii

{

    background-image:url(images/wii.jpg);

    width:81px;

    height:64px;

    margin-top:-64px;

    margin-left:380px;

}

#xbox360

{

    background-image:url(images/xbox360.jpg);

    width:126px;

    height:64px;

    margin-top:-64px;

    margin-left:461px;

}

#psp

{

    background-image:url(images/psp.jpg);

    width:86px;

    height:64px;

    margin-top:-64px;

    margin-left:587px;

}

#nintendo

{

    background-image:url(images/nintendo.jpg);

    width:174px;

    height:64px;

    margin-top:-64px;

    margin-left:673px;

}

#contact

{

    background-image:url(images/contact.jpg);

    width:151px;

    height:64px;

    margin-top:-64px;

    margin-left:847px;

}

#maincontent

{

    background-image:url(images/maincontent.png);

    width:749px;

    height:519px;

    margin-top:0px;

    margin-left:250px;

    font-family:Arial, Helvetica, sans-serif;

}

javascript.js

Code:

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

Alvast bedankt

Matthijn · 14-03-2010 19:20:42

Je html 'bestaat nu uit divjes' omdat je vast ergens hebt gehoord dat je dat moet gebruiken en diegene zei vast geen tabellen gebruiken. Maar dit is niet waar.

Je moet dingen gebruiken waarvoor het ist, lijsten in ul, headings in h1 enz, paragraven in p enzovoort. Niets zie ik terug komen.

Sterker nog ik zie enkel maar plaatjes, hoe wil je ooit dat google nu snapt wat er op je site staat? Voor de 'onmouseovers' zou ik geen javascript gebruiken, maar gewoon CSS, evt dmv 'sprites' zodat je je preloading JS ook de deur uit kan doen.

Anjo · 14-03-2010 19:32:48

Alles zelf geschreven of heeft een programma dat voor je gedaan? Je code ziet eruit alsof het door een of ander programma is uitgepoept. Veel dingen zien er nogal omslachtig uit en dump je inline css als je toch al wel extern css-bestand hebt, gewoon lekker met classes ed werken, stuk overzichtelijker. Verder vraag ik me af of je je js wel nodig hebt en of je zelf enig idee hebt van hoe die code in elkaar steekt...
Verder geen idee of t wel klopt wat je hebt gedaan door gebrek aan online voorbeeld.

martijn1 · 14-03-2010 19:59:51

De site zit goed in elkaar.
Ik heb alles zelf geschreven.
Ik heb nog geen tekst gebruikt vandaar nog geen <ul> en andere tags.

Maar waarom geen mouseovers?

Alvast bedankt

Ikke · 14-03-2010 20:10:04

Je kunt wel mouseovers gebruiken, maar daar is geen javascript voor nodig. CSS heeft zelf ondesteuning voor dat soort dingen.

Voor de rest: Je 'menu' is bijvoorbeeld een lijst, die zou best in een UL kunnen.

Ik zou je aanraden om nog eens in je vorige topic te kijken, en goed bestuderen hoe wij hebben geadviseerd om het aan te pakken.

martijn1 · 14-03-2010 20:12:11

Maar waarom zo(zoals jullie zeggen), als het toch ook zo kan(mijn manier)?
Is dit ergens beter voor?

Ikke · 14-03-2010 20:17:37

Ja. Niet iedereen heeft javascript aan staan. Het wordt altijd aangeraden om je website zoveel mogelijk te laten werken zonder javascript, en daarna met javascript dingen verbeteren.

Zie ook: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

martijn1 · 14-03-2010 20:21:28

Ok, dat snap ik.
Ik kan die mouseover ook doen via css.

Maar als we het niet over de mouseovers hebben, waarom is het dan niet goed?
Waarom lists, en tables gebruiken, als ik ook via margins kan?

Kunnen jullie een voorbeeld geven, van een site die jullie hebben gemaakt?

Ikke · 14-03-2010 20:28:38

Ten eerste maakt dat de website beter onderhoudbaar. Het maak de boel een stuk overzichtelijker. Je krijgt dan niet zulke problemen als je in je eerste website kreeg, waarbij de boel niet netjes aangesloten zat en bij het vergroten de website helemaal uit zijn verband valt. Dat wil niet zeggen dat door het te structureren niet fout kan doen, maar het maakt het makkelijk om het goed te doen, en later ook nog aan te passen.

Ten tweede krijg je steeds meer te maken met het semantische web Je wilt bijvoorbeeld dat google je website goed kan lezen en weet wat er in staat. Door alles netjes te structureren, krijgt google daar beter inzicht in, en kan je site beter beoordelen.

martijn1 · 14-03-2010 20:30:54

Ok,
Wil je misschien kijken, of deze site dan wel goed uitgelijnd is?
http://www.mediafire.com/?0m1d35wjngk

Alvast bedankt

Ikke · 14-03-2010 20:48:33

Ik heb geen zin/tijd om dat lokaal te testen, sorry.

martijn1 · 14-03-2010 20:55:24

Ik denk dat ik bij de volgende site hiermee begin.
En dat ik deze site nog zo laat.

Tim · 14-03-2010 21:23:53

(14-03-2010 20:48:33)Ikke schreef: Ik heb geen zin/tijd om dat lokaal te testen, sorry.[size=11px][/size]

Dat is inderdaad het probleem, in vredesnaam waarom kwak je dat ding niet gewoon ergens online? Das toch evenveel werk als hem bij een filehoster neerzetten?

michielh · 15-03-2010 00:52:50

(14-03-2010 21:23:53)Tim schreef: Dat is inderdaad het probleem, in vredesnaam waarom kwak je dat ding niet gewoon ergens online? Das toch evenveel werk als hem bij een filehoster neerzetten?

Couldn't agree more

En wat betreft de MM_swap_image functie van dreamweaver; met behulp van css kun je al heel ver komen!

Jasper · 15-03-2010 00:54:32

ik heb hem even gedownload, 't is dreamweavercode

Tim · 15-03-2010 02:18:03

(15-03-2010 00:52:50)michielh schreef: MM_swap_image functie van dreamweaver

Ah, daar kwam 'ie dus vandaan! Ik kon me al niet voorstellen wie er JS gebruikt voor een rollover button als dat makkelijk met CSS kan. Had hem al gegoogled maar kon niks vinden

martijn1 · 15-03-2010 07:31:26

De mouseovers zijn van dreamweaver ja.
Wat is daarmis mee.

Jasper · 15-03-2010 09:37:56

Alles.

1) het is javascript, terwijl het met CSS kan (probeer zo min mogelijk van JavaScript af te laten hangen)
2) het is een teringzooi in je sourcecode
3) Google kan hier NIETS mee, er zijn alleen wat plaatjes
4) Je leert hier niets van.

Anjo · 15-03-2010 10:08:32

(14-03-2010 19:32:48)Anjo schreef: Alles zelf geschreven of heeft een programma dat voor je gedaan?

(14-03-2010 19:59:51)martijn1 schreef: Ik heb alles zelf geschreven.

(15-03-2010 07:31:26)martijn1 schreef: De mouseovers zijn van dreamweaver ja.

Je spreekt jezelf tegen

Verder volledig eens met Jasper!

michielh · 15-03-2010 13:14:08

probeer eens in plaats van

Code:

<div id="home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/Home+mouseover.jpg',1)"><img src="images/Home.jpg" alt="Home" name="Home" width="130" height="64" border="0" id="Home" /></a>

</div>

De volgende code:

Stylesheet css code

Code:

#home a img {

background-image : url(images/Home.jpg);

}

#home a img:hover {

background-image : url(images/Home+mouseover.jpg);

}

html code

Code:

<div id="home"><a href="#"><img src="images/Home.jpg" alt="Home" name="Home" width="130" height="64" border="0" id="Home" /></a>

</div>

Wat nóg beter is, is de afbeeldingen samenvoegen tot 1 afbeelding en met de margin te spelen zodra de image gehovered wordt.

Heb het niet getest btw

Jasper · 15-03-2010 13:29:22

zoals je ziet in bovenstaande oplossing, hoewel nog steeds niet semantisch perfect, is dat je dus GEEN javascript nodig hebt om te hoveren.

martijn1 · 15-03-2010 16:08:07

Maar als ik alles ga samenvoegen, dan bestaan de plaatjes zeg maar niet meer?

Tim · 15-03-2010 16:12:21

Wat samenvoegen? Kloppen de paden naar de plaatjes wel?

martijn1 · 15-03-2010 16:16:03

De paden?

Wat ik bedoel dat ik bij deze site op het moment maar 2 plaatjes heb.
En dan ook nog stuk of 5 buttons.
Zou ik deze buttons in een table zetten?

Tim · 15-03-2010 16:33:24

Een navigatiemenu is toch geen tabulaire data? Dan hoort het dus niet in een table thuis. Menu's zijn lijsten en horen dus met list tags samengesteld te worden.
http://www.html-site.nl/rollover-menu.php

martijn1 · 15-03-2010 16:39:09

Ok bedankt.

Kan je misschien een voorbeeld geven van een site die jij gemaakt heb, waar je dit ook toegepast heb?

En in dat voorbeeld gebruiken ze geen images, maar dat is ongeveer hetzelfde, neem ik aan.

Tim · 15-03-2010 16:48:25

(15-03-2010 16:39:09)martijn1 schreef: Kan je misschien een voorbeeld geven van een site die jij gemaakt heb, waar je dit ook toegepast heb?

Ik heb zelf niks online staan

Maar bijna iedere pagina gebruikt deze techniek. Als je de HTML can die tutorial combineert met de CSS van Michielh, heb je wat je nodig hebt.

Jasper · 15-03-2010 16:51:38

(15-03-2010 16:39:09)martijn1 schreef: Kan je misschien een voorbeeld geven van een site die jij gemaakt heb, waar je dit ook toegepast heb?

http://www.lobbus.nl

martijn1 · 15-03-2010 17:00:00

Danke, die ga ik even bestuderen.

Tim · 15-03-2010 17:02:43

(15-03-2010 16:51:38)Jasper schreef:
(15-03-2010 16:39:09)martijn1 schreef: Kan je misschien een voorbeeld geven van een site die jij gemaakt heb, waar je dit ook toegepast heb?

http://www.lobbus.nl

Jezus, wat een eng ding, die mascotte!

martijn1 · 15-03-2010 17:26:08

Ik ga dit bij volgende site pas toepassen.

martijn1 · 15-03-2010 19:03:17

Hier is ie dang, ik heb hem online gezet.

Ik zou graag een paar aanpassingen willen horen, dit is nog niet uiteindelijke, maar hierna komt een andere host.

http://webdesignforyou.bvandewater.com/index.html

Tim · 15-03-2010 20:51:25

Wat is er veranderd? Ik zie nogsteeds een menu van DIV's en JS rollovers?

martijn1 · 15-03-2010 20:53:40

Zei ik dat er wat veranderd was?

Tim · 15-03-2010 21:14:28

Oké... Maaruhhh... Dan zijn de opmerkingen waarschijnlijk ook niet veranderd

Dus: klok, klepel verhaal. Het idee is goed maar je semantiek klopt nog niet. Probeer JS te vermijden als het niet nodig is.

martijn1 · 15-03-2010 21:18:44

Ok, ik zal er aan gaan werken.

Bedankt voor het advies

atimmer · 15-03-2010 21:19:03

(15-03-2010 20:53:40)martijn1 schreef: ei ik dat er wat veranderd was?

Als je niets met onze tips doet waarom zouden we dan nog tips geven? En hoe kan je dan ooit iets leren?

martijn1 · 15-03-2010 21:26:19

Ik doe er zeker wat mee, maar er werd gevraagd of iets was veranderd.

Tim · 15-03-2010 21:29:29

Nog even over semantiek.

Citaat:se·man·tiek (de ~ (v.))
1 leer van de betekenis van de woorden en woordgroepen => betekenisleer

Kijk, bij alles wat je maakt, goed naar wat voor soort gegevens het zijn.

Code:

<font style="margin-left:30px;">Welkom op onze website.</font><br /><br /><br />

 <font style="margin-left:30px;"><b>Waarom ons pakken?</b></font><br />

 <font style="margin-left:30px;"><b><i>+</i></b> Wij hebben een snelle service.</font><br />

 <font style="margin-left:30px;"><b><i>+</i></b> Wij kunnen u een uniek webdesign aanbieden.</font><br />

 <font style="margin-left:30px;"><b><i>+</i></b> We hebben een goede prijs/prestatie verhouding</font><br />

Ik zie een titel "Welkom op onze website", een subtitel "Waarom ons pakken?" en een stuk inhoudelijke tekst: een opsomming. Opsommingen maken we met een lijst, in dit geval een unordered list. Het zijn geen losse regels tekst zoals je het nu gedefiniteerd hebt, semantisch gezien zou het dus ongeveer als volgt moeten zijn.

Code:

<h1>Welkom op onze website</h1>

<h2>Waarom ons pakken?</h2>

<ul>

<li>Wij hebben een snelle service.</li>

<li>Wij kunnen u een uniek webdesign aanbieden.</li>

<li>We hebben een goede prijs/prestatie verhouding.</li>

</ul>

Zoals je ziet maakt dit het geheel een stuk overzichtelijker, je ziet beter hoe iets in elkaar zit en je code wordt er schoner van.

martijn1 · 15-03-2010 21:33:43

Jep, ik zie het net ook, sorry.

Ik zal het aanpassen.

Super

Tim · 15-03-2010 21:36:26

Om dezelfde reden hoort je menu dus ook van een list gemaakt te zijn. Als dat niet vanzelfsprekend is. Denk goed na als je iets maakt!

Je bent echt wel op de goede weg maar, naast dat je iets met ons commentaar doet, ga zelf ook op onderzoek uit. Er staan in dit topic inmiddels genoeg keywords waarmee je zelf een hoop dingen kunt opzoeken en leren.

martijn1 · 15-03-2010 21:41:23

Ik weet nu genoeg, maar het punt is als ik die lists ga maken, javascript weg, ben ik toch weer een uurtje of 2 verder.
En op het moment beschik ik niet over die tijd.

Alvast allemaal bedankt

Jasper · 16-03-2010 09:01:56

Eerste post:

(15-03-2010 19:03:17)martijn1 schreef: Gisteren 19: 03

Laatste post:

(15-03-2010 21:41:23)martijn1 schreef: Gisteren 21:41

Had je wat met onze tips gedaan, dan was je al klaar geweest.

martijn1 · 16-03-2010 15:48:21

Maar ik heb ook nog andere dingen in de tussentijd te doen he

Jasper · 16-03-2010 17:11:42

(16-03-2010 15:48:21)martijn1 schreef: Maar ik heb ook nog andere dingen in de tussentijd te doen he

ja dat kan niet hoor!

Je mag niet meer slapen, niet meer eten, niet meer naar je vrienden...!

martijn1 · 16-03-2010 17:17:39

Ah damn, dan maar een onvoldoende morgen voor biologie

Maar ik heb dus niet die list gemaakt, ik wil hemzeg maar horizontaal krijgen.
En ik heb ook al geen bullets meer.

Maar hij wil niet horizontaal gaan?

Dit is de code :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<style type="text/css">

#nav {

    width: 100%;

    float: left;

    margin: 0 0 3em 0;

    padding: 0;

    list-style: none;

    background-color: #f2f2f2;

    border-bottom: 1px solid #ccc;

    border-top: 1px solid #ccc; }

#nav li {

    float: left; }

#nav li a {

    display: block;

    padding: 8px 15px;

    text-decoration: none;

    font-weight: bold;

    color: #069;

    border-right: 1px solid #ccc; }

#nav li a:hover {

    color: #c00;

    background-color: #fff; }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Een goedkope website voor u</title>

<script language="JavaScript" src="js.js"></script> 

</head>

<body onload="MM_preloadImages('images/FAQ+mouseover.jpg','images/contracteer ons+mouseover.jpg','images/bestel nu+mouseover.jpg','images/web-design_10+mouseover.jpg','images/home+mouseover.jpg','images/bekijk onze aanbiedingen+mouseover.jpg','images/bestel nu!+mouseover.jpg')">

<div id="container">

<div id="header">

</div>

<div id="maincontent">

p>&nbsp;</p>  <p>&nbsp;</p>  <p>&nbsp;</p>  <p>&nbsp;</p>

<h2 style="margin-left:160px;">Welkom op onze website</h2><br /><br />

<h3 style="margin-left:50px;">Waarom ons pakken?</h3><br />

<ul>

<li style="margin-left:50px;">Wij hebben een snelle service.</li>

<li style="margin-left:50px;">Wij kunnen u een uniek webdesign aanbieden.</li>

<li style="margin-left:50px;">We hebben een goede prijs/prestatie verhouding.</li>

</ul><br />

</div>

<div id="leftcontentup">

</div>

<div id="leftcontentbottem">

</div>

<div id="bestelnu1"><a href="bestel nu.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bestelnu1','','images/bestel nu!+mouseover.jpg',1)"><img src="images/bestelnu1.jpg" alt="bestelnu1" name="bestelnu1" width="182" height="42" border="0" id="bestelnu3" /></a>

</div>

<div id="aanbiedingen"><a href="aanbiedingen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Aanbiedingen','','images/bekijk onze aanbiedingen+mouseover.jpg',1)"><img src="images/aanbiedingen.png" alt="Aanbiedingen" name="Aanbiedingen" width="180" height="42" border="0" id="Aanbiedingen" /></a>

</div>

<div id="navigatie">

<ul>

    <li><a href="index.html"></a><img src="images/home.jpg" width="100" height="66" /></li>

    <li><a href="bestel nu.html"></a><img src="images/bestelnu2.jpg" width="111" height="66" /></li>

    <li><a href="over ons.html"></a><img src="images/overons.jpg" width="86" height="66" /></li>

    <li><a href="contact.html"></a><img src="images/contact.jpg" width="132" height="66" /></li>

    <li><a href="faq.html"></a><img src="images/FAQ.jpg" width="111" height="66" /></li>

</ul>

</div>

</body>

</html>

Alvast bedankt

Tim · 16-03-2010 17:20:19

Omdat 'ie in je css #nav heet en in je html #navigatie.

martijn1 · 16-03-2010 18:44:36

Ok,

Bij index heb ik het nu toegepast.
Alleen nog de mouseovers nu maken.

http://webdesignforyou.bvandewater.com/index.html

martijn1 · 16-03-2010 20:27:08

Hallo,

Ik probeer de mouseovers te maken, maar op geen enkele manier lukt het.

Kan iemand helpen.

Dit is de list :

Code:

<ul>

    <li><a href="index.html"></a><img src="images/home.jpg" width="100" height="66" /></li>

    <li><a href="bestel nu.html"></a><img src="images/bestelnu2.jpg" width="111" height="66" /></li>

    <li><a href="over ons.html"></a><img src="images/overons.jpg" width="84" height="66" /></li>

    <li><a href="contact.html"></a><img src="images/contact.jpg" width="124" height="66" /></li>

    <li><a href="faq.html"></a><img src="images/FAQ.jpg" width="111" height="66" /></li>

</ul>

Alvast bedankt

Tim · 16-03-2010 20:35:52

En de CSS die je geprobeerd hebt?

Geneste weergave \| Lineaire weergave 2de site, is hij goed?
Auteur	Bericht