css no text wrap around image help?

[Ccasati]

I have three styles-- one applies a shadow to images that go on the left
(.shadow), then there's some text that I DON'T WANT TO WRAP on the right (all
images are VARYING SIZES so left margins can't be set to just 150 or whatever!)
that when I notice a paragraph wrapping around text I'll apply the .nowrap
class to it. THEN sometimes I'll apply .shadowr to an image I would like to
show on the right hand of that text.

I am having a terrible time getting the text to not wrap without sacrificing
it's position next to (and not below) the .shadow image.

Any advice is APPRECIATED!

Here's the class info:

.shadow{
float:left;
clear:left;
background: url(images/shadow.png) no-repeat bottom right !important;


/* respectful browsers (e.g. Firefox/Opera/Safari) ONLY take notice of this
line*/
/*background: none;
disrespectful browsers clear the background graphic, in this case allowing
the alpha filter to work in IE5.5 and 6 */
background: url(images/shadow.gif) no-repeat bottom right
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(sizingMethod=scale,
src='images/shadow.png'); /* the MS alpha filter */
margin: 10px 5px 15px;
display: inline;
}
.shadow img{
position:relative;
bottom:6px;
right: 8px;
border: 1px solid #eee;
border-color: #eee #888 #666 #ddd;
background:#fff;
padding:5px 3px 10px; /* gives us the white area - but not in IE5 + IE5.5 */
margin: 0px;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: [url]http://www.dynamicdrive.com/style/[/url] */
.nowrap{
clear: left;
border: 1px solid gray;
}

.nowrap .shadow{
float: left;
/*width: 155px;*/
}

* html .nowrap p{ /* IE 3px jog hack*/
height: 1%;
}

.nowrap p{
margin-top: 0;
margin-left: auto;
}


.shadowr{
float:right;
clear:left;
background: url(images/shadow.png) no-repeat bottom right !important;

/* respectful browsers (e.g. Firefox/Opera/Safari) ONLY take notice of this
line*/
/*background: none;
disrespectful browsers clear the background graphic, in this case allowing
the alpha filter to work in IE5.5 and 6 */
background: url(images/shadow.gif) no-repeat bottom right
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(sizingMethod=scale,
src='images/shadow.png');
display: block;
margin: 5px 5px 0px 20px;
position: relative;
}
.shadowr img{
position:relative;
bottom:6px;
right: 8px;
border: 1px solid #eee;
border-color: #eee #888 #666 #ddd;
background:#fff;
padding:5px 3px 10px; /* gives us the white area - but not in IE5 + IE5.5 */
margin: 0px;
}

[Murray *ACE*]

I don't really understand your question, and I'd need to see the whole page
to help. Can you try again, please, with specific reference to things I see
on the page?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:eg9g5a$4h9$1@forums.macromedia.com...

>I have three styles-- one applies a shadow to images that go on the left
> (.shadow), then there's some text that I DON'T WANT TO WRAP on the right
> (all
> images are VARYING SIZES so left margins can't be set to just 150 or
> whatever!)
> that when I notice a paragraph wrapping around text I'll apply the .nowrap
> class to it. THEN sometimes I'll apply .shadowr to an image I would like
> to
> show on the right hand of that text.
>
> I am having a terrible time getting the text to not wrap without
> sacrificing
> it's position next to (and not below) the .shadow image.
>
> Any advice is APPRECIATED!
>
> Here's the class info:
>
> .shadow{
> float:left;
> clear:left;
> background: url(images/shadow.png) no-repeat bottom right !important;
>
>
> /* respectful browsers (e.g. Firefox/Opera/Safari) ONLY take notice of
> this
> line*/
> /*background: none;
> disrespectful browsers clear the background graphic, in this case
> allowing
> the alpha filter to work in IE5.5 and 6 */
> background: url(images/shadow.gif) no-repeat bottom right
> filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(sizingMethod=scale,
> src='images/shadow.png'); /* the MS alpha filter */
> margin: 10px 5px 15px;
> display: inline;
> }
> .shadow img{
> position:relative;
> bottom:6px;
> right: 8px;
> border: 1px solid #eee;
> border-color: #eee #888 #666 #ddd;
> background:#fff;
> padding:5px 3px 10px; /* gives us the white area - but not in IE5 + IE5.5
> */
> margin: 0px;
> }
> /*Credits: Dynamic Drive CSS Library */
> /*URL: [url]http://www.dynamicdrive.com/style/[/url] */
> .nowrap{
> clear: left;
> border: 1px solid gray;
> }
>
> .nowrap .shadow{
> float: left;
> /*width: 155px;*/
> }
>
> * html .nowrap p{ /* IE 3px jog hack*/
> height: 1%;
> }
>
> .nowrap p{
> margin-top: 0;
> margin-left: auto;
> }
>
>
> .shadowr{
> float:right;
> clear:left;
> background: url(images/shadow.png) no-repeat bottom right !important;
>
> /* respectful browsers (e.g. Firefox/Opera/Safari) ONLY take notice of
> this
> line*/
> /*background: none;
> disrespectful browsers clear the background graphic, in this case
> allowing
> the alpha filter to work in IE5.5 and 6 */
> background: url(images/shadow.gif) no-repeat bottom right
>
> filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(sizingMethod=scale,
> src='images/shadow.png');
> display: block;
> margin: 5px 5px 0px 20px;
> position: relative;
> }
> .shadowr img{
> position:relative;
> bottom:6px;
> right: 8px;
> border: 1px solid #eee;
> border-color: #eee #888 #666 #ddd;
> background:#fff;
> padding:5px 3px 10px; /* gives us the white area - but not in IE5 + IE5.5
> */
> margin: 0px;
> }
>
>

[Ccasati]

I found a great explanation from someone over at P7's css forum--

[url]http://www.complexspiral.com/publications/containing-floats/[/url]

[Murray *ACE*]

Eric Meyer strikes again! 8)

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:egm3ka$a5b$1@forums.macromedia.com...

>I found a great explanation from someone over at P7's css forum--
>
> [url]http://www.complexspiral.com/publications/containing-floats/[/url]
>
>

[Ccasati]

It was great reading, did not solve my problem.

Tomorrow, I throw in the towel: Daaaaaaaaaaaaaaaaaaaaaang.
It's enough to go back to a table-based layout.

Old school Hack 1; Css 0.

[Murray *ACE*]

Why?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:egmuj7$b2h$1@forums.macromedia.com...

> It was great reading, did not solve my problem.
>
> Tomorrow, I throw in the towel: Daaaaaaaaaaaaaaaaaaaaaang.
> It's enough to go back to a table-based layout.
>
> Old school Hack 1; Css 0.

[Ccasati]

Because the text is wrapping! : ( [url]http://64.85.1.68/african-americans.asp[/url]

[Murray *ACE*]

Copeland - sorry for being so dense. Can you explain your problem again for
me, please?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:egnuue$i4j$1@forums.macromedia.com...

> Because the text is wrapping! : (
> [url]http://64.85.1.68/african-americans.asp[/url]

[Ccasati]

Murry, Thank you SO MUCH for taking the time to look into this. I realized this
morning I had originally posted about this in AUGUST! So it's been driving me
crazy for awhile...

I set up an example page at [url]http://64.85.1.68/css.htm[/url] -- basically, it's one
of those things that "seems" so simple and is maddening... hmm... just like me?
; )

There are two classes for images that are varying sizes- one, .shadow, tells
it to float left, the other, .shadowr, gets it to float right. Then text fills
the page. But the client does not want text to wrap under these images. So I
created .nowrap and tried all kinds of rules, applied it to divs, p, span... I
pretty much tried everything I could think of, spent lots of time researching
(and read a lot of great articles! : ) ), but... we go live Monday, so now I
have to have a definitive solution.

If you can crack this I will be sooooooo impressed... Oh wait, I already am.
: )

