Manipulating text around images

@Sunny_GAug 16.2005

Hi everybody. Just a little FYI, I know almost no CSS so if I don’t make any sense, just say so…

I was hoping some of you could tell me how I can make a paragraph sit beside an image–so far I’ve only been able to make the paragraph sit under the image. This paragraph is made like this:

~~[QUOTE]~~

<div style=”background-color:#454545; width:300px:><div style=”font-weight:bold;><p>Title</div><br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p></div>

[/QUOTE]

I want that paragraph to be on the right side of the image. What do I have to do to make it work?

Thanks everybody!

to post a comment

CSS

36 Comments(s) _↴

@ray326Aug 16.2005 — #Make the paragraph a paragraph, the title a heading and float the image left.

<img style="float:left">

<h3>title</h3>

<p>a bunch of stuff that goes in a paragraph</p>

There's more to be said but that's the crux of it.

@Sunny_GauthorAug 16.2005 — #OK! I'll give that a try.... Just a sec...

==5 minutes later==

Whoo Hoo! It worked! It looks great!

I trust this same technique can be used for images on the right with paragraphs on the left as well? (Just change float:left to float:right, right?)

Thanks alot!

@ray326Aug 16.2005 — #Generally yes.

@Sunny_GauthorAug 16.2005 — #OK, something went wrong....

This is how I want the paragraph to look:
What is FIRST?

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT[/QUOTE]

But I changed the "What is FIRST" line to H3 with the styles I wanted (Same size as text but bold) and now it looks like this:

What is FIRST?

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT[/QUOTE]
Now it is like that! How do I fix that?

Thanks!

@toicontienAug 16.2005 — #You're seeing the H3's and <p>'s margins. The tags H1 thru H6, P, UL, OL, DL, and PRE tags have top and bottom margins by default. Now you're digging a little deeper into the [url=http://www.w3.org/TR/CSS21/box.html#box-dimensions]CSS box model[/url]. To shore up the space between the heading and the paragraph:

In CSS:

<i>
 </i>.pageTitle {
 margin-bottom: 0;
 }
 
 .pageTitleDesc {
 margin-top: 0;
 }

And then in HTML:

<i>
 </i>&lt;h3 class="pageTitle"&gt;...&lt;/h3&gt;
 &lt;p class="pageTitleDesc"&gt;...&lt;/p&gt;

@Sunny_GauthorAug 16.2005 — #Cool! I'll give that a try... I'll just run to my computer--hold on a second...

@Sunny_GauthorAug 16.2005 — #Cool! It worked! Thanks very much ray326 and toicontien!

@ray326Aug 17.2005 — #And if that's the way you want all your H3s to be then you can skip the class. I'll often use something like

h3 { margin:0 }

p { margin: 0 0 1em 0 }

So the inter-paragraph spacing comes below each paragraph and they snuggle up to the headers nicely.

@Sunny_GauthorAug 17.2005 — #And if that's the way you want all your H3s to be then you can skip the class. I'll often use something like

h3 { margin:0 }

p { margin: 0 0 1em 0 }

So the inter-paragraph spacing comes below each paragraph and they snuggle up to the headers nicely.[/QUOTE]
I think I'll use your way... I know nothing about classes so this will work better for me.

What do the two zeros after p margin mean? Is that a mistake?

@SiddanAug 17.2005 — #Hey Sunny

