groups

To put text next to a picture and have space in between:





The code:

<div style="width: 500px;"><span style="float:left; margin-right: 10px"><img src="http://www.eons.com/images/members/ 2009/2/19/0/4/04206053215968518187.gif"& gt;</span><span style="width: 250px; padding: 6px; background: #ffffcc; color: maroon; border:3px solid maroon; font: italic bold 14px arial; float: left;">You can add text to the side of a picture. The neat thing is, you can leave space between the picture and the text! You can leave the text "plain" or you can change the color and/or size. You can put the text within a border with a background if you want. You can make changes to the border. So, take the code and play with it!</span></div><br/><div style="clear:both;"><br/></div>

The eons message box didn't change back some of the character entities in preview - so to get the code as you should be, you can go to the Code Party 2 file

This code has the float: left property. This allows the writing to be beside the picture instead of under it. This code also puts in a margin - margin-right: 10px. You can change the size of the margin. Just remember to keep the number and px with no space between them.

Other things you can change:
The width of the div - width: 500px;
The picture used - Put Your URL in between the quotes in the image tag
The width of the span - width: 250px;
The padding between the border and the words - padding: 6px;
The background color - background: #ffffcc;
The color of the text - color: maroon;
The border - border: 3px solid maroon
The font - font: italic bold 14px arial;

and of course, the text itself!

So, copy the code, paste it into a reply, make some changes and see what happens. If you are new to all of this, don't hesitate to ask questions and we'll help you play!

Don't forget that you can still play with code from the first party! I've gather most of that in a file view link ccs.110mb.com/eons/copar/ bordertextcodes.html You could have two windows open where you could copy from that file and play in here!

In the early days of The Studio, (about 4 months ago) mbotos posted a thread with drop cap examples.  This is a neat way to start a paragraph! You could also use a small picture instead of the one letter. There are three examples with the drop cap code. The two original ones by mbotos and one that's been modified to use a picture instead. Each example will be in a separate reply.

M ichael likes to play with little snippets of code. Here is a sample. I set the overall paragraph width to 400 pixels. Next I placed unique styles on the SPAN tag, to control the presentation of the character 'M', which is the first letter in my name. I could also do my entire name. [see below] Just a little more text here so that you can see how it wraps around the drop cap.

<p style="width:400px"><br /><br /><span style="margin-right:6px;margin-top:5px; float:left;color:white;background: lightcoral;border:4px solid black;font-size:70px;line-height:60px; padding-top:2px;padding-right:5px;font- family:times;">M</span> ichael likes to play with little snippets of code. Here is a sample. I set the overall paragraph width to 400 pixels. Next I placed unique styles on the SPAN tag, to control the presentation of the character 'M', which is the first letter in my name. I could also do my entire name. [see below] Just a little more text here so that you can see how it wraps around the drop cap.</p><br /><br /><div style="clear:both;"><br /></div><br /><br />

If the code doesn't post as it should, you can also get this code from the the Code Party 2 file

Here are some easy things to change:
The M and the rest of the writing, of course
color:white;
background:lightcoral;
border:4px solid black;
font-size:70px;
line-height:60px;
padding-top:2px;
padding-right:5px;
font-family:times;

Some choices for font-family could be:
arial
comic sans
courier
georgia
helvetica
lucinda
palatino
tahoma
times
trebuchet
verdana

Of course, you are not limited to just these changes! Have some fun and see what you can come up with!

Changed the border type on the text box to ridge, added a border to the graphic. Changed colors of text and background of text box.





Here's the code for the changes.

<div style="width: 500px;"><span style="float:left; margin-right: 10px; border:5px dotted #9EC392"><img src="http://www.eons.com/images/members/ 2009/2/19/0/4/04206053215968518187.gif"& gt;</span><span style="width: 250px; padding: 6px; background: #9EC392; color: #2E392E; border:8px ridge #768895; font: italic bold 14px arial; float: left;">You can add text to the side of a picture. The neat thing is, you can leave space between the picture and the text! You can leave the text "plain" or you can change the color and/or size. You can put the text within a border with a background if you want. You can make changes to the border. So, take the code and play with it!</span></div><br /><div style="clear:both;"><br /></div>

I like the border around the picture, KathyD174! That's neat! Did you get that link to the color site from the other post?

Here's the code:
<div style="width: 500px;"><span style="float:left; margin-right: 10px; border:5px double maroon"><img src="http://www.eons.com/images/members/ 2009/3/10/6/8/68201763214194518187.gif"& gt;</span><span style="width: 250px; padding: 6px; background: #ffffcc; color: maroon; border:3px double maroon; font: italic bold 14px arial; float: left;">I borrowed KathyD174's border around the picture, changed pictures and changed the border around the words. The picture is of me trying to multitask!</span></div><br/><div style="clear:both;"><br/></div>

Play with whatever code you want - and don't hesitate to ask questions!

No, haven't checked back for that link yet but will shortly. Thanks!!! Here's another version of the code putting the text box with a marquee.





Here's the code I used. Unfortunately I can't tell if the filter for the gradient is working because I'm using Firefox. I'm having problems with IE and need to work on getting it working tomorrow. Let me know if you see a gradient in the marquee.

<div style="width: 500px;"><span style="float:left; margin-right: 10px; border:5px dotted #9EC392"><img src="http://www.eons.com/images/members/ 2009/2/19/0/4/04206053215968518187.gif"& gt;</span><span style="width: 250px; padding: 6px; background: #9EC392; color: #2E392E; border:8px ridge #768895; font: italic bold 14px arial; float: right;"><marquee Style="filter:progid:DXImageTransform. Microsoft.Gradient
(startColorstr=#a80000,endColorstr=# 4b879a,gradientType=0,
enabled=true); Border: #000000 8px double" width="90%" scrollamount="2" direction="up" height="150px">
<font face="Copperplate Gothic Bold" color="#ffffff" size=4>
You can add text to the side of a picture. The neat thing is, you can leave space between the picture and the text! You can leave the text "plain" or you can change the color and/or size. You can put the text within a border with a background if you want. You can make changes to the border. So, take the code and play with it!
</font> </marquee> </span></div><br /><div style="clear:both;"><br /></div>

KD

S ometimes you need something to attract attention to an important paragraph. Sometimes you just want to dress up something a little. Sometimes you just want something different. Sometimes I have trouble coming up with something else to say!

Here is an example of what happens when you go to change a number from 60 to 50 and get line-height: 650. I goofed, but it is kind of interesting! LOL I'll fix it like it should have been for the next post. Sometimes - not this time - but sometimes a mistake will lead to an interesting way to do something!

Here's what I had intended it to look like!:

S ometimes you need something to attract attention to an important paragraph. Sometimes you just want to dress up something a little. Sometimes you just want something different. Sometimes I have trouble coming up with something else to say!

And here's the code:
<p style="width:400px"><br /><br /><span style="margin-right:6px;margin-top:5px; float:left;color:white;background: maroon;border:4px double black;font-size:60px;line-height:50px; padding-top:2px;padding-right:5px;font- family:verdan;">S</span> ometimes you need something to attract attention to an important paragraph. Sometimes you just want to dress up something a little. Sometimes you just want something different. Sometimes I have trouble coming up with something else to say!</p><br /><br /><div style="clear:both;"><br /></div><br /><br />

Oh, I really like that marquee. You could use that in so many ways to give information!