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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Location
    U.S.A
    Posts
    129
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Screws up when I add the menu

    k guys I had a sucky template started. I was beginning to start messing around with the overall size and placement, when all I had to do was add a menu. When I added the menu it totally erased all of the other divs(or made them white) and messed up everything. and on a side not I don't understand why the top two divs are not lined up on the right side.
    heres the code
    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>
    <style type="text/css">
    
    <!--
    body {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            margin: 0;
            font-size: 80%;
            font-weight: bold;
            background: #FFF;
            }
    
    h2 {
            font: bold 14px Verdana, Arial, Helvetica, sans-serif;
            color: #000;
            margin: 0px;
            padding: 0px 0px 0px 15px;
    }
    
    ul {
            list-style: none;
            margin: 0;
            padding: 0;
            }
    
    img {
        border: none;
    }
    
    /*- Menu 9--------------------------- */
    
    #menu9 {
            width: 200px;
            margin: 10px;
            }
    
    #menu9 li a {
            height: 32px;
              voice-family: "\"}\"";
              voice-family: inherit;
              height: 24px;
            text-decoration: none;
            }
    
    #menu9 li a:link, #menu9 li a:visited {
            color: #FFF;
            display: block;
            background:  url(menu9.gif);
            padding: 8px 0 0 35px;
            }
    
    #menu9 li a:hover, #menu9 li #current { {
            color: #FFF;
            background:  url(menu9.gif) 0 -32px;
            padding: 8px 0 0 35px;
            }
    -->
    #top {
    background: url(http://www.awsomejoe23.heliohost.org/tosell/news.gif);
    font-size:24px;
    margin: 5px 20px 0px 10px;
    padding:10px 20px 10px 0px;
    text-align:right;
    width:95%;
    }
    #news {
    margin: 5px 20px 0px 10px;
    padding: 5px 20px 5px 20px;
    text-align:left;
    background: url(http://www.awsomejoe23.heliohost.org/tosell/news.gif);
    width:95%;}
    #left {
    background: url(http://www.awsomejoe23.heliohost.org/tosell/bg.gif);
    margin: 25px 0px 15px 10px;
    padding: 10px 2px 10px 2px;
    float:left;
    width:30%;
    }
    #right {
    background-color:#25a0d7;
    margin:25px 20px 15px 50px;
    float:left;
    clear:right;
    width:62%
    }
    #br {
    background-color:#25a0d7;
    margin:25px 20px 15px 50px;
    float:left;
    clear:right;
    width:61%
    }
    
    </style>
    </head>
    <body>
    <div id="top">
    Site Name
    </div>
    <div id="news">
    A catchy phrase or announcement will go here.</div>
    <div id="left">
    <div id="menu9">
                            <ul>
                                    <!-- CSS Tabs -->
    <li><a id="current" href="Home.html">Home</a></li>
    <li><a href="Products.html">Products</a></li>
    <li><a href="Services.html">Services</a></li>
    <li><a href="Support.html">Support</a></li>
    <li><a href="Order.html">Order</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="About.html">About</a></li>
    
                            </ul>
                    </div>
         
    <hr width=50%>
    A few words about your site and it's content will go here.
    </div>
    <div id="right">
    This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go. This is where your sites majority content will go.</div>
    <div id="br">
    A few closing comments will go here. you can also add some extra information of the purpoose and some good features that your service, or site offers.</div>
    </body>
    </html>

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Put the styles in a separate style sheet and validate it. I see errors such as extra braces etc.

  • #3
    Regular Coder
    Join Date
    Apr 2007
    Location
    U.S.A
    Posts
    129
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Alright I have validated the css and xhtml strict. I got the menu to show it was just becuase of the double braces. but I still don't understand why the top op two divs are not even.
    you can see it at http://www.awsomejoe23.com/tosell/index.php

    Thanks for any help guys.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by awsomejoe23 View Post
    I still don't understand why the top op two divs are not even.
    Take a look at what you have for the paddings of the two top divs:
    Code:
    #top {
    background: url(http://www.awsomejoe23.heliohost.org/tosell/news.gif);
    font-size:24px;
    margin: 5px 20px 0px 10px;
    padding:10px 20px 10px 0px;
    text-align:right;
    width:90%;
    }
    #news {
    margin: 5px 20px 0px 10px;
    padding: 5px 20px 5px 20px;
    text-align:left;
    background: url(http://www.awsomejoe23.heliohost.org/tosell/news.gif);
    width:90%;}
    Effective width = width + padding-left + padding-right + border-left + border-right

  • #5
    Regular Coder
    Join Date
    Apr 2007
    Location
    U.S.A
    Posts
    129
    Thanks
    1
    Thanked 0 Times in 0 Posts
    k thanks. I have validated the xhtml and css. I got the menu fixed. Now all I need to do is get the background to work. I know how to get it to work on my divs, but I want the background and a default color to show up.
    heres my code for the body
    Code:
    <!--
    body {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            margin: 0;
            font-size: 80%;
            font-weight: bold;
            background-image: url(gradient.jpeg); 
            background-repeat: repeat-y;
            background-color:#f9ae4b 
            }
    Why won't the gradient show up as the background image?
    I don't even see the background color.


  •  

    Posting Permissions

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