site voor school

[anoniem]

ik vroeg me af of jullie voor mij een site kunnen bekijken die ik voor school moet maken, ik mag alleen html en css gebruiken, dus geen jquery ofzo. ik heb hem even online gezet op [url]www.mooienieuwewebsite.nl[/url] ik sta open voor alle tips, om het overzichtelijker te maken, mijn leraar beoordeeld ook of de code er goed uit ziet, dus daar zouden mensen mij miss ook mee kunnen helpen. over het algemeen gaat het om het uiterlijk. ik heb nog alleen een index. maar de rest is zo gemaakt. alvast bedankt!

[anoniem]

Ziet er niet slecht uit voor je eerste site. Je code is alleen nog [url=http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mooienieuwewebsite.nl%2F]niet helemaal foutvrij[/url]. De fouten zijn er vrij makkelijk uit te halen door de [i:da5e2036ef]center[/i:da5e2036ef]-tag eruit te halen en een extra regel in te voegen voor klasse wrapper:[code:1:da5e2036ef].wrapper{ margin: 0 auto; /* verkorte versie van "margin: 0 auto 0 auto;" */ }[/code:1:da5e2036ef]Dimensies voor afbeeldingen geef je niet op in de HTML maar kan je weglaten of doe je desnoods ook met CSS. Verder mis ik nog een titel in de pagina, hij heet nu "Untitled Document". Als laatste opmerking een iets algemenere: je gebruikt een HTML5-doctype maar maakt geen gebruik van de mogelijkheden die HTML5 biedt. Misschien is het voor het vak niet gelijk nodig, maar bijvoorbeeld alle gradients zijn te vervangen met pure CSS. Enkele goede sites om inspiratie op te doen met HTML5+CSS3 zijn [url=http://www.css3.info/]CSS3.info[/url] en [url=http://css-tricks.com/]CSS-tricks[/url], maar er zijn er nog legio meer. Succes! - Bas

[anoniem]

van de gradient optie in css3 ben ik bekend, maar ik mag geen css3 gebruiken:( de reden van de html5 doctype is dat ik nog een formulier wil maken met html5 dingen. zoals (placeholdg er, autofocus en e-mail input). (php om te versturen madus ook niet, althans krijg je geen hoger cijfer voor) ik ga de center tag weg halen en bedankt voor de tip van de wrapper:) verder vind je het uiterlijk niet te druk? de achtergrond? EDIT: ik heb nu de center weg gehaald en de margin: 0 auto; gedaan, maar dan staat alles f*** up! wat moet ik doen?? ik kom er niet zo snel uit. waarschijnlijk moet ik heel de css aanpassen? ofniet? EDIT-EDIT: heb hem gefixt. met wrapper text-align: center; maar kan ik nu nog text gewoon links uitlijnen, door bijvoorbeeld binnen een div nog een text-align te zetten?

[anoniem]

Ik zou de wrapper geen class maar een id geven en met de wrapper de site centreren da's mooier op een groter scherm. Eigenlijk geef je meestal de positionerings divs waarvan de naam 1x voorkomt op een pagina een "id". Zoiets: #wrapper { position : relative; margin-left : -500px; width : 1000px; left : 50%; } edit: en dan de breedte uit de body halen !! In de css ook de body bovenaan in het document en dan de op 1 na belangrijkste de wrapper. En misschien nog wat commentaren hier en daar erbij in je codes zodat je later ook nog weet wat je allemaal hebt gedaan. En dan kun je in je tekst nog de speciale tekens veranderen. Italië en één Je kunt de urls naar de plaatjes in de css nog tussen enkele quootjes zetten. title="bladieblalinkje" in de links in je html. En je kunt nog wat metatags toevoegen bv. de description. Als je op een groot scherm F11 doet zie je je body kleur die is lichtgroen. Misschien is het iets om die kleur #FEFF99 te maken dan loopt het geel van je verloopje gewoon door aan de onderkant. text-transform:uppercase is misschien iets voor je menu. En meer kan ik ff niet verzinnen. suc6

[anoniem]

Je menu heb je nu als losse linkjes in een div zitten. Een menu is semantisch gezien een lijst en een lijst zet je in het element voor een lijst; <ul> ([i:e3ce7ff27a]u[/i:e3ce7ff27a]nurdered [i:e3ce7ff27a]l[/i:e3ce7ff27a]ist; lijst zonder duidelijke vorlgoorde). En als je toch html5 wilt gebruiken kan je ook nog het <nav> element gebruiken ipv een div (wel even "display:block;" voor de nav doen). Maar aangezien je geen JS mag gebruiken zal <nav> niet werken in oudere IE versies. [code:1:e3ce7ff27a] <nav> <ul> <li><a href="iets.html">link</a></li> <li><a href="ietsanders.html">link2</a></li> </ul> </nav> [/code:1:e3ce7ff27a]

[anoniem]

[quote:51f72cbf37="glompie"]Zoiets: #wrapper { position : relative; margin-left : -500px; width : 1000px; left : 50%; } edit: en dan de breedte uit de body halen !![/quote:51f72cbf37] Hoewel ik het met glompie eens ben dat je aan wrapper beter een id dan een klasse kunt geven, en ook dat je body geen breedte moet geven, snap ik niet waarom hij zo'n vreemde manier van centreren gebruikt. Mijn advies: blijf bij "margin: 0 auto;"', dat is de algemeen geaccepteerde manier die ook nog eens in vrijwel alle browsers werkt. - Bas

[anoniem]

Da's idd een vreemde manier maar bij mij blijkt ie in de praktijk vaker te werken dan margin:0 auto; margin:0 auto is zeker mooier mits het werkt dus dat kan ie ff uitproberen.

[anoniem]

[quote:0f1c809f32="glompie"]Da's idd een vreemde manier maar bij mij blijkt ie in de praktijk vaker te werken dan margin:0 auto;[/quote:0f1c809f32]In combinatie met standards compliance mode werkt het in alle (recente) alternatieve browsers en in IE vanaf versie 6. Lijkt mij voldoende. ;) [b:0f1c809f32]Edit: [/b:0f1c809f32] Standards compliance mode krijg je door de juiste doctype te gebruiken, bij voorkeur aangevuld met foutloze html-code. - Bas

[anoniem]

@TS: Ik ben zo vrij geweest je CSS wat aan te passen zodat het (imho) logischer is. [code:1:9e2e4b7a7b]@charset "utf-8"; /* CSS Document */ html, body{ margin: 0; padding: 0; } body { background-color:#DCEEA4; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; line-height:24px; margin-top:20px; background-image:url(../img/backgroundscnd.jpg); background-repeat:repeat-x; }.contact { font-size:12px; position: absolute; right: 0; top: 0; } .contact a { text-decoration:none; color:#000; } .contact a:hover { text-decoration:underline; } .mainpict { margin: 40px 0 0 0; padding: 0; } .mainpict p { width:200px; font-size:12px; padding: 0; margin: 0; position: absolute; } #menubar a { text-decoration: none; font-size:14px; display:inline-block; width:110px; height:24px; border-bottom: 3px solid #777; border-top: 3px solid #ccc; border-right: 3px solid #ccc; border-left: 3px solid #ccc; color:#FFF; background-image:url(../img/menu.jpg); } #menubar a:hover { background-image:url(../img/hovermenu.jpg); color:#000; text-decoration:underline; } .wrapper { margin: 0 auto; text-align: center; width: 1000px; position: relative; } [/code:1:9e2e4b7a7b] Ik ben zoveel mogelijk uitgegaan van jouw originele code, maar heb wat zaken aangepast om het intuïtiever te maken. Als je vragen over de aanpassingen hebt dan horen we het wel. - Bas PS: zoals gezegd kan je van bijvoorbeeld wrapper beter een id maken, maar dat kan je dan zelf aanpassen.

[anoniem]

bedankt voor alle tips mensen ! top:) ik ga er zsm mee aan de slag en laat wel horen hoe het word. nm tnx!

[anoniem]

ik heb een aantal tips opgevolgd, en nog wat aanpassingen zelf bedacht, wat vinden jullie er van? heb nu ook aan alle pagina's iets hangen. (geen google meer) nog niet alles is gebeurd, met name de code moet ik nog doen maar qua uiterlijk ben ik een stuk vooruit gegaan vind ik zelf:) zou iemand met een groot scherm even kunnen kijken wat er nog raar is? vooral of hij goed gecentreerd is? de pagina word nagekeken op een 2500x1440 scherm. ik ga hem zelf wel fff checken met w3c validator! alvast bedank! EDIT: krijg een error, maar snap hem niet :[url=http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mooienieuwewebsite.nl&charset=%28detect+automatically%29&doctype=Inline&group=0]w3c[/url]

[anoniem]

De foutmelding heeft te maken met het feit dat je [b:923c385fef]550px[/b:923c385fef] als waarde gebruikt in je html-broncode. Zoals ik al eerder zei hoort dat sowieso niet in html, maar in css, dus je kan [b:923c385fef]width="550px"[/b:923c385fef] helemaal uit je html halen. Verder ziet het er nu inderdaad beter uit dan eerst, netjes gedaan! Ik keek nog even snel naar je css en ik zie dat je weer heel veel negatieve margins gebruikt, heb je daar ook nog een goede reden voor? - Bas

[anoniem]

die negatieve margins heb ik eerder gedaan, en nu heb ik een andere oplossing. maar dan vergeet ik de eerder weg te halen, veel daarvan hebben dus geen invloed meer, zoals ik al zij moet nog veel aan code gebeuren. die foutmelding los ik dan dadelijk wel ff op tnx voor nogmaals uitleg!

[anoniem]

't Is een stuk mooier geworden alleen heb je nog steeds een rand eronder. [url=http://www.imgdumper.nl/uploads4/4e7dd4cf78f89/4e7dd4cf74182-Untitled-1.png][img:b8870b8040]http://www.imgdumper.nl/uploads4/4e7dd4cf78f89/4e7dd4cf74182-Untitled-1.thumb.jpg[/img:b8870b8040][/url] Ik zou de body background #FEFF99 maken. En france in de titel is met een hoofdletter.

[anoniem]

ik heb je tip opgevolgd, glompie. het zier er inderdaad beter uit nu:) tnx. hoe weet je zo precies welke kleur dat moet zijn, een color picker programma ?? ofwat? heb hem nog alleen lokaal!

[anoniem]

Ja, dat heb je goed geraden http://www.iconico.com/colorpic/

[anoniem]

tnx voor de link super handig :)