In addition to my site being a smidge too wide, I have a more
important issue to worry about. Does php somehow interfere with css
statements? I am trying to create a tab nav like you find at
http://www.cssplay.co.uk/menu/one_page
I have the code working perfectly on a test html page at home. When I
upload it (with the php code that shows the reviews, etc of the
individual listings) to the site, it displays the default div but does
not show the hidden divs when hovering over the tabs. (The site is
checkitlocal.com/index.php and a copy of the css file is at
checkitlocal.com/css.css)
Here's the relevant css code as I've modified it:
---
.tabborder {height:600px;width:800px;}
.listingdefault {background:#ffffff;height:auto;width:55%;padding:3%;}
.listingbox {border:#cdcdcd solid 1px;margin:1px 0 0 0;height:
605px;width:805px;}
.listing {background:#ffffff;height:auto;width:55%;padding:3%;}
.extras {width:30%;float:right;padding:3%;}
/* set up the overall width of the menu div, the font and the margins
with a relative position*/
.menu { position:relative;width:100%;z-index:100;clear:both;}
/* remove the bullets and set the margin and padding to zero for the
unordered list */
.menu ul.tab {padding:0;margin:0;margin:0;list-style:none;}
/* float the list so that the items are in a line */
.menu ul.tab li.tab {float:left;width:auto;}
/* style the tabs. */
.menu ul.tab li.tab a, .menu ul.tab li.tab a:visited
{display:block;font-weight:bold;text-align:center;padding-left:
50px;padding-right:50px;text-decoration:none;height:
30px;color:#000000;background:#ffffff;line-height:30px;border:#cdcdcd
solid 1px;}
/* make the dropdown ul invisible */
.menu ul.tab ul.tab {position:absolute; left:-9999px; height:0;}
/* set the background and foreground color of the main menu items on
hover */
.menu ul.tab li.tab a:hover,.menu.tab ul.tab li.tab:hover a
{color:#477ffd;background:#ffffff;border-bottom:#ffffff solid 1px;}
/* make the content ul visible and position it beneath the first list
item */
.menu ul.tab :hover ul.tab {left:5px;height:500px;width:
100%;background:#ffffff;text-align:left;z-index:100;}
/* make the content ul li the full width with padding and border. Add
an auto scroll bar */
.menu ul.tab :hover ul.tab li.tab {height:500px;width:
100%;overflow:auto;}
---
And the bits from the html that I've uploaded to the correct file:
---
<div class="tabborder">
<div class="menu">
<ul class="tab">
<li class="tab"><a href="#hover">Reviews</a>
<ul class="tab"><li class="tab">
<div class="extras">
(This is the extra content area where there are a few php echo calls,
some images and text with a span class of "text".)
</div>
<div class="listing">
<br /><br />
This is the main content area where there are a few php echo calls,
some images and text with a span class of "text".
</div><!-- end listing -->
</li></ul></li>
(repeat the above chunk a few more times for multiple tabs. The chunk
below is what shows as a default when the tabs are not being hovered
over.)
<div style='width:100%;height:30px;'></div>
<div class="listingbox">
<div class="extras" style="text-align:center;"><br /><br />
(Here is default extra content that happens to have no php code.)
</div>
<div class="listingdefault">
(This is the main content area where there are a few php echo calls,
some images and text with a class of "text". This displays exactly as
expected.)
</div><!-- end default listing -->
</div><!-- end listing box -->
</div><!-- end menu --></div><!-- end tabborder -->
---
Any thoughts? There is a little bit of javascript in the site code
which doesn't look like it has anything to do with menus. I took extra
steps to label all the tags with a tab class to help keep them unique.
Best regards and thanks,
-Delos
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
