Tumblr-margin-probleem

[Mvnl]

Ik ben zojuist begonnen met een Tumblr-weblog, en wil daarbij graag de marges rond een afbeelding in mijn posts aan kunnen passen zodat de tekst er niet direct tegenaan staat.

Momenteel gebruik ik deze code voor de afbeelding:

<p><img src="http://www.solarnavigator.net/music/music_images/girls_aloud_promo_photo_sound_of_the_underground.jpg" style="MARGIN-TOP: 4px; FLOAT: left; MARGIN-BOTTOM: 2px; MARGIN-RIGHT: 30px" align="right" height="347" width="324" /></p>

In het voorbeeldschermpje (zeg maar net als 'voorbeeld van bericht'-venster op dit forum) hebben de margin-codes wel degelijk effect, alleen zodra ik mijn blog post staat de tekst gewoon weer tegen de afbeelding aan.

Ik weet niet of ik hiervoor andere codes moet gebruiken of in de CSS-fyle van het tumblr-theme aanpassingen moet maken.. wie kan mij enigszins op weg helpen?

 

[ErikBooy007]

Heb je het ergens online staan? Het zou kunnen zijn dat door je CMS systeem op een of andere manier je styletags eruit gegooid worden.

 

[Mvnl]

Ze worden er inderdaad letterlijk uitgegooid krijg ik het gevoel.. als ik de post later wil editten staan de margin-codes er gewoon niet meer in.. welke bestand moet ik hier plaatsen om te kunnen laten zien waar het mogelijk aan ligt?

 

[ErikBooy007]

Euhm, als je in de broncode kijkt van de pagina waar je edit. Dan staat ergens bijvoorbeeld <form name="blabla" method="post" action="eenpagina.php">

De inhoud van datgene wat bij action staat, wil ik wel even zien.

 

[Mvnl]

Hmm, ik heb 2 css-files waar de hele weblog op 'draait'.
Het posten van een nieuwe blog gaat gewoon via de tumblr-site, net als zeg maar een post op een forum.. in die 2 css-jes vindt ik niets onder 'action' wat lijkt op wat jij postte..
Hoe kom ik aan de broncode van die pagina waarop ik post?

 

[ErikBooy007]

Nee, dat kun je in de CSS ook niet vinden. Maar als dat via Tumblr gaat, kun je dat ook niet aanpassen. Ik dacht dat Tumblr weblog-software was, zoals wordpress.

Als je de CSS-sheets kunt aanpassen, dan kun je wel dit toevoegen:

img {
  margin: 4px 30px 2px 0px;
}

 

[Mvnl]

Als het inderdaad aan iets ligt wat de tumblr-site doet dan is het tamelijk beroerd.. zeker dat het voorbeeld er wel goed uitziet, maar ze het om één of andere reden zo hebben ingesteld dat het uiteindelijk anders op je blog verschijnt.

Ik neem aan dat ik die code ergens in mijn CSS moet plaatsen in het gedeelte wat betrekking heeft op posts op mijn blog?

 

[ErikBooy007]

Ja, dat klopt.

 

[Mvnl]

Dank je, dat helpt! Nu heb ik nog één vraagje: op deze manier wordt er altijd links/rechts/boven/onder een bepaalde ruimte vrij gehouden. Als ik bijvoorbeeld mijn afbeelding links plaats wil ik aan de linkerkant eigenlijk geen ruimte overhouden (want daar mag de afbeelding gewoon netjes links uitgelijnd zijn). Is er nog een code toe te voegen die daar rekening mee houdt?

 

[ErikBooy007]

Hij houdt nu toch aan de linkerkant geen ruimte over? De code die ik gaf zorgt voor 4px aan de bovenkant, 30px rechts, 2px onder en 0px links.

 

[Mvnl]

Jawel, hij houdt aan alle kanten ruimte over. (ik heb alles aangepast naar 5px voor iedere kant, dat vond ik het netste)
Alleen wanneer ik mijn afbeelding helemaal links in een post heb staan (dus zonder tekst aan de linkerkant) dan wil ik eigenlijk dat hij geen ruimte overhoudt aan die kant en gewoon netjes links uitgelijnd staat (en omgekeerd ook, als ik hem rechts plaats wil ik aan de rechterkant ook geen ruimte overhouden).

Overigens heb ik zojuist ontdekt dat wanneer ik richtext-mode uitschakel en over ga op 'plain text/html' de html-codes ineens wel werken!
Het bewerkt wat minder prettig (lastiger inschatten hoe het er uit gaat zien) maar iig werken de normale codes nu weer!

Edit: maar als je toch nog een manier weet voor hetgene wat ik hierboven vroeg hoor ik het graag, dat zou een stukkelijk makkelijker zijn dan steeds voor elke afbeelding weer een margin-code te moeten gebruiken.

 

[ErikBooy007]

Wat ik dan zou doen is:

Wat je net aan je CSS hebt toegevoegd weer weghalen en dit toevoegen:

img.left {
  margin: 5px 5px 5px 0px;
}

img.right {
  margin: 5px 0px 5px 5px;
}

Dan voeg je aan de afbeelding:

class="left"

of

class="right"

toe.

 

[Mvnl]

Super! Komt helemaal goed nu, thanks! :thumb: