|
CSS - Css Tabbed Navigation Part 2
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>
Similar TutorialsHi, 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; } Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! 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. 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. 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 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 On two pages of my site: mileswright . com/?page_id=324 and mileswright . com/?page_id=331 it seems that part of the CSS file is being ignored. If you look at any of the other team members such as: mileswright . com/?page_id=334 you will see that the content div has padding being applied to it. In the first two pages though, the content div is being ignored. I'm really at a loss as to why this is happening. If anyone can shed some light on it I would be very grateful! (I apologize for the links not working but since I am a new poster I can't post links, but I figure that it would be pretty worthless if I didn't give links.) First of all, i'd like to thank Arnica who helped me with the first part of this post (CSS to table HELP). This is what Arnica helped me with befo (left corner image)(<== top back ==>)(right corner image) where <== and ==> represent streching horizontally in both directions. Now, i need help once again. I'd like to have side border images that strech vertically and while the body background image streching in all directions, vert and hor. Here's what i mean: (^ left border v)(<== body back ==>)( ^ right border v) where ^ and v mean streching vertically and <== and ==> mean streching horizontally. this is what i came up with so far: Code: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--title bar--> <div style="margin: 0px; position: relative; float: left; width: auto; height: auto; "><img src="img_inside_article_title-bar_left.gif"></div> <div style="margin: 0px; position: relative; right: 6px; float: right; "><img src="img_inside_article_title-bar_right.gif"></div> <div style="margin-left: 7px; margin-right: 7px; height: 30px; width: auto; position: relative; left: -3px; background-image: url(tile_inside_article_titlebar_bak.gif); "> This is a test</div> <!--article--> <div style="position: relative; float: left; width: 10px; height: auto; background: url(images/layout/home_tech-images/tile_inside-window_left-border4.gif); " > </div> <div style="position: relative; width: 10px; float: right; right: 6px; background: url(images/layout/home_tech-images/tile_inside-window_right-border4.gif) right repeat-y; "> </div> <div style="margin-left: 10px; margin-right: 10px; height: 30px; width: auto; height: auto; position: relative; background: url(images/layout/home_tech-images/tile_back1.gif); "> This is a test<br>and again</div> </table> !!my appologies for the sloppy code, still learning!! In ie the above code works perfectly, the code under <!--article-->, where the borders strech in respect to the text in the center, but in firefox the sides strech for ever vertically!! HELP!!!!!!!!!!!! fz105 hi, is it possible to have a bg in a cell only to go half way accross the cell? I seem to be having quite the time with Tables and CSS, specifically in regards to column alignment. My previous post was about whether it is possible to have different column widths for the same column in different rows. I have since given up on that endeavour, deciding instead to use CSS aligned DIV tags instead. :^/ However, now I'm having a serious problem with setting the widths of two columns in a table using CSS. The table is quite simple. It's a single table with 5 rows that span two columns, and one row that contains the two columns. The problem is that I want the width of the first column to be 150px with no padding in the cell at all. The column next to is should take up the remainder of the space of the row and have 20px padding on the left and right sides of the cell. While I'd assume this would be an easy task, it appears that it's not to be. Instead, the first column ends up being a VERY large size if there is nothing (ie: text) in the column, and comes out VERY strange when there is something in it. The code is below: PHP Code: <html> <body style="margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; background-color:#FFFFFF; text-align:center; vertical-align:top;"> <table style="border-collapse: collapse; margin-left:auto; margin-right:auto; width: 750px; height:100%; border-left:#000000 1px solid; border-right:#000000 1px solid;"> <tr> <td colspan="2" style="width:100%; height:200px; border-bottom:#000000 1px solid; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;"> </td> </tr> <tr> <td colspan="2" style="width:100%; height:26px; background-color:#FF0000; border-bottom:#000000 1px solid; text-align:right; padding-top:0px; padding-bottom:0px; padding-right:7px;"> </td> </tr> <tr> <td colspan="2" style="width:100%; background-color:#FFFF00; height:15px; padding-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px;"> </td> </tr> <tr> <td colspan="2" style="width:100%; border-top:#0000FF 1px solid; border-bottom:#0000FF 1px solid; background-color:#00FF00; height:40px; padding-left:15px; padding-top:10px; padding-right:10px; padding-bottom:10px;"> </td> </tr> <tr> <td style="width:150px; background-color:#0000FF; vertical-align:top; text-align:center; border-right:#000000 1px solid; border-bottom:#000000 1px solid; padding-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px;"> Something01 </td> <td style="background-color:#00FFFF; vertical-align:top; border-bottom:#000000 1px solid; padding-left:20px; padding-top:0px; padding-right:20px; padding-bottom:0px;"> Something02 </td> </tr> <tr style="background-color:#FFFFFF; height:24px;"> <td colspan="2" style="width:100%;"> </td> </tr> </table> </body> </html> Each cell is colored to help identify each one. Is there something blatently obvious that I'm missing or is this a REALLY bad bug that just *happens* to affect Mozilla (Firebird 0.61) AND Internet Explorer 6.0? Any help is MUCH appreciated. :^) - coredumped. On my website I've a few CSS files that I call. Occasionally a page will load and some text won't properly format... It will be too big. I'll refresh and it will go back to the size it's supposed to be. It's not all the text, just here or there. I've tried this on multiple computers and multiple browsers and it still happens only once in a while. Anyone know what is going on? Is there any way to diagnose this? It SEEMS as if part of the file isn't loading, but that doesn't sound right. Hi All, I have my site that uses CSS, however at times I want certain parts of it to not use the CSS. Not whole pages, just a section of a page. Is there anyway to remove all CSS formating in a section? So eg: <div style='none'> Some HTML </div> TIA Charlie Hi, I'm having difficulty with css working correctly. When i udeclare the a:hover state, only part of the code executes (see css code below). I want to invert the colours on the mouse over state i.e. green bg & white text TO white bg & green text. I've tried using w3schools 'try-it' windows and it works fine there but only partly executes on my page, has anyone got any ideas as to the cause of this? I've included all related code. Thanx, Steve CSS code: Code: #level1_nav a {
text-decoration: none;
font-variant: small-caps;
color: #FFFFFF;
}
a.lvl2_link:link, a.lvl2_link:visited {
color: #FFFFFF;
background-color: #5C685B;
text_decoration: none;
font-variant: normal;
}
a.lvl2_link:hover {
color: #5C685B;
background-color: #FFFFFF; //this is the only line that executes
text_decoration: underline;
font-variant: normal;
}
HTML code: Code: <ul id="level1_nav" style="clear: both;">
<li><a href="companyhome.html">Home</a></li>
<li><a href="javascript:subnav('servicessub')">Services</a></li>
<li id="servicessub">
<div class="level2_nav">
<div><a class="lvl2_link" href="test1.html">Test 1</a></div>
<div><a class="lvl2_link" href="test2.html">Test 2</a></div>
<div><a class="lvl2_link" href="test3.html">Test 3</a></div>
<div><a class="lvl2_link" href="test4.html">Test 4</a></div>
<div><a class="lvl2_link" href="test5.html">Test 5</a></div>
</div>
</li>
</ul>
Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem. If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons: http://bit.ly/gL9sA8 The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway. In other words, how would you code the DIV tag so that the following two things happen: 1. It's always in view on the LEFT side of the webpage 2. The main DIV stops against it, and doesn't overlap it if resized As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that. Here is the current code for that left sided DIV column: Code: <div style="position:fixed; margin-left: -180px; top: 75px;"> // My html content for mini You Tube video & button is here </div> The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window. My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now. If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction! Hi and thanks for the help so far Kravvitz. I checked my menu out on IE and got the following results (see screen captures below). You can probably see the element doesn't seem to go to the edge of the dropdown. Because of this the next ul level is appearing right beside the highlighted area (as it would normally), but since it isn't going to the end of the 'row' it is resulting in overlapping! Is there a way to make this work out in IE as well that you could recommend? Thanks. |
|||||||