problem with <div> height and width

[Leszek]

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

 

[BootNic]

[email protected]
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*

 

[Ben C]

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.