how and where to make css changes

[richard]

http://mroldies.net/menupad1.html

In this item I need to know what creates the little white triangle in the
light blue opaque area.

I can change the height of the lines to narrow the highlighted area, but
when I do that, the position of that little triangle also changes.

The claim is that it is also touch screen friendly. Is it? I don't know as
I do not have a touch screen.

 

[David Postill]

| http://mroldies.net/menupad1.html
|
| In this item I need to know what creates the little white triangle in the
| light blue opaque area.

<span class="pointer"><span class="point"></span></span>

| I can change the height of the lines to narrow the highlighted area, but
| when I do that, the position of that little triangle also changes.
|
| The claim is that it is also touch screen friendly. Is it? I don't know as
| I do not have a touch screen.

 

[JJ]

http://mroldies.net/menupad1.html

In this item I need to know what creates the little white triangle in the
light blue opaque area.

I can change the height of the lines to narrow the highlighted area, but
when I do that, the position of that little triangle also changes.

The claim is that it is also touch screen friendly. Is it? I don't know as
I do not have a touch screen.

It's on this CSS selector:

..container .pointer .point

The triangle is the left border with transparent top and bottom border, on a
DIV with zero width and height. There's no need for the right side border.

When you define a non zero DIV (e.g.: 100x100) with 4 different color 30px
thick border, you'll see that on the corner, the color separation is
diagonal. Zero the width and height of the DIV and you'll get pyramid like
layout viewed directly from above. Make the top, right, and bottom border
colors as transparent and you'll get the right pointing triangle.

 

[richard]

It's on this CSS selector:

.container .pointer .point

The triangle is the left border with transparent top and bottom border, on a
DIV with zero width and height. There's no need for the right side border.

When you define a non zero DIV (e.g.: 100x100) with 4 different color 30px
thick border, you'll see that on the corner, the color separation is
diagonal. Zero the width and height of the DIV and you'll get pyramid like
layout viewed directly from above. Make the top, right, and bottom border
colors as transparent and you'll get the right pointing triangle.

Thanks. I had the idea that was the line but wasn't sure just how the
triangle got created.
I saw the zero height and width and was like WTF?

 

[dorayme]

Zero the width and height of the DIV and you'll get pyramid like
layout viewed directly from above.

Like the Fig 5. at

<http://netweaver.com.au/floatHouse/page1.php>