Archief - PREVIEW: Gunter Cycling

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
o

ozl

Legacy Member
Hey,

De eerste keer dat ik hier een site kom laten checken en ik hoop dan ook op wat opbouwende kritiek.

Dit is de site

Enkele dingen waar ik zeker wat meer over zou willen weten:

- compatibiliteit
- design (duidelijk, niet te veel wit, wat kan beter): de 'klant' zou als achtegrond een landschap ofzo willen, het de Vlaamse Ardennen wat uitstralen. Zelf had ik gedacht à la Yoni-web maar dan gaat het landschap grotendeels achter mijn content zitten en mensen met een kleinere resolutie gaan het niet zien. Ideeën zijn altijd welkom

Problemen:

- footer zou altijd aan de bodem moeten plakken, bij bookins/contact/information is dit niet het geval (omdat er niet genoeg content staat die het tegen de bodem duwt). In mijn css heb ik nochtans dit:

Code: 
* {margin: 0; padding: 0;}
html, body {height: 100%;}

#wrap {
  width: 800px; 
  min-height: 100%; 
  margin: auto;
  height: 100%;
  height: auto !important;
  background-color: #fff;
}

#footer {
  height: 50px;
  width: 780px;
  margin-left: 10px;
  background-color: #277d93;
  bottom: 0;
}

De code mag ook altijd eens nagekeken worden voor de liefhebbers:

http://www.smi-6ewi.be/wordpress/css/pico.css

Dit is mijn eerste site die echt zal gebruikt worden die ik met CSS en HTML heb gemaakt. Ik weet dat ik wel nog vaak gebruik maak van tabellen maar soms vind ik het gewoon gemakkelijker.

Bij mij op resolutie 1440*900 toont hij goed op Safari, Opera, IE 6, FF (normaal zou IE 7 ook goed moeten zijn)

Alle kritiek welkom.
d

deathsythe

Legacy Member
kzou van die landschappen afblijven, kvind uw banner enz mooi genoeg, het enigste wat mij stoort is dat je geen buttons hebt... voor de rest mooie site,

mss een intro maken, of nen andere banner eens proberen, ...

(btw sint maartens instituut aalst? )
o

ozl

Legacy Member
Hm ja die buttons, kvind het zo eigenlijk ook wel ni slecht. Ik zal er nog eens over nadenken.

(en ja SMI te Aalst, ik ken u wel van zien btw :p, van vorig jaar)
o

ozl

Legacy Member
Mwa kweet ni, ge bedoelt toch dat lichtgroon lijntje zo? Kzou is wa meer meningen willen horen.

Ik vraag me nu eigenlijk af of ik moet gaan proberen een landschap erin te verwerken of het zo laten?

En wat raden jullie aan om een contactpagina op te vullen? Er moet voorlopig eigenlijk alleen maar een e-mailadres komen te staan maar dat is wel heel leeg dan. Tips?
j

j design

Legacy Member
Zeer mooie site.
Het groen past idd niet echt bij het geheel maar het stoort me niet, geeft iets extra.
Geen landschap, dat gaat op niets trekken. Mss kan je eens proberen met de achtergrond afbeelding wat meer op te vullen, iets bredere strook, het verloop wat verder laten doorvloeien.
X

Xavez

Legacy Member
Mooi

Dat uw footer niet aan de bodem plakt stoort eigenlijk niet. Integendeel: op grote resoluties gaat dit eerder storend zijn omdat je website geen geheel meer lijkt... Ik zou dus uit je css gewoon alle height: 100% smijten etc... Als je toch per se een sticky footer wilt, google dan eens op FooterStickAlt :).

Als je nog wat wil bijleren, zou ik je aanraden om wat op te zoeken over css shorthand. Kort gezegd combineer je de verschillende css declarations en properties in één declaration. Voorbeeldje:

font-size: 12px;
line-height: 20px;
font-family: Helvetica, Arial, Verdana, sans-serif;

wordt dan

font: 12px/20px Helvetica, Arial, Verdana, sans-serif;

Je css wordt op die manier veel compacter, wat de laadtijd dus meestal wel ten goede komt :). (hetzelfde geldt ook voor bijvoorbeeld background: etc etc)

Waarom gebruik je trouwens een tabel beneden in de footer? Absoluut voor niks nodig eigenlijk... Zorgt enkel voor hogere laadtijden :).

