Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

menu problem

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

Moderators: macek, egami, gesf

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 689 times
. Thanks everyone.
bobbygerez
New php-forum User
New php-forum User
 
Posts: 18
Joined: Mon Jan 23, 2012 7:40 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.
User avatar
Maven
New php-forum User
New php-forum User
 
Posts: 7
Joined: Thu Feb 09, 2012 3:03 pm


Return to CSS

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.