|
CSS - Sliding Doors For Tabbed Nav - Problem
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 Similar TutorialsSo my webpage is using a sliding doors type navigation bar while also implementing a php includes in the content area. One of the problems here is on showing the "selected" or "you are currently here" state of a navigation button. Normally, it seems you would simply specify the class of the li element that corresponds to the page the user is on as "selected". However in this case, the navigation code is in the index.php and therefore constant and unchanging. So how would I implement this feature on my website? I've tried using javascript to manually change the styles, but either thats not possible or I have no idea what I'm doing. I realize my post may not be very clear as I am not sure how else to explain it. I will gladly clarify. Thanks! I am constructing a website using the sliding doors navigation (http://www.alistapart.com/articles/slidingdoors/ and http://www.alistapart.com/articles/slidingdoors2/). I have gone through both articles to successfully create the sliding doors naviagiton that I require. My header image that I wish to place behind the navigation is 780px wide by 263px high. Therefor, I will be placing this navigation at the bottom (baseline) of this image. I have increased my header div size to fit the image (780px x 263px). Then I have padded the navigation to try to make it position on the bottom of the image (padding-top: 236px). Unfortunatly, doing this give a 1px padding difference for IE and Firefox. IE shows it up fine, but Firefox does not. Firefox makes it look like its spaced 1px to many. If i decrease the padding to 235px, Firefox looks fine but IE displays it with 1px to less...I dont want to have to result to browser dependant css, but all hacks are welcome. Heres the code: Code:
body {
text-align: center;
background-color: #7999E4
}
#header{
width: 780px;
background: url('images/head.gif') repeat-x bottom;
font-size: 93%;
line-height: normal;
height: 263px;
padding: 0;
margin:0;
border:0;
}
#main {
background-color: #ffffff;
width: 780px;
height: 500px;
}
#nav2 {
background-color: #e7e7e7;
width: 100%;
border-bottom: 1px solid #000;
height: 20px;
}
#header ul {
margin: 0;
padding:0;
padding-top: 236px;
padding-left: 10px;
list-style: none;
}
#header li {
display:inline;
margin:0;
padding:0;
}
#header a {
float: left;
background: url('images/left_both.gif') no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
border-bottom: 1px solid #765;
text-decoration: none;
}
#header a span{
float: left;
display: block;
background: url('images/right_both.gif') no-repeat right top;
padding: 5px 15px 4px 6px;
font-weight: bold;
color: #765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a span{float: none;}
/* End IE5-Mac hack*/
#header a:hover span{
color: #333;
}
#header #current a{
border-width: 0;
background-position: 0% -150px;
}
#header #current a span{
background-position: 100% -150px;
padding-bottom:5px;
color: #333;
}
#header a:hover {
background-position:0% -150px;
}
#header a:hover span {
background-position:100% -150px;
}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link title="Style" href="style2.css" type="text/css" rel="STYLESHEET">
</HEAD>
<BODY>
<center>
<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>Properties</span></a></li>
<li><a href="#"><span>Quick Searches</span></a></li>
<li><a href="#"><span>Holidays</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<div id="main">
<div id="nav2"></div>
</div>
<div id="footer">
</div>
</body>
</html>
In the past year or two I've been playing with CSS layout techniques, and have grown to the point where I consistently use CSS instead of tables. I'm all for it. But as much as I love them, some of the trendy practices seem to be a little impractical - particularly sliding doors, sprites and the suckerfish dropdowns. With sprites, I can see the benefits of having fewer HTTP requests and having all rollover images in one file. With suckerfish dropdowns, it's definitely nice to have the navigation and subnavigation organized into lists. Sliding doors can certainly save a lot of bandwidth and load time, and make editing graphical navigation much easier. I'm sure all of these are terrific from SEO and accessibility standpoints, too. But the code for these techniques seems extremely convoluted and bloated. My personal experience with suckerfish dropdowns and sprites both are that they require hacks to get them to work smoothly in browsers as recent as IE6. After all is said and done, there's actually more code required to attain the same functionality that could be achieved using HTML and JavaScript. I'm curious to see what input everyone has. I'd love to justify styling unordered lists into sliding door dropdown nav tabs with sprite backgrounds, just because I have so much fun doing it. But is it really practical? Hi, does anyone know how to do sliding doors where the "a" element is active rather than the "li"? I'm using drupal, and it makes the "a" element active, and I'm having a hard time porting the code over... 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 There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Here's the CSS: Code: #tabnav {
float:left;
width:100%;
background:#FFFFFF url("tab_background.png")
repeat-x bottom;
line-height:normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 13pt;
}
#tabnav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#tabnav li {
float:left;
background:url("tab_inactive_right.png")
no-repeat right top;
margin:0;
padding:0;
}
#tabnav a {
display:block;
background:url("tab_inactive_left.png")
no-repeat left top;
padding:8px 15px 4px;
}
#tabnav a:link{
color:293356;
text-decoration: none;
}
#tabnav a:hover{
color:596eba;
text-decoration: none;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabnav a {float:none;}
/* End IE5-Mac hack */
#tabnav #current {
background-image:url("tab_active_right.png");
}
#tabnav #current a {
background-image:url("tab_active_left.png");
padding-bottom:5px;
}
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; } 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>
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. 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> 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. 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 Hey Everyone! I'm having issues with a custom sliding panel showing correctly in IE. It works EXACTLY as I'd like in Firefox, but breaks in Internet Explorer. I tried different positioning items, and tweaking everything I could think of, but it would appear that I'm stumped. knockoutsadvertising[dot]com/gaptest/ In the right hand sidebar, clicking 'Learn More' will open the panel. There's a link within the panel to close it again. Any help on how to get this thing positioned correctly in IE would be awesome. Brad PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! |
|||||||