Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    115
    Thanks
    32
    Thanked 0 Times in 0 Posts

    Menu disappeared?

    Hello

    Is there a reason, please, why my menu, which should appear inside the grey bar along the top, has disappeared. This is the
    HTML:

    Code:
      <div id="menubar">
              <ul id="menu">
                <li class="current"><a href="index.html">Home</a></li>
                <li><a href="ourwork.html">Our Work</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="contact.html">Contact Us</a></li>
              </ul>
            </div><!--close menubar-->
    All I have done, in trying to customise this page, is add a font and colour above it:

    Code:
    <div id="logo">
    
    	 <div id="logo_text">
              <!-- class="logo_colour", allows you to change the colour of the text -->
              <h1><a href="index.html">dima <span class="logo_colour">dayoub</span></a></h1>
              <h2>Simple. Contemporary. Website Template.</h2>
            </div>
    
    </div>
    The site is here: ARaynorDesign Template

    Thanks for any suggestions.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Blue1,
    Try this once, to show you where your menu has wondered off to -
    Code:
    #header {
        height: 150px;
    }
    To fix this, you need to look at how your #site_heading does not follow the box model rule. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.


    You have #site_heading set at 80px height and 150px high #logo is forced out of it's container and pushes your menu down.
    See what leaving that height out can do (make sure you put the CSS for #header back the way it was) -
    Code:
    #logo {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        color: #888888;
        float: left;
        /*height: 150px;*/
        padding: 0 0 0 25px;
        width: 905px;
    }
    It's usually better to leave height off your div elements and just let them flow naturally. Sometimes height is needed but not this time.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Blue1 (03-08-2014)

  • #3
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Hey blue1,

    The changes Ive made to your css are as followed:

    Code:
    html
    { height: 100%;}
    
    *
    *
    { margin: 0;
      padding: 0;}
    
    
    @font-face { 
      font-family: Droid Sans; 
        src: url('../fonts/DroidSans-webfont.eot'); 
        src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff'); 
    } 
    
    @font-face { 
      font-family: Jenna Sue; 
        src: url('../fonts/JennaSue-webfont.eot'); 
        src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf'); 
    } 
    
    
    
    #logo { 
      width: 905px;
      height: 59px;
      background: transparent;
      color: #888;
      padding: 0 0 0 25px;
      float: left;
      margin-bottom: -50px;
    }
    
    #logo_text {
      width: 300px;
    }
      
    #logo h1, #logo h2 { 
      font: normal 500% 'Jenna Sue', arial, sans-serif;
      border-bottom: 0;
      text-transform: none;
      margin: 0;
      padding: 0;
      float: left;
    }
    
    #logo_text h1, #logo_text h1 a, #logo_text h1 a:hover { 
      padding: 0;
      color: #FFF;
      text-decoration: none;
    }
    
    #logo_text h1 a .logo_colour { 
      color: #BD2CBB;
    }
    
    #logo_text a:hover .logo_colour { 
      color: #FFF;
    }
    
    #logo_text h2 { 
      font: normal 109% 'Droid Sans', arial, sans-serif;
      padding: 6px 0 0 0;
      color: #AAA;
    }
    
    
    
    
    
    body
    { font: normal .80em arial, sans-serif;
      color: #fff;
      background: transparent url(../images/background.png) repeat;}
    
    p
    { padding: 0 0 20px 0;
      line-height: 1.7em;}
      
    img
    { border: 0;}
    
    
    
    
    
    h1, h2, h3 { 
      font: normal 400% "Jenna Sue", arial, sans-serif;
      margin: 0;
      padding: 16px 0 5px 0;
      color: #BD2CBB;
    }
    
    
    
    
    h4, h5, h6 
    { font: bold 175% arial, sans-serif;
      color: #FFF;
      letter-spacing: -1px;
      text-shadow: 1px 1px #000;
      padding: 10px 0 0 0;}
    
    
    
    h4, h5, h6
    { margin: 0;
      padding: 0 0 5px 0;
      font: bold 110% arial, sans-serif;
      color: #1D1D1D;
      line-height: 1.5em;}
    
    h5, h6
    { font: italic 95% arial, sans-serif;
      color: #1D1D1D;
      padding-bottom: 15px;}
    
    h6
    { color: #362C20;}
    
    a, a:hover
    { background: transparent;
      outline: none;
      text-decoration: underline;
      color: #FFF;
      text-shadow: 1px 1px #1D1D1D;}
    
    a:hover
    { text-decoration: none;}
    
    ul
    { margin: 2px 0 22px 17px;}
    
    ul li
    { margin: 2px 0 15px 17px;}
    
    ol
    { margin: 8px 0 22px 20px;}
    
    ol li
    { margin: 0 0 11px 0;}
    
    #main, #header, #banner, #menubar, #site_content, #footer, #contact, #footer_content, #banner_image
    { margin-left: auto; 
      margin-right: auto;}
      
    #header
    { height: 50px; z-index: -999;}
      
    #site_heading
    { height: 30px;
      width: 240px;
      padding-left: 50px;}  
      
    #site_heading H1
    { width: 940px;
      font: normal 200% arial, sans-serif;
      color: #FFF;
      text-shadow: 1px 1px #1d1d1d;
      letter-spacing: -2px;}
      
    #site_heading H2
    { width: 940px;
      font: normal 130% arial, sans-serif;
      color: #FFF;
      text-shadow: 1px 1px #1d1d1d;
      letter-spacing: -1px;}  
      
    #menubar
    { width: 960px;
      height: 35px;
      padding-top: 15px;
      text-align: center; 
      /* margin-top: 16px; */ position: relative; top: 0px; margin: 0 auto;
      z-index: 9999999; background: #676767;
      background: -moz-linear-gradient(#676767, #1D1D1D);
      background: -o-linear-gradient(#676767, #1D1D1D);
      background: -webkit-linear-gradient(#676767, #1D1D1D);
      border: 1px solid #000;
      border-radius: 15px 15px 0px 0px;
      -moz-border-radius: 15px 15px 0px 0px;
      -webkit-border: 15px 15px 0px 0px;} 
    
    ul#menu
    { 
      margin: 0;}
    
    ul#menu li
    { padding: 0 0 0 0px;
      list-style: none;
      margin: 2px 0 0 0;
      display: inline;
      background: transparent;}
    
    ul#menu li a
    { font-size: 130%;
      letter-spacing: -1px;
      height: 35px;
      padding: 15px 20px 0 20px;
      text-align: center;
      color: #FFF;
      text-shadow: 1px 1px #1d1d1d;
      text-decoration: none;
      background: transparent;} 
    
    ul#menu li.current
    { margin: 2px 0 0 0;}
    
    ul#menu li.current a
    { text-decoration: underline;}
    
    ul#menu li a:hover
    { text-decoration: underline;}
    
    #site_content
    { width: 960px;
      overflow: hidden;
      padding-top: 20px;}   
    
    #content
    { text-align: left;
      width: 710px;
      margin-top: 10px;
      padding: 20px 20px 0 0;
      float: left;}
      
    .content_item
    { width: 710px; }
    
    .content_image
    { width: 148px;
      height: 148px;
      margin-top: 20px;
      float: left;
      border: 1px solid #111111;}
      
    .content_image_right
    { width: 148px;
      height: 148px;
      margin-top: 20px;
      float: right;
      border: 1px solid #111111;}
      
    .content_text
    { width: 520px;
      float: right;
      margin-top: 20px;
      padding-left: 20px;}
      
    .content_text_left
    { width: 520px;
      float: left;
      margin-top: 20px;
      padding-left: 20px;}
    
    #banner_image {
    	width: 960px;
    }
    #slider-wrapper {
        height: 350px;
    	padding-top: 10px;
    	background: transparent;
    	width: 940px;
    }
    #slider {
        background: url("../images/loading.gif") no-repeat scroll 50% 50% transparent;
        height: 350px;
        position: relative;
        width: 940px;
        border: 10px solid transparent;
    }
    #slider img {
        display: none;
        left: 0;
        position: absolute;
        top: 0;
    }
    #slider a {
        border: 0 none;
        display: block;
    }
    
    .nivoSlider {
        position: relative;
    }
    .nivoSlider img {
        left: 0;
        position: absolute;
        top: 0;
    }
    .nivoSlider a.nivo-imageLink {
        border: 0 none;
        display: none;
        height: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 6;
    }
    .nivo-slice {
        display: block;
        height: 100%;
        position: absolute;
        z-index: 5;
    }
    .nivo-box {
        display: block;
        position: absolute;
        z-index: 5;
    }
    .nivo-caption {
        background: none repeat scroll 0 0 #000000;
        bottom: 0;
        color: #FFFFFF;
        font-family: arial;
        left: 0;
        position: absolute;
        text-transform: uppercase;
        width: 100%;
        z-index: 8;
    }
    .nivo-caption p {
        margin: 0;
        padding: 5px;
    }
    .nivo-caption a {
        color: red;
        display: inline !important;
        text-decoration: none;
    }
    .nivo-caption a:hover {
        color: blue;
        text-decoration: underline;
    }
    .nivo-html-caption {
        display: none;
    }
    .nivo-directionNav a {
        background: url("../images/arrows.png") no-repeat scroll 0 0 transparent;
        cursor: pointer;
        display: block;
        height: 30px;
        position: absolute;
        text-indent: -9999px;
        top: 45%;
        width: 30px;
        z-index: 9;
    }
    a.nivo-prevNav {
        left: 15px;
    }
    a.nivo-nextNav {
        background-position: -30px 50%;
        right: 15px;
    }
    .nivo-controlNav {
        bottom: -30px;
        left: 50%;
        margin-left: -40px;
        position: absolute;
    }
    .nivo-controlNav a {
        cursor: pointer;
        float: left;
        height: 22px;
        margin-top: 250px;
        position: relative;
        text-indent: -9999px;
        width: 22px;
        z-index: 9;
    }
    .nivo-controlNav a.active {
        background-position: 0 -22px;
    }  
    
    .sidebar_container
    { float: right;
      width: 220px;
      margin: 20px 10px 20px 0;}
    
    .sidebar
    { float: right;
      width: 210px;
      padding-left: 10px;
      margin-bottom: 10px;}
    
    .sidebar_item
    { font: normal 100% arial, sans-serif;
      padding: 0 15px 0 0;
      width: 201px;}
    
    .sidebar h2
    { color: #BD2CBB;
    text-shadow: 1px 1px #000;}  
      
    .sidebar h4
    { font-size: 125%;
      color: #FFF;
      text-shadow: 1px 1px #000;}
    
    .sidebar p
    { color: #FFF;}
    
    .sidebar ul li, .sidebar ul li.selected
    { list-style: none; 
      margin: 15px 0;
      padding: 0;}
    
    .sidebar li.selected, .sidebar li:hover
    { color: #5D5D5D;
      text-decoration: none;} 
      
    #footer
    { font-size: 130%;
      letter-spacing: -1px;
      padding: 25px 20px 0 20px;
      margin: 0 auto;
      width: 920px;
      height: 45px;
      text-align: center; 
      color: #FFF;
      background: #676767;
      background: -moz-linear-gradient(#676767, #1D1D1D);
      background: -o-linear-gradient(#676767, #1D1D1D);
      background: -webkit-linear-gradient(#676767, #1D1D1D);
      border-radius: 15px 15px 0px 0px;
      -moz-border-radius: 15px 15px 0px 0px;
      -webkit-border: 15px 15px 0px 0px;
      border: 1px solid #000;
      -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
      -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
      box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
    }
    
    #footer a, #footer a:hover
    { color: #FFF;
      text-decoration: underline;}
    
    #footer a:hover
    { text-decoration: none;}
    I also moved your menu div outside of your header div which seemed to fixed the issue but positioning was out of place.

  • Users who have thanked tempz for this post:

    Blue1 (03-08-2014)

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    My chrome was acting weird and duplicating posts.
    Last edited by tempz; 03-09-2014 at 04:23 AM. Reason: Duplication.

  • Users who have thanked tempz for this post:

    Blue1 (03-08-2014)

  • #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    115
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Wow, thank you. I think you are saying the font is OK but I haven't allowed room for it??

    can I try out what you suggest and post back?

    Thanks for all your great input - I'm grateful.

    Post back soon - UK time.

    Blueie

  • #6
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Hey blue,

    Just move your menu div outside of your header div, I think I aligned it up in the css for all browser sizes.

  • #7
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Change your style sheet to this..

    I looked into your html source code and it's fine with this styling code.

    Code:
    html
    { height: 100%;}
    
    *
    *
    { margin: 0;
      padding: 0;}
    
    
    @font-face { 
      font-family: Droid Sans; 
        src: url('../fonts/DroidSans-webfont.eot'); 
        src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff'); 
    } 
    
    @font-face { 
      font-family: Jenna Sue; 
        src: url('../fonts/JennaSue-webfont.eot'); 
        src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf'); 
    } 
    
    
    
    #logo { 
      width: 905px;
      height: 59px;
      background: transparent;
      color: #888;
      padding: 0 0 0 25px;
      float: left;
      margin-bottom: -50px;
    }
    
    #logo_text {
      width: 300px;
    }
      
    #logo h1, #logo h2 { 
      font: normal 500% 'Jenna Sue', arial, sans-serif;
      border-bottom: 0;
      text-transform: none;
      margin: 0;
      padding: 0;
      float: left;
    }
    
    #logo_text h1, #logo_text h1 a, #logo_text h1 a:hover { 
      padding: 0;
      color: #FFF;
      text-decoration: none;
    }
    
    #logo_text h1 a .logo_colour { 
      color: #BD2CBB;
    }
    
    #logo_text a:hover .logo_colour { 
      color: #FFF;
    }
    
    #logo_text h2 { 
      font: normal 109% 'Droid Sans', arial, sans-serif;
      padding: 6px 0 0 0;
      color: #AAA;
    }
    
    
    
    
    
    body
    { font: normal .80em arial, sans-serif;
      color: #fff;
      background: transparent url(../images/background.png) repeat;}
    
    p
    { padding: 0 0 20px 0;
      line-height: 1.7em;}
      
    img
    { border: 0;}
    
    
    
    
    
    h1, h2, h3 { 
      font: normal 400% "Jenna Sue", arial, sans-serif;
      margin: 0;
      padding: 16px 0 5px 0;
      color: #BD2CBB;
    }
    
    
    
    
    h4, h5, h6 
    { font: bold 175% arial, sans-serif;
      color: #FFF;
      letter-spacing: -1px;
      text-shadow: 1px 1px #000;
      padding: 10px 0 0 0;}
    
    
    
    h4, h5, h6
    { margin: 0;
      padding: 0 0 5px 0;
      font: bold 110% arial, sans-serif;
      color: #1D1D1D;
      line-height: 1.5em;}
    
    h5, h6
    { font: italic 95% arial, sans-serif;
      color: #1D1D1D;
      padding-bottom: 15px;}
    
    h6
    { color: #362C20;}
    
    a, a:hover
    { background: transparent;
      outline: none;
      text-decoration: underline;
      color: #FFF;
      text-shadow: 1px 1px #1D1D1D;}
    
    a:hover
    { text-decoration: none;}
    
    ul
    { margin: 2px 0 22px 17px;}
    
    ul li
    { margin: 2px 0 15px 17px;}
    
    ol
    { margin: 8px 0 22px 20px;}
    
    ol li
    { margin: 0 0 11px 0;}
    
    #main, #header, #banner, #menubar, #site_content, #footer, #contact, #footer_content, #banner_image
    { margin-left: auto; 
      margin-right: auto;}
      
    #header
    { height: 50px; z-index: -999;}
      
    #site_heading
    { height: 30px;
      width: 240px;
      padding-left: 50px;}  
      
    #site_heading H1
    { width: 940px;
      font: normal 200% arial, sans-serif;
      color: #FFF;
      text-shadow: 1px 1px #1d1d1d;
      letter-spacing: -2px;}
      
    #site_heading H2
    { width: 940px;
      font: normal 130% arial, sans-serif;
      color: #FFF;
      text-shadow: 1px 1px #1d1d1d;
      letter-spacing: -1px;}  
      
    #menubar
    { width: 960px;
      height: 35px;
      padding-top: 15px;
      text-align: center; 
      /* margin-top: 16px; */ position: relative; top: 0px; margin: 0 auto;
      z-index: 9999999; background: #676767;
      background: -moz-linear-gradient(#676767, #1D1D1D);
      background: -o-linear-gradient(#676767, #1D1D1D);
      background: -webkit-linear-gradient(#676767, #1D1D1D);
      border: 1px solid #000;
      border-radius: 15px 15px 0px 0px;
      -moz-border-radius: 15px 15px 0px 0px;
      -webkit-border: 15px 15px 0px 0px;} 
    
    ul#menu
    { 
      margin: 0;}
    
    ul#menu li
    { padding: 0 0 0 0px;
      list-style: none;
      margin: 2px 0 0 0;
      display: inline;
      background: transparent;}
    
    ul#menu li a
    { font-size: 130%;
      letter-spacing: -1px;
      height: 35px;
      padding: 15px 20px 0 20px;
      text-align: center;
      color: #FFF;
      text-shadow: 1px 1px #1d1d1d;
      text-decoration: none;
      background: transparent;} 
    
    ul#menu li.current
    { margin: 2px 0 0 0;}
    
    ul#menu li.current a
    { text-decoration: underline;}
    
    ul#menu li a:hover
    { text-decoration: underline;}
    
    #site_content
    { width: 960px;
      overflow: hidden;
      padding-top: 20px;}   
    
    #content
    { text-align: left;
      width: 710px;
      margin-top: 10px;
      padding: 20px 20px 0 0;
      float: left;}
      
    .content_item
    { width: 710px; }
    
    .content_image
    { width: 148px;
      height: 148px;
      margin-top: 20px;
      float: left;
      border: 1px solid #111111;}
      
    .content_image_right
    { width: 148px;
      height: 148px;
      margin-top: 20px;
      float: right;
      border: 1px solid #111111;}
      
    .content_text
    { width: 520px;
      float: right;
      margin-top: 20px;
      padding-left: 20px;}
      
    .content_text_left
    { width: 520px;
      float: left;
      margin-top: 20px;
      padding-left: 20px;}
    
    #banner_image {
    	width: 960px;
    }
    #slider-wrapper {
        height: 350px;
    	padding-top: 10px;
    	background: transparent;
    	width: 940px;
    }
    #slider {
        background: url("../images/loading.gif") no-repeat scroll 50% 50% transparent;
        height: 350px;
        position: relative;
        width: 940px;
        border: 10px solid transparent;
    }
    #slider img {
        display: none;
        left: 0;
        position: absolute;
        top: 0;
    }
    #slider a {
        border: 0 none;
        display: block;
    }
    
    .nivoSlider {
        position: relative;
    }
    .nivoSlider img {
        left: 0;
        position: absolute;
        top: 0;
    }
    .nivoSlider a.nivo-imageLink {
        border: 0 none;
        display: none;
        height: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 6;
    }
    .nivo-slice {
        display: block;
        height: 100%;
        position: absolute;
        z-index: 5;
    }
    .nivo-box {
        display: block;
        position: absolute;
        z-index: 5;
    }
    .nivo-caption {
        background: none repeat scroll 0 0 #000000;
        bottom: 0;
        color: #FFFFFF;
        font-family: arial;
        left: 0;
        position: absolute;
        text-transform: uppercase;
        width: 100%;
        z-index: 8;
    }
    .nivo-caption p {
        margin: 0;
        padding: 5px;
    }
    .nivo-caption a {
        color: red;
        display: inline !important;
        text-decoration: none;
    }
    .nivo-caption a:hover {
        color: blue;
        text-decoration: underline;
    }
    .nivo-html-caption {
        display: none;
    }
    .nivo-directionNav a {
        background: url("../images/arrows.png") no-repeat scroll 0 0 transparent;
        cursor: pointer;
        display: block;
        height: 30px;
        position: absolute;
        text-indent: -9999px;
        top: 45%;
        width: 30px;
        z-index: 9;
    }
    a.nivo-prevNav {
        left: 15px;
    }
    a.nivo-nextNav {
        background-position: -30px 50%;
        right: 15px;
    }
    .nivo-controlNav {
        bottom: -30px;
        left: 50%;
        margin-left: -40px;
        position: absolute;
    }
    .nivo-controlNav a {
        cursor: pointer;
        float: left;
        height: 22px;
        margin-top: 250px;
        position: relative;
        text-indent: -9999px;
        width: 22px;
        z-index: 9;
    }
    .nivo-controlNav a.active {
        background-position: 0 -22px;
    }  
    
    .sidebar_container
    { float: right;
      width: 220px;
      margin: 20px 10px 20px 0;}
    
    .sidebar
    { float: right;
      width: 210px;
      padding-left: 10px;
      margin-bottom: 10px;}
    
    .sidebar_item
    { font: normal 100% arial, sans-serif;
      padding: 0 15px 0 0;
      width: 201px;}
    
    .sidebar h2
    { color: #BD2CBB;
    text-shadow: 1px 1px #000;}  
      
    .sidebar h4
    { font-size: 125%;
      color: #FFF;
      text-shadow: 1px 1px #000;}
    
    .sidebar p
    { color: #FFF;}
    
    .sidebar ul li, .sidebar ul li.selected
    { list-style: none; 
      margin: 15px 0;
      padding: 0;}
    
    .sidebar li.selected, .sidebar li:hover
    { color: #5D5D5D;
      text-decoration: none;} 
      
    #footer
    { font-size: 130%;
      letter-spacing: -1px;
      padding: 25px 20px 0 20px;
      margin: 0 auto;
      width: 920px;
      height: 45px;
      text-align: center; 
      color: #FFF;
      background: #676767;
      background: -moz-linear-gradient(#676767, #1D1D1D);
      background: -o-linear-gradient(#676767, #1D1D1D);
      background: -webkit-linear-gradient(#676767, #1D1D1D);
      border-radius: 15px 15px 0px 0px;
      -moz-border-radius: 15px 15px 0px 0px;
      -webkit-border: 15px 15px 0px 0px;
      border: 1px solid #000;
      -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
      -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
      box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
    }
    
    #footer a, #footer a:hover
    { color: #FFF;
      text-decoration: underline;}
    
    #footer a:hover
    { text-decoration: none;}

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by tempz View Post
    Change your style sheet to this..

    I looked into your html source code and it's fine with this styling code.


    /...
    Code:
    #logo { 
      width: 905px;
      height: 59px;
      background: transparent;
      color: #888;
      padding: 0 0 0 25px;
      float: left;
      margin-bottom: -50px;:
    }
    tempz, you should have a look at the box model too. If you fix the issue, the negative margin isn't needed.
    Last edited by Excavator; 03-09-2014 at 05:17 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    Feb 2014
    Posts
    115
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Very many thanks to you both for your considered replies, and sorry for the delay in getting back to you.

    This is the page with tempz's CSS ARaynorDesign Template and this is the page with Excavator's revised CSS (I think you changed the #logo background to transparent and added the negative margin): ARaynorDesign Template

    The only change I have made myself is add the font-family style to the index.html site.

    I am pleased with it so far and I am grateful to your both for all your hard work.

    Blue


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •