SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image and Relative Position

    Hello All,

    I got an issue while using background-image and relative positioning. Here is an image of what I have:

    http://www.sfu.ca/~fcc/problem.jpg

    The image is actually a background-image and the text is positioned relative to it. The background-image is set to not repeat. The problem is the text now seem to out of the normal flow of the page, and I can't seem to make it clear properly so that it doesn't overlap with the bottom part.

    The HTML Markup
    Code:
    <div id='header'>
    <div id='mission'>
    <img src='Images/missionLogo.jpg' alt="服務對象相片" />
    <div id='missionContent'>
    以康樂會所模式 , 讓會員聚集及消閒 , 協助他們建立社交網絡 .
    </div>
    </div>
    </div>
    The CSS
    Code:
    #header
    {
    	min-height: 220px;
    	background-image: url("../Images/header.jpg") no-repeat;
    }
    
    * html #header
    {
    	height: 220px;
    }
    	
    #mission
    {
    	position: relative;
    	top: 160px;
    	margin-left: 10px;
    	background-color: #dfdfdf;
    	float: left;
    	width: 330px;
    }
    Is it possible to stop the text from overlapping the bottom?

  2. #2
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use clear:both;

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators


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
  •