Note-style box with image

[Dan]

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

[Barbara de Zoete]

On Thu, 18 May 2006 22:10:18 +0200, Dan <te*******@gmail.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 |

[Neredbojias]

To further the education of mankind, "Dan" <te*******@gmail.com>
vouchsafed:

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

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

--
Neredbojias
Infinity has its limits.

[Steven Saunderson]

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

[Dan]

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>

[Dan]

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>

[Neredbojias]

To further the education of mankind, Steven Saunderson <ph****@Syd.au>
vouchsafed:

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 ?

-Space under image?? Didn't know that was desired.

To do that, padding-left and absolute-position image. (Waste of space,
though.)

--
Neredbojias
Infinity has its limits.

[zzpat]

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