SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Code Assistance Needed!!!

    Hey Guy's,
    I am attempting to insert a CSS Nav Menu into my template and for some reason nothing is lining up. Can you take a look and show me what I am not seeing?

    Here is my html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
        <title>
          Crosswalk Counseling Services
        </title>
        <link rel="stylesheet" type="text/css" href="layout.css" />
      </head>
      <body>
        <div id="wrapper">
          <div id="header">
            <div id="menuContainer">
              <ul id="menu">
                <li id="home" class="first">
                  <a href="index.htm"><b>Home</b></a>
                </li>
                <li id="home">
                  <a href="single.htm"><b>About Us</b></a>
                </li>
                <li id="home">
                  <a href="support.htm"><b>Services</b></a>
                </li>
                <li id="home" class="last">
                  <a href="contact.htm"><b>Contact Us</b></a>
                </li>
              </ul>
            </div>
            <div id="leftcolumn"></div>
            <div id="content"></div>
            <div id="footer">
              <p>
                &copy; Copyright 2009 Crosswalk Counseling Services PLLC
              </p>
            </div>
          </div>
        </div>
      </body>
    </html>

    Here is my CSS:
    Code:
    *{
        padding: 0;
        margin: 0;
    }
    body {
        background-color:#90BADB;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 13px;
    }
    p {
        padding: 10px;
    }
    #wrapper {
        margin: 0 auto;
        width: 960px;
    }
    #content {
        float: left;
        color: #333;
        background: #FFFFFF;
        height: 350px;
        width: 730px;
        display: inline;
    }
    #header {
        width: 960px;
        float: left;
        height: 180px;
        
    }
    #footer {
        width: 960px;
        height: 20px;
        clear: both;
        margin:18px;
        padding:3px;
        font:italic bold 10px/12px Helvetica,sans-serif;
        text-align:center;
        color: #fff;
        background: #042F4F;
    }
    * #navigation {
        float: left;
        width: 960px;
        height: 25px;
        color: #333;
        background: #E68D17;
    }
    #menuContainer {
        padding:0;
        margin:0;
        list-style:none;
        width:940px;
        height:180px;
        position:absolute;
        right:0;
        top:0;
    }
    #menu {
        padding:0;
        margin:0;
        list-style:none;
        width:940px;
        height:180px;
        background:url('images/crosswalk-counseling-services-logo.jpg');
    }
    * html #menu {
        background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/crosswalk-counseling-services-logo.jpg', sizingMethod='scale');
    }
    #menu li {
        float:left;
        margin-top:130px;
        width:115px;
        height:50px;
        position:relative;
    }
    #menu li a {
        display:block;
        width:115px;
        height:50px;
        background:url('images/off.png');
        border-right:1px solid #888;
        text-decoration:none;
        color:#ccc;
        font-family:verdana, sans-serif;
        font-size:11px;
    }
    #menu li.last a {
        border:0;
    }
    * html #menu li a {
        background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/off.png', sizingMethod='scale');
    }
    #menu li a b {
        display:block;
        width:115px;
        height:50px;
        line-height:48px;
        text-transform:lowercase;
        text-align:center;
    }
    .home #menu li#home a, .single #menu li#single a, .dropdown #menu li#dropdown a, .dropline #menu li#dropline a, .flyout #menu li#flyout a, .support #menu li#support a, .contact #menu li#contact a, #menu li a:hover {
        white-space:nowrap;
        color:#fff;
        cursor:pointer;
    }
    .home #menu li#home a b, .single #menu li#single a b, .dropdown #menu li#dropdown a b, .dropline #menu li#dropline a b, .flyout #menu li#flyout a b, .support #menu li#support a b, .contact #menu li#contact a b, #menu li a:hover b {
        background:url('images/on.gif');
    }
    #leftcolumn {
        color: #333;
        background: #ffffff url('images/crosswalk-counseling-services-image.gif') no-repeat top left;
        height: 350px;
        width: 230px;
        float: left;
    }
    Thank you for your assistance...
    Last edited by spikeZ; Aug 18, 2009 at 12:42. Reason: added the [code] tags

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2007
    Location
    SW Washington, USA
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm just getting started with CSS but I did notice something.

    You've multiple id="home" in your html. An id can only be used once on a page. In your CSS it seems that home is defined as a class rather than an id which makes more sense.

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karin Sue View Post
    I'm just getting started with CSS but I did notice something.

    You've multiple id="home" in your html. An id can only be used once on a page. In your CSS it seems that home is defined as a class rather than an id which makes more sense.
    Thanks Karin,
    I copied the html directly from here:

    http://www.cssmenus.co.uk/single.html

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2007
    Location
    SW Washington, USA
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The source code there has a different id for each li item:

    HTML Code:
    <div id="menuContainer">
    		<ul id="menu">
    			<li id="home" class="first"><a href="index.html"><b>Home</b></a></li>
    			<li id="single"><a href="single.html"><b>Single Level</b></a></li>
    			<li id="dropdown"><a href="dropdown.html"><b>Dropdown</b></a></li>
    
    			<li id="dropline"><a href="dropline.html"><b>Dropline</b></a></li>
    			<li id="flyout"><a href="flyout.html"><b>Flyout</b></a></li>
    			<li id="support"><a href="support.html"><b>Support</b></a></li>
    			<li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
    		</ul>
    	</div>
    The CSS of the site confuses me. It seems to have classes and ids with the same name. I didn't know that was allowed.

  5. #5
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Ok, after playing around to see what happens, I now have this:

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
        <title>
          Crosswalk Counseling Services
        </title>
        <link rel="stylesheet" type="text/css" href="layout2.css" />
      </head>
      <body>
        <div id="wrapper">
          <div id="header">
            <div id="menuContainer">
              <ul id="menu">
                <li id="home" class="first">
                  <a href="index.htm"><b>Home</b></a>
                </li>
                <li>
                  <a href="about.htm"><b>About Us</b></a>
                </li>
                <li>
                  <a href="services.htm"><b>Services</b></a>
                </li>
                <li class="last">
                  <a href="contact.htm"><b>Contact Us</b></a>
                </li>
              </ul>
            </div>
          </div>
          <div id="leftcolumn"></div>
          <div id="content"></div>
          <div id="footer"></div>
        </div>
      </body>
    </html>
    CSS:
    Code:
    * { padding: 0; margin: 0; }
    
    body {
     background-color:#90BADB;    
     font-family: Helvetica, Verdana, Arial, sans-serif;
     font-size: 12px;
    }
    
    p {
     padding: 10px;
    }
    
    #wrapper { 
     margin: 0 auto;
     width: 940px;
    }
    
    #content { 
     float: left;
     color: #000;
     background: #FFFFFF;
     height: 350px;
     width: 710px;
     display: inline;
    }
    
    #header {
     width: 940px;
     float: left;
     height: 180px;
    }
    
    #menuContainer {
        padding:0;
        margin:0;
        list-style:none;
        width:940px;
        height:180px;
        position:absolute;
        right:0;
        top:0;
    }
    #menu {
        padding:0;
        margin:0;
        list-style:none;
        width:940px;
        height:180px;
        background:url('images/crosswalk-counseling-services-logo.jpg');
    }
    * html #menu {
        background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='layout2/images/crosswalk-counseling-services-logo.jpg', sizingMethod='scale');
    }
    #menu li {
        float:left;
        margin-top:150px;
        width:235px;
        height:30px;
        position:relative;
    }
    #menu li a {
        display:block;
        width:235px;
        height:30px;
        background:url('images/off.png');
        border-right:1px solid #888;
        text-decoration:none;
        color:#ccc;
        font-family:Helvetica, verdana, Arial, sans-serif;
        font-size:12px;
    }
    #menu li.last a {
        border:0;
    }
    * html #menu li a {
        background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='layout2/images/off.png', sizingMethod='scale');
    }
    #menu li a b {
        display:block;
        width:235px;
        height:30px;
        line-height:35px;
        text-transform:none;
        text-align:center;
    }
    .home #menu li#home a, .single #menu li #single a, .dropdown #menu li #dropdown a, .dropline #menu li #dropline a, .flyout #menu li #flyout a, .support #menu li #support a, .contact #menu li #contact a, #menu li a:hover {
        white-space:nowrap;
        color:#fff;
        cursor:pointer;
    }
    .home #menu li#home a b, .single #menu li #single a b, .dropdown #menu li #dropdown a b, .dropline #menu li #dropline a b, .flyout #menu li #flyout a b, .support #menu li #support a b, .contact #menu li #contact a b, #menu li a:hover b {
        background:url('images/on.gif');
    }
    
    #footer { 
     width: 940px;
     height: 20px;
     clear: both;
     color: #333;
     background: #90BADB;
    }
    
    #leftcolumn { 
     color: #000;
     background: #ffffff;
     height: 350px;
     width: 230px;
     float: left;
    }
    However, the header is still not lining up where it is supposed to. Any ideas?
    Last edited by spikeZ; Aug 18, 2009 at 12:42.

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2007
    Location
    SW Washington, USA
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    #menuContainer {
    padding:0;
    margin:0;
    list-style:none;
    width:940px;
    height:180px;
    position:absolute;
    right:0;
    top:0;
    }
    position: absolute; is going to put the menuContainer at the top right of the screen. Try position:relative; if you want it at the top right of the "header" containing element.

  7. #7
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Karin Sue View Post
    HTML Code:
    #menuContainer {
    padding:0;
    margin:0;
    list-style:none;
    width:940px;
    height:180px;
    position:absolute;
    right:0;
    top:0;
    }
    position: absolute; is going to put the menuContainer at the top right of the screen. Try position:relative; if you want it at the top right of the "header" containing element.
    Thanks Karin, this worked perfectly. However, my content box has shifted to the bottom. Any ideas?


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
  •