CSS positioning question

I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up

Here is the basic HTML I am using:

<html>
<head>
<script language="JavaS cript">

</script>
<style>
..ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
..rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
..rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
..rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>
<p>Test the DHTML <a href="javascrip t:showObject(); ">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidd en;">
<div class="ratePopu p">
<div class="rateHead er">Rate Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="javascrip t:hideObject(); ">Close</a> </p>
</div>
</div>
</body>
</html>

My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.

Thanks in advance.

Jul 21 '05 #1

Subscribe Reply

2635

"NS" <ne************ @gmail.com> wrote in message
news:11******** **************@ o13g2000cwo.goo glegroups.com.. .

I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up

Here is the basic HTML I am using:

<html>
<head>
<script language="JavaS cript">

</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>
<p>Test the DHTML <a href="javascrip t:showObject(); ">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidd en;">
<div class="ratePopu p">
<div class="rateHead er">Rate Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="javascrip t:hideObject(); ">Close</a> </p>
</div>
</div>
</body>
</html>

My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.

The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS.

I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position
of the popup

Look here for a possible alternative using CSS:
http://www.seoconsultants.com/css/menus/vertical/

Good Luck,
me

Jul 21 '05 #2

Ståle Sæbøe

me wrote:

"NS" <ne************ @gmail.com> wrote in message
news:11******** **************@ o13g2000cwo.goo glegroups.com.. .
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up

Here is the basic HTML I am using:

<html>
<head>
<script language="JavaS cript">

</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>
<p>Test the DHTML <a href="javascrip t:showObject(); ">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidd en;">
<div class="ratePopu p">
<div class="rateHead er">Rate Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="javascrip t:hideObject(); ">Close</a> </p>
</div>
</div>
</body>
</html>

My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.
The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS. No, it is controlled by the html or the script that generates the html
along with any positioning properties set with an inline style or with CSS.
I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position
of the popup

This is not the source.

"me" seems to believe this is a popup window, but all the script does is
to change the display property of the <div> tag that has the
id="showpopup" . attribute.

However, he is right about the problem being in the javascript. The
script only works on elements with the id="showpopup" . You need to make
the script more flexible. I do not know javascript so I cannot tell you
how. I only answered because "me" was way off target.

regards,
steel

Jul 21 '05 #3

"Ståle Sæbøe" <ot*****@tdz.no > wrote in message
news:42******@n ews.broadpark.n o...

me wrote:
"NS" <ne************ @gmail.com> wrote in message
news:11******** **************@ o13g2000cwo.goo glegroups.com.. .
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up

Here is the basic HTML I am using:

<html>
<head>
<script language="JavaS cript">

</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>
<p>Test the DHTML <a href="javascrip t:showObject(); ">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidd en;">
<div class="ratePopu p">
<div class="rateHead er">Rate Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="javascrip t:hideObject(); ">Close</a> </p>
</div>
</div>
</body>
</html>

My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.
The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS.
No, it is controlled by the html or the script that generates the html
along with any positioning properties set with an inline style or with

CSS.

I see no CSS in the script that sets the position that the OP is asking
about.
I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position of the popup

This is not the source.

If it's not the source then it serves the same purpose. Perhaps the OP found
a modified version. Even if it isn't the exact same script it is available
for free. I believe it may be possible for the OP to use the positioning
properties the author cites in his script, if not then he will at least know
if the script is capable of meeting his needs.
"me" seems to believe this is a popup window, but all the script does is
to change the display property of the <div> tag that has the
id="showpopup" . attribute.

However, he is right about the problem being in the javascript. The
script only works on elements with the id="showpopup" . You need to make
the script more flexible. I do not know javascript so I cannot tell you
how. I only answered because "me" was way off target.

If anyone believes that last sentence then I have some fool's gold I'd like
to sell them.
Signed,
me

Jul 21 '05 #4

Ståle Sæbøe

me wrote:

The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS.
No, it is controlled by the html or the script that generates the html
along with any positioning properties set with an inline style or with
CSS.

I see no CSS in the script that sets the position that the OP is asking
about.

First: There is no script that sets the position at all. You
misunderstand the whole concept even after I spoon fed you the basics.
The script only affects the display property of a <div> element.
Positioning is not the issue.

Second: You said that in your opinion the position could not be
controlled by CSS. This is not a matter of opinion. CSS can affect the
position of the <div> element in question.

Third: I did not say that the CSS was present.

Are you willfully attempting to mislead people seeking guidance?
If it's not the source then it serves the same purpose. Perhaps the OP found
a modified version.

What do you think the purpose of the script is?

The issue: The script hides/shows the <div> element with the
id="showpopup" . If the element is repeated the same script will either
show/hide all of them at the same time, or the entire page will fail
because the id property must be unique.

Solution: Create unique id properties for each repeated <div> and modify
the script so it can be passed a variable id value. I have no idea how
to do this

Perhaps you just change the
function hideObject() to function hideObject(id)
getElementById( 'showpopup') to getElementById( id) where *id* is a variable?

Jul 21 '05 #5

Gus Richter

NS wrote:

How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.

I have reworked your sample. Below is the full thing. Run it for a demo
and explanations.

--
Gus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hide/Show Demo with Javascript</title>
<script type="text/javascript">

</script>
<style type="text/css">
..showpopup {position:relat ive;}
#ratePopup {visibility:hid den;position:ab solute;left:200 px;top:-30px;
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
#whatever {visibility:hid den;position:ab solute;left:350 px;top:150px;
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
..rateHeader {
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
..rateTitle {
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
..rateText {
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>

</head>
<body>

<p>Test the DHTML <a href="#" onclick="showOb ject('ratePopup ');return
false;">pop-up</a> link.</p>
<div class="showpopu p">
<div id="ratePopup" >
<div class="rateHead er">Rate Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="#" onclick="hideOb ject('ratePopup ');return
false;">Close</a></p>
</div>
</div>

<p>Test the DHTML <a href="#" onclick="showOb ject('whatever' );return
false;">pop-up</a> link.</p>
<div class="showpopu p">
<div id="whatever">
<div class="rateHead er">Rate (WHATEVER) Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="#" onclick="hideOb ject('whatever' );return
false;">Close</a> </p>
</div>
</div>

<p>I won't address any issues regarding merit of using CSS method
vis-a-vis Javascript or any Javascript issues, since I'm a novice,
except to say that:<br>
Use <strong>type="t ext/javascript"</strong> instead of
<strong>languag e="JavaScript "</strong> - (you should also use
<strong>type="t ext/css"</strong>).</p>
<p>I have made some HTML, CSS and Javascript changes - see the source
(the popup was messed up because you used unnecessary
<strong>width:1 00%;</strong>).
I have only changed the obvious and what I felt was necessary.</p>
<p>As an explanation of the meat (positioning of the popup), note the
following:</p>
<p>I have changed the "showpopup" DIV to be classed and I set the
Position Property to Relative.<br>
I have changed the "ratePopup" DIV to an ID Attribute, since it will be
the one to hide/show and I set the Position Property to Absolute.<br>
This permits positioning of "ratePopup" with TOP/LEFT relative to
"showpopup" and it won't take up any real estate since it is out of the
normal flow.<br>
This is also useful if you plan to use other popups where you will then
want to be able to position them relative to their own wrapper. To
demonstrate this,
I have added a second popup (whatever) to demonstrate.</p>
</body>
</html>

Jul 21 '05 #6

"Ståle Sæbøe" <ot*****@tdz.no > wrote in message
news:42******** @news.broadpark .no...

Are you willfully attempting to mislead people seeking guidance?

You sir have nobly defeated me and I surrender to your superior logic.
Please forgive my unpardonable transgression. If you spare me I promise to
never again spread what you may consider to be misleading information. You
are most amusing. Have a nice day.
Signed,
me

Jul 21 '05 #7

Jan Roland Eriksson

On Wed, 30 Mar 2005 07:57:26 +0200, Ståle Sæbøe <ot*****@tdz.no > wrote:

[...]

The issue: The script hides/shows the <div> element with the
id="showpopup" . If the element is repeated...

If the element is repeated within the doc instance with the same
id="showpopup" attribute markup, the doc instance markup has invalid
syntax.

--
Rex

Jul 21 '05 #8

Ståle Sæbøe

Jan Roland Eriksson wrote:

On Wed, 30 Mar 2005 07:57:26 +0200, Ståle Sæbøe <ot*****@tdz.no > wrote:

[...]

The issue: The script hides/shows the <div> element with the
id="showpopup ". If the element is repeated...

If the element is repeated within the doc instance with the same
id="showpopup" attribute markup, the doc instance markup has invalid
syntax.

Really? invalid syntax? In which context? HTML4, XHTML?

Ståle Sæbøe wrote:
If the element is repeated the same script will either show/hide all of
them at the same time, or the entire page will fail because the id
property must be unique.

....

And your point is?

Jul 21 '05 #9

Jan Roland Eriksson

On Fri, 01 Apr 2005 00:08:46 +0200, Ståle Sæbøe <ot*****@tdz.no > wrote:

Jan Roland Eriksson wrote:
On Wed, 30 Mar 2005 07:57:26 +0200, Ståle Sæbøe <ot*****@tdz.no > wrote:
[...]
The issue: The script hides/shows the <div> element with the
id="showpopu p". If the element is repeated...
If the element is repeated within the doc instance with the same
id="showpopup" attribute markup, the doc instance markup has invalid
syntax.

Really? invalid syntax? In which context? HTML4, XHTML?
Both.

My local installations of (o)nsgmls flags any entry of 'id' with
duplicated values as a syntax error. I'm pretty sure that your mileage
is the same here.
Ståle Sæbøe wrote:
If the element is repeated the same script will either show/hide all of
them at the same time, or the entire page will fail because the id
property must be unique.
I know what you wrote.
And your point is?

That only the latter half of what you wrote is true; a script that
appears to "work" on several identical entries of 'id' has been started
in error in the first place.

--
Rex

Jul 21 '05 #10

Similar topics

5401

CSS Absolute Positioning and Browser Resizing

by: Bryan R. Meyer | last post by:

Hello Everyone, I am in the process of redesigning my web page and I ran into a problem while using CSS. I have laid out my web page with auto margins so that the content is centered. I assume that this will enable the content to be centered in any resolution which the viewer may be using. I then tried to position some navigation images on my web page (using absolute positioning). When the browser is resized, the images stay in the...

HTML / CSS

2162

Footer css positioning problem

by: Tim Charles | last post by:

Hello I am close to finishing my first properly css-friendly site (at least I hope it is), and am looking for some general feedback, plus a specific question answered, if possible. http://www.ediecast.co.uk/ is the url. The specific question is whether anyone can give me any help getting the footer to actually go at the bottom of the page, rather than staying in the

HTML / CSS

2679

Positioning context - does it work?

by: rajek | last post by:

I posted a similar question yesterday, but didn't get an answer that resolved the issue. (Thanks to those who tried though.) The background: I've read in books and online that if you have one element with "relative" positioning, such as a <div>, it creates a "positioning context" for element within it. E.g., if you have a <p> inside your <div> you can give it absolute positioning and position it (right, left, top, bottom) in terms of the...

HTML / CSS

6338

radio/Checkbox absolute positioning

by: Mr.Clean | last post by:

I'm having trouble with this. The checkbox is no where near where it is supposed to be and the radio button is not at 206 px away from the left of the window. Looks bad in IE6, even worse in Firefox1.0. I tried using <label> tags but they didn't come out right either. Need the class xxxx_Label because I may be having the text to the left of the check or radiobutton.

HTML / CSS

1789

Positioning of the control at runtime....

by: Johnson Smith | last post by:

Question is related to ASP.Net and controlling the position of these controls. I am using html table to placce my web controls. I am displaying same datagrid and calendar controls at clicks of different buttons. Since I am using same control for various clicks, it is hard for me to place the controls at runtime for my required position. Any suggestions of doing this will be a great help. Johnson Smith

ASP.NET

2109

What's so terrible about absolute positioning?

by: Alan Silver | last post by:

Hello, Having been a light reader of this ng for a few months now (after several years absence), I have noticed that absolute positioning seems to be considered a Very Bad Thing around here. Generally, when someone posts a question about a design that uses it, they are told not to. Now, in my ignorance, I don't see what's wrong with it, when used sensibly. Let me say straight off that I am *not* talking about trying to produce...

HTML / CSS

3387

Mixing floats, positioning and offsets

by: Bill Norton | last post by:

I've been experimenting with floats, positioning and offsets (top, left, etc.) to see what happens when you mix the properties together. All this may be old news to most of you, but it was extremely helpful to me. The results are summarized in this chart. In all these tests I was using a single child element inside a containing block. (I hope the formatting doesn't fall apart too badly when it's uploaded to a newsgroup.) | Do Floats | Do...

HTML / CSS

2406

Help Positioning Images alternative to Tables

by: Howard | last post by:

I have seen a lot of examples of 2 & 3 Collumn layout schemes. But I have not yet found any examples for positioning images and centering them by the browser. I notice that there are CSS properties for Left and Right, but not for Centering. So my question is How does one center an image to the Browser window? I was thinking about converting a page for my friends catering. It's a table center in the

HTML / CSS

1470

Absolute Positioning / Relative Positioning

by: Froggluver | last post by:

I have some experience with CSS. Just enough to be dangerous in fact. :) I had a general question about positioning. Is it possible create a box that is absolutely positioned on a page, and then place boxes inside of that that are relatively positioned, so that they flow with the page? I am aware absolute is just that - absolute, and I know that relative divs move in relation to the parent div. What pitfalls could arise? Would it be better...

HTML / CSS

9401

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9257

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9179

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

6011

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4519

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4784

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3228

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2637

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2157

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General