problem with <div> height and width

Discussion in 'HTML' started by Leszek, Oct 21, 2006.

  1. Leszek

    Leszek Guest

    Hi.
    I have a problem with <div> tag. I have two different types of images that
    need to be loaded into <div>
    First kind of image has height 640px and width 480px. Second has height
    480px and width 680px. Image should have border 1px and color #999999. I did
    something like this:

    //css

    DIV.two{
    border-color: #999999;
    border-style: solid;
    border-width: 1px;
    width: 640px;
    height: 480px;
    }

    DIV.one{
    border-color: #999999;
    border-style: solid;
    border-width: 1px;
    width: 480px;
    height: 640px;
    }

    //css

    and in html document i have:

    <div class="one"></div>
    <div class="two"></div>


    Now i need to use only one <div> at the time, not both. Is it possible to
    turn off displaying one <div> while user is clicking on the link to image?
    Or maybe there is way to use only one css rule for div and just change
    height and width when user click on the link to image?

    Thanks.
    Leszek
    Leszek, Oct 21, 2006
    #1
    1. Advertising

  2. Leszek

    BootNic Guest

    > Leszek <> wrote:
    > news: ehe8bs$t20$
    > Hi.
    > I have a problem with <div> tag. I have two different types of images
    > that need to be loaded into <div>
    > First kind of image has height 640px and width 480px. Second has
    > height 480px and width 680px. Image should have border 1px and color
    > #999999. I did something like this:

    [snip]
    > Now i need to use only one <div> at the time, not both. Is it
    > possible to turn off displaying one <div> while user is clicking on
    > the link to image? Or maybe there is way to use only one css rule for
    > div and just change height and width when user click on the link to
    > image?

    It appears that you are just adding a border to the image. If you wish it
    to display as a block element, display it as a block element.

    img.box {
    border: solid 0.1em #999;
    display: block;
    }

    --
    BootNic Saturday, October 21, 2006 8:06 PM

    I try to take one day at a time, but sometimes several days attack me
    at once.
    *Jennifer Unlimited*
    BootNic, Oct 22, 2006
    #2
    1. Advertising

  3. Leszek

    Ben C Guest

    On 2006-10-21, Leszek <> wrote:
    > Hi.
    > I have a problem with <div> tag. I have two different types of images that
    > need to be loaded into <div>
    > First kind of image has height 640px and width 480px. Second has height
    > 480px and width 680px. Image should have border 1px and color #999999. I did
    > something like this:
    >
    > //css
    >
    > DIV.two{
    > border-color: #999999;
    > border-style: solid;
    > border-width: 1px;
    > width: 640px;
    > height: 480px;
    > }
    >
    > DIV.one{
    > border-color: #999999;
    > border-style: solid;
    > border-width: 1px;
    > width: 480px;
    > height: 640px;
    > }
    >
    > //css
    >
    > and in html document i have:
    >
    ><div class="one"></div>
    ><div class="two"></div>
    >
    >
    > Now i need to use only one <div> at the time, not both. Is it possible to
    > turn off displaying one <div> while user is clicking on the link to image?


    Yes, you can toggle between display: block and display: none, or between
    visibility: hidden and visibility: visible using either JavaScript/DOM
    or the :active pseudoselector.

    > Or maybe there is way to use only one css rule for div and just change
    > height and width when user click on the link to image?


    You can do that too.

    var img = document.getElementById("imageOne");
    img.style.width = "640px";
    ....

    etc.
    Ben C, Oct 22, 2006
    #3
    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. Lois
    Replies:
    1
    Views:
    3,189
    Ryan Stewart
    Dec 27, 2004
  2. cera
    Replies:
    1
    Views:
    1,247
    Neredbojias
    Aug 18, 2007
  3. Bernd Meier
    Replies:
    6
    Views:
    500
    GTalbot
    Jan 14, 2008
  4. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    853
    muggslab
    Feb 1, 2010
  5. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    133
    Dietmar Meier
    Jan 31, 2005
Loading...

Share This Page