0

i'm using SiteMesh for templating a spring mvc web application with jsp/jstl, i have to make tabs in some pages but when i try to insert the css code in the page it doesn't work, maybe it's because a conflict between template's css and the page css.

this is my tabs page code:

CSS

<style type="text/css"> 
#tabs {
  border:1px solid #ccc;
  height:28px; background:#eff5f9;
  padding-left: 40px;
  padding-top:45px;
  -moz-box-shadow: inset 0 -2px 2px #dadada;
  -webkit-box-shadow:inset 0 -2px 2px #dadada;
  box-shadow: inset 0 -2px 2px #dadada;
  border-top-left-radius:4px; 
  border-top-right-radius:4px; } 

#tabs li { float:left; list-style:none;
  border-top:1px solid #ccc;
  border-left:1px solid #ccc; 
  border-right:1px solid #ccc; 
  margin-right:5px; 
  border-top-left-radius:3px; 
  border-top-right-radius:3px; 
  -moz-box-shadow: 0 -2px 2px #dadada; 
  -webkit-box-shadow: 0 -2px 2px #dadada; 
  box-shadow: 0 -2px 2px #dadada; } 

#tabs li a { 
  font-family:Arial, Helvetica, sans-serif; 
  font-size:13px; font-weight:bold; 
  color:#000000; padding:7px 14px 6px 12px; 
  display:block; background:#FFFFFF; 
  border-top-left-radius:3px; border-top-right-radius:3px; 
  text-decoration:none; 
  background: -moz-linear-gradient(top, #ebebeb, white 10%); 
  background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white)); 
  border-top: 1px solid white; 
  text-shadow:-1px -1px 0 #fff; 
  outline:none; } 
</style>

HTML

  <body>
    <ul id="tabs"> 
      <li><a href="#tab1">Files and Folders</a></li> 
      <li><a href="#tab2">User Profiles</a></li> 
      <li><a href="#tab3">Contacts</a></li> 
      <li><a href="#tab4">Applications</a></li> 
      <li><a href="#tab5">Monthly Cost</a></li>
    </ul>

    <div class="container" id="tab1"> ...content goes here </div> 
    <div class="container" id="tab2"> ...content goes here </div> 
    <div class="container" id="tab3"> ...content goes here </div> 
    <div class="container" id="tab4"> ...content goes here </div> 
    <div class="container" id="tab5"> ...content goes here </div> 

    </body>
    </html>

I tried to run the page as a single html page and it works but inside my app it doesn't.

thank's in advance for help.

Mouhie
  • 59
  • 2
  • 3
  • 16
  • did you include the page styles after the spring styles? and did you qualify the over-riding styles to the same level? – Pete Jun 25 '13 at 11:14
  • put the style tag after the the template css tag and then look for the class `#tabs` in the template css and see if it is qualified to the same level as in your styles above – Pete Jun 25 '13 at 11:30
  • Yes, now it works i put the style code in a css file and put it after the template css tag. thank you Pete. – Mouhie Jun 25 '13 at 11:43
  • fyi, you can indent things in your css to make it readable :) – ThiefMaster Sep 11 '13 at 14:57

0 Answers0