Centeren van de website content

Beste forumleden,

Ik ben een beetje een beginner wat het bouwen van websites betreft en maak daarom gebruik van WordPress. Ik ben al een heel eind met het inrichten van de website, maar ik loop tegen een heel vervelend centreer probleem aan.
Als je naar www.katjascreations.nl gaat dan zie je dat de titel en ondertitel (Katja's Creations en Sweet & Healthy) gecentreerd staat. Mooi! Maar als je dan kijkt naar het kopje 'Home' en 'Instagram' dan staan die meer naar rechts op de pagina. Hebben jullie enig idee hoe ik dit uit kan lijnen met de titel en ondertitel?

Ik heb hier al uren aan besteed en geef de hoop op. Ik hoop dat jullie mij kunnen helpen!

Ik gebruik hiervoor Extra CSS wat bij WordPress inbegrepen zit.

Ik heb om de rij ( in css is dit .row ) een lijntje gezet. Je ziet dat de website goed is gecentreerd. Ergens dieper in de html/css loopt alles aan de rechterkant eruit. Waarschijnlijk komt dit door een border of margin.

Dit gebeurt in de html


Bij de laatste 2 regels gaat het mis. In een doosje van 910px kan geen doosje van 970px worden gepropt.
Naar de rest van de pagina heb ik niet gekeken, het lijkt erop dat er in de structuur dingen niet kloppen.
Misschien kan je hiermee verder.

Beste bron,

Hartelijk dank voor je input! Ik denk dat je inderdaad het probleem te pakken hebt. Nu komt alleen stap twee en dat is het elimineren van het probleem en daar loop ik alweer op vast
Ik kan het desbetreffende stukje HTML vinden wanneer ik de pagina ga 'inspecteren' maar als ik in Wordpress het thema ga bewerken dan kan ik nergens hetzelfde stukje HTML vinden. Is dit iets wat ik via CSS kan aanpassen?

Jep, kijk eens in de CSS.
Is het een gedownloadde theme, of een op-maat gemaakt design?

En, wat denk ik belangrijk kan zijn, gebruik je de Gutenberg of de klassieke editor?
Niemand vind die nieuwe Gutenberg fijn (is mijn ervaring), je werkt daar namelijk met blokken (voor mij echt een crime!) en dus kan je de klassieke editor installeren.

De vraag van PHP4U is ook heel belangrijk, is het een standaard gratis theme en waar heb je hem vandaan? Of is het een betaald theme met meer mogelijkheden? En wat is de naam ervan?

PHP4U zei:

Jep, kijk eens in de CSS.
Is het een gedownloadde theme, of een op-maat gemaakt design?

Klik om te vergroten...

Het is inderdaad een gedownloadde theme waar ik vervolgens een child van heb gemaakt.

Het valt mij op dat als ik onder element.style een width van 910px invul dat het dan allemaal mooi recht komt te staan.
Helaas heeft het geen effect als ik in 'Extra CSS' hetzelfde invul. Zodoende kan ik dit dus ook niet opslaan. Google is ook een beetje vaag over het toevoegen van CSS aan een element.style. Volgens mij is het ook niet heel gebruikelijk om hier CSS aan te hangen.

Ik heb helaas heel weinig ervaring met CSS maar wil het graag leren. Mits jullie mij nog het één en het ander kunnen voorkauwen dan ben ik jullie erg dankbaar xD

femke98 zei:

En, wat denk ik belangrijk kan zijn, gebruik je de Gutenberg of de klassieke editor?
Niemand vind die nieuwe Gutenberg fijn (is mijn ervaring), je werkt daar namelijk met blokken (voor mij echt een crime!) en dus kan je de klassieke editor installeren.

De vraag van PHP4U is ook heel belangrijk, is het een standaard gratis theme en waar heb je hem vandaan? Of is het een betaald theme met meer mogelijkheden? En wat is de naam ervan?

Klik om te vergroten...

Als ik zo google naar 'Gutenberg editor' dan lijkt het er toch verdraaid veel op wanneer ik pagina's wil toevoegen. Maar heeft dit inderdaad effect op de breedte van de blokken die in de HTML zijn vermeld?

Het is een gratis wordpress theme (Bakery Shop)
De pro versie staat hier vermeld: http://prosystheme.com/wordpress-themes/bakery-shop-pro/

Dat je een child hebt gemaakt is goed. Dat bespaart weer een hoop ellende als de maker een nieuwe update pusht.

Met deze custom css ( zet dit vlak boven </head> ) schuift de inhoud weer naar links zodat alles in het midden staat. Echter, bij elk breakpoint (overgang van groot scherm naar kleiner, naar nog kleiner scherm) loopt de tekst een klein beetje rechts eruit. Deze css is een workaround, het is geen structurele oplossing. Test het dus op alle pagina's.

De menubalk is ook te breed bij een bepaalde browser breedte, daar is ook wat custom css voor nodig.

Blijft nog over de smartphone, daar heb ik even naar gekeken maar op het eerste gezicht is het te veel werk om even uit te pluizen. Misschien een berichtje naar de maker van de theme?

Dankjewel bron!

Je eerste stukje CSS heeft het inderdaad recht gezet! Ik zie niet echt de impact van het tweede stukje CSS maar ik heb het er maar voor de zekerheid ingezet. Dankjewel! Op de smartphone is het inderdaad nog allemaal geen gezicht... Daar moet ik mij nog in verdiepen.

Ik heb daarnaast vrij veel gewijzigd aan het standaard thema dat het waarschijnlijk niet zo 123 kan worden opgelost door de maker van het standaard thema.

dan lijkt het er toch verdraaid veel op wanneer ik pagina's wil toevoegen.

Klik om te vergroten...

Yep, at maakt blokken en als je dan een plaatje upload maakt het daar ook een blok van. En als het plaatje dan te groot is.....

Installeer via de plug-ins de standaard editor, zoekwoord klassiek editor en je zult zien dat dat veel prettiger werkt.

Zorg er in ieder geval voor dat plaatjes een standaard grootte hebben voor een website (dus geen 2500 x 2500 mb. op je website zetten). Dat houdt in dat je bijv. 800x600 als standaard geeft (of een tikkie groter), zodat je ruimte ook niet gelijk slinkt.

Ik zou zelf als je dan toch al heel veel veranderd hebt, eens kijken naar een ander thema dat al responsive is voor alle apparaten, dus ook voor de smartphone.
Er zijn er genoeg waar je uit kan kiezen of je kijkt naar een thema wat je kan kopen. Daar kan je dan altijd veel meer dingen in veranderen dan een gratis thema.

Dat houdt in dat je bijv. 800x600 als standaard geeft (of een tikkie groter)

Klik om te vergroten...

Helemaal mee eens! Kleiner komt ook voor, het gaat er een beetje om hoeveel ruimte de website biedt.

.jpg : dit foto formaat toont goed op websites en heeft als voordeel dat de foto kan worden gecomprimeerd (minder kB).
.png : als een foto transparante delen heeft dan is dit formaat de beste keuze.
.gif : beperking in kleuren, beperking in transparantie, en compressie niet mogelijk. Wordt soms gebruikt voor icons.

Door de .jpg foto's te comprimeren valt flinke winst te behalen. Elk paint programma (of iets als IrfanView) heeft de mogelijkheid een .jpg foto te comprimeren. Dit is de instelling "kwaliteit in %". In de praktijk kan je gerust een foto met kwaliteit 85% opslaan, soms nog lager.. Op een website is dit nauwelijks zichtbaar.
Kijk eens ** bij dit voorbeeld ** waarin 6 foto's met een verschillende compressie te zien zijn. De kwaliteit verschilt per foto (70%, 75%, 80%, 85%, 90%, 95%). Zoek de verschillen Op een website kan ee foto met een wat lagere kwaliteit er zelfs mooier uitzien (smoother) dan een hoge kwaliteit.