Overleg gebruiker:Michiel TM/Kladblok

Structuur

Ik heb, naar aanleiding van je verzoek op de helpdesk, even wat geprobeerd. Ik zie dat je niet erg thuisbent in het vormgeven met HTML en styles. Voordat je code als <div> toevoegt of weghaalt, moet je goed weten wat je doet, net als bij het weghalen van de tags bij kopjes (<h2>). Zulke tags komen altijd in paren voor, dus <div>...</div> en <h2>...</h2>, en met name met div's en span's is het opletten omdat die genest kunnen worden, bijvoorbeeld <div><div>...</div><div>...</div></div>.

Ik zou me kunnen voorstellen dat je van de kopjes van de afzonderlijke boxes wilt dat die helemaal van links naar rechts lopen, dus zonder het gat links en rechts dat er nu zit en dat veroorzaakt wordt door de padding van de div waar ze in staan. Bij oplossingen daarvoor moet je altijd testen of het wel in alle browsers werkt, dus met de kopjes met gekleurde achtergrond haal je je wel wat op de hals. Bovendien worden ze, met die intense kleur navy, wel heel erg massief en gaan de pagina erg overheersen. Ik weet niet of dat je bedoeling was en, minstens zo belangrijk, of andere gebruikers met die opmaak accoord zullen gaan.

Laat eerst maar eens weten of mijn uitprobeersel meer in de richting gaat van wat je zelf voor ogen had, en wat eventueel je andere wensen zijn. Ik volg vanaf nu deze pagina, dus we kunnen hier verder overleggen. Groet,  Wikiklaas  overleg  29 jan 2013 17:07 (CET)

Ik heb net voor het tweede kopje wat uitgeprobeerd met negatieve marges links en rechts. Werkt prima in IE maar gooit in FF de boel in het honderd.

Even om het voorbeeld erbij te houden: Portaal:Olympische Spelen (makkelijk om vanaf hier te klikken).  Wikiklaas  overleg  29 jan 2013 17:26 (CET)

Ik vind had inderdaad zo iets in gedachten, misschien is de kleur navy inderdaad wel wat overheersend, maar ik dacht dat blauw wel bij roeien zou passen. Is het trouwens ook mogelijk om het kader van bijv. het kopje inleiding de gehele breedte te laten bestrijken? dus niet met twee beige stroken links en rechts? in ieder geval al bedankt voor de hulp! Michiel5234 (overleg) 29 jan 2013 17:38 (CET)

Dat laatste was wat ik hierboven al opmerkte en ook exact waaraan ik bezig was toen ik een bewerkingsconflict met jou kreeg, omdat je al roeiverenigingen aan het invoeren was. Welke browser gebruik je zelf trouwens?  Wikiklaas  overleg  29 jan 2013 17:49 (CET)

Ik gebruik gewoon IE, maar ik heb ook Firefox op m'n computer staan, als dat beter is. Sorry voor het bewerkingsconflict, ik heb hier ook eigenlijk helemaal geen verstand van. Michiel5234 (overleg) 29 jan 2013 18:05 (CET)

Er is geen goede of slechte browser, ik was gewoon benieuwd of je hetzelfde zag als ik. Ja dus, want ik gebruik ook IE maar heb voor het testen nog vijf andere browsers. Een bewerkingsconflict krijg je als je met twee gebruikers tegelijk aan dezelfde pagina werkt. Ik zie nu dat ik net een hoop verenigingen die je toevoegde weer wiste: ik zal ze zo weer toevoegen (met behulp van vorige versie pagina). Maar geef me even de gelegenheid om die titelbalk goed voor elkaar te krijgen, alsjeblieft.  Wikiklaas  overleg  29 jan 2013 18:12 (CET)

Alles wat ik per ongeluk had gewist is weer terug. De kopjes werken nu in FF en in IE, dus ik ga ze nu in andere browsers bekijken maar voorlopig doe ik geen bewerking meer, dus als je zelf verder wilt gaan met het invullen van de panelen, ga je gang. Ik zie het wel op mijn volglijst als er nog problemen zijn. Succes!  Wikiklaas  overleg  29 jan 2013 19:31 (CET)

Rode links

Om te beginnen zie ik dat je het inmiddels aardig doorhebt. Mijn complimenten. Ik zag dat je veel verenigingen waarover (nog) geen artikel bestaat weer wiste. Ik weet eerlijk gezegd niet wat op andere portalen gebruikelijk is, maar ik zou me kunnen voorstellen dat je ze laat staan om aan te geven dat een artikel gewenst is. Dat moet je verder overigens helemaal zelf weten want jij bent de bedenker en ontwerper van het portaal, dus zou ik vooreerst gewoon doen wat je zelf handig vindt. Succes ermee, verder.  Wikiklaas  overleg  1 feb 2013 04:51 (CET)