Oh, p.s. while I'm picking your brain, here's other css puzzles I ran across:
(better than the Sunday crossword puzzle, no?)

These were all in that left hand .menu <td> which is aligned top.
1. Have you ever known a way to get TWO bg images in a td or div? I've been
using two classes per item for awhile but it wouldn't do 2 bg images. (I wanted
one repeat y image of the gradient, then that bottom fill as a bottom-aligned
no repeat) Again, I finally copped out and created one really looooooong 2000
px gradient with the bottom shadow and attached it as a no-repeat. Yuk.

2. That text over the bottom shadow in the menu bar: again, I copped out and
incorporated it into the graphic. But it would have been cool to know how to
get a div to align bottom that is placed within a top-aligned td. Or how
someone would go about doing that. (I orignally put the div in the address bar
<td> area with negative placement; but that screwed up my bottom address bar
area's height)

[Murray *ACE*]

Copeland - I'm disappointed....

function mmLoadMenus() {
if (window.mm_menu_0621115333_0) return;

You can't seriously be using these menus?

Why not put the shadow ON the main image? Wouldn't that solve *all* the
problems?

Further, you have confused things terribly by using the same ID and Class on
your elements -

<div class="shadow" id="shadow">

I would never do that.

What happens if you make -

..shadow img { position:static; }?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:egqr0r$27h$1@forums.macromedia.com...

> Murry, Thank you SO MUCH for taking the time to look into this. I realized
> this
> morning I had originally posted about this in AUGUST! So it's been driving
> me
> crazy for awhile...
>
> I set up an example page at [url]http://64.85.1.68/css.htm[/url] -- basically, it's
> one
> of those things that "seems" so simple and is maddening... hmm... just
> like me?
> ; )
>
> There are two classes for images that are varying sizes- one, .shadow,
> tells
> it to float left, the other, .shadowr, gets it to float right. Then text
> fills
> the page. But the client does not want text to wrap under these images. So
> I
> created .nowrap and tried all kinds of rules, applied it to divs, p,
> span... I
> pretty much tried everything I could think of, spent lots of time
> researching
> (and read a lot of great articles! : ) ), but... we go live Monday, so now
> I
> have to have a definitive solution.
>
> If you can crack this I will be sooooooo impressed... Oh wait, I already
> am.
> : )
>
> Oh, p.s. while I'm picking your brain, here's other css puzzles I ran
> across:
> (better than the Sunday crossword puzzle, no?)
>
> These were all in that left hand .menu <td> which is aligned top.
> 1. Have you ever known a way to get TWO bg images in a td or div? I've
> been
> using two classes per item for awhile but it wouldn't do 2 bg images. (I
> wanted
> one repeat y image of the gradient, then that bottom fill as a
> bottom-aligned
> no repeat) Again, I finally copped out and created one really looooooong
> 2000
> px gradient with the bottom shadow and attached it as a no-repeat. Yuk.
>
> 2. That text over the bottom shadow in the menu bar: again, I copped out
> and
> incorporated it into the graphic. But it would have been cool to know how
> to
> get a div to align bottom that is placed within a top-aligned td. Or how
> someone would go about doing that. (I orignally put the div in the address
> bar
> <td> area with negative placement; but that screwed up my bottom address
> bar
> area's height)
>
>
>
>

[Ccasati]

1. The dropdown menu you reference was created automatically by Macromedia's
Fireworks, are you saying that is a bad thing? Yes I could do it differently
but didn't think this was a worse solution-- equal but faster; if it is worse,
why?

2. The shadow is not on the main image because the client does not have that
kind of graphic knowledge or patience. Using Contribute, they can then just
swap out varying images and the shadow will stretch correctly without them
having to do anything.

3. Point taken re: <div class="shadow" id="shadow"> I had overlooked that.
Will futz around to see if that affects the layout.

[Ccasati]

P.s. .shadow img { position:static; } Just eliminates the shadow, despite the
positioning indicated through {bottom:6px;
right: 8px;}.

Removed the id from shadow so it's now <div class="shadow">; I understand this
was wrong to apply id & class; however, it does not affect the layout.

[Murray *ACE*]

> 1. The dropdown menu you reference was created automatically by

> Macromedia's
> Fireworks, are you saying that is a bad thing? Yes I could do it
> differently
> but didn't think this was a worse solution-- equal but faster; if it is
> worse,
> why?

[url]http://apptools.com/rants/jsmenu.php[/url]
[url]http://apptools.com/rants/menus.php[/url]

> 2. The shadow is not on the main image because the client does not have
> that
> kind of graphic knowledge or patience. Using Contribute, they can then
> just
> swap out varying images and the shadow will stretch correctly without them
> having to do anything.

Oh - I see.

> 3. Point taken re: <div class="shadow" id="shadow"> I had overlooked that.
> Will futz around to see if that affects the layout.

Pick the one that is not being used and either remove it or rename it.

Did you try the position:static?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:egtejm$t9c$1@forums.macromedia.com...

> 1. The dropdown menu you reference was created automatically by
> Macromedia's
> Fireworks, are you saying that is a bad thing? Yes I could do it
> differently
> but didn't think this was a worse solution-- equal but faster; if it is
> worse,
> why?
>
> 2. The shadow is not on the main image because the client does not have
> that
> kind of graphic knowledge or patience. Using Contribute, they can then
> just
> swap out varying images and the shadow will stretch correctly without them
> having to do anything.
>
> 3. Point taken re: <div class="shadow" id="shadow"> I had overlooked that.
> Will futz around to see if that affects the layout.
>
>
>

[Murray *ACE*]

Well a static image has no positioning at all. But if you made the div
wider/taller than the image by an amount equal to the width/height of the
shadow, the image will be in the upper, left-hand corner, and the shadow
will 'overflow' to the right and the bottom.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:egtffi$rh$1@forums.macromedia.com...

> P.s. .shadow img { position:static; } Just eliminates the shadow, despite
> the
> positioning indicated through {bottom:6px;
> right: 8px;}.
>
> Removed the id from shadow so it's now <div class="shadow">; I understand
> this
> was wrong to apply id & class; however, it does not affect the layout.
>

[Ccasati]

re: Menus: I recall hearing rumbling about the default js produced by DW/FW but since my pages always load quickly I never considered it a true "issue"... Consider me converted. Daaaaaaag.

[Ccasati]

re: Div: Added position:static; to .shadow img. Added padding: 6px 8px; to
..shadow. All it did was make the shadow immediately right and below, no nice
dropdown effect like I had before.

And didn't affect what this all about: the frickin' wrapping text! ; )

