Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Logo image not positioned correctly

    Hello

    I have a page here http://www.bayingwolf.com/display_recordsTEST.asp with a small wolf logo in the right-hand logo.

    It is positioned as follows:
    Code:
    <img src="images/wolf_howling3.jpg" width="85" height="85" alt="logo" style="position:absolute; left:1195px; top:80px;" />
    When I look at the site full screen the logo moves inwards and when at half-screen it move to the right and off screen.

    How do I position it so that it is always under the month of the year regardless of screen size?

    Thanks

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Code:
    <p class="show_date"><img src="images/wolf_howling3.jpg" width="85" height="85" alt="logo" /></p>
    Replace the second show_date paragraph with this and see what happens.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    SteveH (09-28-2013)

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    That looks a lot better, DrDOS.

    Thank you!

    Steve

  • #4
    New Coder
    Join Date
    Oct 2013
    Location
    Bangalore, Karnataka
    Posts
    43
    Thanks
    3
    Thanked 0 Times in 0 Posts
    1),Define your logo in a page division based on the following code.
    <div id="my_logo"> <img src="my_website_logo.png" id="my_logo_image"> </div>

    2),Create a section for your CSS style sheet in the header of your HTML page.
    <style type="text/css">
    </style>

    3),Link to an external CSS style sheet as an alternative for larger stylesheets. This code should also be placed in the header of your HTML page.
    <link rel="stylesheet" src="my_stylesheet.css">

    4),Create a section in your CSS style sheet to modify the attributes of the logo "div." The "#" selector is used to select an object by ID.
    div#my_logo{ //CSS goes here }

    5),Set the "position" attribute of "div#my_logo" to "absolute." This defines the position of the "div" to be absolute with respect to the page, being placed independently of other elements in the document-object model.
    div#my_logo{ position: absolute; }

    6),Set the "top" and "left" attribues to be equal to the position you wish to place your logo. This can be defined in pixels, points and other measurements.
    div#my_logo{ position: absolute; top: 12pt; left: 24pt; }

    7),Set the "z-index" attribute to a high number, greater than the "z-index" of other page elements. The absolute number is irrelevant; page elements are positioned according to the relative value of the "z-index."
    div#my_logo{ position: absolute; top: 12pt; left: 24pt; z-index: 100; }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •