Click here to get back home

Text outside of div visible

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Text outside of div visible Rudi Hausmann 04-17-2007
Posted by Rudi Hausmann on April 17, 2007, 9:46 am
Please log in for more thread options


Hi!

I want to make a text that goes out of a div under another div visible.
This example illustrates it:

<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">
<b>Hello</b>
</div>
<div style="border-right: 1px solid; width: 9px; background-color:
White; float: left;">&nbsp;</div>

I want to see the whole "Hello" including both border lines.

Currently I just see something like: "H| |llo"

Any idea how to achieve that?

Best regards,

Rudi


Posted by Ben C on April 17, 2007, 9:57 am
Please log in for more thread options


> Hi!
>
> I want to make a text that goes out of a div under another div visible.
> This example illustrates it:
>
><div style="border-right: 1px solid; width: 9px; background-color:
> White; float: left;">
><b>Hello</b>
></div>
><div style="border-right: 1px solid; width: 9px; background-color:
> White; float: left;">&nbsp;</div>
>
> I want to see the whole "Hello" including both border lines.
>
> Currently I just see something like: "H| |llo"
>
> Any idea how to achieve that?

Change

<b>Hello</b>

to

<b style="position: relative; z-index: 1">Hello</b>

Posted by Rudi Hausmann on April 18, 2007, 1:38 am
Please log in for more thread options


Ben C wrote:
>> Hi!
>>
>> I want to make a text that goes out of a div under another div visible.
>> This example illustrates it:
>>
>> <div style="border-right: 1px solid; width: 9px; background-color:
>> White; float: left;">
>> <b>Hello</b>
>> </div>
>> <div style="border-right: 1px solid; width: 9px; background-color:
>> White; float: left;">&nbsp;</div>
>>
>> I want to see the whole "Hello" including both border lines.
>>
>> Currently I just see something like: "H| |llo"
>>
>> Any idea how to achieve that?
>
> Change
>
> <b>Hello</b>
>
> to
>
> <b style="position: relative; z-index: 1">Hello</b>

Thanks. That worked exactly as needed.

Posted by Jukka K. Korpela on April 17, 2007, 10:34 am
Please log in for more thread options


Scripsit Rudi Hausmann:

> I want to make a text that goes out of a div under another div
> visible.

That's about styling, not HTML. I'm not moving the discussion to
c.i.w.a.stylesheets, though, since it's not clear at all what you really
want.

> This example illustrates it:
>
> <div style="border-right: 1px solid; width: 9px; background-color:
> White; float: left;">
> <b>Hello</b>
> </div>
> <div style="border-right: 1px solid; width: 9px; background-color:
> White; float: left;">&nbsp;</div>

Not really. You are not saying anything about any meaning or content, which
would be HTML related, and you are not describing the desired visual
appearance either. You just give some hints. The code works differently in
Quirks Mode vs. Standards Mode - is that what you want? Which mode do your
pages trigger?

> I want to see the whole "Hello" including both border lines.

That's not a very exact description, and it is not consistent with your
actual code. It sounds like you might want the second <div> to have
transparent background, as it would have by default - but you're explicitly
setting it to a specific color.

> Currently I just see something like: "H| |llo"

Sounds like Standards Mode. In Quirks Mode on IE 7, I see (very roughly
speaking)
"Hello| |". Normally you should author new pages to trigger Standards Mode,
but Quirks Mode gives an idea of what might happen on IE 5, which isn't used
much but isn't quite ignorable either.

In Standards Mode, the appearance naturally depends on the font size. If I
increase the size, different parts of the word "Hello" are masked out, as
expected.

Why don't you describe a real-life use case and illustrate it with a URL?
Preferably as an HTML document that works without CSS, too. Then you can
explain how you would like it to be styled when possible.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/


Posted by Rudi Hausmann on April 18, 2007, 1:56 am
Please log in for more thread options


Jukka K. Korpela wrote:
> Scripsit Rudi Hausmann:
>
>> I want to make a text that goes out of a div under another div
>> visible.
>
> That's about styling, not HTML. I'm not moving the discussion to
> c.i.w.a.stylesheets, though, since it's not clear at all what you really
> want.
>
>> This example illustrates it:
>>
>> <div style="border-right: 1px solid; width: 9px; background-color:
>> White; float: left;">
>> <b>Hello</b>
>> </div>
>> <div style="border-right: 1px solid; width: 9px; background-color:
>> White; float: left;">&nbsp;</div>
>
> Not really. You are not saying anything about any meaning or content,
> which would be HTML related, and you are not describing the desired
> visual appearance either. You just give some hints. The code works
> differently in Quirks Mode vs. Standards Mode - is that what you want?
> Which mode do your pages trigger?
>
>> I want to see the whole "Hello" including both border lines.
>
> That's not a very exact description, and it is not consistent with your
> actual code. It sounds like you might want the second <div> to have
> transparent background, as it would have by default - but you're
> explicitly setting it to a specific color.
>
>> Currently I just see something like: "H| |llo"
>
> Sounds like Standards Mode. In Quirks Mode on IE 7, I see (very roughly
> speaking)
> "Hello| |". Normally you should author new pages to trigger Standards
> Mode, but Quirks Mode gives an idea of what might happen on IE 5, which
> isn't used much but isn't quite ignorable either.
>
> In Standards Mode, the appearance naturally depends on the font size. If
> I increase the size, different parts of the word "Hello" are masked out,
> as expected.
>
> Why don't you describe a real-life use case and illustrate it with a
> URL? Preferably as an HTML document that works without CSS, too. Then
> you can explain how you would like it to be styled when possible.
>

Thanks for your input! Of course I trigger the Standard Mode. And next
time I gonna put such questions into c.i.w.a.stylesheets.

My use-case (test use case, but not real life use case) was to make a
text which comes out of a div into another div visible. Ben's solution
to change the z-index of the text worked fine. (Your mentioned solution
to leave away the background color would work too.)

Similar ThreadsPosted
Stats visible for everyone? October 9, 2006, 7:45 am
Partially visible frame August 16, 2005, 2:54 am
CSS not visible with XHTML decleration September 28, 2006, 2:15 am
CSS not visible with XHTML decleration September 28, 2006, 2:31 am
CSS not visible with XHTML decleration September 28, 2006, 2:38 am
CSS not visible with XHTML decleration September 28, 2006, 2:54 am
Make the links visible. PLEASE ! May 16, 2007, 11:10 pm
How Can an tag be made visible or hidden dynamically August 18, 2006, 6:30 pm
How to align text label and input field's text ? June 11, 2007, 6:10 am
popup text when the pointer is on some text July 30, 2005, 10:33 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap