Recent Topics

1 Jul 26, 2005 04:00    

I read a thread with the image surrounding by text but I couldn't do it on my blog.

I uploaded a photo and modified that code with the float style as I've read in that previous thread: with <img style="float:right;" src="/media/photo.jpg" width="100" height="100" hspace="10"/>

but I got this error message:

Tag img may not have attribute style

Am I missing something? I'm using b2 evolution version 0.9.0.10

Why when I simply copy&paste a code from Dreamweaver doesn't work there? I mean I managed to get the photo on the left side and that on the right side be a text but it is seen only from an backoffice admin section. On the frontend photo is above of a text.

Also, I'm interested in which CSS file I have to enter that code in order to make my style?

But most important is that I get the answer why I get the error message for the first solution with float style.

Please help.

2 Jul 26, 2005 04:48

I tried the img tag like yours and it didn't work either.
I use:
<img src="http://yoursite.com/media/yourpic.jpg" align="right" />

sometimes I have to put: <br clear="all" />

after the last sentance.

knotty

3 Jul 26, 2005 05:04

I really don't know how then for some members like kwa it works!? I would like if someone would help me to solve this.

I spent several hours on this and found some weird things. For example, I can align the photo when there is a mt_dot_org skin but even when I use that skin and put a hspace="10" tag, for example formating isn't good again.

Then, in kubrick2evo photo is on the left side on the upper right side there are two lines of text and below nothing. Text continuous below the photo.

Does the image alignemnt has something with the skin that is in use?

Does anyone else has image alignment problems? I would like to make that style for image positioning but I don't know if I would get good results in different skins.

Also, there is another problem and it is that when using some skins like uneven, text block is not adjusted with the photo. I mean where there are no much text in the text block, and if the photo is larger that the text it overlays the text block below.

Why is this happening? Why the photo overlays the another different article insteatd that its text block be adjusted to its size!?

I hope that someone knows answers on my questions.

4 Jul 26, 2005 08:46

Does the image alignemnt has something with the skin that is in use?

Exactamundo. It's controlled by the css in each skin. Since you seem to be happy using css, just crack open each css file and make sure the classes for handling images do what you want them to do. If you don't know css, then there's awlays [url=http://www.w3schools.com/css/default.asp]w3schools[/url].

5 Jul 26, 2005 12:25

Graham wrote:

Does the image alignemnt has something with the skin that is in use?

Exactamundo. It's controlled by the css in each skin. Since you seem to be happy using css, just crack open each css file and make sure the classes for handling images do what you want them to do. If you don't know css, then there's awlays [url=http://www.w3schools.com/css/default.asp]w3schools[/url].

The fact is that I did everything like kwa wrote http://forums.b2evolution.net/viewtopic.php?t=4763 and still doesn't working! I'm loosing the patience with b2 evolution. It is a great application but this image problem is really frustrating. When I changed my css file with that class and call that class in the text editor my photo was at the right side but the text was bellow!

Why someone don't tell me why I and other users like knotty have problems with putting img style="float:right;" !?

Thank you.

6 Jul 26, 2005 12:30

post a link to your blog

¥

7 Jul 26, 2005 12:54

¥åßßå wrote:

post a link to your blog

¥

My blog is at http://www.knowbies.com

It worked the image aligning for the custom skin. Once I tried the same like before and it worked.

However, I don't know how to manage to work in other skins like mt_dot_org or kubrick2evo. I entered this code



.bPosts a img.img-incrustee {
   margin:0 0 8px 8px;
   padding:0 0 0 0;
   float:right;
   clear:right;
   border:4px solid #a0a0ff;
   background-color:#d0d0d0;
   filter:   progid:DXImageTransform.Microsoft.shadow(direction=135,color=#808080,strength=4);
}
.bPosts a:visited img.img-incrustee {
   margin:0 0 8px 8px;
   padding:0 0 0 0;
   float:right;
   clear:right;
   border:4px solid #8080d0;
   background-color:#d0d0d0;
   filter:   progid:DXImageTransform.Microsoft.shadow(direction=135,color=#808080,strength=4);
}
.bPosts a:hover img.img-incrustee {
   margin:0 0 8px 8px;
   padding:0 0 0 0;
   float:right;
   clear:right;
   border:4px solid #ffd0d0;
   background-color:#d0d0d0;
   filter:   progid:DXImageTransform.Microsoft.shadow(direction=135,color=#808080,strength=4);
}

in the css files but it doesn't work. You can see it by switching to mt_dot_org or kubrick2evo.

Is it important where I place this code? I don't know where should I post this code?

I still don't know why can't I use img style="float:right;" !?

Thank you.

8 Jul 26, 2005 14:01

I simply use a float left as per the following CSS

.thumbs {
border:1px solid #ccc;
float:left;
background:#f5f4ee;
margin:4px 10px 6px 0;
padding:4px;
}

and a universal clear:both forms part of the CSS for the "Comment?" section. http://wow-factor.com/index.php?cat=1

Re your site issues.... try not putting your <img> in <p> tags but do put all text and paragraphs within <p> tags and get rid of those <br /> tags

eg the following is not cool. Note that the Image is contained with a <p> tag that is closed at the end of all that !!!!!!nnnn mmmm <br /> stuff

<div class="bText">
		<p><img class="img-incrustee" alt="This is my image" src="http://www.knowbies.com/blog/media/bizinger.jpg"/><br />
This is a test to see whether image aligning works. hddddddddddddddddddddd<br />

hjdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />
hdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddhjdj<br />
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<br />
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm<br />
llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
	</div>

Just try the following instead

<div class="bText">
		<img class="img-incrustee" alt="This is my image" src="http://www.knowbies.com/blog/media/bizinger.jpg" /><p>This is a test to see whether image aligning works. hddddddddddddddddddddd</p><p>jdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />
hdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddhjdj<br />
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<br />
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm<br />
llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
	

9 Jul 26, 2005 14:01

This floats your images right on your kubrick skin:-

.img-incrustee{
float:right;
clear:right;
}

¥


Form is loading...