Programming Forums > Web Development and Design > HTML / XHTML / CSS

titaniumdecoy · Dec 21st, 2006, 3:02 AM

I am using Wordpress for meh blag, and it automatically surrounds text separated by two carriage returns with paragraph tags. I want to float an image to the right of the text. Unfortunately, the image appears inside paragraph tags no matter where I place it in the post. This seems to have the side effect of causing browsers to ignore the image's margin and padding attributes, although the image is still floated on the right. Any ideas?

demon101 · Dec 21st, 2006, 4:18 AM

are you talking about something like this

(Toggle Plain Text)

<p>

<table align="center" valign="middle">
<td align="left" valign="middle">
text goes here
</td>
<tr>
<td align="center" valign="middle">
put your image here
</td>
</tr>
</table>

<p>

titaniumdecoy · Dec 21st, 2006, 1:27 PM

No, using tables is not an option. Thanks anyway.

Arevos · Dec 21st, 2006, 1:53 PM

If you have access to wp-includes/default-filters.php, then you can comment out all the lines that add the 'wpautop' filter. As I understand it, the wpautop filter is responsible for the auto-formatting in WordPress.

Putting a <br /> tag directly after your img tags may also work.

titaniumdecoy · Dec 21st, 2006, 2:30 PM

Quote:

Originally Posted by Arevos

If you have access to wp-includes/default-filters.php, then you can comment out all the lines that add the 'wpautop' filter. As I understand it, the wpautop filter is responsible for the auto-formatting in WordPress.

I need the autoformatting, though...

Quote:

Putting a <br /> tag directly after your img tags may also work.

That doesn't seem to work. :o

The most promising thing I have found so far seems to be the Script Enabler (zip file) plugin. I think it would be possible to tweak it to do what I want but so far I haven't been able to make it work the way I want it to.

DaWei · Dec 21st, 2006, 4:05 PM

Pain in the butt. What if you tack the image right to the text in the preceding paragraph (no newlines), float it right, and give it a margin that matches the default paragraph margin/spacing? See here.

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.test
{
	border: 1px solid #0000ff;
	margin: 20px 0px 0px 20px;
	float: right;
}
</style>
</head>
<body>
	<p>Virtute tractatos in mel, malis audire prodesset in cum, vis eu hinc
		nominati. Sanctus scripserit ne cum, veri sapientem et duo. Has nobis
		blandit id. Ne eos nisl debet.<img class="test" src="images/2cv.jpg" /></p>
	<p>Id sed aeque paulo mediocrem. An eos invidunt sapientem, dico tota est
		te, quod minim verterem ex sea. Dolore civibus invenire est no. Officiis
		aliquyam aliquando ex vix.</p>
	<p>In vel eros minim eligendi. Ex vix autem maiorum accusata, sit iusto
		definiebas ea, sint duis vocibus nec at. In duo delectus percipit petentium,
		odio novum repudiare ut mea. Dicta quaeque adversarium id quo. An choro
		elaboraret est.</p>
	<p>Ei mel epicurei placerat oporteat, zzril appareat vel cu. Laoreet voluptatum
		at duo. Vix numquam epicurei ei, duo ad appareat scribentur. Mel ut
		tamquam eruditi, ea elitr hendrerit moderatius has, mel ne wisi voluptatibus.
		Ut mei saepe scriptorem, et qui tation graecis.</p>
	<p>Nec cu wisi alterum eloquentiam. Agam laboramus quo in. At tempor regione
		pri. Te civibus fastidii vel, quaestio tractatos quaerendum ad eum,
		viderer saperet est no.</p>

</body>
</html>

titaniumdecoy · Dec 21st, 2006, 10:34 PM

Thanks for all the suggestions. I finally figured out that it was a previous style in the stylesheet that was taking priority over the one I was editing. I still can't figure out how this could happen because said style was the very last one in the stylesheet (img { ... }).

Dec 21st, 2006, 3:02 AM	#1
titaniumdecoy Expert Programmer Join Date: Nov 2005 Posts: 928 Rep Power: 4	<img> inside <p> tag I am using Wordpress for meh blag, and it automatically surrounds text separated by two carriage returns with paragraph tags. I want to float an image to the right of the text. Unfortunately, the image appears inside paragraph tags no matter where I place it in the post. This seems to have the side effect of causing browsers to ignore the image's margin and padding attributes, although the image is still floated on the right. Any ideas?

Dec 21st, 2006, 4:18 AM	#2
demon101 Hobbyist Programmer Join Date: Mar 2006 Location: westboro, ohio Posts: 160 Rep Power: 0	are you talking about something like this (Toggle Plain Text) <p> <table align="center" valign="middle"> <td align="left" valign="middle"> text goes here </td> <tr> <td align="center" valign="middle"> put your image here </td> </tr> </table> <p> <p> <table align="center" valign="middle"> <td align="left" valign="middle"> text goes here </td> <tr> <td align="center" valign="middle"> put your image here </td> </tr> </table> <p> __________________ Demon101 Production's Code Forums Last edited by demon101; Dec 21st, 2006 at 4:30 AM.

