SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Logo Placement

  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logo Placement

    Hi,

    I have somewhat of an odd inquiry, on this page:

    http://midwestwebdesign.net/music/index.html

    The picture in the top right corner, for some reason, the individual I'm developing this for would like to see it placed more to the left and and overlapping the bottom part of the header.

    I'm not seeing a way in CSS to do this currently. The right image encompasses part of the right shadow and is embedded by the following rule:

    Code:
    #logodiv {
        background-image: url(../images/bart_logoBG_logo.jpg);
        background-repeat: no-repeat;
        background-position:right top;
    }
    Just curious if anyone had suggestions?

    Thanks,
    Ryan Butler

    Midwest Web Design

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,
    I would do something like this:
    Code CSS:
     
     
        #logodiv h1 {
            background: url([url]http://midwestwebdesign.net/music/images/bart_logo.jpg[/url]) no-repeat left top;
            text-indent: -10000em;
            width: 343px;
            height: 100px;
        }
        #logodiv {
            background: url([url]http://midwestwebdesign.net/music/images/bart_logoBG_logo.jpg[/url]) no-repeat right top;        
            width: 480px; /* Increase decrease this to move the right picture */
        }
    And
    Code HTML4Strict:
    </head>
     
    <div id="logodiv">
    <h1>Missouri State University - Department of Music</h1>
    </div>
    If I understood you correctly

    Regards
    Frederik

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I get an odd result when I take that method:

    http://midwestwebdesign.net/music/index.html
    Ryan Butler

    Midwest Web Design

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd tackle this problem by keeping the shadow and the image separate so that you can deal with the independently.

    You can then use position: relative; on the container and the use absolute positioning on the logo itself to nudge it into place and to get it to overlap.

    Hope that makes sense?

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've put a quick demo of this together for you as it'll probably make more sense...

    http://www.dave-woods.co.uk/wp-conte...7/12/demo.html

    Hope that helps.

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah understand what you where looking for now. Never mind my method, use the one suggested by csswiz

  7. #7
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That makes sense. Little concerned with the placement, but I'll see what I can come up with.

    Thanks for the suggestions,
    Ryan Butler

    Midwest Web Design


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
  •