• Hallo,

    Ik ben bezig met een WordPress website. Daarin wil ik een plaatje/afbeelding tussen de tekst zetten die linkt naar een pagina. Dit lukt ook gewoon, alleen staat het plaatje wat hoog, ik wil hem wat lager zetten zodat hij mooi precies tussen de tekst in staat.
    Ter verduidelijking een plaatje ervan: Ik wil het bordje met “weddingplanner” erop iets lager kunnen plaatsen, zodat hij mooi gelijk/gecentreerd staat tussen de tekst.


    voorbeeld
    Staat nu wat te “hoog” in de tekst.
    Hoe kan ik dit het beste doen?

    • Dit onderwerp is gewijzigd 7 jaren, 9 maanden geleden door DutchOwl.
    • Dit onderwerp is gewijzigd 7 jaren, 9 maanden geleden door DutchOwl.
    • Dit onderwerp is gewijzigd 7 jaren, 9 maanden geleden door DutchOwl.
6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • De afbeelding aanpassen en een class-naam geven. Die style je in de (bijvoorbeeld) style.css

    .naam-plaatje { margin-bottom: -7px;}

    – OF INLINE –

    Je gaat naar de pagina van de afbeelding. Daar zet je de editor op “text modus” waardoor je de code kan zien.
    Daar staat dan de afbeelding met link, voorbeeld:

    <a href="#"> <img src="http://www.voorbesld.nl/plaatje.jpg" alt="wedding" /> </a>

    Op de link ga je eenn inline style zetten waardoor het er als volgt uit ziet:

    <a style="margin-bottom: -7px;" href="#">

    Dit is even uit mijn hoofd vanaf de telefoon. Het kan dus ook zijn dat je Margin-top: 5px; moet gebruiken.

    • Deze reactie is gewijzigd 7 jaren, 9 maanden geleden door wpbeveiligen.
    Thread starter DutchOwl

    (@dutchowl)

    Ik heb de <a style=”margin-bottom: -7px;” er tussen gezet, zo ziet het er bij mij nu uit:

    <a href="http://www.ikgahetregelen.nl/weddingplanner"><img src="http://www.ikgahetregelen.nl/wp-content/uploads/2017/02/sign_weddingplanner_knop-300x113.png" width="174" height="67" /></a>

    Alleen zie ik geen verschil, qua hoogte. Doe ik iets niet goed?

    • Deze reactie is gewijzigd 7 jaren, 9 maanden geleden door DutchOwl.

    In de code die je weergeeft staat geen style!
    ook is het jammer dat ik niet op die pagina kan kijken want dan kunnen we je misschien beter van dienst zijn.

    Thread starter DutchOwl

    (@dutchowl)

    Met de inline:
    <a style="margin-bottom: -7px;" href="http://www.ikgahetregelen.nl/weddingplanner"><img class="alignnone wp-image-3820" src="http://www.ikgahetregelen.nl/wp-content/uploads/2017/02/sign_weddingplanner_knop-1-300x90.png" width="150" height="35" /></a>

    Zonder zoals het was
    <a href="http://www.ikgahetregelen.nl/weddingplanner"><img class="alignnone wp-image-3820" src="http://www.ikgahetregelen.nl/wp-content/uploads/2017/02/sign_weddingplanner_knop-1-300x90.png" width="150" height="35" /></a>

    Nogmaals, als we op jouw website kunnen mee kijken komt er misschien wel een oplossing dus mogen we het, werkende, adres waar we dit kunnen zien?

    Thread starter DutchOwl

    (@dutchowl)

    Het is toch zelf gelukt!

    <a href="http://www.ikgahetregelen.nl/weddingplanner"><img class="alignnone wp-image-3820" style="margin-bottom: -17px;" src="http://www.ikgahetregelen.nl/wp-content/uploads/2017/02/sign_weddingplanner_knop-1.png" alt="weddingplanner" width="159" height="40" /></a>

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘Afbeelding lager zetten tussen tekst’ is gesloten voor nieuwe reacties.