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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts

    CSS Link/Structure Issues

    Hi,

    I'm pretty new to this coding stuff and have been pulling my hair out for a couple of days now.

    What I'm trying to achieve is a Menu bar, using the CSS List attribute. All looks well when viewing in DW, but as soon as I view in a browser, not only does my CSS List not work, but my whole structure seems to crumble...

    If any body could help me out, or at least point me in the right direction I'd truly appreciative...

    And now for the Code:

    Index.php:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Kool Kidd - Home</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css" />
    <link href="/css/menu.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body>
    <div id="wrapper">
     <div id="header">
      <div id="logo"><img src="images/logo.gif" width="250" height="125" /></div>
      <div id="member">Content for  id "members" Goes Here</div>
      <div id="menu">
        <ul class="cssmenu_shop">
          <li class="shop"><a href="http://localhost/koolkidd/shop.php" title="Shop" class="shop"><span class="displace">Shop</span></a></li>
        </ul>
        <ul class="cssmenu_blog">
          <li class="blog"><a href="http://localhost/koolkidd/blog.php" title="Blog" class="blog"><span class="displace">Blog</span></a></li>
        </ul>
        <ul class="cssmenu_submit">
          <li class="submit"><a href="http://localhost/koolkidd/submit.php" title="Submit" class="submit"><span class="displace">Submit</span></a></li>
        </ul>
        <ul class="cssmenu_faq">
          <li class="faq"><a href="http://localhost/koolkidd/faq.php" title="FAQ" class="faq"><span class="displace">FAQ</span></a></li>
        </ul>
        <ul class="cssmenu_about">
          <li class="about"><a href="http://localhost/koolkidd/about.php" title="About" class="about"><span class="displace">About</span></a></li>
        </ul>
        <ul class="cssmenu_contact">
          <li class="contact"><a href="http://localhost/koolkidd/contact.php" title="Contact" class="contact"><span class="displace">Contact</span></a></li>
        </ul>
       </div> 
      </div>
      <div id="content">
        <div id="page"><h3>Home</h3></div>
        <div id="CL">
           <div class="featured">Featured content</div>
           <div class="news">Last 5 blog posts</div>  
        </div>
        <div id="CR">
           <div class="network">Network Section</div>
           
        </div>
      </div>
      <div id="footer">Content for  id "footer" Goes Here</div>
    </div>
    </body>
    </html>
    MAINCSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * {
        background-position: center top;
        margin: 0px;
        color: #000000;
    }
    body {
        background-repeat: no-repeat;
    }
    
    #wrapper {
        height: auto;
        width: 900px;
        position: relative;
        z-index: 1;
        margin-right: auto;
        margin-left: auto;
    }
    #header {
        height: 125px;
        width: 900px;
    }
    #logo {
        height: 125px;
        width: 250px;
        left: 0px;
        top: 0px;
        float: left;
    }
    #member {
        font-family: Arial, Helvetica, sans-serif;
        text-transform: capitalize;
        text-align: right;
        height: 25px;
        width: 650px;
        left: 250px;
        top: 0px;
        float: left;
    }
    #menu {
        height: 40px;
        width: 650px;
        position: absolute;
        left: 250px;
        top: 85px;
        float: left;
    }
    #content {
        width: 900px;
        top: 125px;
        float: left;
        height: auto;
    }
    #page {
        height: 20px;
        width: 110px;
        position: relative;
        z-index: 1;
        left: 0px;
        top: 0px;
        padding-left: 10px;
        padding-top: 10px;
        }
    #CL {
        float: left;
        height: auto;
        width: 620px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        position: relative;
    }
    #CR {
        float: left;
        height: auto;
        width: 240px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        position: relative;
        left: 0px;
    }
    #footer {
        float: left;
        height: 15px;
        width: 890px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
    }
    MENUCSS:
    Code:
    @charset "utf-8";
    .displace {
        position: absolute;
        left: -5000px;
    }
    /* CSS Document */
    /*
    *
    Home Setup
    */
    
    ul.cssmenu_home {
        list-style:none;
        padding:0px;
        float:left;
        margin:0px;
    }
    ul.cssmenu_home li {
        float: left;
    }
    ul.cssmenu_home li a {
        display: block;
        width: 108px;
        height: 40px;
        background: url(../images/home.gif)
    }
    /*
    *
    Normal Links
    */
    
    ul.cssmenu_home li.home a {
        background-position: 0 0;
    }
    /*
    *
    Hover Links
    */
    
    ul.cssmenu_home li.home a:hover {
        background-position: 0 -40px;
    }
    /*
    *
    Selected/Active Links
    */
    
    ul.cssmenu_home li.home a.selected {
        background-position: 0 -80px;
    }
    .displace {
        position: absolute;
        left: -5000px;
    }
    /*
    *
    Shop Setup
    */
    
    ul.cssmenu_shop {
        list-style: none;
        padding: 0px;
        float: left;
        margin: 0px;
    }
    ul.cssmenu_shop li {
        float: left;
    }
    ul.cssmenu_shop li a {
        display: block;
        width: 108px;
        height: 40px;
        background: url(../images/shop.gif)
    }
    /*
    *
    Normal Links
    */
    
    ul.cssmenu li.shop a {
        background-position: 0 0;
    }
    /*
    *
    Hover Links
    */
    
    ul.cssmenu li.shop a:hover {
        background-position: 0 -40px;
    }
    /*
    *
    Selected/Active Links
    */
    
    ul.cssmenu li.shop a.selected {
        background-position: 0 -80px;
    }
    .displace {
        position: absolute;
        left: -5000px;
    }
    /*
    *
    Blog Setup
    */
    
    ul.cssmenu_blog {
        list-style: none;
        padding: 0px;
        float: left;
        margin: 0px;
    }
    ul.cssmenu_blog li {
        float: left;
    }
    ul.cssmenu_blog li a {
        display: block;
        width: 108px;
        height: 40px;
        background: url(../images/blog.gif)
    }
    /*
    *
    Normal Links
    */
    
    ul.cssmenu li.blog a {
        background-position: 0 0;
    }
    /*
    *
    Hover Links
    */
    
    ul.cssmenu li.blog a:hover {
        background-position: 0 -40px;
    }
    /*
    *
    Selected/Active Links
    */
    
    ul.cssmenu li.blog a.selected {
        background-position: 0 -80px;
    }
    .displace {
        position: absolute;
        left: -5000px;
    }
    /*
    *
    Submit Setup
    */
    
    ul.cssmenu_submit {
        list-style: none;
        padding: 0px;
        float: left;
        margin: 0px;
    }
    ul.cssmenu_submit li {
        float: left;
    }
    ul.cssmenu_submit li a {
        display: block;
        width: 108px;
        height: 40px;
        background: url(../images/submit.gif)
    }
    /*
    *
    Normal Links
    */
    
    ul.cssmenu li.submit a {
        background-position: 0 0;
    }
    /*
    *
    Hover Links
    */
    
    ul.cssmenu li.submit a:hover {
        background-position: 0 -40px;
    }
    /*
    *
    Selected/Active Links
    */
    
    ul.cssmenu li.submit a.selected {
        background-position: 0 -80px;
    }
    .displace {
        position: absolute;
        left: -5000px;
    }
    /*
    *
    FAQ Setup
    */
    
    ul.cssmenu_faq {
        list-style: none;
        padding: 0px;
        float: left;
        margin: 0px;
    }
    ul.cssmenu_faq li {
        float: left;
    }
    ul.cssmenu_faq li a {
        display: block;
        width: 108px;
        height: 40px;
        background: url(../images/faq.gif)
    }
    /*
    *
    Normal Links
    */
    
    ul.cssmenu li.faq a {
        background-position: 0 0;
    }
    /*
    *
    Hover Links
    */
    
    ul.cssmenu li.faq a:hover {
        background-position: 0 -40px;
    }
    /*
    *
    Selected/Active Links
    */
    
    ul.cssmenu li.faq a.selected {
        background-position: 0 -80px;
    }
    .displace {
        position: absolute;
        left: -5000px;
    }
    /*
    *
    About Setup
    */
    
    ul.cssmenu_about {
        list-style: none;
        padding: 0px;
        float: left;
        margin: 0px;
    }
    ul.cssmenu_about li {
        float: left;
    }
    ul.cssmenu_about li a {
        display: block;
        width: 109px;
        height: 40px;
        background: url(../images/about.gif)
    }
    /*
    *
    Normal Links
    */
    
    ul.cssmenu li.about a {
        background-position: 0 0;
    }
    /*
    *
    Hover Links
    */
    
    ul.cssmenu li.about a:hover {
        background-position: 0 -40px;
    }
    /*
    *
    Selected/Active Links
    */
    
    ul.cssmenu li.about a.selected {
        background-position: 0 -80px;
    }
    .displace {
        position: absolute;
        left: -5000px;
    }
    /*
    *
    Contact Setup
    */
    
    ul.cssmenu_contact {
        list-style: none;
        padding: 0px;
        float: left;
        margin: 0px;
    }
    ul.cssmenu_contact li {
        float: left;
    }
    ul.cssmenu_contact li a {
        display: block;
        width: 109px;
        height: 40px;
        background: url(../images/contact.gif)
    }
    /*
    *
    Normal Links
    */
    
    ul.cssmenu li.contact a {
        background-position: 0 0;
    }
    /*
    *
    Hover Links
    */
    
    ul.cssmenu li.contact a:hover {
        background-position: 0 -40px;
    }
    /*
    *
    Selected/Active Links
    */
    
    ul.cssmenu li.contact a.selected {
        background-position: 0 -80px;
    }
    .displace {
        position: absolute;
        left: -5000px;
    }

  • #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 sykesy69,
    Can I ask where you got that menu from? I keep seeing people using multiple ul's with one li in them just like that. I have no idea the reasoning behind that or where it started. If you think about what a list is, one li is not that.
    That should really be one ul with an li for each menu item.
    Have a look at menu examples here. Lots of ul menus there to copy from.

    Other than that...
    • I see you are floating full width elements. There is no need to float an element that is not going to have something beside it.
    • You don't seem to know about clearing floats yet. Adding overflow:auto; to a container that has floats in it can change how it looks and acts a lot. Have a look at how using overflow:auto; can clear floats for you.
    • Also see the links in my signature line about validation. They can really help you a lot.


    And last, don't trust DW's design view for anything. It does not render code like any browser. Instead, test your code in a modern browser like FireFox... just set up the F12 button to go straight to FF.


    Hope that helps a little...
    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:

    sykesy69 (12-19-2010)

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hey Excavator,

    Thanks for getting back to me, I will test in the morning and let you know how I get on.

    I copied the code from a friends site that I knew had sprites, but I've just read an article explaining how to do it the exact way you've explained it, so I guess I'll simplify and change that.

    I also vaguely remember reading something about clearing something and I was meaning to implement it, I'm now guessing that is the overflow tag you are referring to.

    Hopefully when I test tomorrow it works, as I feel as though I've wasted a whole day chasing my tail

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well after a few hours of tinkering, I've managed to get the structure looking pretty good. But the images in the CSS don't seem to be showing up, any suggestions???

    MainCSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * {
        background-position: center top;
        margin: 0px;
        color: #000000;
    }
    body {
        background-repeat: no-repeat;
    }
    
    #wrapper {
        height: auto;
        width: 900px;
        position: relative;
        margin-right: auto;
        margin-left: auto;
    }
    #header {
        height: 100px;
        width: 900px;
    }
    #logo {
        height: 100px;
        width: 250px;
        left: 0px;
        top: 0px;
        float:left;
        background: url("/images/logo.gif")
    }
    #logo span {
    display: none;
    }
    #member {
        font-family: Arial, Helvetica, sans-serif;
        text-transform: capitalize;
        text-align: right;
        height: 25px;
        width: 650px;
        top: 0px;
        float: left;
    }
    #menu {
        height: 40px;
        width: 650px;
        top: 60px;
        position: absolute;
        left: 250px;
        float:left;
    }
    #content {
        width: 900px;
        top: 125px;
        float: left;
        height: auto;
        overflow:auto;
    }
    #page {
        height: 40px;
        width: auto;
        position: relative;
        z-index: 1;
        left: 0px;
        top: 0px;
        padding-left: 10px;
    }
    #CL {
        float: left;
        height: auto;
        width: 620px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        position: relative;
        overflow:auto;
    }
    #CR {
        float: left;
        height: auto;
        width: 240px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        position: relative;
        left: 0px;
        overflow:auto;
    }
    #footer {
        float: left;
        height: 15px;
        width: 890px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
    }
    MenuCSS:
    Code:
    @charset "utf-8";
    .displace {
        position: absolute;
        left: -5000px;
    }
    /* CSS Document */
    #menu_home {
        background:url("/images/menu_home.gif") no-repeat;
        width:650px;
        height:40px;
        margin:0;
        padding:0;
        list-style:none;
        }
    
    #menu_home span {
        display: none;
        }
    
    #menu_home li, #menu_home a {
        height:40px;
        display:block;
        }
    
    #menu_home li {
        float:left;
        list-style:none;
        display:inline;
        }
    
    #menu_home-01 {width: 108px;}
    #menu_home-02 {width: 108px;}
    #menu_home-03 {width: 108px;}
    #menu_home-04 {width: 108px;}
    #menu_home-04 {width: 109px;}
    #menu_home-04 {width: 109px;}
    
    #menu_home-01 a:hover {background:url("/images/menu_home.gif") 0px -40px no-repeat;}
    #menu_home-02 a:hover {background:url("/images/menu_home.gif") -108px -40px no-repeat; }
    #menu_home-03 a:hover {background:url("/images/menu_home.gif") -216px -40px no-repeat; }
    #menu_home-04 a:hover {background:url("/images/menu_home.gif") -324px -40px no-repeat; }
    #menu_home-05 a:hover {background:url("/images/menu_home.gif") -432px -40px no-repeat; }
    #menu_home-06 a:hover {background:url("/images/menu_home.gif") -541px -40px no-repeat; }
    Attached Thumbnails Attached Thumbnails CSS Link/Structure Issues-ff-page.jpg  

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In your markup, the path to your images is like this - images/logo.gif

    In your CSS you have the path to your images like this - /images/logo.gif
    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

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I'd changed the markup since last night and there is no longer any image referencing in the markup just in the css.

    I guess what I've assumed is if the index.php is in the root and the images are in the images folder on the root, then I could reference them by using /images/image.gif.

    Is that not the case?

    I've tried both ways and still nothing...

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    I guess what I've assumed is if the index.php is in the root and the images are in the images folder on the root, then I could reference them by using /images/image.gif.

    Is that not the case?
    Absolute path reference, starting with / should work irrespective of the relative paths among files.
    <a href="http://localhost/koolkidd/blog.php" title="Blog" class="blog"><span class="displace">Blog</span></a>
    If that's your code, your root folder won't be koolkidd. It would be the folder pointed by localhost. Thus if you need to refer the files using absolute path, you's need to start the path like /koolkidd/... Or you could make a virtual server, say yoursite.com, pointing to the folder /koolkidd in your machine and simplify the situation.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    OK, so here's the latest markup:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Kool Kidd - Home</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css" />
    <link href="/css/menu.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body>
    <div id="wrapper">
     <div id="header">
      <div id="logo"><a href="index.php" title="Home"> <span>Kool Kidd Home</span></a></div>
      <div id="member">Content for  id &quot;members&quot; Goes Here</div>
      <div id="menu">
        <ul id="menu_home">
          <li id="menu_home-01"><a href="shop.php"><span>Shop</span></a></li>
          <li id="menu_home-02"><a href="blog.php"><span>Blog</span></a></li>
          <li id="menu_home-03"><a href="submit.php"><span>Submit</span></a></li>
          <li id="menu_home-04"><a href="faq.php"><span>FAQ</span></a></li>
          <li id="menu_home-05"><a href="about.php"><span>About</span></a></li>
          <li id="menu_home-06"><a href="contact.php"><span>Contact</span></a></li>
        </ul>
       </div> 
      </div>
      <div id="content">
        <div id="page"><h3>Home</h3></div>
        <div id="CL">
           <div class="featured">Featured content</div>
           <div class="news">Last 5 blog posts</div>  
        </div>
        <div id="CR">
           <div class="network">Network Section</div>
           
        </div>
      </div>
      <div id="footer">Content for  id &quot;footer&quot; Goes Here</div>
    </div>
    </body>
    </html>
    I had been trying to use WAMP to live view what I had been doing. But it seems to be giving me different results now that I've uploading them to my host.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    See this page about relative paths.

    Do you have this online yet? You will need to test it online sometime or other... might as well give us a link to the test site.
    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

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I think I understand the shorthand absolute paths, was a minor slip...

    I have the files online here...

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    The images referred by your css are missing. Eg: http://www.koolkiddclothing.com/images/logo.gif
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This seems to work on my end -
    Code:
    #logo {
    	height: 100px;
    	width: 250px;
    	left: 0px;
    	top: 0px;
    	float:left;
    	z-index:1;
    	background: url("/Test/images/logo.gif")
    }
    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

  • #13
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ooopps...

    OK, they're there now... I guess I was thinking they needed to in the folder up a level from the index.

    But for some reason the hover sprite isn't working???

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You have #wrapper covering everything. Have a look at how z-index works like stacking transparent layers.

    Fix your sprites by removing this bit in red -
    Code:
    #wrapper {
    	height: auto;
    	width: 900px;
    	position: relative;
    	z-index: -1;
    	margin-right: auto;
    	margin-left: auto;
    }
    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:

    sykesy69 (12-19-2010)

  • #15
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks so so much, I feel as though I'm getting somewhere now...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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