Skip navigation
Currently Being Moderated

Header Design Change

Nov 1, 2013 12:11 AM

I have recently changed the logo for my web site and the height is larger than the old one.  It unfortunately leaves a lot of white space in the header area.   I would like to somehow change the design of the header area to include the new logo plus the nav bar somewhere in the white space to the right of the logo. I'm not sure how to design that.

 

The new logo with lots of white space:  http://www.justletmelearn.org/saiphai_temp2.html

 

The old logo with nav bar below header:  http://www.justletmelearn.org/saiphai.html

 

I appreciate any help you can give,

 

Sandy

 
Replies
  • Currently Being Moderated
    Nov 1, 2013 1:57 AM   in reply to snelsoninthemtns

    Have a look at the different background images

    1. for the new page images/bkgrndImageHdr_xx.gif
    2. for the old page images/bkgrndImageHdr_wide.gif

     

    That should give you a clue of why it is white.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2013 5:48 AM   in reply to snelsoninthemtns

    Rather than being cryptic, I will explain what is going on.

     

    In your old site's style sheet, you had the following:

     

    #header {

              text-align: center;

              background-color: #000;

              width: 100%;

              background-image: url(images/bkgrndImageHdr_wide.gif);

              position: fixed;

              left: 0px;

              top: 0px;

              background-repeat: repeat;

    }

     

    I want to draw your attention to the background image there. If you go find your bkgrndImageHdr_wide.gif file, you'll see the nice gradient you created for the old site. You can put that in the new site, too.

     

    In your new website, you have the following:

     

    logo_new1000.gif

     

    Open up that image in Photoshop. You'll see all of that white space is actually in the image. Since it's a GIF file, you are allowed transparency. So make that white space all transparent.

     

    You don't need a background-color in your style sheet. Get rid of that.

     

    Make the background image your gradient ramp as before.

     

    Then your new logo will sit on that ramp. I would also change the background-repeat property to repeat-y. If it's set to repeat, it will repeat both horizontally and vertically.

     

    This is almost a Photoshop-only question. But a lot of time you're not paying attention to the fact that an image will also have a white background.

     

    I would also reduce the width of my image to just what I need. That way, it doesn't have a width value that may interfere with a telephone number or other message you might want in your header region.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2013 6:21 AM   in reply to mhollis55

    @Mark,

     

    I wasn't trying to be cryptic, I just did not think that the OP needed hand feeding. After all she is not a newby with more than 180 posts and a website to be proud of. A fixed header and footer is witness to that.

     

    If my assumptions were wrong, then she will appreciate your input.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2013 6:32 AM   in reply to Ben Pleysier

    Sorry, Ben, I don't look into previous postings.

     

    (busy day…)

     

    But, based on what I see in the code, there are a lot of things in that website that look like stuff that the OP did not originate. And looking at previous questions, I think this is true.

     

    This is a Photoshop solution—mostly.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2013 9:42 AM   in reply to snelsoninthemtns

    Hi Sandy,

    I would like to somehow change the design of the header area to include the new logo plus the nav bar somewhere in the white space to the right of the logo.

    Looks like the boys missed your question.  The answer is to float your logo and menu.

     

    Inline styles used here for expediency. 

     

    <div id="header" style="background:#000">

    <div style="float:left; width:150px">

    <img src="images/logo_new1000.gif" alt="Just Let Me Learn">

    </div>

    <!-- NAV BAR -->

    <div style="float:right; width:60%">

    <a href="index.html" class="anchorNOsub"> Home </a>

    <a href="mission.html" class="anchorNOsub"> Our Mission </a>

    <a href="#" class="anchorclass" rel="submenu2"> Current Projects <img src="images/GarrowDown.gif" border="0" height="13" hspace="0" vspace="0" width="16"></a>

    <a href="#" class="anchorclass" rel="submenu2"> Completed Projects <img src="images/GarrowDown.gif" border="0" height="13" hspace="0" vspace="0" width="14"></a>

    <a href="about.html" class="anchorNOsub"> About Us </a>

    <a href="contact.html" class="anchorNOsub"> Contact Us </a>

    <a href="mailto[removed email address]?Subject=Just Let Me Learn Web Inquiry" class="anchorNOsub">Contact Us </a>

    </div>

    </div>

    <!--end sticky header-->

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2013 11:01 AM   in reply to snelsoninthemtns

    I would use an unordered list menu.

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5, CSS Drop-Menu</title>
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    
    <style>
    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    header {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
    }
    img { vertical-align: baseline }
    
    #logo {
        float: left;
        width: 220px;
    }
    
    /* BEGIN HORIZONTAL DROP-MENU */
    nav {
        width: 780px;  /**adjust width as needed**/
        margin: 115px auto;
        padding: 0;
        text-align: center;
    }
    nav ul {
        margin: 0;
        padding: 0
    }
    nav li {
        list-style: none;
        font-size: 12px;
        float: left;
        text-align: center;
    }
    /**top level menu**/
    nav li a {
        display: block;
        text-decoration: none;
        margin-right: 1px; /* space between links */
        color: #FFF;
        width: 11em; /* adjust as needed or use auto */
        padding: 12px;
        font-weight: bold;
        line-height: 1.50em;
        background: #000;
        border: 1px solid #000;
        border-top: none;
    }
    /**top menu style on mouse over - in good browsers**/
    nav li:hover > a {
        color: #FFF;
        background: #666;
    }
    /**sub-menu**/
    nav li ul {
        display: none;
        text-align: center;
        margin: 0;
        padding: 0 1em;
    }
    /**sub-menu, with help for IE**/
    nav li:hover ul, nav li.hover ul {
        display: block;
        position: absolute;
        padding: 0;
    }
    nav li:hover li, nav li.hover li { float: none; }
    
    /**drop-menu style**/
    nav li:hover li a, nav li.hover li a {
        width: 11em; /* adjust width as needed or use auto */
        margin-top: 0;
    }
    /**drop-menu style on mouse over**/
    nav li li a:hover {
        background: maroon;
        color: gold;
    }
    /* Clear floated elements at the end*/
    nav:after {
        visibility: hidden;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    /**end Horizontal drop-menus**/
    </style>
    </head>
    
    <body>
    <header> <img id="logo" src="http://placehold.it/220x160">
    <nav>
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="mission.html">MISSION</a></li>
    <li><a href="#">PROJECTS &#9660;</a><ul>
        <li><a href="saiphai.html">Saiphai School</a></li>
        <li><a href="sesawng.html">Sesawng School</a></li>
        <li><a href="bus.html">Patna School Bus</a></li>
        <li><a href="chanduali.html">Chanduali Project</a></li>
    </ul>
    </li>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    </ul>
    </nav>
    </header>
    </body>
    </html>

     

    And this is what it looks like:

    LetMeLearn.jpg

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 4, 2013 10:52 AM   in reply to snelsoninthemtns

    <header and <nav> are HTML5 tags.  That was my doing because I use HTML5  for everything now.  You would need to switch to an HTML5 doc type or change header and nav to divs.

    http://www.w3schools.com/html/html5_new_elements.asp

     

    I don't think your page is wide enough to accommodate another menu item without dropping it to the next line.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2013 10:08 AM   in reply to snelsoninthemtns

    Position:fixed will mess up your header & nav. I don't recommend using it. 

    • you can't center it, 
    • you can't use it to hold your floated menu,
    • your drop menus won't work right unless you move them up.

     

    You have an extra closing </div> on line 108 of your code.  You should remove it.

     

    I prefer to give all my menus the same width in ems so everything is symetrical but you don't have enough room to do that without dropping to a 2nd line or significantly increasing layout width.

     

    I recommend the following changes to your CSS code:

     

    #header {

    width: 1000px;

    margin: 0 auto;

    overflow: hidden;

    border-bottom: 4px solid #CCC;

    }

     

    #nav {

    width: 100%;

    padding: 0;

    margin-top:122px;

    }

     

    Use an inline style on the Current Projects link like so:

     

    <li><a href="#" style="width:12.5em">Current Projects <img src="images/GarrowDown.gif" border="0" height="13" width="16"></a><ul>

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points