ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down.
Read our Farewell Blog Post for more details.
Separating text and image
-
-
- David Farmer
- Sr. Rocketeer
- Posts: 229
- Thanks: 1
- This is probably really a Joomla or CSS question. Sometimes when I put text next to an image, part of the text sometimes goes under or over the image instead of next to it. The image below is aligned left with horizontal space of 12. I have also used a download span class. As you can see the bullet point is nudging next to the image and the download span continues under the image and to the left of it. Is there a way of separating the image more clearly from the text? I would ideally like the download span bar to start to the right of the image. Sorry I accidentally loaded the image twice...
-
-
-
If you use JCE or other editor you could be able to do that.....is there a way that could you give me your url to see?
Regards
Mariela
-
-
-
- David Farmer
- Sr. Rocketeer
- Posts: 229
- Thanks: 1
-
Hi Mariela,
My URL is www.dramagames.net/. ; I have taken the bullet point out but you can see the span problem is still there.
I am using JCE so maybe there is a feature I need to use.
Thanks,
David.
-
-
-
At JCE you find a button option named Inser/Edit Image. after to press it you will get that image below, from there you can modify that image padding (Vspace and the Hspace).
Hope thats Help.
Regards
Mariela
-
-
-
- David Farmer
- Sr. Rocketeer
- Posts: 229
- Thanks: 1
-
Hi
Yes I have played around with the Image editor window but it did not fix the problem - Perhaps it might be a problem which could be solved in the HTML.
-
-
-
- David Farmer
- Sr. Rocketeer
- Posts: 229
- Thanks: 1
- I have mucked about with the JCE image-editor but with no further success. Below is is a similar problem where the 'Read more' graphic is hidden under the image. The original is at www.dramagames.net
-
-
-
- GollumX
- Elite Rocketeer
- Posts: 2817
- Thanks: 0
-
Hi Mr Farmer. Try the following:
For the "Read More..." button:
Open up template_css.css and around 410, look for the following class and add the bit i've highlighted:a.readon, a.readon2 {
display:block;
float:right;
font-size:100%;
font-weight:normal;
height:24px;
line-height:24px;
margin-top:20px;
text-indent:10px;
width:114px;
}
For the Download span highlights, try the following:
Open up template_css.css and around 554, look for the following class and add the bit I've highlighted:span.alert, span.info, span.download, span.note {
display:block;
float:right;
margin:15px 0pt;
padding:10px 10px 10px 45px;
width:400px;
}
Note that the 400px added is just a guide. It works quite well without any width at all, or you can put in your own preferred width.
Have a good day, and good luck with your website
- Say no to Internet Explorer 6.
twitter.com/mark_up
-
-
-
- David Farmer
- Sr. Rocketeer
- Posts: 229
- Thanks: 1
-
-
-
- GollumX
- Elite Rocketeer
- Posts: 2817
- Thanks: 0
-
You're welcome
- Say no to Internet Explorer 6.
twitter.com/mark_up
-
Time to create page: 0.066 seconds