Dec 21st, 2006, 4:05 PM	#6
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Pain in the butt. What if you tack the image right to the text in the preceding paragraph (no newlines), float it right, and give it a margin that matches the default paragraph margin/spacing? See here. (Toggle Plain Text) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> .test { border: 1px solid #0000ff; margin: 20px 0px 0px 20px; float: right; } </style> </head> <body> <p>Virtute tractatos in mel, malis audire prodesset in cum, vis eu hinc nominati. Sanctus scripserit ne cum, veri sapientem et duo. Has nobis blandit id. Ne eos nisl debet.<img class="test" src="images/2cv.jpg" /></p> <p>Id sed aeque paulo mediocrem. An eos invidunt sapientem, dico tota est te, quod minim verterem ex sea. Dolore civibus invenire est no. Officiis aliquyam aliquando ex vix.</p> <p>In vel eros minim eligendi. Ex vix autem maiorum accusata, sit iusto definiebas ea, sint duis vocibus nec at. In duo delectus percipit petentium, odio novum repudiare ut mea. Dicta quaeque adversarium id quo. An choro elaboraret est.</p> <p>Ei mel epicurei placerat oporteat, zzril appareat vel cu. Laoreet voluptatum at duo. Vix numquam epicurei ei, duo ad appareat scribentur. Mel ut tamquam eruditi, ea elitr hendrerit moderatius has, mel ne wisi voluptatibus. Ut mei saepe scriptorem, et qui tation graecis.</p> <p>Nec cu wisi alterum eloquentiam. Agam laboramus quo in. At tempor regione pri. Te civibus fastidii vel, quaestio tractatos quaerendum ad eum, viderer saperet est no.</p> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> .test { border: 1px solid #0000ff; margin: 20px 0px 0px 20px; float: right; } </style> </head> <body> <p>Virtute tractatos in mel, malis audire prodesset in cum, vis eu hinc nominati. Sanctus scripserit ne cum, veri sapientem et duo. Has nobis blandit id. Ne eos nisl debet.<img class="test" src="images/2cv.jpg" /></p> <p>Id sed aeque paulo mediocrem. An eos invidunt sapientem, dico tota est te, quod minim verterem ex sea. Dolore civibus invenire est no. Officiis aliquyam aliquando ex vix.</p> <p>In vel eros minim eligendi. Ex vix autem maiorum accusata, sit iusto definiebas ea, sint duis vocibus nec at. In duo delectus percipit petentium, odio novum repudiare ut mea. Dicta quaeque adversarium id quo. An choro elaboraret est.</p> <p>Ei mel epicurei placerat oporteat, zzril appareat vel cu. Laoreet voluptatum at duo. Vix numquam epicurei ei, duo ad appareat scribentur. Mel ut tamquam eruditi, ea elitr hendrerit moderatius has, mel ne wisi voluptatibus. Ut mei saepe scriptorem, et qui tation graecis.</p> <p>Nec cu wisi alterum eloquentiam. Agam laboramus quo in. At tempor regione pri. Te civibus fastidii vel, quaestio tractatos quaerendum ad eum, viderer saperet est no.</p> </body> </html> __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Unordered list inside <p>	somehollis	HTML / XHTML / CSS	6	Jul 4th, 2006 11:01 PM
Field Validators inside a User Control	hoffmandirt	ASP.NET	5	Jun 30th, 2006 3:52 PM
How to call normal "write" function inside a class	Edgar	C++	1	May 24th, 2006 7:35 PM
Are #define allowed inside namespaces?	aznluvsmc	C++	3	Apr 1st, 2006 8:40 PM
colors. fonts and font size inside the table ?_?	cloud-	HTML / XHTML / CSS	2	Mar 12th, 2005 4:10 PM

Dec 21st, 2006, 1:27 PM	#3
titaniumdecoy Expert Programmer Join Date: Nov 2005 Posts: 928 Rep Power: 4	No, using tables is not an option. Thanks anyway.

Dec 21st, 2006, 1:53 PM	#4
Arevos Programming Guru Join Date: Aug 2005 Location: England Posts: 1,499 Rep Power: 5	If you have access to wp-includes/default-filters.php, then you can comment out all the lines that add the 'wpautop' filter. As I understand it, the wpautop filter is responsible for the auto-formatting in WordPress. Putting a <br /> tag directly after your img tags may also work.

Dec 21st, 2006, 10:34 PM	#7
titaniumdecoy Expert Programmer Join Date: Nov 2005 Posts: 928 Rep Power: 4	Thanks for all the suggestions. I finally figured out that it was a previous style in the stylesheet that was taking priority over the one I was editing. I still can't figure out how this could happen because said style was the very last one in the stylesheet (img { ... }).

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Programming Forums > Web Development and Design > HTML / XHTML / CSS

<img> inside <p> tag