WordPress tekstomloop bij foto's

Status
Niet open voor verdere reacties.
R

Renske60

Gebruiker
Lid geworden
29 apr 2014
Berichten
116
Hallo allemaal,

De tekst op mijn WordPress-site vouwt zich niet netjes om foto's heen, op welk formaat ik de foto's ook plaats. Als ik een nieuwe alinea met tussenkop naast een foto wil zetten, springt zo'n alinea een heel stuk naar beneden, tot onder het niveau van de foto.

Ik heb al in het style sheet van het thema zitten neuzen maar ik zie bij de tussenkoppen op het eerste gezicht niets wat dit kan veroorzaken. Waarbij ik moet aantekenen dat ik nog niet erg thuis ben in CSS... :(

Weet iemand hoe ik dit moet oplossen?

Alvast bedankt!

Hartelijke groeten,

Renske
 
Je zal een float moeten toevoegen. Ik gebruik dit, welke ook beschreven stond op de template how-to van Wordpress:

Code: 
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}
 
@ PHP4U: dank je wel voor je reactie. Dat ziet er ingewikkeld uit. Een paar vraagjes:
- Moet ik dat hele stuk invoegen?
- Waar?
- Moet ik parameters aanpassen aan mijn theme? Welke?
Alvast bedankt.
 
style.css
 
De tekst op mijn WordPress-site vouwt zich niet netjes om foto's heen, op welk formaat ik de foto's ook plaats. Als ik een nieuwe alinea met tussenkop naast een foto wil zetten, springt zo'n alinea een heel stuk naar beneden, tot onder het niveau van de foto.
Klik om te vergroten...

Je kan als je in dat tekstveld bent, op visueel of tekst klikken.
Indien je visueel bezig bent, zul je merken dat dit inderdaad weleens gebeurt. Klik je daarna op Tekst, kan je dat veranderen, want Tekst geeft de opmaak mee met niets erin.
En let erop dat je de foto's meegeeft waar ze moeten staan, je hebt dus keuze uit Links uitlijnen, rechts uitlijnen of gecentreerd.
Kies je links of rechts, gaat de tekst er keurig langs, kies je gecentreerd, dan staat de foto in het midden en heb je de tekst er alleen boven en onder.
 
@ Femke98: Dank je wel voor je reactie. Ja, ik heb daar al een hele tijd mee zitten prutsen maar hij doet het gewoon niet. Ik denk dat het aan het thema ligt en dat ik het dus via het CSS moet oplossen. Maar daar weet ik helaas nog niet zo veel van. Moet ik snel wat aan gaan doen, want er zitten wel meer dingen in die ik moet aanpassen. Zo heb ik een plugin opgenomen waarmee je onderkoppen kunt plaatsen onder je berichten. Die werkt wel, maar gebruikt een heel klein corps. Dat moet vrij eenvoudig aan te passen zijn in die plugin en/of het thema, maar dat gaat me allemaal nog boven de pet... (En een andere plugin is geen optie want mijn thema is nogal kieskeurig als het daarom gaat...;) Dit was de enige die werkte.)
 
Zo heb ik een plugin opgenomen waarmee je onderkoppen kunt plaatsen onder je berichten.
Klik om te vergroten...
Dat is helemaal niet nodig, een plugin daarvoor.
Dat kan je zelf regelen met html.

Verder zou een link naar de website leuk izjn, zodat we kunnen zien hoe en wat. Een gratis thema is vaak niet helemaal te veranderen, soms mag dat niet van de maker.
Let daarop. Maar je hebt oko heel veel thema's die gratis zijn en gewoon bruikbaar zoals jij het wil.

Verder moet je er voor zorgen dat je zo min mogelijk plugins gebruikt, want dat maakt de website super traag. Plus, er kunnen plugins zijn die je helemaal niet nodig hebt omdat het op een andere manier kan. Of dat je een plugin gebruikt die niet competable is met je thema. Ook dat kan.
 
Hai Femke,
Dank je wel voor je tips!
Het gaat om mijn 'hobbysite' renskecramercreatief.nl. Dit thema mag wel aangepast worden.
Hoe maak je een onderkop met html?
Ja, ik ben terughoudend met plugins i.v.m. de laadtijd. En ik heb inderdaad al diverse keren conflicten gehad, zodat ik de desbetreffende plugins weer heb weggehaald.
 
Je pagina laad heeeeeeeeel langzaam, normaal ben ik als lezer/kijker dan al weg. Dus dat kan al liggen aan plugins of aan andere zaken.
Verder kan het liggen aan de hosting waar je zit. Dus ook dat zou ik graag willen weten.

