#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    CSS independent block


    Hello to all, I'm a new member.

    I have one question.
    I created website using HTML,PHP,CSS.
    I use the principle described on the page 960 gs

    Now I would like to add one block with small picture. This block must be independent of other elements.

    For example, let say that I would like to add block 100x100 to position (500,500).
    How to write CSS code ?
    Other elements must remain the same as they are now.

    Thank you
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    8
    Rep Power
    0

    It depends...


    Do you want to have the image float 500x 500y on the screen, or relative to the element it's in?

    If you just want a block with your image in it, you can create a css class for instance

    .image_div {
    display: block;
    position: absolute;
    top: 500px;
    left: 500px;
    }

    Then in your source code, in your body tag, add a

    <div class="image_div"><img src="yourimage.jpg" /></div>

    That is one way to do it, it really depends on how you want it positioned. But that should do it.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    Thanks for answer. That works.

    I also tried this:
    .image_div {
    display: block;
    position: absolute;
    height:100px;
    width:100px;
    top: 500px;
    left: 500px;
    background-image: (../image.png);
    }

    with this:
    <div class="image_div"></div>

    That does not work beacuse there is no data between div tags.
    I would like to add image in CSS so I can change it in JavaScript onmouseover function.

    Do you maybe know how to handle this :-) ?

    Thank you!!!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by bijeli
    Thanks for answer. That works.

    I also tried this:
    .image_div {
    display: block;
    position: absolute;
    height:100px;
    width:100px;
    top: 500px;
    left: 500px;
    background-image: (../image.png);
    }

    with this:
    <div class="image_div"></div>

    That does not work beacuse there is no data between div tags.
    I would like to add image in CSS so I can change it in JavaScript onmouseover function.

    Do you maybe know how to handle this :-) ?

    Thank you!!!
    Sure, inside your div just add this

    Code:
    <div class="image_div">&nbsp;</div>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    8
    Rep Power
    0
    Also, if all you are changing is the background image of the div with a mouseover, consider using css to do this. It's a little easier than adding javascript.

    Add this below your .image_div class in your css file:

    Code:
    .image_div:hover {
    	background-image:url(image2.jpg);	
    	
    }

IMN logo majestic logo threadwatch logo seochat tools logo