SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create image in top left corner of all screens

    Hi,
    I'm designing a web site which will have many different pages and designs within it, loads of different navigation, and so on, but I want to create a linked image in the top left corner of every screen. I have had problems with doing this as a lot of the pages have other things going on at the top, and whenever I try and create something it pushes the screen down. Does anyone have an how to do this? I want the image to always be in the corner, no matter what size the screen is or if it's resized and so on. Any help would be amazing!!!

    Thanks
    Russ

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use absolute positioning in your CSS like this. Here's your HTML:

    Code:
    <div id="top_corner">
    <img src="my_image.jpg" />
    </div>
    And here's your CSS:

    Code:
    #top_corner {
    position: absolute;
    top: 0;
    left: 0;
    }
    And if you want it positioned 20px off the edge, just use 20px value for left, and something similar for top.

    In principle, that should work, but it may also depend on other factors, so you'll have to test and see.

    There are other ways to do this as well, using liquid layouts maybe, but that's more complicated.

    Louis

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd probably use absolute positioning and a higher z-index for the image, but that's just a shot in the dark without knowing exactly what you're going to be doing and how you plan to do it code-wise.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes yes, that's how you do it. I kept thinking i should use float somehow because it seemed like it should be floating. I'll chalk that down as one dumb moment.

    However, i'm also trying to integrate this image with a button that opens a navigation bar at the top of the page. The link for the page is

    http://www.thghosting.co.uk/cca/

    Could someone please have a quick look and let me know if you think it's do-able. Will it be possible for the help button to move down with the rest of the page?


    Many, many thanks!

    Russ

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just place the help image in relation to #content and then it will move down with it.

    Code:
    #content
    {
        background-repeat:repeat-x;
        position:relative;
    }
    Then move the element to here:

    Code:
    <body>
    <div id="services-menu">
        <div class="container"> Health | Floating Support | Training &amp; Development 
            | InterTrans Exchange | Star Business | Gateway Homecare </div>
    </div>
    <div id="content">
        <div id="top_corner"> <a href=""><img src="http://www.thghosting.co.uk/cca/images/help.gif" width="100" height="100" border="0" /></a> </div>
        <div id="services-button">

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey,
    works perfectly. cheers for your help!

    russ


Bookmarks

Posting Permissions

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