SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Placing text on a background image

    Hello - I'm just starting my first CSS site after years of table based designs. My client wants a graphic for the home page. I want to put my navigation and footer on top of the background image. The image needs to be centered. How can I get the text positioned properly over the background image and have it maintain proper position when the browser is resized? It sort of works in IE6 but not Firefox. Here is a test of what I've come up with so far.

    http://www.millcityweb.com/dsmusic/test.html

    The menu should go into the light brown block on the left. The Copyright footer should go under the bottom white line. I've been struggling with this for the last 2 days. If someone can help, tell me a better approach or point me to some good threads on this topic, I would be very grateful.

    Thanks - AC

    Here is the CSS - Use "View Source to see the page code.

    body{
    background-color: #492015;
    margin: 0px;
    padding: 0px;
    background-image: url(images/hometest.jpg);
    background-repeat: no-repeat;
    background-position: center 10px ;
    text-align: center;
    }

    .homefooter {
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size : 11px;
    color: #FFFFFF;

    }
    .homefooter a:visited { color: #ffffff;}
    .homefooter a:link {color: #ffffff;}
    .homefooter a:active { color: #ffffff;}
    .homefooter a:hover { color: #CCCCFF;}

    }
    #container
    {
    margin: 0px;
    width: 800px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    }

    #footer{
    text-align: right;

    width:50%;


    }
    #homemenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;

    color: #FFFFFF;
    text-align: left;
    }

  2. #2
    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, You are going about this the wrong way as that is never going to work It will be impossible to keep the layout within the confines of a fixed image like that and even if you did absolutely place everything into position then it wouldn't be a very flexible layout as it could never change size. You need to let the content dictate the height and the columns can be made by using a repeating background slice on the main container. The columns can be floated side by side and content can follow logically in each column. Here is a basic example that you can play with to see how it works. http://www.pmob.co.uk/temp/3col-centred-template9.htm It is simple 3 floated columns inside a centred main container. The main container has a repeating background image that gives the illusion of columns. The column height is dictated by the content so it can adjust to whatever height is needed and won't break if text is resized. Hope that gives you a start

  3. #3
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well right off the top of my head, the quick fix (but not the best) is to use some padding (padding-top) to the homemenu and homefooter to move them down. However, since you want to have the content remain positioned when the browsers change size, you'll maybe want to slice the background jpg so you can better utilize your code to handle the different sizes. The fixed width of the jpg and #container will make it difficult to maintain the positioning.


    Edit: Paul you beat me to it by 2 minutes and with a better explanation.
    Last edited by young72; May 30, 2007 at 08:08. Reason: Add info
    Joe


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
  •