Why don´t explore this [URL=http://www.w3schools.com/css/css_examples.asp]Site[/URL] ... Expecially with the margins, for starters. Just click on the link and it will open a new page with a demonstration which you can change and it will show instantly the effect

@ray326Aug 17.2005 — #Siddan's got a good idea for you. The "shorthand" margin is

margin: top right bottom left

So the p gets no margins except on the bottom.

@Sunny_GauthorAug 17.2005 — #Yeah, but I'd like to stick with what I can understand although I will surely use that site in the future! Thanks Siddan!

@Sunny_GauthorAug 18.2005 — #Hi guys! I just have one more teensy weensy question.

I uploaded that page I was working on and there is still one more little issue, but I don't know if it actually is a problem.

The second text box (Team 847's FIRST spirit) is wrapped around an image. Is there any way of wrapping the text around the image without splitting that text box into two like it is now or is it not a problem?

Also I'd just like you all to know that this page is only a prototype and markup is slightly sloppy.

Here is the page: http://www.team847.com/New

And here is the stylesheet: http://www.team847.com/New/css.css

Thanks!

@SiddanAug 19.2005 — #First I looked in IE and saw nothing out of the ordinary and had no clue what you were asking about..

But in FF I saw it clearly that the "textbox" is divided into two.

Wel Sunny, it is doing that because in your markup you are making it so.

You have litteraly dived the text box into two

[CODE]
 <div style="background-color: rgb(69, 69, 69); padding-left: 5px; padding-right: 5px; width: 383px; height: auto; float: left;"> 
 <h3 class="pageTitle">Team 847's FIRST spirit</h3>
 <div id="regular_text"><p class="pageTitleDesc">Team 847 is definitely one of ....*
 *.... the most spirited teams out there. 
 caution tape.&nbsp; We constructed ties, skirts,[COLOR=Red]</p></div></div>[/COLOR]<img src="index_files/spirit%2520award.jpg" style="border: 0pt none ; padding: 0pt; float: right;" height="127" width="183"><br><!-- continued -->
 
 [COLOR=Red]<div style="background-color: rgb(69, 69, 69); padding-left: 5px; padding-right: 5px; width: 100%; height: auto; float: left;">
 <div id="regular_text"><p class="pageTitleDesc">[/COLOR]
 
  <!-- continued -->
  head-bands, wigs, 
  overalls and....* *....which fit in with our theme 
  perfectly—Robot zone</p></div></div></
 [/CODE]

so delete the red marked and maybe you get what you want?

And you can even delete the width so the textbox will extend all the way to the right

@SiddanAug 19.2005 — #.. by the way... place the image above the second Div text box and remove the float:left inside that div, also remove the width ...

and it will look the same as the first textbox

@Sunny_GauthorAug 19.2005 — #What I want is the text box to wrap around the image on it's left side and underneath it.

@SiddanAug 19.2005 — #Well, as I said.. remove those in red and move that image above the Second Div textbox.

remove float:left for that div and also the width

@Sunny_GauthorAug 19.2005 — #Hi! I just gave your advice a try. It worked halfway. The look I'm trying to acheive is for it to be outside the textbox but with the text wrapped around it like ti was already.

Here is what it looked like after I made your changes. (Attached file)

[upl-file uuid=c00ff2bd-bda5-4974-8c21-d2dbc6b8096f size=39kB]PHRED.zip[/upl-file]

@Sunny_GauthorAug 19.2005 — #Oh. Whoops! I'll have to try that tomorow... By this time tomorow I'll have that edit posted--see ya then and thanks!

@SiddanAug 19.2005 — #I see still you haven´t removed that Div which I have marked with red,,,

copy all this and paste it

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Team 847 PHRED</title>
 
 <style>
 <!--
 body         { width: 700px; height: 100%; padding-top:0; }
 -->
 </style>
 <link rel="stylesheet" type="text/css" href="index_files/css.css"></head>
 
 <body><div align="center">
 <table id="container" cellpadding="0" cellspacing="10">
 <tbody><tr>
 <th colspan="2" id="banner">
 <img src="index_files/caution%2520banner.gif" style="border: 0pt none ; width: 696px;" alt=""></th>
 
  </tr>
  <tr>
   <td colspan="2" id="menu" align="center">
   <a href="http://www.team847.com/New/index.htm">Home</a> &nbsp; 
   <a href="http://www.team847.com/New/first.htm">FIRST</a> &nbsp; 
   <a href="http://www.team847.com/New/team.htm">Team</a> &nbsp; 
   <a href="http://www.team847.com/New/robots.htm">Robots</a> &nbsp; 
   <a href="http://www.team847.com/New/stories.htm">Stories</a> &nbsp; 
   <a href="http://www.team847.com/New/lego_league">Lego League</a> &nbsp; 
   <a href="http://www.team847.com/New/resources.htm">Sponsors</a> &nbsp; 
   <a href="http://www.team847.com/New/pictures.htm">Pictures</a> &nbsp; 
   <a href="http://team847.proboards32.com/">Forum</a>
 
   </td>
  </tr>
  <tr>
   <td id="page_menu" align="left" valign="top"><div id="page_menu_HL">
   <h3 class="pageTitle">FIRST links</h3>
   <p class="pageTitleDesc">
   <a href="http://www.usfirst.org/">FIRST's site</a><br>
   <a href="http://www.legoleague.org/">Lego League</a></p></div>
 
   </td>
   <td id="main_contain" align="left" valign="top">
   <a href="http://www.usfirst.org/">
   <img src="index_files/FIRST%2520logo%2520black.jpg" style="border: 0pt none ; float: left; width: 125px; height: 108px;"></a>
 
   <div style="background-color: rgb(69, 69, 69); padding-left: 5px; padding-right: 5px; width: 100%; height: auto;"> 
   <h3 class="pageTitle">What is FIRST?</h3>
 
   <div id="regular_text"><p class="pageTitleDesc">For Inspiration and Recognition of Science and Technology.&nbsp; FIRST 
   is made up of teams all over the world although it originated in 
   the United States starting only with a handful of schools and 
   students.&nbsp; It is a fun exiting way to learn about robotics, teamwork and 
   the only place to learn gracious professionalism—acting 
   professionally and respectfully in a competitive environment.</p></div></div><p>
 
 </p>
 <img src="index_files/spirit%2520award.jpg" style="border: 0pt none ; padding: 0pt; float: right;" height="127" width="183">
 
 <div style="background-color: rgb(69, 69, 69); padding-left: 5px; padding-right: 5px; height: auto;"> 
 <h3 class="pageTitle">Team 847's FIRST spirit</h3>
 <div id="regular_text"><p class="pageTitleDesc">
 
 Team 847 is definitely one of 
 the most spirited teams out there. We 
 were awarded the "spirit award" during the 2005 Pacific Northwest 
 regional competition for our FIRST spirit and because we cheered like crazy!<br>
 In the pit-area we gave away large quantities of buttons and flashers which 
 were an instant hit.&nbsp; Probably the best thing we handed out was our 
 caution tape.&nbsp; We constructed ties, skirts,
 
 <br><!-- continued -->
 
 
  <!-- continued -->
  head-bands, wigs, 
  overalls and any other apparel one could imagine. &nbsp;Everyone 
  called us "team caution" or "the safety team" which fit in with our theme 
  perfectly—Robot zone</p></div></div></td>
 </tr>
 </tbody></table>
 </div>
 </body></html>
 [/Code]

This is what I mean

@ray326Aug 19.2005 — #You've got several problems including multiple definitions of the id "regular_text" and superfluous divs around your paragraphs but what's getting you is what Siddan said. You've needlessly broken the text apart.

@Sunny_GauthorAug 19.2005 — #I fixed that now! Cool! It looks great!

OK, I have one more question... I added backgrounds to the h3 titles. Now in the td cell "sub_menu" the h3 with the background has pushed the one below it into the cell border even though padding should have disallowed that. What do I do?

Here it is: http://www.team847.com/New

@ray326Aug 20.2005 — #Here's the structure of your mark up in that area.

<i>
 </i>&lt;div&gt; 
 &lt;h3&gt;FIRST links&lt;/h3&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;p&gt;
 &lt;a href="http://www.usfirst.org/"&gt;FIRST's site&lt;/a&gt;
 &lt;a href="http://www.legoleague.org"&gt;Lego League&lt;/a&gt;
 &lt;/p&gt;
 &lt;/div&gt;

And here's what it should look like.

<i>
 </i>&lt;h3&gt;FIRST links&lt;/h3&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="http://www.usfirst.org/"&gt;FIRST's site&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.legoleague.org"&gt;Lego League&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

I'd ditch the tables, too.

@Sunny_GauthorAug 20.2005 — #So using an UL will solve the background padding issue? Need I actually use one?

I'd ditch the tables, too.[/QUOTE]CSS layouts are way out of my skills man. I've ordered a CSS book from Amazon.com to help me out though.

http://www.amazon.com/exec/obidos/tg/detail/-/0321305256/002-9636366-3241626?v=glance

@ray326Aug 20.2005 — #Well, using simple structured HTML that properly represents the content will go a long way to simplifying your presentation problems. That's an excellent book. I've got a copy and recommend it to anyone that wants an all-in-one. I think Cederholm's tutorial style is better for some people than need to see the same thing done several ways, though.

@Sunny_GauthorAug 20.2005 — #OK, so the UL will solve the background problem?

PS... I got the page to be valid transitional HTML and valid CSS! Whoo Hoo!

@ray326Aug 20.2005 — #OK, so the UL will solve the background problem?[/QUOTE]By itself, no. Along with a little style rework, maybe. I can't really see the problem, not knowing what you expect it to look like, so I don't know. Nothing on the left side looked all that wierd to me. The stuff hanging out of the content to the right was far wierder.

@Sunny_GauthorAug 20.2005 — #The stuff hanging out of the content to the right was far wierder[/QUOTE]
WHAT?! Do you think you could post a screenshot with the weird right side?

@ray326Aug 20.2005 — #Don't have Firefox, eh? You really should have Firefox with Web Developer, MeasureIt and Colorzilla extensions.

[upl-file uuid=4c6e1788-b703-450a-91ce-d31a95bde165 size=12kB]sunny1.jpg[/upl-file]

@Sunny_GauthorAug 20.2005 — #Jeez that is weird.

Don't have Firefox, eh?[/QUOTE]
I'm downloading it right now as I type this--it is at 70% right now on my stinky dialup connection. Why do you think the page does that? Should I add a margin to the background areas? (Margins affect the outside and not the inside of containers, right?)

Thanks!

@Sunny_GauthorAug 20.2005 — #OK, I got Firefox and the extensions you mentioned... I'll go install them on my computer and see if I can fix those issues...

Thanks ray326!

@ray326Aug 21.2005 — #Here's a pure css version of your page. Not exact but close and much more semantic in content.

[upl-file uuid=6448fbde-c080-4367-86b6-2c7f4a490975 size=2kB]firstpage.zip[/upl-file]

@Sunny_GauthorAug 21.2005 — #Hey cool! Mind if I use it to remake the page entirely with CSS?

@ray326Aug 22.2005 — #Knock yourself out. That's why I did it -- so you could use it and learn from it. I try to refrain from doing that unless the page is pretty simple. Yours isn't trivial but it wasn't too bad, even after a couple of margaritas. ?

@SiddanAug 22.2005 — #Jeez that is weird.
[/QUOTE]

If you still wonder what caused that strange effect in Firefox, I can tell you it had to do with the styled DIV you had put to 100% wide. If you remove the width if those Divs then it will look normal in both IE and FF

But do try and suck in the css knowledge that Ray gave you ?

@Sunny_GauthorAug 22.2005 — #If you still wonder what caused that strange effect in Firefox, I can tell you it had to do with the styled DIV you had put to 100% wide. If you remove the width if those Divs then it will look normal in both IE and FF[/QUOTE]

I thought it had something to do with that... So should I have specified the exact width in pixels? I don't think it matters anymore because I'm doing the CSS layout now.

But do try and suck in the css knowledge that Ray gave you[/QUOTE]
I will! I've got another site that could do with a programming upgrade.

Don't look at this site if you faint at the sight of poor html programming:

http://www.peak.org/~kvkk

I'm the guy in the 4-H clover shirt

[URL=http://www.peak.org/~kvkk/Pictures/2003/Duck%20Champions.jpg]Me & my duck Sax (2003 show)[/URL]

Also in #CSS _↴

iframe background, can it be made invisible?How did Javascript get into my pages?div's width

Success!

Help @Sunny_G spread the word by sharing this article on Twitter...

Tweet This

Manipulating text around images

36 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Manipulating text around images

36 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

36 Comments(s) _↴

Also in #CSS _↴