Verder heb ik de site van de maker van het thema bekeken, je hebt dus een gratis thema van http://www.template-joomspirit.com/wordpress/free-wordpress-theme

Het zijn mooie thema's, maar ik vraag me af welke jij hebt, zie hem er niet tussen staan? (ik zal niet goed kijken!)
Dan als ik weet welke het is, kan ik deze even testen op een ruimte van mij (bij een betaalde hosting) zodat ik de werking van dit thema eens kan bekijken. En dus kan zien wat je bedoelt met je vraag.
Want zoals ik het nu zie, is het toch allemaal mooi en duidelijk? Dus geen idee op welke pagina je een probleem hebt?

En verder wil ik graag weten welke plugins je allemaal hebt.

(ik kan soms wat langzaam reageren, maar ik zit in revalidatie, dat houdt in dat ik soms uren/halve dagen in het revalidatiecentrum ben, dus ik reageer dan alleen als ik thuis ben en niet al te moe ben)

ps. zie dat je veel kan instellen? http://www.template-joomspirit.com/theme-wordpress/theme-01/?page_id=29
dus ook de fonts. En dat zul je dan terug moeten vinden in het Dashboard.

ps2. Waarom maak je van je fotowerk geen slideshow op de desbetreffende pagina's? (kijk eens naar mijn pagina http://www.praktijk-havayah.nl/intuitief-schilderen/spirit-art/, zo heb ik het gedaan met mijn schilderkunst ;) )
 
Laatst bewerkt:
Hai Femke,

Wat naar, die revalidatie. Ik wens je heel veel sterkte en beterschap! (Ik weet wat het is, ik was in 1999 en 2008 aan de beurt.)

Wat leuk dat we dezelfde hobby hebben! Je maakt indrukwekkend werk! De mooiste van die pagina vind ik 'Zo boven zo beneden' en 'Onstabiele rust'.

Ik kijk ervan op dat mijn hobbysite bij jou zo langzaam laadt. Bij mij is hij juist tamelijk snel! Anyway: de hostingservice is Antagonist.

Het thema is WPspirit-01. Mijn versie is iets gemodificeerd t.o.v. de versie in WP omdat ik een bug aantrof. De maker van het thema heeft dat probleempje voor me opgelost. En ja, je kunt enorm veel instellen bij dit thema. Dat is precies de reden waarom ik het heb gekozen.

Het tekstomloopprobleem is niet zichtbaar doordat ik ter plaatse een 'valse' tussenkop heb gebruikt: het is gewone tekst, geen h3. Zie de tussenkop 'En weer een pocketcamera...' op de pagina http://www.renskecramercreatief.nl/fotograferen-blijft-fascineren/een-leven-in-cameras. Ik heb de boel tijdelijk even gewijzigd naar een h3 zodat je kunt zien wat ik bedoel (zie de bijgaande screendump). Dat doet hij bij elk formaat en bij elke locatie van de foto (links, gecentreerd of rechts).

Plugins: Akismet, BruteProtect, iThemes Security, 404page, Black Studio TinyMCE Widget, TinyMCE Advanced, Broken Link Checker, Contact Form 7, Display Widgets, Email Address Encoder, Favicon by RealFaviconGenerator, Limit Login Attempts (zou er uit kunnen omdat iThemes Security hetzelfde doet, maar ik weet nu niet welke plugin het eigenlijke werk verricht en dus heb ik het maar even zo gelaten), Max Buttons, Really Simple CAPTCHA, Redirection, Rensponsive Lightbox, Share Buttons by AddToAny, Simple Image Widget, Subtitles (voor die onderkoppen), Supreme Google Webfonts, Top 10, WordPress SEO, WP Canvas-Gallery, WP Statistics.

Wat betreft de slideshow: ik heb het op dezelfde manier gedaan als jij. Als je de foto's aanklikt, opent zich een slideshow. Ik heb het net nog even gecheckt en het werkt allemaal nog. Of bedoel je zo'n voortdurend lopende slider?
Voorbeeldje voor Femke.jpg
 
Laatst bewerkt:
Ik heb nu geen tijd meer, maar zie wel dat je heel veel plugins hebt die overbodig zijn.
Dat houdt de boel alleen maar op.

Antagonist is een goede hosting, dus dat zit snor, hoewel je natuurlijk nooit kan weten hoeveel gebruikers er op de server zitten waar jij ook op zit. Hoe meer, hoe langzamer je website.