Nog wat kleine puntjes:
* taal van je document definiëren (<html xml:lang="nl">)
* spacerdivs zijn een no-go: gebruik marges om spaties tussen divs te realiseren
* gebruik semantische opmaak. h1-tags en h2-tags zijn toch wel een minimum. De h1-tag voor je header (die je nadien mogelijk visueel verbergt door een absolute positionering van -999px ofzo :)). Semantische opmaak komt je SEO ten goede en het maakt je document toegankelijker voor blinden/slechtzienden. Bovendien blijft je document "logisch" qua opbouw moest je stylesheet ooit onbereikbaar zijn. In Firefox kan je dit nakijken via: Beeld > Paginastijl > Geen stijl.
* Met semantiek in het achterhoofd maak je van je menu best een unordered list :). Je kan de list items een float: left meegeven om ze op één lijn te plaatsen. Voor meer info hierover, zie http://css.maxdesign.com.au/listutorial/
* Waarom je met background images in plaats van met achtergrondkleuren werkt in je menu's is me een raadseltje :). Tenzij je echt buttons zou hebben, maar dit kan toch gewoon in plain text, niet?


En nu ben ik te moe om de rest nog in detail te bekijken. Hier zal je wel al +/- zoet mee zijn voor de komende weekjes =P.

Grafisch wel een website die best "okay" is! Strak en duidelijk zonder te vervallen in saaiheid of onkunde. Me likes :).
o

ozl

Legacy Member
Bedankt voor de opbouwende kritiek.

* De tabel in de footer wou ik ook eerst zo niet doen maar aangezien in elke browser de positionering met een div andere resultaten opleverde was ik het zo beu dat ik het in een tabel heb gezet en dat vormde geen problemen. Steek ik deze toch best in een div? Of met <span></span> (kweet eigenlijk niet precies wat span doet, zou het beter eerst eens opzoeken
* Zelfde voor de groene hovers bovenaan. Ook zitten proberen en raar genoeg kreeg ik het maar niet in orde. Dan maar gemakkelijkheidshalve maar ik weet dat het in principe zou moeten gaan gwn met tekst en css
* CSS shorthand moet ik idd naar kijken. Kzal ook eens rondkijken waar dit gemakkelijk staat uitgelegd want soms probeer ik het maar aangezien ik dan de goede volgorde niet heb, schrijf ik het in het lang
* De sticky footer vind ik atm bij contact en informatie echt te kort op de tekst staan. Kzal em nog wat laten zakken en niet per se op de bodem willen laten komen. Dan gaat er indd een nutteloze witruimte zijn

De andere tips ga ik ook rekening met houden, vooral semantiek dan. Ik zal er eens wat over lezen en proberen het toe te passen.

Nog snel een vraagje. Is het mogelijk dat margin verschillend geinterpreteerd wordt door de verschillende browsers? Als ik een bepaalde waarde in px bij mijn margin gebruik is die in IE altijd verschillend dan Opera :(
X

Xavez

Legacy Member
Jazeker... Ik geef je nog wat links mee die je zeker eens kan bekijken. Sla ze op en neem ze op een later moment eens door ofzo... Je ziet maar:

/*Algemen info over browsers en hun verschillen*/ http://quirksmode.org/css/contents.html
/*Specifiek over het box model*/ http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
/*CSS Shorthand referentie*/ http://www.dustindiaz.com/css-shorthand/
/*Handige Cheat Sheets*/ http://www.ilovejackdaniels.com/cheat-sheets/

Daar ga je al zeker je skills mee kunnen oppoetsen, want je bent op de goede weg!
o

ozl

Legacy Member
Bedankt voor de interessante links. Ik ga ze na de examens zeker eens doornemen!
o

orez

Legacy Member
Xavez, waarom pos. abs. van -999px ?
Ik vind dan toch een oplossing van

Code: 
<h1><span>blablabla</span></h1>

Mooier. in de H1 de headerafbeelding, binnen de span de omschrijving... (header als bg img, via css.) en dan de span op display: none...

En dan die welkom, en dieje andere titel in een h2 plaatsen...

Nuja is natuurlijk persoonlijk smaak denk ik ;) Ik hou niet zo van absolute positioneringen als het ni nodig is.
X

Xavez

Legacy Member
Omdat een display: none; ook de tekst voor screenreaders verbergt :). Ok, voor je SEO is hij dan nog wel zinnig, maar naar accessibility toe is het dan weeral een stuk minder. Persoonlijk ben ik een aanhanger van

<div id="head">
<h1>Hoofdtitel van je pagina</h1>
</div>

En dan je bg-image op #head zetten en de h1 verbergen dmv absolute positioning, om wille van de voorgenoemde reden. Op die manier heb je geen betekenisloze elementen (de <span>'s in jouw voorbeeld) en hou je het toegankelijk voor iedereen :). That's why ^.^
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan