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
    Feb 2011
    Posts
    114
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Can i style two horizotal and left menu in one external stylesheet.

    Hi sir,

    Please i want to create links using css...Now i want one to be horizontal and one to be at the left menu links.

    I style all in one external stylesheet..and after previewing it is not working..

    Please do i have to style each one in separate external stylesheet or what do i do..please help me

    Here is the external stylesheet code..please check and correct me.

    Code:
    /* css file for practicals */
    
    body{background-image:url(images/gradi1.jpg); background-repeat:repeat-x; background-attachment:fixed;}
    
    #firstbar{background-color:#f7f7f7; align:center; width:70%; height:20px; text-align:left; color:#ffffff 
    
    margin:40px 0px 0px 0px;}
    #secondbar{background-color:#000000; align:center; width:70%; height:30px;}
    
    #searchbox{align:center; background-color:#cccccc; width:200px;} 
    
    /* horizontal links here */
    
    #hori ul{list-style-type:none; padding:0px; margin:0px;}
    
    #hori a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; 
    
    background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; 
    
    border: 2px dashed #336699;}
    
    #hori a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; 
    
    background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; 
    
    border: 2px dashed #ffffff;}
    
    #hori a:hover, #hori a:active{display:block; background-color:#ffcc00; color:#ffffff;}
    #hori float:right;
    
    /*left menu links here */
    
    #leftmenu{align:left; right-border-style:2px dotted red;}
    #veti ul{list-style-type:none; padding:0px; margin:0px;}
    
    #veti a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; 
    
    background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; 
    
    border: 1px dotted #336699;}
    
    #veti a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; 
    
    background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; 
    
    border: 1px dotted #ffffff;}
    
    #veti a:hover, #veti a:active{display:block; background-color:#ffcc00; color:#ffffff;}
    #veti float:left;
    
    /* main page here */
    #maincontentpage{align="center" width:70%; height:150%; valign="top" margin:40px 0px 0px 0px; 
    
    border:1px dotted #ffffff;}
    Please help me to know what to style even many links style either in one external sheet or separate..Any help will be highly appreciated

    Thanks.
    Clement Osei

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Of course you can style as many navigation menus as you'd like in one stylesheet. You have several css validation errors in the code above though. Without going into greater detail as to why your stying isnt working for your menus, you should fix the errors first.

    Then check back here is the problem is still there, and post all your code..html and css as well.
    Teed

  • #3
    Regular Coder
    Join Date
    Feb 2011
    Posts
    114
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Hi,

    Please i have validated the css code and it has no error now
    but the page is still not showing well
    here is the css code only

    Code:
    /* css file for practicals */
    
    body{background-image:url(images/gradi1.jpg); background-repeat:repeat-x; background-attachment:fixed;}
    
    #firstbar{background-color:#f7f7f7; width:70%; height:20px; text-align:left; color:#ffffff; margin:40px 0px 0px 0px;}
    #secondbar{background-color:#000000; width:70%; height:40px;}
    
    /* horizontal menu here */
    
    #hori ul{list-style-type:none; padding:0px; margin:0px;}
    
    #hori a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:125px; border: 1px dashed #336699;}
    
    #hori a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:125px; border: 1px dashed #ffffff;}
    
    #hori a:hover, #hori a:active{display:block; background-color:#ffcc00; color:#ffffff;}
    #hori li{float:right;}
    
    /*left menu link */
    
    #veti ul{list-style-type:none; padding:0px; margin:0px;}
    
    #veti a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; border: 1px dotted #336699;}
    
    #veti a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; border: 1px dotted #ffffff;}
    
    #veti a:hover, #veti a:active{display:block; background-color:#ffcc00; color:#ffffff;}
    #veti li{float:left;}
    
    /* main page here */
    #maincontentpage{ width:70%; height:150%; margin:40px 0px 0px 0px; border:1px dotted #ffffff;}
    And here is the HTML and css page i am creating

    here is 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">
    
    <html>
    <head>
    <title>my first practical css page</title>
    <link href="main.css" rel="stylesheet"/>
    
    <!--[if IE 6]>
    <link href="ie6.css" rel="stylesheet"/>
    <![endif]-->
    
    <!--[if it IE 6]>
    <link href="ie5.css" rel="stylesheet"/>
    <![endif]-->
    
    <link rel="stylesheet" type="text/css" href="test1.css"/>
    <link rel="stylesheet" type="text/css" href="leftmenu.css"/>
    </head>
    
    <body>
    <div id="firstbar">
    Welcome to purely css page...Expect!
     </div>
      <div id="secondbar">  
       <ul id="hori"> 
    <li id="hori"><a href="#.html">Porfolio</a></li>
    <li id="hori"><a href="#.html">Sales Products</a></li>
    <li id="hori"><a href="#.html">Consultancy</a></li>
    <li id="hori"><a href="#.html">Services</a></li>
    <li id="hori"><a href="#.html">Products</a></li>
    <li id="hori"><a href="#.html">Help</a></li>
          </ul>
         </div>
      
    <ul id="veti">
    <li id="veti"><a href="#.html">Home</a></li>
    <li id="veti"><a href="#.html">Contact Us</a></li>    
    <li id="veti"><a href="#.html">About Us</a></li>    
    <li id="veti"><a href="#.html">Help</a></li>
       </ul>
    
    
      <div id="maincontentpage">
    <p>I love to be a programer all my life long years</p> 
       </div>
    
            
    </body>
    </html>
    Please help me.

    Thanks Clement Osei

  • #4
    Regular Coder
    Join Date
    Feb 2011
    Posts
    114
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Hi,

    Please i have validated the css code and it has no error now
    but the page is still not showing well
    here is the css code only

    Code:
    /* css file for practicals */
    
    body{background-image:url(images/gradi1.jpg); background-repeat:repeat-x; background-attachment:fixed;}
    
    #firstbar{background-color:#f7f7f7; width:70%; height:20px; text-align:left; color:#ffffff; margin:40px 0px 0px 0px;}
    #secondbar{background-color:#000000; width:70%; height:40px;}
    
    /* horizontal menu here */
    
    #hori ul{list-style-type:none; padding:0px; margin:0px;}
    
    #hori a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:125px; border: 1px dashed #336699;}
    
    #hori a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:125px; border: 1px dashed #ffffff;}
    
    #hori a:hover, #hori a:active{display:block; background-color:#ffcc00; color:#ffffff;}
    #hori li{float:right;}
    
    /*left menu link */
    
    #veti ul{list-style-type:none; padding:0px; margin:0px;}
    
    #veti a:link{display:block; color:#ffffff; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:#000000; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; border: 1px dotted #336699;}
    
    #veti a:visited{display:block; color:#336699; font-family:verdana,georgia,sans-serif; font-weight:bolder; background-color:silver; text-align:center; text-transform:uppercase; text-decoration:none; width:120px; border: 1px dotted #ffffff;}
    
    #veti a:hover, #veti a:active{display:block; background-color:#ffcc00; color:#ffffff;}
    #veti li{float:left;}
    
    /* main page here */
    #maincontentpage{ width:70%; height:150%; margin:40px 0px 0px 0px; border:1px dotted #ffffff;}
    And here is the HTML and css page i am creating

    here is 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">
    
    <html>
    <head>
    <title>my first practical css page</title>
    <link href="main.css" rel="stylesheet"/>
    
    <!--[if IE 6]>
    <link href="ie6.css" rel="stylesheet"/>
    <![endif]-->
    
    <!--[if it IE 6]>
    <link href="ie5.css" rel="stylesheet"/>
    <![endif]-->
    
    <link rel="stylesheet" type="text/css" href="test1.css"/>
    </head>
    
    <body>
    <div id="firstbar">
    Welcome to purely css page...Expect!
     </div>
      <div id="secondbar">  
       <ul id="hori"> 
    <li id="hori"><a href="#.html">Porfolio</a></li>
    <li id="hori"><a href="#.html">Sales Products</a></li>
    <li id="hori"><a href="#.html">Consultancy</a></li>
    <li id="hori"><a href="#.html">Services</a></li>
    <li id="hori"><a href="#.html">Products</a></li>
    <li id="hori"><a href="#.html">Help</a></li>
          </ul>
         </div>
      
    <ul id="veti">
    <li id="veti"><a href="#.html">Home</a></li>
    <li id="veti"><a href="#.html">Contact Us</a></li>    
    <li id="veti"><a href="#.html">About Us</a></li>    
    <li id="veti"><a href="#.html">Help</a></li>
       </ul>
    
    
      <div id="maincontentpage">
    <p>I love to be a programer all my life long years</p> 
       </div>
    
            
    </body>
    </html>
    Please help me.

    Thanks Clement Osei
    Last edited by kingot; 04-04-2011 at 05:40 PM. Reason: Forget to delect external css file not working

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I really think you should do some reading and learning. I think you're wanting a simple two column layout, but your code is nowhere near that.

    Here is a good article/tutorial that walks you through creating such a layout with a horizontal and verticle nav section.
    Teed


  •  

    Posting Permissions

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