Technieken

Sjablonen

Nog even wat technische dingen. Je hebt als voorbeeld voor je portaal het portaal:Olympische Spelen gebruikt. Ik weet niet waar je op hebt geselecteerd maar in dat portaal staat alles wat met inhoud en vormgeving te maken heeft op de pagina zelf. Dat is makkelijk om te begrijpen wat er gebeurt maar misschien niet het meest praktisch. Op portaal:Schaatsen kun je zien dat het ook anders kan. Daar is bijna alles met sjablonen geregeld, en staat de inhoud op subpagina's (bijvoorbeeld Portaal:Schaatsen/Schaatsers). Je ziet dat daar ook een titel met gekleurde balk boven elk onderdeel staat, maar dat daar ook een "bewerken" link in staat. Het gebruikte sjabloon box-begin is een afgeleide van Sjabloon:box-begin, en is zelf ook een subpagina van het portaal: portaal:Schaatsen/box-begin. Als je eenmaal snapt hoe je er gebruik van maakt is dit een simpele en overzichtelijke manier voor het maken van een portaal.

div's

Ik zag dat je inmiddels met de <div>'s kon werken. Ik weet niet of je thuisbent in het coderen met HTML (ik vermoed niet heel erg). Een div is een manier om een rechthoekig stuk van een scherm te definiëren en vorm te geven. Een div heeft een hoogte en een breedte die, als niets opgegeven wordt, bepaald worden door de hoogte en breedte van de inhoud (een stuk tekst bijvoorbeeld). Wat voor jou van belang is, is dat een div, van buiten naar binnen, een "margin", een "border" en "padding" heeft. De border is de rand van de div. Die kun je zien als je middels een "style" een dikte van 1 px of meer opgeeft: "border: 1px solid black" bijvoorbeeld. Behalve voor solid kun je ook voor gearceerde borders kiezen (hier niet aan de orde). De margin zegt hoeveel ruimte er tussen de border van de div en een naburig element moet zijn. Als je één waarde opgeeft, bijvoorbeeld "margin: 1em", dan is de ruimte aan alle kanten gelijk. Bij twee waarden, bijvoorbeeld "margin: 0 0.5em" geeft het eerste getal de ruimte voor boven en onder, en het tweede getal de ruimte links en rechts. Als je vier waarden opgeeft, bijvoorbeeld "margin: 0 0.5em 0 0.5em", geldt het eerste getal voor de bovenkant, het tweede getal voor de rechterkant en zo verder met de wijzers van de klok mee. Merk op dat die laatste notatie met vier waarden hier equivalent is aan het voorbeeld met twee waarden. Padding zit aan de binnenkant van de border en bepaalt de ruimte tussen de inhoud en de rand. Het opgeven van padding werkt verder exact zo als bij margin. Als je een gekleurde balk over de hele breedte wilt, dan lukt dat alleen in een div die geen padding links en rechts heeft. Als je wilt voorkomen dat de rest van de inhoud dan strak tegen de rand aankomt, kun je daarvoor een tweede div maken binnen de eerste div. Die div kun je dan wel padding (of een margin) geven. Ik geef een voorbeeld, waarbij in het linker voorbeeld de binnenste div vrijwel geen margin heeft (1px, anders zie je hem niet) maar een padding van 1em, en in het rechter voorbeeld de binnenste div een margin van 1em heeft en bijna geen padding. Als de border niet zichtbaar was, zag je geen verschil:

Voorbeeld 1 De buitenste div heeft een margin van 1em, een border van 2px, en geen padding. De binnenste div heeft een margin van 1px en een padding van 1em. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Voorbeeld 2 De buitenste div heeft een margin van 1em, een border van 2px, en geen padding. De binnenste div heeft een margin van 1em en een padding van 1px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Dit is de code (zonder de hele lap lorem ipsum tekst). Inspringen is om de geneste niveaus zichtbaar te maken:

 {|width="100%"
 |width="50%" style="vertical-align:top"|

 <div style="margin: 1em; border: 2px solid blue; padding: 0;">
   <h3 style="margin-bottom: 0; padding: 5px 1em; background: darkcyan; color: white;
     font-size: 150%;">Voorbeeld 1
   </h3>
   <div style="margin: 1px; border: 1px solid gray; padding: 1em;">
     Lorem ipsum...
   </div>
 </div>

 |width="50%" style="vertical-align:top"|

 <div style="margin: 1em; border: 2px solid blue; padding: 0;">
   <h3 style="margin-bottom: 0; padding: 5px 1em; background: darkcyan; color: white;
     font-size: 150%;">Voorbeeld 2
   </h3>
   <div style="margin: 1em; border: 1px solid gray; padding: 1px;">
     Lorem ipsum...
   </div>
 </div>

 |}
 

