SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard jonese's Avatar
    Join Date
    Jul 1999
    Location
    Powder Springs GA (Atlanta)
    Posts
    1,238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image alignment issues.

    ok i have 3 images. I need the first all the way to the left. the 2nd in the middle and the 3rd all the way to the right. and i need a background image to repeat across the x axis behind all of this.

    here is what i have

    CSS
    Code:
     #head_top{
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 95px;
    background-image: url(/images/all_sites/head_back.gif);
    }
    #head_image_left{
    position: absolute;
    margin-top: 24px;
    width: 62px;
    float: left;
    }
    #head_image_title{
    position: absolute;
    margin-top: 31px;
    text-align: center;
    }
    #head_image_right{
    position: absolute;
    margin-top: 24px;
    width: 83px;
    right: 0px;
    }
    HTML
    Code:
     <div id="head_top"></div>
    <div id="head_image_left"><img src="/images/all_sites/mi_insig.jpg" width="62" height="71"></div>
    <div id="head_image_title"><cfoutput>
    <cfif IsDefined("h.title_image_link" ) AND #h.title_image_link# IS NOT ''>
    </cfif>
    <a href="#h.title_image_link#"><img src="/images/header_title/#h.title_image_name#" alt="#h.title_image_description#" 
    width="333" height="64" border="0" align="absbottom"></a>
    <cfif IsDefined("h.title_image_link" ) AND #h.title_image_link# IS NOT ''>
    <a href="#h.title_image_link#"></a>
    </cfif>
    </cfoutput></div>
    <div id="head_image_right"><cfoutput>
    <cfif IsDefined("h.header_image_link" ) AND #h.header_image_link# IS NOT ''>
    </cfif>
    <a href="#h.header_image_link#"><img src="/images/header_image/#h.header_image_name#" alt="#h.header_image_description#" 
    width="83" height="71" border="0"></a>
    <cfif IsDefined("h.header_image_link" ) AND #h.header_image_link# IS NOT ''>
    <a href="#h.header_image_link#"></a>
    </cfif>
    </cfoutput></div>
    Last edited by jonese; Jun 9, 2003 at 12:53.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
     #head_top{ 
     padding-top: 24px;
     width: 100%; 
     height: 95px; 
     background-image: url(/images/all_sites/head_back.gif); 
     } 
     #head_image_left{ 
     width: 33%;
     float: left; 
     text-align: left;
     } 
     #head_image_title{ 
     width: 33%; 
     text-align: center; 
     float: left;
     } 
     #head_image_right{ 
     width: 33%;
     text-align: right;
     float: left;
     }
    This should be a little more cleaned up and easier to use.

    Hope this helps!

  3. #3
    SitePoint Wizard jonese's Avatar
    Join Date
    Jul 1999
    Location
    Powder Springs GA (Atlanta)
    Posts
    1,238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it did. after tweaking it a bit i came up with:

    Code:
    #head_top{
     position: absolute;
     top: 0px;
     left: 0;
     width: 100%;
     height: 95px;
     background-image: url(/images/all_sites/head_back.gif);
    }
    #head_image_left{
     position: absolute;
     margin-top: 24px;
     width: 33%;
     float: left; 
     text-align: left;
    }
    #head_image_title{
     position: absolute;
     margin-top: 31px;
     width: 100%; 
     text-align: center; 
     float: left;
    }
    #head_image_right{
     position: absolute;
     margin-top: 24px;
     right: 0px;
    }
    This does exactly what i wanted it to

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Cool. I didn't know if the absolute positioning was necessary, but that looks like it works well!
    Quote Originally Posted by jonese
    yes it did. after tweaking it a bit i came up with:

    Code:
    #head_top{
     position: absolute;
     top: 0px;
     left: 0;
     width: 100%;
     height: 95px;
     background-image: url(/images/all_sites/head_back.gif);
    }
    #head_image_left{
     position: absolute;
     margin-top: 24px;
     width: 33%;
     float: left; 
     text-align: left;
    }
    #head_image_title{
     position: absolute;
     margin-top: 31px;
     width: 100%; 
     text-align: center; 
     float: left;
    }
    #head_image_right{
     position: absolute;
     margin-top: 24px;
     right: 0px;
    }
    This does exactly what i wanted it to


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
  •