20 oktober 2017
Dutch CMS
Vragen

Met Dutch CMS 2.0

Nog makkelijker een mooie website !
Gemoderniseerd template design
Achtergrondafbeeldingen invoegen
Uitgebreid Contactformulier !
En meer.....

 
 
 
 
 
Vragen CSS aanpassen 24 januari 2010

Hier komen code voorbeelden waarmee je de layout van een op Dutch CMS draaiende website kan aanpassen naar je eigen wensen. Kom je ergens niet uit post het dan op het Forum en dan komt het antwoord hier.
Om alles over CSS te leren kun je je verdiepen in deze CSS websites.

Let op: deze handleiding is sterk verouderd en van toepassing op Dutch CMS 1.9. Er komt nog een handleiding voor versie 2.0 !

Hoe kan ik m'n sitetitel en siteleus centreren ?
Hoe kan ik mijn website centreren dus dat hij niet over de hele breedte gaat ?
Hoe maak ik een mooie header met achtergrondafbeelding ?
Hoe verplaats ik het middengdeelte naar beneden ?
Hoe verplaats ik de navigatiebalk naar beneden ?
Hoe pas ik de breedte van de linker of rechterkant van het middengebied aan ?
Overige vragen
Meer uitleg over het menugedeelte. Wat is bv de functie van #menuvlak ?

Onderwerp: Hoe kan ik m'n sitetitel en siteleus centreren ?
Antwoord

Aanpassing van originele code geleverd bij installatie:

.sitetitel {
position: relative;
top: 6px;
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Arial;
color: white;
font-size: 27px;
font-weight: normal;
z-index: 4;
}

.siteleus {
position: relative;
top: 5px;
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Arial;
color: white;
font-size: 14px;
font-weight: bold;
/* optioneel font-style: italic; */
z-index: 5;
}

left is verwijderd maar kan ook op 0 worden gezet.

[ Terug naar boven ]
Onderwerp: Hoe kan ik mijn website centreren dus dat hij niet over de hele breedte gaat ?

Op veel websites zie je links en rechts vrije ruimte en is de website zelf dus als het ware gecentreerd. Hoe doe ik dit met Dutch CMS. Welke CSS moet ik daarvoor aanpassen ?

Antwoord

Dit doe je in het bestand templatelayout.css en er zijn 2 methodes voor. Maak voor je hier aan begint voor de zekerheid even een kopie van dit bestand om op terug te vallen als je niet meer zeker weet wat je precies veranderd hebt of om het verschil te testen tussen methode 1 en 2.

Methode 1 - relatieve breedte in procent (%)

