Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

making a div float over an image

Options
  • 02-12-2006 12:50pm
    #1
    Registered Users Posts: 872 ✭✭✭


    Hi,

    Im making a site that needs to be very search engine friendly.

    The header is basically an image with the logo over to the left of the image. The logo is just text with a background colour so i want to make this a separate object to the image so i can make the text a h1 tag which is meant to be great for search engines.

    The site is centered in the browser. If i make the logo a div how can it appear on top of the image and move if the browser is resized.

    I never really understood all the absolute relative position stuff.

    Thanks


Comments

  • Registered Users Posts: 2,157 ✭✭✭Serbian


    One of the ideas behind semantic markup is that all decorative images should be background images. With that in mind, why not make the header image the background of the header div and then place the logo inside that div using padding / margin. It would look something like this:
    /* Stylesheet */
    
    #header {
       width: 750px;
       height: 50px;
       background: #fff url(/path/to/background.png) no-repeat top left;
    }
    
    #header h1 {
       margin: 10px;
       padding: 0;
       color: #333;
    }
    
    <!-- HTML -->
    <div id="header"><h1>Logo Text in Here</h1></div>
    


  • Registered Users Posts: 872 ✭✭✭grahamor


    excellent idea Serbian, ill do exactly that.

    Thanks


Advertisement