|
CSS - A Kind Of Tabbed Viewing In Page? No Javascript Allowed
So I have a myspace, and I like things neat and compact. And I like filling out lots of long surveys that most likely no one will ever read, and posting them on my myspace. But when I do that, my page becomes very long and I don't like that. So my idea was something like this:
There would be a series of links across the top that would correspond to the various surverys and/or other content that I deem necessary to share with the world. The many users who visit my page looking for more details about my life click on the link of their choice. The box below all the links shows that particular survey. They read it all, and of course want more, so they click the next link. And poof, a new survery shows up right where the other one was. Compact and efficient. I've seen sites use a slightly similar system before, often in the help/faq sections. You find the topic you need help with, click on it, and it pops up below it. However I'm pretty sure they used javascript, which isn't allowed on myspace. ("Security" or some other overrated matter). Therefore I would have to do it with CSS. I was thinking have each survey in a different table, all absolute positioned in the same place. Then when you click the link, either all the rest get visibility turned to not visible, (and that one turned to visible), or perhaps the z-index is changed. However I'm not sure you can do that in a link, especially without javascript. So I may need to find an alternative. Unfortunately, I'm not very good with CSS at all, and I'm also not very creative in problem solving. Does anyone have any ideas on how I could implement this system without javascript or using other pages? (I just get my one little myspace homepage, although I guess I could cheat and use blog pages too. But then all the other blog crap like comments would show up on it). I apologize if this has already been covered, I tried to look through the more recent posts for something similar and found nothing, and I wasn't really sure what to search for, since it isn't really something concrete I'm working with. I don't necessarily need code, mostly just ideas right now. Thanks in advance to anyone who helps, and if you don't know what I'm talking about/thought it was too long, tell me and I'll try to clear it up or shorten it up, respectably (and respectfully, as it were). PS. My myspace account, if you care and didn't already guess, is www.myspace.com/mynameismolotov. Althought it's basically empty right now. Similar TutorialsI am looking for a robust drop down menu solution. Javascript is fine for controlling the functionality but the items must be positioned with CSS so that they are SEO. At the moment we have full javascrip menu's but the links don't get picked up by the search engines as they are encapsulated. I have tried the suckerfish stuff and it's a nightmare to be honest. Horrible to customise and very difficult to get a result you actually want. Hello, I have a menu of <a> tags and when the user is on the page that the <a> tag goes to how do I keep it a different color than the rest of the <a> tags on that page? I tried a.active and it does not work. Also this page is dynamic so the nav menu is repeated often and is one block of code. Setting a different class according to each page is not an option. Thanks for the help. if you take a look at http://www.cherrysociety.com/mag/art/ you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong? the css is at http://www.cherrysociety.com/mag/style.css thanks guys, i appreciate it a lot. Thanks to Kravvitz I was able to get the first version of this system up and running, but I didn't like the plain tabs so I switched them out with tabs of my own and also a background image (instead of just a color) for the subnav bar. I am having trouble lining the tabs up though so they have 1 or 2 px spaces between them and the text is centered on them. (I'm trying to right align the tabs). Also in IE the on tab merges with the subnav bar as it should (so the gradiant looks seemless) but in Firefox it does not... The images are he http://yourthreshold.com/downloads/nav_background.gif http://yourthreshold.com/downloads/..._background.gif http://yourthreshold.com/downloads/..._background.gif The code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
/*
passes tests in Firefox, IE5.5+/Win, Netscape 6+, and Opera 7+
IE5.0/Win just isn't handling the z-indexes correctly.
*/
/* Menu */
body {
color: #333;
background-color: #fff;
padding: 20px 0 0 20px;
margin:0;
font-size: 90%;
}
body,a,* {
font-family: helvetica, arial, geneva, lucida, sans-serif;
}
h1 {
font-size:1.5em;
font-weight:normal;
margin:1em 0;
}
ul#topnav {
margin:1px 0 10px;
padding: 0 0 0 12px;
list-style-type: none;
border: 0 none;
position: relative;
left:-50px;
width: 55em;
}
/* \*/
* html body {
font-size: 85%;
}
* html ul#topnav {
left: 0;
}
/* */
@media screen and (min-width: 0px){
ul#topnav {
left: -33px;
}
}
#topnav li {
display: block;
margin: 0;
padding: 0;
float:right;
}
#topnav a {
display:block;
color:#444;
text-decoration:none;
background: url(images/nav_background.gif) no-repeat;
margin:0;
text-align: right;
padding: 0.2em 36px 0.2em 3.4em;
position: relative;
font-weight: bold;
top: 0;
font-size: .8em;
}
#topnav li a.a0 {
left: -3px;
z-index: 151;
}
#topnav li a.a1 {
left: -2px;
z-index: 152;
}
#topnav li a.a2 {
left: -1px;
z-index: 153;
}
#topnav li a.a3 {
left: 0px;
z-index: 154;
}
#topnav a:hover {
background: url(images/nav_background.gif) no-repeat;
}
ul#topnav li a.here {
background: url(images/navHERE_background.gif) no-repeat;
z-index: 310;
}
/*ul#topnav li a.here {
z-index: 210;
background: url(images/lia.gif) no-repeat;
/*border-right: 1px solid #777;
padding: 0.2em 10px 0.2em 3.4em;
margin: 0 2px 0 0;
}*/
ul#subnav {
list-style-type: none;
position:absolute;
z-index:201;
margin: -1px 0 0;
right: 0;
padding: 1px 30px 3px 0px;
background:url(images/subnav_background.gif) repeat-x;
border-top:1px solid #fff;
width: 720px;
height: 22px;
min-height: 1.2em;
}
/* \*/
* html ul#subnav {
width: 748px;
wid\th: 730px;
}
/* */
#subnav li {
position:relative;
z-index:102;
display: block;
margin: 0;
padding: 0;
float:right;
}
#subnav a,#subnav a:hover,ul#topnav li #subnav li a.here {
color:#fff;
display:block;
text-decoration:none;
margin:0;
padding: 2px 10px 2px 12px;
background-color: transparent;
background-image: none;
border: 0 none;
}
#subnav a:hover,ul#topnav li #subnav li a.here {
color:#444;
}
/*Structure*/
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
}
#wrapper {
width:750px;
height:100%;
margin:0 auto 0 auto;
border:1px solid green;
text-align: left;
}
#top {
width:750px;
height:60px;
}
#logohead {
width:370px;
height:60px;
border:1px solid blue;
float:left;
}
#toplinks {
height:60px;
width:365px;
border: 1px solid orange;
margin-left:380px;
}
#nav{
width:750px;
height:50px;
/*border:1px solid pink;*/
}
#midbanner {
width:auto;
height:170px;
border:1px solid red;
}
#bottomcontent {
width:auto;
height:auto;
border:1px solid #990; /*yellow;*/
}
/* \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:760px;
}
/* */
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logohead">Logo Here</div>
<div id="toplinks" align="right">Login Link Here</div>
</div>
<div id="nav">
<ul id="topnav">
<li><a class="a3" href="../fresh/about.htm">About</a></li>
<li><a class="a2" href="#">Tools</a></li>
<li><a class="a1" href="#">Hosting</a></li>
<li><a class="a0 here" href="#">Home</a>
<ul id="subnav">
<li><a href="#"> </a></li>
</ul>
</li>
</ul>
</div>
<div id="midbanner">Flash Banner Here</div>
<div id="bottomcontent">Bottom Content Starts Here</div>
</div>
</body>
</html>
Hi, I really need help with something!... I'm currently designing a website, with a verticle tabbed navigation bar (using CSS & Javascript). I need it so that when the user hovers over a tab, the content related to that tab, displays until another tab is hovered over. At the moment, when ever you move the mouse into the content area for a certain tab, the content disappears and goes back to the default 'Welcome' layer underneath. But the content layers will have links in them, and this need to be 'active', as it were. Please take a look (I would post a link, but I'm new here... ) Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript"><!--
function showLayer(layerName, shadowLayerName)
{
if (document.getElementById) // Netscape 6 and IE 5+
{
var targetElement = document.getElementById(layerName);
var shadowElement = document.getElementById(shadowLayerName);
targetElement.style.top = shadowElement.style.top;
targetElement.style.visibility = 'visible';
}
}
function hideLayer(layerName)
{
if (document.getElementById) {
var targetElement = document.getElementById(layerName);
targetElement.style.visibility = 'hidden';
}
}
// -->
</script>
<style type="text/css"><!--
.buttonBar
{ width:125px; padding: 0; margin: 0;
}
.shadow
{
position: relative; visibility: hidden;
}
.button
{
background:width:125px; height: 100px;
}
.bg {display: block; width:125px; height: 100px;}
.bg#about:hover {background:url(...) no-repeat;}
.bg#destinations:hover {background:url(...) no-repeat;}
.bg#cruiselines:hover {background:url(...) no-repeat;}
.bg#specialoffers:hover {background:url(...) no-repeat;}
.bg#about:focus {background:url(...) no-repeat;}
.information
{
visibility: hidden; position: absolute; padding: 0; margin: 0; background-color: #891344; height: 400px; width: 575px;}
body {
text-align: center;
min-width: 700px;
}
#content {
margin:0 auto;
width:700px;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="header" style="width:700px; height: 110px; text-align: right;"><img src="..." width="171" height="100"></div>
<div class="buttonBar">
<div style="height: 400px; width: 575px; position: absolute; margin-left:125px; border: #891344 1px solid; ">
<img src="...">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent non elit. Donec porttitor. Ut in ligula. Mauris tortor. Vivamus at odio. Curabitur rhoncus vulputate neque. Praesent elit sapien, pellentesque non, adipiscing vel, pulvinar consectetuer, ante. Morbi semper pede ut nisl. Nam porttitor fermentum nisl. Mauris viverra malesuada neque. Vivamus aliquam pharetra ligula. Suspendisse quis orci et velit pharetra bibendum. Aenean turpis. Donec vel ipsum. Vivamus pharetra. Aliquam ut turpis non erat sagittis tincidunt.</p>
<p>Nam pellentesque egestas libero. Duis lobortis. Mauris egestas luctus urna. Nunc venenatis lectus in quam. Nulla gravida sem at massa. Quisque tortor. Donec id dui quis justo porta fermentum. In iaculis lacus non tellus. Morbi nunc enim, mattis eu, sollicitudin vel, placerat vel, magna. Pellentesque volutpat. Nam mi.</p>
</div>
<div style="position: absolute; width: 575px; height: 400px; margin-left: 125px; border: #891344 1px solid;">
<div id="shadowLayer" class="shadow"></div>
<div class="infoArea">
</div>
<div>
<div id="HoverArea1Info" class="information" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea2Info" class="information" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea3Info" class="information" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea4Info" class="information" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
</div>
</div>
<div style="position: absolute; height: 400px; width: 125px; background:url(...) no-repeat; border: #891344 1px solid;">
<div class="button" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<a href="about.phtml" class="bg" id="about">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')" >
<a href="destinations.phtml" class="bg" id="destinations">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')" >
<a href="cruise_lines.phtml" class="bg" id="cruiselines">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')" >
<a href="special_offers.phtml" class="bg" id="specialoffers">
</a></div>
<div id="footer" style="width:700px; height: 20px; text-align: right;">
</div>
</div>
</div>
</div>
</body>
</html>
There must be some way to adapt the code already used, to do what I want. Where am I going wrong and what do I need to do?? Any help would be much appreciated! Many thanks, Britcanuck. Hi! Could you please help me to fix my menu in IE7. You can see the problem on my site. But actually I don't know how to add an url he The code is: padding:0; } #menu ul#layer1 li { background:transparent url(/site_media/images/left.png) no-repeat scroll left top; float:left; margin-left:6px; padding-bottom:6px; padding-left:6px; padding-top:4px; } #menu ul#layer1 li span { background:transparent url(/site_media/images/right.jpg) no-repeat scroll right top; margin-right:6px; padding-bottom:6px; padding-right:6px; padding-top:4px; } #menu li a { background-color:#BF1E2D; color:#FFFFFF; padding:4px 35px 6px; text-decoration:none; } #menu ul#layer1 li#current span { background:transparent url(/site_media/images/right-gray.png) no-repeat scroll right top; } #menu ul#layer1 li#current { background:transparent url(/site_media/images/left-gray.png) no-repeat scroll left top; } #menu ul#layer1 li#current a { background-color:#E3E3E3; color:#BF1E2D; } I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help. Kate CSS CODE: #tabs8 { float:left; width:100%; background:#FCF1F6; border-bottom:4px solid #E276A7; overflow:hidden; position:relative; } #tabs8 ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #tabs8 ul li { display:block; float:left; list-style:none; margin:0 0 0 1px; padding:0px 3px; position:relative; right:50%; } #tabs8 ul li a { display:block; margin:0 0 0 1px; padding:3px 0px; background:url("tableft8.gif") no-repeat left top; text-decoration:none; line-height:1.3em;} #tabs8 a span { background:url("tabright8.gif") no-repeat right top; padding:3px 10px; color:#333; line-height:1.3em;} #tabs8 ul li a:hover { background:#369; color:#fff; } #tabs8 ul li a.active, #tabs8 ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }--> HTML CODE: <div id="tabs8"><ul> <li id="current"> <div align="center"><a href="index.html"><span>Home</span></a></div> </li> <li> <div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div> </li> <li> <div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div> </li> <li> <div align="center"><a href="gallery.html"><span>Gallery</span></a></div> </li> <li> <div align="center"><a href="blog.html"><span>Blog</span></a></div> </li> <li> <div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div> </li></ul></div> Didn't know what to search for this--apologies if it exists somewhere on the board. Now, with links, I know you can supply a title="" attribute to them, to get a tooltip to appear on them if you leave the mouse hovering on them for a short period. What I am trying to do is somewhat similar. Basically, imagine that you have a column of links, and a large space to the right of them (the background of which is defined elsewhere, but links' descriptions still would show here). Some code demonstrating the type of effect I'm grasping for is below: Code: -- DTD removed for space --
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body{
padding: 0px;
margin: 0px;
}
.navCol{
background: #00FFCC;
width: 20.00%;
}
.dispInf{
position: absolute;
top: 0px;
left: 21.00%;
width: 79.00%;
background: #CCCCCC;
height: 65%;
}
a:hover span{
display: block;
position: absolute;
top: 0px;
left: 21.00%;
width: 79.00%;
}
a span{
display: none;
}
-->
</style>
</head>
<body>
<div class="dispInf"></div>
<div class="navCol">
<a href="/site1">Link 1<span>
Description 1</span></a>
<br />
<a href="/site2">Link 2<span>
Description 2</span></a>
</div>
</body>
</html>
Now, my problem is this: This does not work in Internet Explorer, at all. Links still function; however, the text that should be appearing over in that right area does not. Could anyone please point me in the proper direction to resolve this, if such can be done? I'm only shooting for IE6 and Mozilla compatibility, though the more the merrier. Thank you for your time. I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option. Here's the jQuery script: Code: $('#sideTabMain .button').toggle(function() {
$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});
And the basic CSS for the div: Code: #sideTab {
position: absolute;
z-index: 1000;
top: 50px;
right: -650px
}
The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas? Thanks for your help. My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation. Not sure if I'm allowed to post links, so below are some code snippets and I've also attached a screenshot. The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought. CSS: Code:
/* horizontal main menu navigation */
#nav {
float:left;
width: 100%;
background: yellow; /*temporary color just for visual cue */
}
#nav ul {
margin: 0;
padding: 0 0 0 300px;
list-style: none;
}
#nav ul li {
float: left;
margin: 0;
padding: 0;
font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
background: url(images/tab_right.gif) no-repeat top right;
}
#nav a {
float: left;
display: block;
margin: 0 10px 0 0;
padding: 5px 2px;
color: #fff;
text-decoration: none;
background: #284d73 url(images/tab_left.gif) no-repeat top left;
}
HTML: Code: <div id="nav"> <ul> <li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li> <li id="t-about"><a href="#" title="About Us">ABOUT US</a></li> <li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li> <li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li> <li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li> </ul> <!-- end #nav --> </div> Problem is two fold: 1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing... 2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing... If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?). Thanks for any suggestions! luispunchy Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS.... 1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1). 2. Created the structu [html] <div class="block-top"> <div class="block-tl"></div> <div class="block-tr"></div> </div> <div class="block-content"> <div class="block-ml"> <div class="block-mr"> <div class="block-center"> <p>this is some content</p> </div> </div> </div> </div> <div class="block-bottom"> <div class="block-bl"></div> <div class="block-br"></div> </div> [/html] 3. Created the CSS [css] .block-top, .block-bottom { height:10px; line-height:0; font-size:0; } .block-tl, .block-bl { float:left; height:10px; width:10px; line-height:0; font-size:0; } .block-tr, .block-br { float:right; height:10px; width:10px; line-height:0; font-size:0; } .block-center { padding:0 10px; background-color:red; } .block-content { clear:both; } .block-top { background-image:url(../images/block-light-TM.jpg); } .block-tl { background-image:url(../images/block-light-TL.jpg); } .block-tr { background-image:url(../images/block-light-TR.jpg); } .block-ml { background-image:url(../images/block-light-ML.jpg); background-repeat:repeat-y; background-position:left; } .block-mr { background-image:url(../images/block-light-MR.jpg); background-repeat:repeat-y; background-position:right; } .block-bottom { background-image:url(../images/block-light-BM.jpg); } .block-bl { background-image:url(../images/block-light-BL.jpg); } .block-br { background-image:url(../images/block-light-BR.jpg); } [/css] In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope... In IE6 the ML and MR backgrounds don't appear at all. What am I dong wrong here? Hope this wasn't too complicated to understand. NOTE: I have zero padding and margin on all the elements as well. Hi, I was just wondering whether it is valid to use the following names in CSS for classes or ID's Code: .class1 .class2 #id3 #id4 Are alphanumeric names allowed? This may be a pretty vague question, so I'm sorry in advanced. But I'm working on one of those recipe websites that you get as an assignment during school. Everything seems to be working, like adding comments, writing up recipes, etc. But for some reason, I'm having a huge issue with apostrophes. Whenever I want to add a comment to a recipe that involves an apostrophe in any way, it says "Sorry, there was a problem with your comment." I mostly want to know why this happens on websites instead of getting the direct "this-is-how-you-fix-it" answer, because i've seen this happen on other websites. Hi all I just wonder why IE6 (and I guess previous versions, too) does not allow a background-image on the <tr> tag of a table? Code: tr {
background-image: url(...);
}
This does just delegate the background image to the child-td-tags, it's not really displayed on the tr tag! So the following works in Firefox, but not in IE6: Code: tr {
background: transparent url("red.gif") bottom left repeat-x; /* A 50*50px image */
}
td {
height: 100px;
background: transparent url("blue.gif") top left repeat-x; /* A 50*50px image */
}
Firefox displays the table cells as expected with red bottom (on the tr tag) and a blue top (on the td tag). IE6 only displays the blue top. Is there a clean hack for this? Or do I have to help myself with additional tags (e.g. a div within the td)? Thanks for help Josh Hi friends, all good? It was wanting to make an equal thing of the image that I am placing To place option with these properties of the source and the size. Somebody would know as to make this? Sorry my English Thanks I'm using the Spry tabbed panels widget on a website. I would like to center align the horizontal tabs. The default setting is left align. And I'm able to right align it. Here is part of the css code: .TabbedPanels { margin: 0px; padding: 0px; float: left; clear: none; width: 100%; } .TabbedPanelsTabGroup { margin: 0px; padding: 0px; } .TabbedPanelsTab { position: relative; top: 1px; float: left; padding: 2px 6px 6px 6px; margin: 0px 0px 0px 0px; list-style: none; border-left: solid 1px #999; border-bottom: solid 1px #CCC; border-top: solid 1px #CCC; border-right: solid 1px #999; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; background-image: url(../sprylight.png); color: #333333; I've tried changing the "padding" under the ".TabbedPanelsTabGroup" rule to "auto". This causes the tabs to kind of be centered, but not exactly. Also, one of the tabs breaks apart from the row and spills over to the next line. Any help would be very much appreciated. I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page I have having trouble with CSS alignment when dealing with IE7 If i have 2 DIV tags (one inside the other) and set 10px padding for the first DIV tag and the set the left hand alignment of second DIV tag to 50% the left hand edge will be 50% plus the padding where as in FireFox and Safari it does not matter that there is padding it still aligns up to the 50% line. Can any body point me in the direction of a fix? Thanks Site CSS I've been making that for a few days now. It used to be larger, but didn't fit on an 800x600 display. I resized the three sliced BG images down to 641px from 684px. I resized #main to 768px. I chose 641px for this reason... The left side BG is 125px wide. The border for #main is 2px. 641 + 125 + 2 = 768px Right? Is my thinking clear? It all looks great in all 3 major browser, IE, FF, and Opera! I'm stoked! I have FF, but I did not have that developer extension. So, I downloaded it. This is GREAT! Now, when I resize to 800x600, the window I had it in shrinks, and I STILL get a horizontal scrollbar. I don't care about a vertical scrollbar. I'm not worried about that, but I don't understand why I get a horizontal scrollbar. Is there some web development piece of info I don't have, or am I just doing something wrong. Now, let me also say that the entire page still actually fits on screen at 800x600, meaning that all text is still visible, and all links/images can be seen, but the fact that there is a scrollbar at all annoys me... Please have a look-see, and tell me what you think, folks. All in all, how do I ensure that anyone with any screen can effectively view this site? Chris |
|||||||