Posted by gnowar on September 29, 2011 at 2:14pm
1 follower
| Project: | Basic |
| Version: | 7.x-2.0-rc3 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Hay eveyone,
I'm trying to set up these CSS3 Glow Tabs (http://www.impressivewebs.com/demo-files/css3-glow-tabs/) but I've a problem as you can see in the screenshots.
Here is the php code :
<?php if ($main_menu || $secondary_menu): ?>
<div id="navigation">
<div id="navigation_content">
<ul id="navigation_list">
<li class="menu <?php if (!empty($main_menu)) {print "with-primary";} ?>">
<?php print theme('links', array('links' => $main_menu, 'attributes' => array('id' => 'primary', 'class' => array('links', 'clearfix', 'main-menu')))); ?>
</li>
<li class="menu <?php if (!empty($secondary_menu)) {print " with-secondary";} ?>">
<?php print theme('links', array('links' => $secondary_menu, 'attributes' => array('id' => 'secondary', 'class' => array('links', 'clearfix', 'sub-menu')))); ?>
</li>
</ul>
</div>
</div>
<?php endif; ?>Here is the tabs CSS code :
ul#navigation_list {
height: 36px;
width: 904px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
ul#navigation_list li {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
float: left;
width: 168px;
margin: 0 10px 0 0;
background-color: #2B477D;
border: solid 1px #415F9D;
position: relative;
z-index: 1;
}
ul#navigation_list li.selected {
z-index: 3;
}
ul#navigation_list li.shadow {
width: 100%;
height: 2px;
position: absolute;
bottom: -3px;
left: 0;
border: none;
background: none;
z-index: 2;
-webkit-box-shadow: #111 0 -2px 6px;
-moz-box-shadow: #111 0 -2px 6px;
box-shadow: #111 0 -2px 6px;
}
ul#navigation_list li a:link, ul#navigation_list li a:visited {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
display: block;
text-align: center;
width: 168px;
height: 40px;
line-height: 36px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
outline: none;
float: left;
background: #2B477D;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
}
ul#navigation_list li a:hover {
background-color: #5a87dd;
}
ul#navigation_list li.selected a:link, ul#navigation_list li.selected a:visited {
color: #2B477D;
border: solid 1px #fff;
-webkit-transition: background-color 0.2s linear;
background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2;
background: -webkit-gradient(linear,left bottom,left top,color-stop(.2, #f2f2f2),color-stop(.8, #d1d1d1));
background-color: #f2f2f2;
}Here is the Parent CSS :
#navigation {
float: left;
margin-left: 0;
margin-right: -100%;
padding: 0;
width: 100%;
height: 40px;
}
#navigation_content {
margin-left: auto;
margin-right: auto;
width: 1024px;
}As you can see on the second screenshot, when I set the overflow to visible the tabs are vertically aligned ?
I can't reproduce the postions and effects from the demo and I don't know where the problem comes from : CSS ? PHP Code ?
I don't know if it's place is made for integration requests or only for bug reports, please tell me if I'm not right here.
Otherwise any help will be appreciate !
Ty guys !
| Attachment | Size |
|---|---|
| hidden.png | 59.56 KB |
| visible.png | 57.37 KB |
