Archief - PORTFOLIO: Persoonlijke portfolio html + css

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.
X

Xavez

Legacy Member
Duidelijke navigatie, dat wel :-|.

Samenraapsel van enkele van die Web 2.0-checklists: gigantische fonts, wet floor effectje, bright colours, crests,...

Maar het is zo verschrikkelijk uitgewerkt =].

Grafisch
* Wet floor slecht geïmplementeerd... Gewoon weg doen!
* Oversized menu is effectief oversized.
* Veel te weinig kleur aanwezig overall. Er is nauwelijks van een design te spreken.
* Resizen van de browser fuckt uw procentuele verdelingen up: de afbeelding bij "latest projects" gaat zowat naar de filistijnen zo =].

Code
Beetje rampzalig :).
* gebruik elementen waar ze voor dienen!
* je gebruikt <strong>-tags waar je <h2>-tags moet gebruiken (dus een header, niet een vetgedrukt woord in een paragraaf)
* je gebruikt <p>-tags (paragraph) waar je eigenlijk een <div>-tag moet gebruiken (het gaat om een division, niet om een paragraaf!)--wat ga je doen als je twee paragrafen hebt? <br />'s gebruiken zeker? =]. Niet goed dus ;)
* geef je divisions logische id's. "rechts" en "links" is volgens opmaak, niet volgens inhoud. Noem het "menu" en "content" of iets gelijkaardigs :).
* je code structureren kan geen kwaad. Gebruik tabs om vervolgens in te springen. Beste voorbeeld is bijvoorbeeld je menu: dat kan je veel beter allemaal onder elkaar plaatsen, maar das eerder een tip om het jezelf makkelijker te maken :).
* Gebruik in je header een <h1>-tag die de titel van je webpage nog eens aangeeft. Je verbergt die in je CSS via h1 {position:absolute; top:-1000px;}. Bovendien moet je geen afbeelding "in" je header zetten, maar via je css als background op #header. Dit om opmaak en inhoud te scheiden :).
X

Xavez

Legacy Member
Tja, "web 2.0" qua stijl, bestaat niet =].

Anyway, het design is al pakken beter. Hoewel nog steeds een hoog trendhoergehalte (roze + ornaments BG), ziet het er toch al veel aantrekkelijker uit!

Wat de code betreft, ben je er *bijna* :). Je kan beter dit:
HTML: 
<h2 class="eerst">Lorem ipsum</h2>
	<p><img src="placeholder.png" alt="placeholder" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tortor felis, ullamcorper non, adipiscing ac, tincidunt a, nulla. Aenean vestibulum libero sit amet risus. Proin sollicitudin mattis nisi. Integer quam libero, sollicitudin in, euismod quis, convallis quis, diam. Aenean molestie augue eu nisl. Sed vestibulum, tellus ac ullamcorper nonummy, enim dolor malesuada arcu, vitae luctus nunc lectus eget est. Aliquam dignissim leo vitae nibh ultrices convallis. Maecenas odio. Donec justo justo, volutpat nec, placerat quis, molestie in, quam. Suspendisse ipsum sapien, laoreet in, consequat vitae, tincidunt sed, urna. Ut convallis semper erat. Nunc turpis nisi, varius sed, suscipit nec, placerat at, velit. Donec lorem diam, pulvinar non, sodales nec, elementum at, est. Donec lacinia vulputate elit. In pharetra. Duis consequat euismod nisl. Phasellus lobortis. Etiam tempus lobortis turpis. Sed elit diam, posuere eu, posuere vitae, dictum id, massa.</p>

<h2>Sed nisl nunc</h2>
	<p><img src="placeholder2.png" alt="placeholder" />Sed nisl nunc, cursus non, consequat porta, euismod id, dolor. Cras nibh ante, congue vitae, venenatis eu, venenatis sed, mi. Duis facilisis, elit id dignissim porta, velit odio pharetra magna, non tempor felis lectus sit amet erat. Praesent aliquam, leo et bibendum malesuada, nulla pede pharetra lacus, nec pharetra ipsum ipsum ac nunc. Pellentesque blandit accumsan pede. Nunc ornare tellus eu dui. Donec lobortis scelerisque nunc. Phasellus vel ligula. Donec vestibulum, mauris ac bibendum fringilla, elit mi molestie nisl, sit amet egestas nibh nibh ac lorem. Nullam venenatis. Nunc eget nibh. Duis molestie auctor lacus. Nullam ut est sed tortor porta dignissim. Donec consectetuer. Praesent at mi.</p>

Als volgt schrijven (zoals ik al zei trouwens, maar je hebt het misschien niet zo begrepen)
HTML: 
<div class="post-item">
	<h2 class="eerst">Lorem ipsum</h2>
	<p><img src="placeholder.png" alt="placeholder" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tortor felis, ullamcorper non, adipiscing ac, tincidunt a, nulla. Aenean vestibulum libero sit amet risus. Proin sollicitudin mattis nisi. Integer quam libero, sollicitudin in, euismod quis, convallis quis, diam. Aenean molestie augue eu nisl.</p>
	<p>Sed vestibulum, tellus ac ullamcorper nonummy, enim dolor malesuada arcu, vitae luctus nunc lectus eget est. Aliquam dignissim leo vitae nibh ultrices convallis. Maecenas odio. Donec justo justo, volutpat nec, placerat quis, molestie in, quam. Suspendisse ipsum sapien, laoreet in, consequat vitae, tincidunt sed, urna. Ut convallis semper erat. Nunc turpis nisi, varius sed, suscipit nec, placerat at, velit. Donec lorem diam, pulvinar non, sodales nec, elementum at, est. Donec lacinia vulputate elit. In pharetra. Duis consequat euismod nisl. Phasellus lobortis. Etiam tempus lobortis turpis. Sed elit diam, posuere eu, posuere vitae, dictum id, massa.</p>
</div>

<div class="post-item">
	<h2>Sed nisl nunc</h2>
	<p><img src="placeholder2.png" alt="placeholder" />Sed nisl nunc, cursus non, consequat porta, euismod id, dolor. Cras nibh ante, congue vitae, venenatis eu, venenatis sed, mi. Duis facilisis, elit id dignissim porta, velit odio pharetra magna, non tempor felis lectus sit amet erat. Praesent aliquam, leo et bibendum malesuada, nulla pede pharetra lacus, nec pharetra ipsum ipsum ac nunc. Pellentesque blandit accumsan pede.</p>
	<p>Nunc ornare tellus eu dui. Donec lobortis scelerisque nunc. Phasellus vel ligula. Donec vestibulum, mauris ac bibendum fringilla, elit mi molestie nisl, sit amet egestas nibh nibh ac lorem. Nullam venenatis. Nunc eget nibh. Duis molestie auctor lacus. Nullam ut est sed tortor porta dignissim. Donec consectetuer. Praesent at mi.</p>
</div>

I think you get the idea :). Ik heb bij wijze van voorbeeld twee paragrafen in elke "post" gezet om je te laten zien dat dat een mogelijkheid is in een lange tekst. Met je huidige structuur zou dat helemaal mislopen :).
M

Mithrandix

Legacy Member
Ok bedankt Xavez! Ik snap nu eindelijk wat je bedoelt ivm lange teksten :). Kheb het aangepast, hopelijk is het nu in orde.
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