menu problem

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

bobbygerez
New php-forum User
New php-forum User
Posts: 18
Joined: Mon Jan 23, 2012 7:40 pm
Contact:

menu problem

Postby bobbygerez » Mon Feb 06, 2012 8:50 am

Hi everyone, a little problem which I think can easily be solve by the expert. I'm really having hard time on this one.

Code: Select all

<!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>
      <title>Cebu Scrap Buyer</title>
      
      <script type="text/JavaScript" src="javascript/curvycorners.src.js"></script>
      <script type="text/javascript" src="jquery.min.js"></script>
      <script type="text/javascript" src="script.js"></script>
       <script type="text/javascript">
            if (navigator.appName == "Netscape"){
            document.write('<link rel="stylesheet" type="text/css" href="css/chromehome.css">');
            
            }
            else {
            document.write('<link rel="stylesheet" type="text/css" href="css/home.css">');
            
            }
      </script>

   </head>
   
   
   
<body>
   
         
   
   
   <div id="wrapper">
   <div id="header">
         <div id="logo">
            <img src="images/rlogo.png" alt="Recycled" width="80" height="80"/>
         </div>
      <h1>Cebu Scrap Buyer</h1>
      </div>   
      
         <div id="navigationMenu">
            <ul>
               <li><a href="#" class="normalMenu">Home</a></li>
               <li><a href="#" class="normalMenu">About Us</a></li>
               <li><a href="#" class="normalMenu">News</a></li>
               <li><a href="#" class="normalMenu">Services</a></li>
               <li><a href="#" class="normalMenu">Contact Us</a></li>
               <li><a href="#" class="normalMenu">Online Chat</a></li>
               
            </ul>
         
         </div>
         
         
               
         
         
         <div id="maincontent">
         </div><!--End maincontent -->
         
         <div id="rightcontent">
         </div><!--End rightcontent -->
   
      
   
   </div> <!--End Wrapper -->
   
   <div id="footer">
      <h3>Copyright &copy; BrocScrap 2012</h3>
   
   </div> <!--End footer -->
   
</body>
</html>



Code: Select all

* {
margin: 0px;
padding: 0px;
}
body {
   background: url('../images/bgbody.jpg') repeat;
}


#logo {
   margin-top: 10px;
   width: 100px;
   height: 100px;
   

}
#header{
   
   background-color: #45871F;
   width: 100%;
   height: 100px;
   border: 1px #000000 solid;
   border-top-left-radius: 50px;
   -moz-border-radius-topleft: 50px;
   border-top-right-radius: 50px;
   -moz-border-radius-topright: 50px;
   }



#wrapper {
   margin: 0px auto;
   width: 854px;
   height: 400px;
   background-color: #334702;
   background: url('../images/bgcontent.jpg') repeat;
   border-bottom-left-radius: 50px;
   -moz-border-radius-bottomleft: 50px;
   border-bottom-right-radius: 50px;
   -moz-border-radius-bottomright: 50px;
   border-top-left-radius: 50px;
   -moz-border-radius-topleft: 50px;
   border-top-right-radius: 50px;
   -moz-border-radius-topright: 50px;
   
   
   
   
}


#maincontent{
   width:409px;
   height: 360px;
   float: left;
   

   
   
}
#rightcontent {
   float: right;
   width: 400px;
   height:360px;
   
   
}
#footer {
   height: 120px;
   
   
}
h3 {
   text-align: center;
}
h1 {

   color: #ffffff;
   margin-top: -100px;
   margin-left: 80px;
}

#navigationMenu {
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
border-left: 1px #000000 solid;

width: 100%;

}
/* Navigation menu styles */

ul{
   
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   height:28px;
   width: 100%;
   
}

ul li{
   /*border:1px solid #444444;*/
   
   display:inline-block;
   float:left;
   height:28px;
   list-style-type:none;
   overflow:hidden;
   border-left: 1px #000000 solid;
   
}

ul li a, ul li a:hover,
ul li a:visited{
   text-decoration:none;
}

.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
   
   outline:none;
   padding:5px 10px;
   display:block;
   width: 121.3px;
   height: 28px;
   text-align: center;
   font-family: Cambria,"times New Roman",Sans-serif,Serif;
   
   
   
}


.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
   margin-top:-38px;
   color: #000000;
   
}

.selectedMenu,.selectedMenu:visited {
   margin:0;
   
}

.normalMenu, .normalMenu:visited{
   color: #45871F;
   background: orange;
   height: 28px;
}


Here is the

Code: Select all

.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
   
   outline:none;
   padding:5px 10px;
   display:block;
   width: 121.3px;
   height: 28px;
   text-align: center;
   font-family: Cambria,"times New Roman",Sans-serif,Serif;
   
   
   
}


Eventhough I increased the width to chrome still, it will go to the next line. Unlike Firefox, is there difference in Firefox and Chrome. They are booth Netscape.
cssproblem.JPG
CSS menu problem
cssproblem.JPG (41.26 KiB) Viewed 757 times
. Thanks everyone.

User avatar
Maven
New php-forum User
New php-forum User
Posts: 7
Joined: Thu Feb 09, 2012 3:03 pm

Re: menu problem

Postby Maven » Thu Feb 09, 2012 3:22 pm

You could add your orange background color to the ul tag to fill in the white space.


Return to “CSS”

Who is online

Users browsing this forum: No registered users and 1 guest