Note-style box with image

Hi,
What is the best way to set up a "Note block" on a web page with CSS.
This should consist of a colored box that contains an image on the
left, and left-justified text floating to the right.

Example:
_____________________________
IMAGE |XXXXXXXXXXXXXXXXX

||||||XXXXXXXXXXXXXXXXX
||||||XXXXXXXXXXXXXXXXX
_____________________________

= blank space

On Thu, 18 May 2006 22:10:18 +0200, Dan <textheads (AT) gmail (DOT) com> wrote:

What is the best way to set up a "Note block" on a web page with CSS.
This should consist of a colored box that contains an image on the
left, and left-justified text floating to the right.

Example:
_____________________________
IMAGE |XXXXXXXXXXXXXXXXX
|||||||XXXXXXXXXXXXXXXXX
|||||||XXXXXXXXXXXXXXXXX
_____________________________

| = blank space

Google for two column layout css:
<URL:http://www.google.com/search?q=two+column+layout+css>


--
______PretLetters:

weblog | http://www.pretletters.net/weblog/weblog.html |
webontwerp | http://www.pretletters.net/html/webontwerp.html |
zweefvliegen | http://www.pretletters.net/html/vliegen.html |

On Fri, 19 May 2006 02:41:55 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

_____________________________
IMAGE |XXXXXXXXXXXXXXXXX
|||||||XXXXXXXXXXXXXXXXX
|||||||XXXXXXXXXXXXXXXXX
_____________________________

| = blank space

Um, just text and an image? Put both in <div>, float image left.

Will this give the OP space under the image ?

--
Steven

I tried the following div method. The text wraps under the image. How
can I keep space under the image, and how can I align the text to the
top of the image?

Or should I try creating three divs: one for the image, one for text,
and one to hold the other two?

Or alternatively, would it make since to simply create a div with a
background image of the note image and background color, and put the
text over this image? What are the drawbacks of this method?

What I currently have:
CSS:
#note
{ float: left;
background-color: blue;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 15px;
}

HTML:
<div id=note><p><img src="note.gif" />Text Text Text Text Text Text
Text</p></div>

Thanks to all who replied for your help.

I think I have something that works now. Please let me know of any
potential downsides to this method. One problem I am still dealing with
is that the text has to create enough lines to display the entire
image.

<style type="text/css" title="Stylesheet" media="all">
#note
{
background-image: url(note.gif);
background-color: yellow;
background-repeat: no-repeat;
margin-bottom: 10px;
margin-top: 20px;
padding-left: 105px;
}

..noteText
{
color: blue;
}
</style>
<div id=note><p class=noteText>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</span></p>

Dan wrote:

Thanks to all who replied for your help.

I think I have something that works now. Please let me know of any
potential downsides to this method. One problem I am still dealing with
is that the text has to create enough lines to display the entire
image.

style type="text/css" title="Stylesheet" media="all"
#note
{
background-image: url(note.gif);
background-color: yellow;
background-repeat: no-repeat;
margin-bottom: 10px;
margin-top: 20px;
padding-left: 105px;
}

.noteText
{
color: blue;
}
/style
div id=note><p class=noteText>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</span></p

Try adding height: XXpx; to #note.



--
Pat
Impeach Bush
http://zzpat.bravehost.com/

Articles of Impeachment
Center for Constitutional Rights
http://zzpat.bravehost.com/april_200...peachment.html