WP: bilden ska laddas från höger, hur?

Tråden skapades och har fått 5 svar. Det senaste inlägget skrevs .
1

Jag sitter med en Wordpress-sida och jag använder mig av Portfolio Slideshow plugin. Jag har valt att placera description och title till höger om bildspelet vilket fungerar fint medan det här horisontella bilder, landscape. När det är porträtt-formatet däremot flyttar texten och titeln med så den är inte längre justerad till höger.

Ändrar jag bara marginalen så ändrar jag ju så alla bilder hamnar mer till höger, dvs landscape-bilderna går över texten.

Måste man rota i php-filen?

Skulle vara mycket tacksam för hjälp!

  • Medlem
  • Göteborg
  • 2011-07-28 23:08

När man tittar på dessa två bilder, så ser det rätt naturligt med titel och text närmast bilden, oberoende av dess bredd. Men, om jag förstår dig rätt, så vill du hellre att det blir luft mellan bild och text när bilden är smalare, så att texten alltid är på samma plats i högerkant.

Rimligen skall detta kunna lösas med css utan att röra i php.
Antagligen är det paragraferna med klasserna "slideshow-title" och "slideshow-caption" som du måste styla.
Kan man inte sätta den med absolut positionering med 0 från höger (eller annat lämpligt avstånd i px)? Kom ihåg isf att förälder-taggen måste ha "position: relative;" på sig för att det skall fungera: här verkar det vara diven med class "slideshow-content" om jag läser php-filen rätt, med det ser man bäst om man tittar på den färdiga html i webbläsaren.

Själv tycker jag att det helt klart är mer "rätt" ifall texten följer med bilden, men det kändes lite hoppigt och som jag har placerat räknaren och titeln på projektet så känns det som om "det bara blev så" istället för att man verkligen har valt det.

Med det här har jag fått texten att alltid ligga fast, yey! Behövde sätta en fast vidd på diven bara.

div.slideshow-content {
float:left;
width: 800px;
}

Men jag har ännu inte lyckats få bilderna att aligna sig till höger istället för vänster, det här har inte hjälpt..
img.slideshow-content{
right:0px;
position:absolute;
}

Dessutom har jag gjort något med blankslate som får firefox att inte visa sidan när den är online "på riktigt".. inga errors från php'n i alla fall. grrrr....

  • Medlem
  • Göteborg
  • 2011-07-29 22:33

OK, om jag har fattat rätt nu så skall även bilden skall vara högerjusterat, och till vänster om texten/rubriken som är i sig högerjusterat på sliden dock med en fast bredd.

När det gäller bilden på sliden: är "img.slideshow-content" rätt selektor? I slideshows egen css använder dom ".slideshow-content img".
Får du rätt selektor till bilden, så borde följande fungera:
"rätt bildselektor"{
right:nnpx;
position:absolute;
}
där nn är textens bredd plus marginal till bilden.

Och glöm inte:
div.slideshow-content {
position: relative;
}

Yey! Nu fungerar det! Dock, varför position:relative på slideshow-content-diven? Märkte ingen skillnad med det?

Det var selectorn för bilden, var säker på att den stämde men måste ha ändrat på den fram o tillbaka.. ><

  • Medlem
  • Göteborg
  • 2011-07-30 07:44
Ursprungligen av klarabara:

Yey! Nu fungerar det! Dock, varför position:relative på slideshow-content-diven? Märkte ingen skillnad med det?

Om det är den taggen som direkt omsluter img-taggen som man kör "position:absolute;" på, så bör man ha det så för att det skall fungera som det är tänkt i alla webbläsare.
Den egenskapen kanske redan är satt där via slideshowfunktionen eller en annan omslutande div med samma dimensioner som sliden, och då funkar det fint det med.

1
Bevaka tråden