[Murray *ACE*]

No - no padding. I'm thinking of this -

<div style="width:image+6px; height:image+6px;">
<img width="150" height="186"...>
</div>

The shadow image is the background of the div. The image is in the upper,
left-hand corner of the div. The shadow bleeds out to the right and the
bottom.

If the div (above) is the very first thing in the paragraph contaner, and if
it's floated left, the text will wrap as you want.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:egtkjf$67g$1@forums.macromedia.com...

> re: Div: Added position:static; to .shadow img. Added padding: 6px 8px; to
> .shadow. All it did was make the shadow immediately right and below, no
> nice
> dropdown effect like I had before.
>
> And didn't affect what this all about: the frickin' wrapping text! ; )
>
>

[Ccasati]

In other words-- "the text will wrap as you want' it will NOT WRAP?

....Running out the door to the National Folk Festival, will check back this afternoon, have a great day!

[Ccasati]

Also, in looking at this: don't forget the CLIENT will be switching in & out
these images. I'm hoping they'd be responsible enough to add the extra
dimensions to each div, in Contribute... but... do you really think that will
happen?

[Murray *ACE*]

No. I think you need a rethink here. Sorry.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Ccasati" <webforumsuser@macromedia.com> wrote in message
news:egtmca$83d$1@forums.macromedia.com...

> Also, in looking at this: don't forget the CLIENT will be switching in &
> out
> these images. I'm hoping they'd be responsible enough to add the extra
> dimensions to each div, in Contribute... but... do you really think that
> will
> happen?
>