Op jouw uitprobeerpagina heb ik een paar stukken tekst in een div gezet om ze een extra linkermarge te geven (inspringen). Dat kan ook met een "list" (*), maar dan mogen er geen harde returns in staan en wordt het bewerken van zo'n lijst met verenigingen of sporters een stuk moeilijker. Ik hoop dat je met deze aanwijzingen en het voorbeeld op je uitprobeerpagina met voldoende zelfvertrouwen aan de slag kunt.  Wikiklaas  overleg  2 feb 2013 17:44 (CET)

Afbeelding van de maand

Dag Michiel5234,

Als je op je portaal hebt gekeken, dan heb je gezien dat er nu voor de maand februari (02) een afbeelding in beeld komt. De techniek daarvoor is vrij eenvoudig. De pagina "Portaal roeien" staat nu in je kladblok. Voor Wikipedia heet de pagina dus "Gebruiker:Michiel5234/Kladblok". Die naam kun je op de pagina zelf aanroepen met het sjabloon {{FULLPAGENAME}}. Als je nu een subdirectory aanmaakt onder kladblok, bijvoorbeeld de map "Afbeelding", dan kun je die benaderen met {{FULLPAGENAAM}}/Afbeelding. Als je in de directory "Afbeelding" vervolgens 12 aparte artikelen aanmaakt, genaamd 01, 02 .... 12, dan kun je elke maand een andere afbeelding in het vak "Afbeelding van de maand" krijgen met een speciale link naar {{FULLPAGENAME}}/Afbeelding/{{CURRENTMONTH2}} (werkt vanwege FULLPAGENAME alleen vanaf de portaalpagina, dus niet vanaf deze overlegpagina). Het speciale aan de link is dat je hem niet maakt met vierkante haken maar met accolades, zo dus: {{{{FULLPAGENAME}}/Afbeelding/{{CURRENTMONTH2}}}}. Ik heb de eerste pagina met een afbeelding aangemaakt: Gebruiker:Michiel5234/Kladblok/Afbeelding/02. Let op: je roept zo niet de afbeelding maar de hele pagina aan, dus de volledige inhoud van (in de maand februari) 02 wordt dan ingevoegd op de plaats waar je de speciale link hebt neergezet.

Met uitgelicht werkt het net zo. In dat geval moet je voor elke maand een klein artikeltje aanmaken, dat dan op de plaats van het sjabloon komt te staan. Handig is om daarvoor de directory "Uitgelicht" te maken, op dezelfde manier als ik nu die voor de afbeeldingen heb gemaakt. Ik gebruik trouwens het sjabloon CURRENTMONTH2 omdat ik het handig vind om de afbeelding voor de maanden 1 t/m 9 te nummeren als 01 t/m 09, omdat dat handiger is bij sorteren. De "2" betekent uiteraard dat de maand als een tweecijferig nummer moet worden gelezen.

Om een nieuwe pagina aan te maken kun je uiteraard gewoon de volledige naam intikken in het zoekvenster, of je maakt in een klad een serie rode links aan die je kunt aanklikken. Voor maart bijvoorbeeld: Gebruiker:Michiel5234/Kladblok/Afbeelding/03. Je kunt de inhoud van februari daarheen kopiëren en er zelf een andere afbeelding met een aangepast bijschrift in plaatsen.

Het andere kleine probleempje dat je noemde, met een afbeelding in de rechterkolom, was simpel opgelost. De titelbalk van "Materiaal" werd onderbroken doordat de afbeelding in het vak erboven hoger was dan het vak. Ik heb het opgelost door in dat vak "Roeiterminologie" een "overflow: hidden;" aan de style van de binnenste div toe te voegen. Dan loopt het restant van de afbeelding niet over de rand heen en kan geen dingen buiten dat vak in de war schoppen. Ik denk dat je nu een heel eind verder kunt. Als het niet lukt weet je mijn OP te vinden. Veel succes en met hartelijke groet,  Wikiklaas  overleg  26 feb 2013 04:32 (CET)

Om je niet meteen op te zadelen met het zoeken van 53 afbeeldingen en uitgelichtjes, heb ik er afbeelding van de maand en uitgelicht van de maand van gemaakt. Dat kun je later nog heel makkelijk in week veranderen. Op deze pagina kun je nu de links vinden om de overige afbeeldingen van de maand heel makkelijk toe te voegen. Iets dergelijks wil ik ook nog even voor de uitgelichtjes maken.  Wikiklaas  overleg  28 feb 2013 00:05 (CET)