Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Member Pink Spider's Avatar
    Join Date
    Nov 2011
    Location
    Wimbledon, London
    Posts
    58
    Member #
    30014
    Liked
    2 times
    Hi everyone

    I'm having problems getting a logo and tagline to align the same in different screen sizes. On my large screen, it's fine but on my macbook pro, the logo and tagline indent. Does anyone know a way around this?

    Here's my code (I've also attached a screenshot):

    #headerWrapper {
    width: 100%;
    background-color: #000;
    height: 150px;

    }
    #header {
    width: 1644px;
    margin: 0 auto 0 auto;
    height: 150px;
    background-image: url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-color: #582F80;
    }
    #logo {
    margin-left: 233px;

    }
    #tagline {
    font-size: 18px;
    color: #FFF;
    font-family: 'Cinzel', serif;
    margin-left: 333px;
    margin-top: -20px;
    }

    <div id="headerWrapper">
    <div id="header">
    <div id="logo"><img src="images/site_name.png" width="579" height="136" />
    </div>
    <div id="tagline">Fluent in Perfection
    </div>

    </div>
    </div>

    I realise the header background is very wide but that's because I need it to fade out over the sides of the rest of the website which is 978px wide. I don't think this is causing the problem though.

    If anyone can help me with this, I'd be very grateful.

    Thanks
    Monique
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    If I had to guess, #header is probably pushing up against the left side of the viewport, and that's squeezing #logo to the left.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I'm not seeing anything defined for logo except for the one margin setting.

    What I always try to do in CSS is define height, width, margin and padding

    Margins and padding should be set to 0 if they are not being used, because each browser sets a default margin and padding value if you don't set one. Ie is notrorious for adding a 3px padding around some objects, but if you use margin 0 ( I'd suggest CSS shorthand on margins and padding ), all browsers will interpret it the same.

    #logo{ margin: 0 0 0 233px; }

    Just a thought...


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com