Bij html, body {

verander width: 100%; naar width: 96%;

Voeg toe:

padding-left: 2%;
padding-right: 2%;

waarbij width 96% ook bv 98% mag wezen of 94% of nog lager maar zorg altijd dat padding-left en padding-right hiermee corresponderen dus dat het opgeteld altijd 100% is. Ga niet over de 100% heen want dan krijg je een schuifbalk en zorg dat padding-left en padding-right altijd dezelfde waarde hebben.

Wil je boven en onder aan je website ook vrije ruimte voeg dan appart toe (dus NIET bij html,body anders komt er een schuifbalk onderaan !):

body {
padding-top: 2%;
padding-bottom: 2%;
}

Percentage kun je aanpassen naar je eigen wensen.

Vervander ook nog daarboven bij html,body height 100%; in min-height: 100%;

Verander eventueel de achtergrondkleur als je links en rechts geen witte maar een andere kleur als vrij ruimte wilt wilt.

Bij #container {

Voeg toe:

background-color: #FFFFFF;

of een andere kleur. Dit wordt de achtergrondkleur van de gecentreerde website.

Als je gekozen hebt hierboven voor ook vrije ruimte boven en onderaan je website en je wilt een rand om het geheel voeg dan toe:

border: 1px solid #000000;

waarbij de zwarte kleur uiteraard ook een andere kleur mag zijn.

Als je gekozen hebt voor alleen links en rechts vrije ruimte en boven en onder niet voeg dan toe (in plaats van hierboven genoemde border code):

border-left: 1px solid #000000;
border-right: 1px solid #000000;

That's it.

Methode 2 - vaste breedte in pixels (px)

Ipv een relatieve breedte in procenten kiezen we bij methode 2 voor een vaste breedte. Deze is vooral handig als je een header afbeelding hebt die een vaste breedte heeft en exact die breedte in moet nemen zonder vrije ruimte ernaast of andersom ook niet dat juist een gedeelte niet zichtbaar is.

Kies een breedte in pixels voor je website. Dit kun je dus laten bepalen door de breedte van je header afbeelding. In omderstaand voorbeeld kiezen we voor 900 pixels.

Verander bij:

html, body {

de min-width: in de gekozen vaste breedte. In ons voorbeeld dus:

min-width: 900px;

Wil je boven en onder aan je website ook vrije ruimte voeg dan appart toe (dus NIET bij html,body anders komt er een schuifbalk onderaan !):

body {
padding-top: 2%;
padding-bottom: 2%;
}

Percentage kun je aanpassen naar je eigen wensen.

Vervander ook nog daarboven bij html,body height 100%; in min-height: 100%;

Wil je de vrij ruimte die om je gecentreerde website komt een andere kleur geven verander dan bij html,body de achtergrondkleur.

Voeg toe bij:

#container {

margin: 0 auto;
width: 900px;
background-color: #FFFFFF;

waarbij de background-color de achtergrondkleur wordt van de gecentreerde website.

Als je gekozen hebt hierboven voor ook vrije ruimte boven en onderaan je website en je wilt een rand om het geheel voeg dan toe:

border: 1px solid #000000;

waarbij de zwarte kleur uiteraard ook een andere kleur mag zijn.

Als je gekozen hebt voor alleen links en rechts vrije ruimte en boven en onder niet voeg dan toe (in plaats van hierboven genoemde border code):

border-left: 1px solid #000000;
border-right: 1px solid #000000;

That's it.

Screenshots voor het resultaat zijn hieronder zichtbaar bij de volgende vragen.

[ Terug naar boven ]
Onderwerp: Hoe maak ik een mooie header met achtergrondafbeelding ?

De meeste websites hebben een mooie afbeelding bovenaan de website die zich uitstrekt over de gehele breedte van de site. Hoe maak ik dit in Dutch CMS ?

Antwoord

Dit kan door de CSS van het logo aan te passen. Eerst kies je een mooie header afbeelding met een minimale breedte van 1024px. De hoogte kan verschillen. Het kan ook een afbeelding van bv 800 px zijn als je kies voor een vaste breedte van je website in px bv dus 800px. Als je echter kies voor een vloeibare breedte dus in procenten dan moet de headerafbeelding mee strekken in de breedte. Zorg dan dat je een afbeelding kies die niet erg vervormd in de hoogte als hij strekt in de breedte. Dit zal in de paktijk wel duidelijk worden.

Het logo van je website moet je opslaan in de map templates/images/dutchcms en wordt dan automatisch uitgelezen. Download of maak een header afbeelding en hernoem deze naar logo. In onderstaand voorbeeld kies ik een header van de handige website http://www.freewebpageheaders.com.

Ik plaats deze header in de hierboven genoemde map en het resultaat is als volgt:

Zoals je ziet is de header nog niet zoals we hem willen hebben omdat we de bijbehorende CSS nog niet aangepast hebben. Met width:100% kun je het logo laten strekken over de gehele breedte van je website. De hoogte past zich hier op aan maar aangezien we niet willen dat de afbeelding te hoog en dus te paginavullend wordt geven we ook de hoogte op. We openen in de map templates/css/dutchcms het bestand headerfooter.css en gaan iets naar onderen naar .sitelogo en passen daar de CSS aan naar:

.sitelogo {
position: absolute;
margin: 0px;
padding: 0px;
border: 0px;
width:100%;
height: 210px;
z-index: 3;
}

Om de boel wat overzichtelijker te maken de-activeer ik het ondereel Veel Gestelde Vragen en vervang ik de Dutch CMS installatie-introductie met een gedeelte Lorum Ipsum tekst (tekst die vaak gebruikt wordt als test tekst.

Het resultaat is als volgt:

Zoals je ziet moeten er nu ook weer andere zaken aangepast worden maar dat komt bij de volgende vraag. Nu nog een voorbeeld met een vaste paginabreedte in pixels maar je kan ook je website centreren met procentuele waarden zoals aangegeven in de vraag hierboven. Je hoeft dan niks te veranderen aan het sitelogovoorbeeld hierboven. We gebruiken hierbij het voorbeeld van de vraag hierboven van een vaste breedte van 900px en geef het sitelogo de breedte van 900px en de gekozen hoogte van 201px;

.sitelogo {
position: absolute;
margin: 0px;
padding: 0px;
border: 0px;
width: 900px;
height: 210px;
z-index: 3;
}

Her resultaat is dan:

Of gewoon met witte achtergrond wat ook best mooi staat:

Of eventueel met een border eromheen. Dit doe je door de border toe te voegen aan #container in het bestand templatelayout.css in de map templates/css/dutchcms) met:

border: solid #000000 1px;

Natuurlijk kan een grijze border of een andere kleur ook. Nu moet het middengedeelte nog omlaag. Dat behandelen we in de volgende vraag.

[ Terug naar boven ]
Onderwerp: Hoe verplaats ik het middengdeelte naar beneden ?

Ik heb de header aangepast in hoogte. Hierdoor valt het middengedeelte van de website deels onder de header. Hoe verander ik dit in de CSS ?

Antwoord

Open het bestand templatelayout.css in de map templates/css/dutchcms en ga naar #header. Daar zie je staan padding-bottom: 38px;. Verhoog die waarde tot je middengedeelte van de website duidelijk in beeld is. In ons voorbeeld verhogen we de padding-bottom naar 140px. Afhankelijk van wat je gekozen hebt voor de breedte van je pagina zoals in bovenstaande vragen beschreven gaat het er dan uitzien als een van de volgende voorbeelden.

Doe dit altijd op deze manier ! Ga hier NIET voor rommelen bij bijvoorbeeld #hoofdtabel. Natuurlijk werkt het andersom ook. Als het middengedeelte juist naar boven moet verlaag dan juist de padding-bottom.

[ Terug naar boven ]
Onderwerp: Hoe verplaats ik de navigatiebalk naar beneden ?

De navigatieblak zit over mijn header heen. Hoe verplaats ik die naar beneden zodat hij mooi aansluit bij mijn header ?

Antwoord

Open het bestand headerfooter.css in de map templates/css/dutchcms en ga naar #navtabel. Deze is absoluut gepositioneerd ten opzichte van de bovenkant van je website. Door top: 90px; te verhogen kun je hem netjes onder je header plaatsen. Verhoog vervolgens ook de hoogte van padding-bottom van #header nog zoals beschreven in de vraag hierboven.

Als we doorgaan met de voorbeelden gebruikt in de vragen hierboven is het resultaat als volgt:

[ Terug naar boven ]
Onderwerp: Hoe pas ik de breedte van de linker of rechterkant van het middengebied aan ?
Antwoord

Het middengebied van je website dus tussen de header en de footer bestaat aan de linkerkant uit het menu en aan de rechterkant de inhoud, de content. Daar omheen zit de div genaamd #hoofdtabel. Daar moet je NIET wezen om de breedte van het menugedeelte of de inhoud breder of smaller te maken maar je moet je richten op de 2 gebieden appart genaamd #hoofdtabeltdl en #hoofdtabeltdm, beide in het al eerder besproken bestand templatelayout.css. De l staat voor links en de m voor midden. Deze staan na standaard installatie ingesteld op de procentuele waarden van width:23%; en width:76%;.

Methode 1 - inhoudgedeelte kleiner maken

Stel dat je het inhoudsgedeelte smaller wilt hebben dan kun je van 76% bv 70% maken en de waarde van het menu verhogen of hetzelfde laten wat ook kan waardoor er meer ruimte tussen beide komt. Hier een screenshot waarbij width:naar 70% is aangepast. Voor de duidelijkheid hebben we het inhoudsgedeelte een andere achtergrond kleur gegeven.

voor (afhankelijk van gekozen design)

 

na:

Om het witte gedeelte nu ook dezelfde kleur te geven gaan we bovenaan in templatelayout.css naar #container en voegen toe: background-color: #FFF380;

Het resultaat (afhankelijk van gekozen design)

Menu wordt breder of smaller bij gecentreerde of website over gehele breedte als deze in procenten is !

Je moet altijd rekening houden met verschillende resoluties. Zo staat het gemiddelde scherm op een resolutie van 1024 x 768 maar een laptopscherm kan vanwege het feit dat die bijna altijd breedbeeld zijn tegenwoordig staan op bv 1280 x 800. Stel dat je nu in het menu achtergrond afbeelding gebruikt en die een vaste breedte geeft dan kan alles er goed uitzien op je schermpje wat ingesteld staat op 1024 x 800 maar kijk wat er gebeurt bij een hogere breedte. We bouwen een testmenu met een achtergrond afbeelding en passen de menubreedte in procenten hierop aan zodat het allemaal heel netjes lijkt.

We verhogen de resolutie naar een breedbeeld (laptop) resolutie van 1280 x 768 en kijk eens wat er gebeurt:

Het menu was eerst netjes gecentreerd in het groene menuvlak maar nu is er opeens veel meer ruimte gekomen tussen het menu en het einde van het menuvlak aan de rechterkant. Bij een nog hogere resolutie zal de ruimte nog groter (breder) worden. Om dit ongewenste effect te voorkomen kun je het beste werken met een halve vaste / halve liquide (vloeibaare) layout.

Dit effect doet zich NIET voor als je gekozen hebt voor een gecenteerde website met een vaste breedte in px (bv 900px) omdat het precentage dan omgerekend altijd op een vast aantal pixels uitkomt.

Uitleg halve vaste / halve liquide (vloeibaare) layout

De gebruikte afbeelding in bovenstaand voorbeeld is 169 pixels. Met nog wat vrije ruimte links en rechts van het menu stellen we de totale breedte van #hoofdtabeltdl in op 200px. We vervangen dus de procentuele breedte door een vaste breedte in pixels: width: 200px;. Hetzelfde moet je vervolgens ook veranderen ietsje naar boven bij #menuvlak. Ook daar verander je de breedte naar de door jouw gekozen (zelfde) breedte in pixels. Vervolgens veranderen we bij #hoofdtabeltdm het volgende: we verwijderen float: right; en verwijderen ook de aangeving voor de breedte width x%; helemaal. Vervolgens voegen we toe: margin-left: 230px; (of meer of minder).

Het tonen van een screenshot heeft hier verder geen zin want de menubreedte zal er nu bij iedere resolutie precies hetzelfde uitzien.

-- Dit wel met de volgende opmerking: in het bestand normalepaginacss.css staat bij #paginamenucontainer nog een margin-left en een padding-left aangegeven. Die kun je het beste verwijderen en bij a.mpaginalink toevoegen: margin-left: auto; margin-right: auto; waardoor de menuknopjes zich automatisch zullen centreren. Ook, zoals eerder al opgemerkt is deze methode meer geschikte als je achtergrondafbeeldingen met een vaste breedte gebruikt voor je menulinks aan de linkerkant.--

De volgende vraag zou nu kunnen zijn: hoe maak ik dan meer vrije ruimte aan de rechterkant ? Dit kan door een margin-right op te geven bij #hoofdtabeltdm in proecenten of pixels bv margin-right: 2%; of margin-right: 20px;.

Methode 2 - inhoudsgedeelte kleiner maken

Als het gaat om het verkleinen van het inhoudsgedeelte van het middengebied is er echter wel een betere methode dan #hoofdtabeltdm te verkleinen naar een kleiner percentage, zeker als je nog met meerdere achtergrondkleuren wilt werken en het inhoudsgedeelte ook nog is netjes gecentreerd wilt hebben. In het inhoudsgedeelte zit om de tekst nog extra CSS genaamd #tekst. Om dit te laten zien geef ik even het tekstgedeelte tijdelijk een groene rand:

Wil je het gelijk helemaal goed doen en dat het er bij alle resoluties goed uitziet, doe dan het volgende. Kies OF voor de half vaste / haf liquide layout OF zorg dat #hoofdtabeltdm zijn normale maximale breedte krijgt. Deze is gebasseerd op 100 min de procentuele breedte van de menukant min 1. Dus totaal opgeteld altijd 99%; (eventueel min 2 omdat het dan net iets netter gecentreerd wordt zometeen). Ga vervolgens naar #tekst in het bestand algemenecss.css en voeg daar toe:

width: 80%;
margin-left: auto;
margin-right: auto;

waarbij de 80% oof 90 mag zijn of 70, maar net wat je wilt.

Het resultaat is als volgt (afhankelijk van gekozen design en nogsteeds met groene rand er omheen zodat je goed ziet wat er gebeurt):

Op deze manier blijft de tekst van het inhoudsgedeelte altijd in het midden van het inhoudsgedeelte gecenteerd ipv dat het helemaal tegen de rechterkant van het scherm zit. Dat zit het nog wel maar het wordt IN #hoofdtabeltdm gecenteeerd.

[ Terug naar boven ]
Onderwerp: Overige vragen
Antwoord

Overige vragen die binnenkort behandeld zullen worden:

  • Meer informatie over het menugedeelte - wat is de functie van #menuvlak ?
  • Hoe voeg je achtergrondafbeeldingen toe ?
  • Hoe verberg je onderdelen ?
  • Hoe verhoog of verlaag je de footer ?
  • Hoe verplaats ik het menu van de de linkerkant naar de rechterkant van mijn website ?
  • Hoe centreer ik de footertekst dat hij gecentreerd is onder het inhoudsgedeelte van mijn website ?
[ Terug naar boven ]
Onderwerp: Meer uitleg over het menugedeelte. Wat is bv de functie van #menuvlak ?
Antwoord

Het menuvlak is een extra layer achter het menugedeelte zodat de kleur zich uitstrekt helemaal naar beneden tot aan de footer. Dit zie je dus niet na standaard installatie omdat de kleur van het menuvlak dan dezelfde achtergrondkleur heeft als #hoofdtabeltdl (beide in het bestand templatelayout.css). Om dit te laten zien zullen we het menuvlak een andere kleur geven zodat je ziet wat er bedoeld wordt. Dit doen we door de achtergrondkleur te veranderen bij #menuvlak in het bestand templatelayout.css.

Vervolgens heeft ook ieder onderdeel (normale pagina, weblog etc) een eigen extra container om haar menu heen. Deze containers worden gebruikt voor het creëren van de benodigde ruimte tussen de verschillende menu's, maar kunnen ook gebruikt worden om apparte menublokken te maken. Ook dit kan weer het beste duidelijk gemaakt worden met een voorbeeld. De containers bevinden zich in de respectievelijk gelijknamige bestanden dus #paginamenucontainer in normalepaginacss.css, #weblogmenucontainer in weblogcss.css etc. We maken een aantal weblog nieuwspagina's. Die komen in de weblogmenucontainer te staan en die geven we een andere achtergrondkleur dan de paginamenucontainer (die we ook een andere achtergrondkleur geven).

Het resultaat:

Zoals je ziet kun je hier dus hele leuke dingen mee doen. Iedere container kan een andere kleur krijgen, maar wat ook kan is juist alle containers eenzelfde kleur en css maar bv wel een andere achtergrondkleur geven.

Wat ook kan is de containers voor 'special effect' iets over de rand te laten gaan door ze een bredere grootte in pixels of % te geven dan de breedte van het menugedeelte. Verder verwijderen we de groene rand om #tekst en voegen daar toe: text-align: justify; text-justify: inter-word; en veranderen de padding-right van de tekst van 30px naar 10px en passen de breedte aan naar 75%. Ook veranderen we bij paginamenucontainer en weblogmenucontainer de padding-left naar padding-left: 14px;.

Het resultaat:

[ Terug naar boven ]

Powered by Dutch CMS v2.0 XHTML Strict

Bezoek ook de Webdesign website van Dutch CMS