css question

Thread view:

Roedy Green - 26 Jan 2006 07:54 GMT

I can make a box of coloured background around some text with a style
lie this:

.box{
    background: #ffffdd; /* top right bottom left */
    border: medium ridge;
    clear: both;
    color: #ff3333;
    display: block;
    font: 1em Arial,Helvetica,sans-serif;
    margin: 8px 0px 8px 0px;
    padding: 10px;
    float: none;
}

But the box generated goes all the way across the screen, even when
there is only a little in it.

I fooled around with various combinations of float and clear and could
get a just-right-fit box BUT then either the following text wrapped up
around to the right of it, or the box appeared on the extreme right of
twhe screen.

Is there any way to put it on the left with no text to the right of it
just by fiddling with the style sheet, rather than markup?

Signature

Canadian Mind Products, Roedy Green.
http://mindprod.com Java custom programming, consulting and coaching.

Reply to this Message

Rhino - 26 Jan 2006 16:25 GMT

>I can make a box of coloured background around some text with a style
> lie this:
[quoted text clipped - 21 lines]
> Is there any way to put it on the left with no text to the right of it
> just by fiddling with the style sheet, rather than markup?

This is really not an appropriate place to ask this question. The
comp.infosystems.www.authoring.stylesheets newsgroup is a much better place.
I've found the people there very helpful with CSS questions.

--
Rhino

Reply to this Message

Roedy Green - 26 Jan 2006 21:46 GMT

On Thu, 26 Jan 2006 11:25:23 -0500, "Rhino"
<no.offline.contact.please@nospam.com> wrote, quoted or indirectly
quoted someone who said :

>This is really not an appropriate place to ask this question. The
>comp.infosystems.www.authoring.stylesheets newsgroup is a much better place.
>I've found the people there very helpful with CSS questions.

I have found them hostile. That's why I wanted to try here first.

Signature

Canadian Mind Products, Roedy Green.
http://mindprod.com Java custom programming, consulting and coaching.

Reply to this Message

Oliver Wong - 26 Jan 2006 16:32 GMT

This is not a Java question. I don't know of any CSS newsgroups, so if
this post doesn't answer your question, you should probably post continue
the discussion on one of the HTML groups.

You might try something like this (not tested):

<html>
...
<style>
div.box span {
background: #ffffdd;
border: medium ridge;
color: #ff3333;
font: 1em Arial,Helvetica,sans-serif;
margin: 8px 0px 8px 0px;
padding: 10px;
}
</style>
...
<div class="box">
<span>Here's the content I want in the box.</span>
</div>

The <div> tag is to prevent anything on the left and the right, and the
CSS says apply these styles to the <span> inside the <div>, and not to the
<div> itself.

- Oliver

Reply to this Message

Hal Rosser - 26 Jan 2006 22:50 GMT

> I can make a box of coloured background around some text with a style
> lie this:
[quoted text clipped - 13 lines]
> But the box generated goes all the way across the screen, even when
> there is only a little in it.

Try something like the following in your block-level element (like a div
tag):
<div style="width: 50px; float: right;">
your java code and other other on-topic java content
</div>

Reference:
page 7.60 of "Creating Web Pages with HTML and Dynamic HMTL" by Patrick
Carey
Its in the CSS chapter.
---

Reply to this Message

Roedy Green - 27 Jan 2006 02:33 GMT

On Thu, 26 Jan 2006 17:50:29 -0500, "Hal Rosser"
<hmrosser@bellsouth.net> wrote, quoted or indirectly quoted someone
who said :

><div style="width: 50px; float: right;">
> your java code and other other on-topic java content
></div>

I see, you have to decide the width in markup, manually for each case.

It is tantalising. It can figure the width out on its own with right
align, why not left?

Signature

Canadian Mind Products, Roedy Green.
http://mindprod.com Java custom programming, consulting and coaching.

Reply to this Message

Oliver Wong - 27 Jan 2006 15:48 GMT

> On Thu, 26 Jan 2006 17:50:29 -0500, "Hal Rosser"
> <hmrosser@bellsouth.net> wrote, quoted or indirectly quoted someone
[quoted text clipped - 8 lines]
> It is tantalising. It can figure the width out on its own with right
> align, why not left?

It *IS* able to figure out the width with left align.

I responded to this thread, but I haven't seen my own post show up on my
newsgroup server. Maybe it hasn't shown up on your as well. Here's the
google news link:

http://groups.google.ca/group/comp.lang.java.help/msg/f5a8e227e06111a7

I say the CSS code is untested in that original post, but I've tested it
just now, and it works.

The problem with your original code is that you're using the "div" tag
instead of the "span" tag. The "div" tag represents a block element which by
defaults takes up the full width. When you tell it to left align, it puts
the element as far to the left as possible, and then takes the remaining
width on the left (whose size varies depending on the width of the block
element which contains the div). When you tell it to right align, it puts
the element as far right as possible (without word wrapping), and takes up
the remaining width on the left (which is always zero).

In short, you do NOT want a block element, you want an inline element,
which only takes the width required to render it.

- Oliver

Reply to this Message

Hal Rosser - 28 Jan 2006 02:11 GMT

you're welcome

Reply to this Message

Noodles Jefferson - 27 Jan 2006 04:01 GMT

Set the width.

width: 40%

You might want to try display: inline instead of display: block too but
I'm not a 100% on either of these suggestions, so take them as you will.

> I fooled around with various combinations of float and clear and could
> get a just-right-fit box BUT then either the following text wrapped up
[quoted text clipped - 3 lines]
> Is there any way to put it on the left with no text to the right of it
> just by fiddling with the style sheet, rather than markup?

Signature

Noodles Jefferson
mhm31x9 Smeeter#29 WSD#30
sTaRShInE_mOOnBeAm aT HoTmAil dOt CoM

NP: "Icicle" (Tour Rehearsal) -- Tori Amos

"Our earth is degenerate in these latter days, bribery and corruption
are common, children no longer obey their parents and the end of the
world is evidently approaching."
--Assyrian clay tablet 2800 B.C.

Reply to this Message

css question

Free Magazines