Ik neem aan dat je die tekst naar boven wilt? Dan moet je die foto aanpassen en zetten op RECHTS uitlijnen. Dat kan je doen door op de foto te klikken en dan het pootloodje (bewerken) en daar op Rechts zetten.
De tekst kan je naar boven brengen door even in op TEKST te klikken rechts bovenin je vak waar je je tekst neerzet (dus even pagina bewerken), dan zie je de tekst zonder opmaak (of met opmaak maar dan in html gebeuren). Dan zie je waarschijnlijk ook dit staan:  
dat is een witregel html.
Die dus weghalen.

Ik moet zo weg en mag de hele middag tot half 6 binnen vertoeven..........fijn met dit weer........
 
De foto stond al rechts uitgelijnd en er was nergens rare code te zien. (Daar let ik wel op.)
Voor alle zekerheid heb ik hem nog een keer opgemaakt en ja hoor, weer hetzelfde resultaat.
Ik hoop dat het meeviel vanmiddag...
 
Intussen ben ik erg benieuwd naar hoe je onderkoppen met HTML kunt maken, zoals je laatst schreef.
 
Voordat ik weg moet:

Ik heb het idee dat als de foto keurig naar rechts is uitgelijnd, dat je even moet kijken of je deze iets meer naar boven kan zetten.
Ik ben bang dat de titel van En weer een pocketcamera......dit veroorzaakt.

html opmaak kan je hier lezen: http://www.cursushtml.be/cursus/Tekst_opmaak
maar ook hier http://www.htmlschool.nl/tekstopmaak.html (deze is meer op de grootte van tekst)
Kopteksten html is bijv. <h2> of <h3> zie hiervoor ook http://www.htmlschool.nl/tekstopmaak.html (en dan even naar beneden scrollen)

Als je met html werkt, dan moet je wel de tekst in het dashboard in TEKST gezet worden, niet in Visueel.
Vaak is er in een thema ook heel veel aanwezig (vaak ook niet met gratis thema's) zodat je heel veel kan instellen.

In visueel kan je namelijk ook met <h2> werken, zie screenshot. Dan hoef je dat niet handmatig te doen.
07.JPG
 
Laatst bewerkt:
Als ik de foto boven de h3 zet, komt er dáár naast de foto een grote blanco ruimte. Dat schiet dus niet op.

Ik heb in de cursussen gezocht naar codering voor de onderkoppen, maar ik heb ze niet gevonden. Misschien er overheen gekeken?

Overigens ben ik wel redelijk bekend met de HTML-basics; ik pruts regelmatig aan de tekstkant, al was het maar om de tweekoloms opmaak goed te krijgen.

Sterkte vandaag!
 
De onderkoppen kan je dus regelen met wat ik je laat zien....zie screenshot....... ;)

Verder denk ik dan toch dat het probleem foto aan het thema ligt. En dat wordt dan erg moeilijk om dat precies te kunnen veranderen.
Je hebt 1000den thema's die gratis zijn, dus kijk eens naar een andere

en anders is het een optie om toch die css in te duiken of de maker te vragen hoe of wat.
 
Laatst bewerkt:
Heb ontdekt dat in je zip file een hele mooie handleiding zit over dat thema.

Unzipt het hele pakket wat je hebt gedownload.
Daarna zul je meerdere files/mappen zien staan.

Klik op de map met de naam wp-spirit(jouw nummer)_unzip_first
In die map zit een file die heet manual.html

Open die (opent in je browser) en bekijk daar alles over je thema. Het hele hoe en wat staat daar vermeld. Handig!!
 
Hai Femke,

Onderkoppen: inderdaad, zo kan het ook. Om de een of andere reden begreep ik even niet wat je precies bedoelde. Ik ben een beetje aan vakantie toe geloof ik...

Manual: ja, die manual ken ik. Ik heb er nog een keer snel doorheen gebladerd maar het omloopprobleem kwam ik niet tegen.

Morgen een wat rustiger dag hoop ik. Dan kijk ik nog eens en probeer ik ook die truc met de float van PHP4U uit, want dat is er ook nog steeds niet van gekomen.

Ik laat nog weten hoe het afloopt.

Groetjes,

Renske
 
@PHP4U @Femke Ik heb de float toegevoegd aan het style.css en ben gaan experimenteren. Dat heeft het probleem niet opgelost (zie de screendump). Er zit ook geen rare code in de pagina. Het thema blijft bij een tussenkop naar een nieuwe regel springen.
Ook de manual heeft me niet verder gebracht (maar dat verwachtte ik wel, want die ken ik zo goed als uit mijn hoofd ;-) )
Lastig.... Weten jullie er nog iets op? Pagina met float.jpg
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan