CSS & Div Tag, Hyperlinked?

Discussion in 'HTML' started by Yogi_Bear_79, Oct 5, 2006.

  1. Yogi_Bear_79

    Yogi_Bear_79 Guest

    I created a floating window with the code below. I call it with <div
    id="Uleft"></div>. It contains a table with text and one image. I would
    like to make the entire container clickable. When I click on it I want the
    parent page to change to another page on my website. How?

    #Uleft {
    float:left;
    background:#F7D469;
    padding-top:1%;
    border:1px solid #336699;
    color:#000;
    width:50%;
    height:35%;
    cursor:pointer;
    }
     
    Yogi_Bear_79, Oct 5, 2006
    #1
    1. Advertising

  2. Yogi_Bear_79

    Ben C Guest

    On 2006-10-05, Yogi_Bear_79 <> wrote:
    > I created a floating window with the code below. I call it with <div
    > id="Uleft"></div>. It contains a table with text and one image. I would
    > like to make the entire container clickable. When I click on it I want the
    > parent page to change to another page on my website. How?


    Put the whole lot inside an <a> element.

    >
    > #Uleft {
    > float:left;
    > background:#F7D469;
    > padding-top:1%;
    > border:1px solid #336699;
    > color:#000;
    > width:50%;
    > height:35%;
    > cursor:pointer;
    > }
     
    Ben C, Oct 5, 2006
    #2
    1. Advertising

  3. Ben C wrote:
    > On 2006-10-05, Yogi_Bear_79 <> wrote:
    >> I created a floating window with the code below. I call it with <div
    >> id="Uleft"></div>. It contains a table with text and one image. I would
    >> like to make the entire container clickable. When I click on it I want the
    >> parent page to change to another page on my website. How?

    >
    > Put the whole lot inside an <a> element.


    A DIV element can't go inside an A element. Only inline elements
    (excluding another A) can go inside an A.
     
    Harlan Messinger, Oct 5, 2006
    #3
  4. Yogi_Bear_79

    Yogi_Bear_79 Guest

    "Harlan Messinger" <> wrote in message
    news:...
    > Ben C wrote:
    >> On 2006-10-05, Yogi_Bear_79 <> wrote:
    >>> I created a floating window with the code below. I call it with <div
    >>> id="Uleft"></div>. It contains a table with text and one image. I would
    >>> like to make the entire container clickable. When I click on it I want
    >>> the parent page to change to another page on my website. How?

    >>
    >> Put the whole lot inside an <a> element.

    >
    > A DIV element can't go inside an A element. Only inline elements
    > (excluding another A) can go inside an A.


    So is it not possible to do what I want?
     
    Yogi_Bear_79, Oct 6, 2006
    #4
  5. Yogi_Bear_79

    Ben C Guest

    On 2006-10-05, Harlan Messinger <> wrote:
    > Ben C wrote:
    >> On 2006-10-05, Yogi_Bear_79 <> wrote:
    >>> I created a floating window with the code below. I call it with <div
    >>> id="Uleft"></div>. It contains a table with text and one image. I would
    >>> like to make the entire container clickable. When I click on it I want the
    >>> parent page to change to another page on my website. How?

    >>
    >> Put the whole lot inside an <a> element.

    >
    > A DIV element can't go inside an A element. Only inline elements
    > (excluding another A) can go inside an A.


    I didn't know that-- it works in Firefox, Opera and Konqueror.

    Do you know where this is specified?

    Thanks.
     
    Ben C, Oct 6, 2006
    #5
  6. Yogi_Bear_79

    Ben C Guest

    On 2006-10-06, Yogi_Bear_79 <> wrote:
    >
    > "Harlan Messinger" <> wrote in message
    > news:...
    >> Ben C wrote:
    >>> On 2006-10-05, Yogi_Bear_79 <> wrote:
    >>>> I created a floating window with the code below. I call it with <div
    >>>> id="Uleft"></div>. It contains a table with text and one image. I would
    >>>> like to make the entire container clickable. When I click on it I want
    >>>> the parent page to change to another page on my website. How?
    >>>
    >>> Put the whole lot inside an <a> element.

    >>
    >> A DIV element can't go inside an A element. Only inline elements
    >> (excluding another A) can go inside an A.

    >
    > So is it not possible to do what I want?


    You can use JavaScript:

    <script>
    function click()
    {
    location = "http://www.google.co.uk";
    }

    function main()
    {
    var e = document.getElementById("Uleft");
    e.addEventListener("click", click, false);
    }

    onload = main;
    </script>

    In your document somewhere should do the trick.
     
    Ben C, Oct 6, 2006
    #6
  7. Yogi_Bear_79

    Steve Pugh Guest

    Ben C wrote:
    > Harlan Messinger <> wrote:
    > > Ben C wrote:
    > > >
    > > > Put the whole lot inside an <a> element.

    > >
    > > A DIV element can't go inside an A element. Only inline elements
    > > (excluding another A) can go inside an A.

    >
    > I didn't know that-- it works in Firefox, Opera and Konqueror.


    Browsers have to be able to deal with a lot of very poor quality HTML.
    But don't expect them to treat invalid code consistently - what works
    in one may not work in another, and what works today may not work
    tomorrow.

    > Do you know where this is specified?


    The HTML specification.
    http://www.w3.org/TR/html401/struct/links.html#edef-A

    See <!ELEMENT A - - (%inline;)* -(A) -- anchor -->
    The %inline means that only inline content can go inside an a element.

    Steve
     
    Steve Pugh, Oct 6, 2006
    #7
  8. Yogi_Bear_79

    Ben C Guest

    On 2006-10-06, Steve Pugh <> wrote:
    > Ben C wrote:
    >> Harlan Messinger <> wrote:
    >> > Ben C wrote:
    >> > >
    >> > > Put the whole lot inside an <a> element.
    >> >
    >> > A DIV element can't go inside an A element. Only inline elements
    >> > (excluding another A) can go inside an A.

    [snip]
    >> Do you know where this is specified?

    >
    > The HTML specification.
    > http://www.w3.org/TR/html401/struct/links.html#edef-A
    >
    > See <!ELEMENT A - - (%inline;)* -(A) -- anchor -->
    > The %inline means that only inline content can go inside an a element.


    I see. Thanks for that.
     
    Ben C, Oct 6, 2006
    #8
  9. Browser features disappearing: Re: CSS & Div Tag, Hyperlinked?

    Steve Pugh wrote:
    > Ben C wrote:
    >> Harlan Messinger <> wrote:
    >>> Ben C wrote:
    >>>> Put the whole lot inside an <a> element.
    >>> A DIV element can't go inside an A element. Only inline elements
    >>> (excluding another A) can go inside an A.

    >> I didn't know that-- it works in Firefox, Opera and Konqueror.

    >
    > Browsers have to be able to deal with a lot of very poor quality HTML.
    > But don't expect them to treat invalid code consistently - what works
    > in one may not work in another, and what works today may not work
    > tomorrow.


    Which may sound pessimistic to some, but there is at least one case of a
    non-standard feature disappearing: the ALT text that was displayed in
    a bubble in Netscape 4 (and still is in IE) was gone with version 6.

    What other features once supported by a brand of browser has disappeared
    in a subsequent version?
     
    Harlan Messinger, Oct 6, 2006
    #9
  10. Yogi_Bear_79

    Steve Pugh Guest

    Re: Browser features disappearing: Re: CSS & Div Tag, Hyperlinked?

    Harlan Messinger wrote:
    > Steve Pugh wrote:
    >
    > > Browsers have to be able to deal with a lot of very poor quality HTML.
    > > But don't expect them to treat invalid code consistently - what works
    > > in one may not work in another, and what works today may not work
    > > tomorrow.

    >
    > Which may sound pessimistic to some, but there is at least one case of a
    > non-standard feature disappearing: the ALT text that was displayed in
    > a bubble in Netscape 4 (and still is in IE) was gone with version 6.
    >
    > What other features once supported by a brand of browser has disappeared
    > in a subsequent version?


    Ancient history, but...

    Back in Netscape 1.0 you could do this:
    <body bgcolor="#000000">
    <body bgcolor="#111111">
    <body bgcolor="#222222">
    ....
    <body bgcolor="FFFFFF">
    and the page background would fade up from black to white before the
    content was displayed.

    You could also have multiple <title> elements and have the title bar
    display a changing message on page load.

    These all vanished in Netscape 1.1 but show jusy how much the early
    browsers treated HTML as a series of instructions rather than as
    markup.

    >From Netscape 4 to 6 we also lost <multicol>, <layer> and <spacer>.


    There are some bits and pieces (e.g. non-standard height and width
    attributes for <textarea>) then Opera supported for a few versions and
    then dropped.

    Trying to think of some examples in IE, but MS tends not to throw
    anything away.

    Steve
     
    Steve Pugh, Oct 6, 2006
    #10
  11. Re: Browser features disappearing: Re: CSS & Div Tag, Hyperlinked?

    Steve Pugh wrote:
    > Harlan Messinger wrote:
    >>
    >> What other features once supported by a brand of browser has disappeared
    >> in a subsequent version?

    >
    > Ancient history, but...
    >
    >[...]
    >>From Netscape 4 to 6 we also lost <multicol>, <layer> and <spacer>.


    Thanks, I was groping to come up with LAYER. It's a better example than
    the ALT bubble.
     
    Harlan Messinger, Oct 6, 2006
    #11
  12. Yogi_Bear_79

    Yogi_Bear_79 Guest

    "Ben C" <> wrote in message
    news:...
    > On 2006-10-06, Yogi_Bear_79 <> wrote:
    >>
    >> "Harlan Messinger" <> wrote in message
    >> news:...
    >>> Ben C wrote:
    >>>> On 2006-10-05, Yogi_Bear_79 <> wrote:
    >>>>> I created a floating window with the code below. I call it with <div
    >>>>> id="Uleft"></div>. It contains a table with text and one image. I
    >>>>> would
    >>>>> like to make the entire container clickable. When I click on it I want
    >>>>> the parent page to change to another page on my website. How?
    >>>>
    >>>> Put the whole lot inside an <a> element.
    >>>
    >>> A DIV element can't go inside an A element. Only inline elements
    >>> (excluding another A) can go inside an A.

    >>
    >> So is it not possible to do what I want?

    >
    > You can use JavaScript:
    >
    > <script>
    > function click()
    > {
    > location = "http://www.google.co.uk";
    > }
    >
    > function main()
    > {
    > var e = document.getElementById("Uleft");
    > e.addEventListener("click", click, false);
    > }
    >
    > onload = main;
    > </script>
    >
    > In your document somewhere should do the trick.


    Thanks! I guess I still need a little more help though. I tried the code in
    the BODY tag, the DIV tag, and even as a SSI, but nothing happens. any
    ideas?
     
    Yogi_Bear_79, Oct 6, 2006
    #12
  13. Yogi_Bear_79

    Ben C Guest

    On 2006-10-06, Yogi_Bear_79 <> wrote:
    >
    > "Ben C" <> wrote in message
    > news:...
    >> On 2006-10-06, Yogi_Bear_79 <> wrote:
    >>>
    >>> "Harlan Messinger" <> wrote in message
    >>> news:...
    >>>> Ben C wrote:
    >>>>> On 2006-10-05, Yogi_Bear_79 <> wrote:
    >>>>>> I created a floating window with the code below. I call it with <div
    >>>>>> id="Uleft"></div>. It contains a table with text and one image. I
    >>>>>> would
    >>>>>> like to make the entire container clickable. When I click on it I want
    >>>>>> the parent page to change to another page on my website. How?
    >>>>>
    >>>>> Put the whole lot inside an <a> element.
    >>>>
    >>>> A DIV element can't go inside an A element. Only inline elements
    >>>> (excluding another A) can go inside an A.
    >>>
    >>> So is it not possible to do what I want?

    >>
    >> You can use JavaScript:
    >>
    >> <script>
    >> function click()
    >> {
    >> location = "http://www.google.co.uk";
    >> }
    >>
    >> function main()
    >> {
    >> var e = document.getElementById("Uleft");
    >> e.addEventListener("click", click, false);
    >> }
    >>
    >> onload = main;
    >> </script>
    >>
    >> In your document somewhere should do the trick.

    >
    > Thanks! I guess I still need a little more help though. I tried the code in
    > the BODY tag, the DIV tag, and even as a SSI, but nothing happens. any
    > ideas?


    I tried it and it did work for me. Are you using Firefox? If so you get
    a "JavaScript Console" (Tools menu) that tells you the errors. Otherwise
    you can put alerts in there to check which bits are being executed etc.

    Putting the <script> in the head element might be the best place, to be
    sure it's run before the document.onload event happens (which it's then
    going to listen for). But I think anywhere _should_ be fine.
     
    Ben C, Oct 6, 2006
    #13
  14. Re: Browser features disappearing: Re: CSS & Div Tag, Hyperlinked?

    Harlan Messinger wrote:

    > Which may sound pessimistic to some, but there is at least one case of
    > a non-standard feature disappearing: the ALT text that was displayed
    > in a bubble in Netscape 4 (and still is in IE) was gone with version
    > 6.


    Do you mean the 'tooltip' bubble? If it displays ALT text as a tooltip,
    it is a mistake (which IE knowingly does). All other compliant browsers
    display the 'tooltip' using the title text.

    <img src="..." alt="Displays if images turned off" title="This will
    display as a 'tooltip'" height="nnnpx" width="nnnpx">

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Oct 6, 2006
    #14
  15. Re: Browser features disappearing: Re: CSS & Div Tag, Hyperlinked?

    On Fri, 6 Oct 2006, Beauregard T. Shagnasty wrote:

    > Harlan Messinger wrote:
    >
    > > Which may sound pessimistic to some, but there is at least one case of
    > > a non-standard feature disappearing: the ALT text that was displayed
    > > in a bubble in Netscape 4 (and still is in IE) was gone with version
    > > 6.

    >
    > Do you mean the 'tooltip' bubble? If it displays ALT text as a tooltip,
    > it is a mistake


    Agreed. alt text is for use when the image is *not* being displayed.

    > (which IE knowingly does). All other compliant browsers
    > display the 'tooltip' using the title text.


    That's a bit inaccurate, actually. Far be it from me to defend IE,
    but it *does* use the title attribute correctly. It's only if the
    title attribute is missing that it reverts to this older and
    deprecated behaviour of making a "tooltip" using the alt text instead.

    This can be defeated, if you don't want a title, by coding title=""
     
    Alan J. Flavell, Oct 6, 2006
    #15
  16. Re: Browser features disappearing: Re: CSS & Div Tag, Hyperlinked?

    Beauregard T. Shagnasty wrote:
    > Harlan Messinger wrote:
    >
    >> Which may sound pessimistic to some, but there is at least one case of
    >> a non-standard feature disappearing: the ALT text that was displayed
    >> in a bubble in Netscape 4 (and still is in IE) was gone with version
    >> 6.

    >
    > Do you mean the 'tooltip' bubble? If it displays ALT text as a tooltip,
    > it is a mistake (which IE knowingly does).


    Exactly. As I said, I was talking about non-standard browser features.
     
    Harlan Messinger, Oct 6, 2006
    #16
  17. Re: Browser features disappearing: Re: CSS & Div Tag, Hyperlinked?

    Alan J. Flavell wrote:

    > On Fri, 6 Oct 2006, Beauregard T. Shagnasty wrote:
    >> (which IE knowingly does). All other compliant browsers
    >> display the 'tooltip' using the title text.

    >
    > That's a bit inaccurate, actually.


    Not inaccurate, just not as complete a description as yours. <g>

    > Far be it from me to defend IE, but it *does* use the title attribute
    > correctly. It's only if the title attribute is missing that it
    > reverts to this older and deprecated behaviour of making a "tooltip"
    > using the alt text instead.
    >
    > This can be defeated, if you don't want a title, by coding title=""


    This is true. However, since many novices do not know this, they think
    modern browsers are at fault when they do not show the tooltip. "Hey, IE
    shows it, so the rest must be wrong..."

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Oct 6, 2006
    #17
  18. Yogi_Bear_79

    Vaxius Guest

    On Thu, 05 Oct 2006 15:33:38 -0400, Yogi_Bear_79 wrote:

    > I created a floating window with the code below. I call it with <div
    > id="Uleft"></div>. It contains a table with text and one image. I would
    > like to make the entire container clickable. When I click on it I want the
    > parent page to change to another page on my website. How?
    >
    > #Uleft {
    > float:left;
    > background:#F7D469;
    > padding-top:1%;
    > border:1px solid #336699;
    > color:#000;
    > width:50%;
    > height:35%;
    > cursor:pointer;
    > }


    Divs were never meant for being used as links, but I guess you could stick
    the standard href tags around Uleft, although I don't think that will work
    quite the way you want it to.
     
    Vaxius, Oct 9, 2006
    #18
  19. Yogi_Bear_79

    Yogi_Bear_79 Guest

    "Ben C" <> wrote in message
    news:...
    > On 2006-10-06, Yogi_Bear_79 <> wrote:
    >>
    >> "Ben C" <> wrote in message
    >> news:...
    >>> On 2006-10-06, Yogi_Bear_79 <> wrote:
    >>>>
    >>>> "Harlan Messinger" <> wrote in message
    >>>> news:...
    >>>>> Ben C wrote:
    >>>>>> On 2006-10-05, Yogi_Bear_79 <> wrote:
    >>>>>>> I created a floating window with the code below. I call it with
    >>>>>>> <div
    >>>>>>> id="Uleft"></div>. It contains a table with text and one image. I
    >>>>>>> would
    >>>>>>> like to make the entire container clickable. When I click on it I
    >>>>>>> want
    >>>>>>> the parent page to change to another page on my website. How?
    >>>>>>
    >>>>>> Put the whole lot inside an <a> element.
    >>>>>
    >>>>> A DIV element can't go inside an A element. Only inline elements
    >>>>> (excluding another A) can go inside an A.
    >>>>
    >>>> So is it not possible to do what I want?
    >>>
    >>> You can use JavaScript:
    >>>
    >>> <script>
    >>> function click()
    >>> {
    >>> location = "http://www.google.co.uk";
    >>> }
    >>>
    >>> function main()
    >>> {
    >>> var e = document.getElementById("Uleft");
    >>> e.addEventListener("click", click, false);
    >>> }
    >>>
    >>> onload = main;
    >>> </script>
    >>>
    >>> In your document somewhere should do the trick.

    >>
    >> Thanks! I guess I still need a little more help though. I tried the code
    >> in
    >> the BODY tag, the DIV tag, and even as a SSI, but nothing happens. any
    >> ideas?

    >
    > I tried it and it did work for me. Are you using Firefox? If so you get
    > a "JavaScript Console" (Tools menu) that tells you the errors. Otherwise
    > you can put alerts in there to check which bits are being executed etc.
    >
    > Putting the <script> in the head element might be the best place, to be
    > sure it's run before the document.onload event happens (which it's then
    > going to listen for). But I think anywhere _should_ be fine.



    Currently I have it as an SSI. IE is claiming Line 12 Char 5 is the
    problem, Below is the .js file I have it saved as. I call the SSI inside
    the <head> tag like this <SCRIPT language=JavaScript1.2
    src="includes/ULeft.js"></SCRIPT>. I have other SSI's called in similar
    fashion that work. So I don't think it is my test server. I would prefer to
    run it as an SSI. Thanks for your time

    // JavaScript Document

    function click()
    {
    location = "http://www.google.co.uk";
    }

    function main()
    {
    var e = document.getElementById("ULeft");
    e.addEventListener("click", click, false);
    }

    onload = main;
     
    Yogi_Bear_79, Oct 10, 2006
    #19
  20. Yogi_Bear_79 wrote:

    > Currently I have it as an SSI. IE is claiming Line 12 Char 5 is the
    > problem, Below is the .js file I have it saved as.


    That's cuz (da-da-da tah) IE does support "addEventListener". And you
    thought this would be easy ;-) No IS has its own proprietary command
    "attachEvent" so you need to make some changes to your script...

    > I call the SSI inside
    > the <head> tag like this <SCRIPT language=JavaScript1.2

    ^^^^^^^^^^^^^
    Get rid of the "language" attribute and use the required "type" attribute:

    <script type="text/javascript" src="includes/ULeft.js"></script>

    > src="includes/ULeft.js"></SCRIPT>. I have other SSI's called in similar
    > fashion that work. So I don't think it is my test server. I would prefer to
    > run it as an SSI. Thanks for your time
    >
    > // JavaScript Document
    >
    > function click()
    > {
    > location = "http://www.google.co.uk";
    > }
    >
    > function main()
    > {
    > var e = document.getElementById("ULeft");
    > e.addEventListener("click", click, false);
    > }
    >
    > onload = main;



    function main(){
    var e=document.getElementById("ULeft");
    if(e.addEventListener){ //modern browsers
    e.addEventListener("click", click, false);
    }
    else if(e.attachEvent){ //MS IE support
    pn.attachEvent('onclick', click); //NOTE: 'onclick' not 'click'
    }
    }

    //now the proper way to initialize listener when document loads
    if( window.addEventListener ) {
    window.addEventListener('load', main, false); //legacy on WINDOW OBJ
    } else if( document.addEventListener ) {
    document.addEventListener('load', main, false); //proper W3C
    } else if( window.attachEvent ) {
    window.attachEvent("onload", main); // Special for IE only
    }



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 10, 2006
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    17,298
  2. shruds
    Replies:
    1
    Views:
    835
    John C. Bollinger
    Jan 27, 2006
  3. coosa
    Replies:
    7
    Views:
    2,759
    Jeff Dillon
    May 2, 2006
  4. M Wells
    Replies:
    0
    Views:
    141
    M Wells
    Oct 6, 2004
  5. visu
    Replies:
    4
    Views:
    302
Loading...

Share This Page