WordPress.org

Ready to get started?Download WordPress

Forums

float gif over png (23 posts)

  1. mrhodesit
    Member
    Posted 3 years ago #

    i have a png logo in the header of the the page.

    I have a small gif, i want to put this gif on top of the png.

    not above, but float over it like as if it was another layer.

    im using a modified piano black theme.

    i dont even know where to start. someone get me on the right track and i can figure the rest out

    thanks for your help guys.

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    i dont even know where to start.

    with the basics (?):

    http://www.w3schools.com/css/css_positioning.asp

  3. mrhodesit
    Member
    Posted 3 years ago #

    ok where do i put this? the style.css file? i want the image in the header. so do i put one portion of this in the style.css, and one in the header? i cant get it to work right, what am i doing wrong.

    <html>
    <head>
    <style type="text/css">
    img
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    }
    </style>
    </head>
  4. mrhodesit
    Member
    Posted 3 years ago #

    this is the second part
    `<body>
    <h1>This is a heading</h1>
    <img src="heart3.gif" width="100" height="140" />
    <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
    </body>
    </html>'

  5. mrhodesit
    Member
    Posted 3 years ago #

    do i put it all in the same file, which file? someone please elaborate

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    instructions for these basic css applications are examples only, to show the general working. they are not meant to be 'copy/paste' codes.

    it is easier to discuss your css issue with a link to your site.
    otherwise any help will be guesswork and difficult to apply.

    the image tag has to go into header.php, into the same div as the png;
    it further also depends if the png is a background image.

  7. mrhodesit
    Member
    Posted 3 years ago #

    the png is a background image

    i wish there was a way i could talk to you alchymyth in an instant messenger

    i am not allowed to post the link on a forum, im doing this for someone else

  8. mrhodesit
    Member
    Posted 3 years ago #

    i cant find the png in the header.php

    im using "firebug" so i know which div the png background image is in, but it does not actually say the name of the file i dont see the background.png "img src"

  9. Jeremy Clark
    Moderator
    Posted 3 years ago #

    It probably wont be an img src but it will be applied via css with the background property.
    http://www.w3schools.com/css/css_background.asp

  10. mrhodesit
    Member
    Posted 3 years ago #

    ok thank you so much im almost there i think i got it, how do i go about shrinking the size and making it clickable, you know like a link to another page.

  11. mrhodesit
    Member
    Posted 3 years ago #

    ok i got it, i can do it with img src. i can resize it,and make it float on top, but im having trouble with posisitioning

  12. Jeremy Clark
    Moderator
    Posted 3 years ago #

    You really shouldn't try to resize images in the browser as it will distort the image, you should resize using a image editor then reupload the image. It depends on how your inserting the gif, with and img tag or with css with the background, etc.
    Like alchymyth it's hard to really give any definite answers without being able to see the site.

  13. mrhodesit
    Member
    Posted 3 years ago #

    i can only move it to 2 different posistions. i want complete controll of where it goes

  14. mrhodesit
    Member
    Posted 3 years ago #

    my email is mrhodesit@optonline.net

    if either of you want to shoot me an email that would be great, we can discuss in real time. out of respect for the forum i will post results and how we did it once i get it figured out

  15. mrhodesit
    Member
    Posted 3 years ago #

    i have noticed that the other images that move the way i want this image to are connected to the stylesheet. so when i move it slightly to the left or to the right or up and down i am modifying the stylesheet. how do i link the image atributes to the stylesheet?

  16. mrhodesit
    Member
    Posted 3 years ago #

    ok i got it guys

    <IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="circle.gif">

    i just used this code in the header, instead of img src

    real simple fix, you can modify size and position. one pixel at a time

  17. mrhodesit
    Member
    Posted 3 years ago #

    i was wrong i didnt get it.

    now the image is where i want it, when its full screen.

    when i change the size of the browser window it moves.

    how can i anchor it to the image i want it to hover over?

    or is there another way other than an anchor technique. someone email me please so we can corispond in real time i will put the fix on the forum after we get it figured out.

    mrhodesit@optonline.net

  18. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    without a link - just talking theory:

    to position an element 1 absolute in relation to another element 2, this other element 2 needs to have 'position:relative;' in its style.

    you could help by posting the code where the image is, plus/minus 5 lines before and after.

  19. mrhodesit
    Member
    Posted 3 years ago #

    ok so its this now
    '<IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="circle.gif">'

    when i change it this the word absolute to fixed/relative and so on i can make it stay in one place but i am no longer able to posistion it to where i want it.

  20. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    what is the div before that?

    something like <div id="header"> or what?

    could you plaese post a few lines of code before the last posted snippet? so someone can see your image in relation to the surrounding div.

  21. mrhodesit
    Member
    Posted 3 years ago #

    ok i replaced absolute with relative and it works like i want. i believe it is resolved now

  22. mrhodesit
    Member
    Posted 3 years ago #

    yeah its right below <div id="header">

    now can i get some help doing the same thing with text. not a picture of text but a link.

    i need to have text and the image i have been playing with to be a clickable link. the destination of the link is going to be the same for the pic and the text.

    and after that i need to make some regular text i need to float over the footer image.

    and different text i need to float over the the top of the content right below the header image.

  23. mrhodesit
    Member
    Posted 3 years ago #

    ok i put this

    <div id="test" style="position:relative; TOP:30px; LEFT:663px; WIDTH:230px; HEIGHT:200px"><div id="testtext">Superimposed Text</div></div>

    in the header.php

    now i have text i can move around, and because the position is relative. it stays where i want it. now i have to work on the font and making the pic and text a link.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.