Wordpress - Få bilde med i teksten

[Lucas]

Hvis jeg spør på feil plass, beklager jeg det, men dette var den plassen som først slo meg !

 

Jeg står for "updates" osv. på www.Bjerkviklan.com

 

Se på www.Battlefield.no som eksempel hvor de får bildet på siden av teksten i sine news, jeg vet de bruker ett annet system osv. men det burde vel forsatt være mulig her og ?

 

Når jeg prøver å få dette til, så kommer tekseten enten på nederste linje av bildet, eller over bildet i seg selv, hvis dere tar en titt på siden nå, så ser dere problemet !

 

Se her, slik som dette vil jeg ha det:

-------------------------|

Bilde Bilde Bilde Bilde| Tekst tekst tekst tekst tekst tekst

Bilde Bilde Bilde Bilde| Tekst tekst tekst tekst tekst tekst

Bilde Bilde Bilde Bilde| Tekst tekst tekst tekst tekst tekst

Bilde Bilde Bilde Bilde| Tekst tekst tekst tekst tekst tekst

Bilde Bilde Bilde Bilde| Tekst tekst tekst tekst tekst tekst

--------------------------|

 

men det blir slik:

 

Tekst tekst tekst tekst tekst tekst

-------------------------|

Bilde Bilde Bilde Bilde|

Bilde Bilde Bilde Bilde|

Bilde Bilde Bilde Bilde|

Bilde Bilde Bilde Bilde|

Bilde Bilde Bilde Bilde|

--------------------------|

 

Eller

 

-------------------------|

Bilde Bilde Bilde Bilde|

Bilde Bilde Bilde Bilde|

Bilde Bilde Bilde Bilde|

Bilde Bilde Bilde Bilde|

Bilde Bilde Bilde Bilde|

--------------------------| Tekst tekst tekst tekst tekst...

 

Jeg kan ikke noe om koding enten i HTML eller CSS, php osv.

Det er Waldemeister her på forumet som har laget siden, men jeg har ikke fått tak på han siden en stund før jul

 

Er det mulig få dette til ved hjelp av Word-press som jeg bruker ?

Endret 14. april 2005 av Lucas

[pgdx]

Det du er ute etter er CSS-attributten «float» med verdien «left»

 

Hvis du har en egen klasse til innleggene i bloggen, legg dette i CSS-filen:

.klasse_til_innlegg img {
float:left;
}

Eventuelt legg dette i bilde-taggen:

<img src="lokasjon/til/bilde.png" alt="Bildets navn" style="float:left;" />

Endret 14. april 2005 av drange_net

[Lucas]

akkurat det jeg ikke vet, var tross alt ikke jeg som laget siden, eller la den opp, så jeg må finne CSS filen til Wordpress og legge til dette ?

 

evt. den siste tror jeg virker, vet ikke, men kan teste !

Endret 14. april 2005 av Lucas

[pgdx]

Kjør img-taggen, da.

[Lucas]

Skal vi se, kjører denne,

 

<img src="http://www.bjerkviklan.com/forum/images/avatars/gallery/BjerkvikLAN/bjerkviklan2.jpg" alt="" style="float:left;" />

 

men siden ble litt buggy da, og videre inne i posten så legger noe tekst seg på siden av bildet, prøver å "space" slik at teksten skulle komme under bildet, men reagerer ikke.

[pgdx]

Ja, da må du legge til style="clear:both" på neste p-element.

 

I det hele tatt skaffer dette deg masse slit, og du bør lokalisere CSS-filen din, eller overlate arbeidet til noen andre.

Endret 14. april 2005 av drange_net

[Lucas]

Ja, da må du legge til style="clear:both" på neste p-element.

 

I det hele tatt skaffer dette deg masse slit, og du bør lokalisere CSS-filen din, eller overlate arbeidet til noen andre.

Jo, du har kanskje rett at jeg drar på meg mye slit ja, men jeg tror det er verdt strevet

 

og siden du har vært så kjempe knupp og få tak i koden jeg trenger + css filen min

Takk for hjelpen du har gitt meg så langt ihverfall

 

Er det evt. noen som kan endre der det trengs å poste CSS-filen her ?

Endret 14. april 2005 av Lucas

[andm]

Se litt på denne siden. Jeg har prøvd ut det som står beskrevet, og det fungerer utmerket ...

[Lucas]

hmm..har grublet på det der nå ^^^ men plagdes

 

Ingen snille skjeler som vil edite CSS filen min slik at det funker ?

[pgdx]

Det du kan gjøre, er å legge til denne biten. Du finner et stykke ned, noe som ser slik ut:

p {
font-size: 1.2em; /*12px*/
line-height: 1.5em;
letter-spacing: 0.01em;
}

Det bytter du ut med dette:

p {
font-size: 1.2em; /*12px*/
line-height: 1.5em;
letter-spacing: 0.01em;
clear:both;
}
p img {
float: left;
}

[Lucas]

Hvilken tag skal jeg bruke da ? den vanlige eller den du viser ovenfor ?

[pgdx]

Hvilken tag skal jeg bruke da ? den vanlige eller den du viser ovenfor ?

Har du lagt det til i CSS-filen?

 

Du kan bruke en vanlig img-tag, med alt-attributten!

[FuLu]

Kommer ann på hvilen theme du bruker. Du har siste Wordpress 1.5? Hvis du bruker default themet, så ligger det en style.css fil under mappa /wp-content/themes/default/

 

Siden jeg bruker eget theme og style.css så lagde jeg en klasse for paragrafen og bilde mitt. Og når jeg skriver et innlegg så må jeg i paragrafen som bilde skal være i skrive noe slik:

En paragraf før den med bilde, siden wordpress automatisk wrapper ting inn i <p></p> selv, trenger jeg ikke skrive det på denne.

<p class="iff"><img src="" alt="" class="left" /> Men her må jeg wrappe paragrafen selv inn i <p> fordi jeg bruker en "spesiell" floatfix på paragrafen min. Bilde blir da lagt til venstre for denne teksten.</p>

 

Nå er det avhengig av hvordan HTML og CSS din ser ut, men slik ser det viktigste ut hos meg (og det funker hos meg, om det funker hos deg er noe annet):

#content div.post p.iff { /* image float fix */
overflow: hidden; // denne metoden slipper du bruke clear: both; på neste <p>
height: auto !important;
height: 1%; // IE fix
}

#content div.post p.iff img {
padding: 4px;
border: 1px solid #efefef;
background-color: #fff;
}

#content div.post p.iff img.left {
float: left;
margin: 0 0.5em 0.5em 0;
}

#content div.post p.iff img.right {
float: right;
margin: 0 0 0.5em 0.5em;
}

[andm]

Jeg trenger litt hjelp. Jeg bruker følgende kode for å justere bilders plassering i innleggene i Wordpress. Teksten og bildet kommer akkurat der jeg vil ha det, men det oppstår linjeskift der hvor jeg putter inn koden for bildet. Dette ønsker jeg ikke, ettersom jeg i enkelte tilfeller vil ha bildene med tekst tett ovenfra, så vel som fra siden og nedenfra. Er det noen måte å endre dette på?

 

.img-shadow {
clear: both;
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

(Koden er hentet herfra.)

 

På forhånd takk for hjelpen ...