CSS - Front In Administration Control Panel

Hi All.

I am just trying to figure out how to make the bottom
border of the active tab disappear so it looks like the
active tab is part of the active panel.

For example:

http://wiki.modxcms.com/images/a/aa/Tabs3.png

THE CSS

Code:

<style>
#tabs {
padding: 10px;
}
#tabs #nav {
margin-bottom: 0px;
margin-left: 8px;
}
#tabs ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#tabs #nav ul li {
display: inline;
padding: 3px 7px;
cursor: default;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-bottom: none;
margin-right: 2px;
}
 
#tabs #nav ul li.active {
border: 1px solid #000066;
border-bottom: 1px solid white;
background-color: #ffffff;
}
 
#tabs #nav ul li:hover {
background-color: #ffffff;
}
 
#tabs #data {
margin-top: 3px;
}
 
#tabs #data div {
display: none;
border: 1px solid #000066;
padding: 10px;
}
 
#tabs #data div.active {
display: block;
}
</style>

THE javascript:

Code:

 <script type="text/javascript" language="javascript">
        function navAllInactive() {
              oNav = document.getElementById('nav');
              oLis = oNav.getElementsByTagName('LI');
       
                for (i = 0; i < oLis.length; i++) {
                    oLis[i].className = '';
                }
        }
       
      function hideAllData() {
        oData = document.getElementById('data');
        oDivs = oData.getElementsByTagName('DIV');
       
        for (i = 0; i < oDivs.length; i++) {
            oDivs[i].style.display = 'none';
        }
      }
       
      function doShow(o, pageId) {
        hideAllData();
        navAllInactive();
        o.className = 'active';
        oData = document.getElementById(pageId);
        oData.style.display = 'block';
        return false;
      }
  
      </script>

THE HTML:

Code:

<div id="tabs">
<div id="nav">
<ul>
<li onclick="javascript:doShow(this, 'relevance');" class="active">Relevance</li>
<li onclick="javascript:doShow(this, 'added');">Date Added</li>
<li onclick="javascript:doShow(this, 'recorded');">Date Recorded</li>
<li onclick="javascript:doShow(this, 'rating');">Rating</li>
</ul>
</div>
<div id="data">
<div id="relevance" class="active">Relevance</div>
<div id="added">Date Added</div>
<div id="recorded">Date Recorded</div>
<div id="rating">Rating</div>
</div>
</div>

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

Ive got a couple navigation blocks on the left hand side of the page, now when i use:

<form>
<div>
A couple menu links go here
</div>
</form>

then in Mozilla no gap is displayed, yet in IE a gap at the top and bottom appear outside the div tags, as it is written in the code.

if i place the form tags within the div tags then the gap is at the top and bottom of the menu links, (for IE). Yet for Mozilla only a gap appears below the links when the form tags are within the div tags.

Is there any way to get rid of these gaps?

you can check the site he
http://wiganyac.hellrazer.net/

If you have a second.....

Doing a design for my brother and I have this idea that seems so simple but I can't figure it out. I attached a image that explains it better than I could in an a post. Here is the site: anthemcompanies.com/index2.html

Here is the image to explain it (can't insert an image so it is a link) anthemcompanies.com/screen.png

I would like to use just CSS to accomplish it but I have no idea how.

I have searched everywhere online. I have tried adapting some jquery scripts and some js stuff but nothing has worked for me. Advice, links, completely explained solution, or I have no idea, would be most appreciated.

I want to use the following script found here.

I want to alter it so that on rollover a DIV is shown instead of the IMG. Within the DIV will be the IMG and some copy. I have tried to do this but always end up with the rollovers not placing correctly, or the copy shows at all times.

Thanks for the suggestions and help.

Hi

I am making a website where i have a main heading on all pages' start.

I want to control its looks with CSS, i have an external CSS that controls links and body text etc.

i have tried in external CSS

Code:

H2 {

	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFCC99;

}

and on pages i use

<h2> heading is here </h2>

but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet.

Please shed some light on this...

thanks

Hello everybody,

I not an expert in CSS but getting better at it.
I'm trying to control the look and feel of a table but its not working. Any help you can give me would be greatly appreciated.

<div id="page-container">
<div class = "data_table">
have the table all setup and some css works and some done.
</div>
</div>

Quote:
<body>
<div id="page-container">

<div class = "data_table">
<table width="760" border="1" cellpadding="0" cellspacing="0">
<tr>
<th> Ticket # </th>
<th> Description </th>
<th> Created </th>
</tr>

<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://www.yahoo.com/');">
<td> 473875 </td>
<td> unable to install network card </td>
<td> Dec.03.07 </td>
</tr>
<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://www.microsoft.com/');">
<td> 474723 </td>
<td> Need help setting up my router </td>
<td> sept.03.07 </td>
</tr>
<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://Imar.Spaanjaars.Com/');">
<td> 463175 </td>
<td> Need microsoft word training</td>
<td> Jan. 07.08 </td>
</tr>
</table>
</div>
</div>



from external css file
Quote:
#data_table .table { border: 1px solid black;
border-bottom: 1;
border-left-style: solid; }

#data_table .th { border: 1px solid black;
border-bottom: 1 solid black;
background: lightgreen; }

#data_table .td { border-bottom: 1px solid black;
border: 1; }

Sorry for the noob question, but when I tried to validate the css in a page created by joomla the validator complained about these two errors:

Quote:
168 div#left Property _overflow doesn't exist : hidden hidden
210 div#left li ul Property _margin-left doesn't exist : 10px 10px


Those are a reference to the following css for the page:

Code:

div#left{
	_overflow:hidden;
}

Code:

div#left li ul{
	margin-left:15px;
	_margin-left:10px;
	margin-bottom:0px;
}

I am thinking that maybe a "_" before a property is a way some people use to have that line ignored (like adding /* before and */ after the line). Is that the explanation so that I can safely drop those lines and everything will validate properly? Or do those lines actually mean something?

Thanks.

Hi there,

Check out this screen shot:
...okay, I guess I can't attach a shot or paste a URL to the shot..

I'm using a hoverstate on a dropdown of orange with reverse text - I'm able to get both the background and the text to do what I want but I can't seem to control the WIDTH of the background.

Here's where I'm controlling that backgound (orange) behind the dropdown items.

#nav ul li a:hover {
text-decoration:none;
background-color:#d3862a;
color: #ffffff;
height: 15px;
width: 100%;
padding: 0px;
margin: 0px;
display:block;

does anyone out there have any ideas? THANKS SO MUCH!

Hi,

I am at this point too tired to continue to search for my answer, so I am going to just ask...

I would like to be able to control the color and underlining of the links in the unordered list. This list will appear on every page in the site. I am not sure what the CSS code is or in which class/id to place it in my css file.

the page code is:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>
	<link rel="shortcut icon" href="" />
	<link rel="stylesheet" type="text/css" href="style.css" />	
	<script src="nav.js" type="text/javascript"></script>
	<title>Natura Culina :: Welcome</title>
</head>

<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()" bgcolor="#D89607">
<div class="allcontent">
  <div id="header">
  <ul id="navigation">
<li><a href="index.php">home</a></li>
<li><a href="products.php">products</a></li>
<li><a href="ingredients.php">ingredients</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="testimonials.php">testimonials</a></li>
<li><a href="links.php">links</a></li>
</ul><!---end navigation--->
</div><!-- end header -->
  <div class="textArea">
  <p align="center"><span class="header1">Welcome to 
              Natura Culina Organic Skin Care </span></p>
            <p><br />
      <img src="/images/all229.jpg" width="367" height="233" align="left" class="left" /><span class="bodyBold">Natura 
      Culina</span> creates luxurious skin care products that will appeal to your 
      senses, inspired by skin care traditions used at centuries old European 
      Spas.</p>
            <p>We are <em><span class="bodyBold">so over</span></em> using chemical 
              solutions for our skin problems because they are so unsatisfactory.<br>
              We are <em><span class="bodyBold">so back</span></em> to feeding 
              our skin with natural ingredients, oils, vitamins and antioxidants.</p>
            <p>All the oils used in our products are cold pressed and certified 
              organic. All our ingredients are carefully blended to create effective, 
              nourishing and natural products for your skin. All body products 
              are made after placing an order to assure freshness. </p>
            <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
            <p align="center"><em><span class="bodyBold">Start loving your skin 
              again with Natura Culina Food For Your Skin.</span></em></p>
            
</div><!---end contentBGColor--->

</div><!---end allcontent--->
</body>
</html>

and the CSS sheet code is this:

Code:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #D89607;

}
#body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #E1A21A;

}
.allcontent {
	width: 736px;
	margin-left: auto;
	margin-right: auto;
	border: thin dotted;
	margin-top: 10px;

}
#header {
	background-image: url(/images/banner1.jpg);
	background-repeat: no-repeat;
	height: 260px;
	margin-top: -18px;
}
.textArea {
	background-color: #E1A21A;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;

}
#navigation li {
	float: left;
	list-style: none;	
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 240px;
}

#navigation {
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	
}
img.left {
    padding: 0px 10px 0px 0px;
	float: left;
}

.header1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}
.bodyBold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;

}
.small {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
.itemBorder { border: 1px solid #73090E }
.itemText { text-decoration: none; color: #F3F7FD; font: 14px Arial, Helvetica }
.itemTextHeaders { text-decoration: none; color: #E6EBF2; font: bold normal 13px Verdana, Arial, Helvetica, sans-serif}

Hi,

I not very good at CSS and I need to create a page that shows divs in other order that are in the script:

in my page i want to be something like this:

Code:

<body id="body" > 
   <div id="bodyHolder" > 
      <div id="mainHolder" > 
          <div id="mainColumn">Here will be the main content</div> 
         <div id="leftColumn" > Left Column</div>
      </div> 
      <div id="topLogoHolder">Site Logo</div>
      <div id="topMenuHolder" > Top Menu</div > 
   </div>
   <div id="footerHolder"> Footer</div>
</div>

but I want to show:

Site Logo, Top Menu, Left Column, Main Column, Footer

My problem is with Footer. I can't get to position at the bottom of page (not at the window) because the Main Column is not fixed.

The CSS code is :

Code:

body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
#bodyHolder {margin:auto; width:1006px; text-align:left;} 
#mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
#mainColumn {text-align:left; display:block; float:right; margin-right:10px;  width:810px;} 
#leftColumn {text-align:left; display:block; float:left; width:180px; } 
#topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
#topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
#footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block;  position: absolute; bottom:0px; height:100%; clear:both;}

I really don't what to try (google gives me no clue... all my attempts failed )

I'll appreciate any help! Thanks a lot in advance

Hello

I am looking for the correct way to control the alignment of elements in my HTML page.
in the old days, I used to add the <center> tag whenever I wanted to center some content.
if I wanted to set the alignment of content inside a table cell, I would use <td align="left"> or <td align="center">

I also noticed the CSS rule text-align.
My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules

regards

Hello

I know that on IE I can control the look of the scrollbar via:
* scrollbar-face-color
* scrollbar-highlight-color
* scrollbar-shadow-color
* scrollbar-3dlight-color
* scrollbar-arrow-color
* scrollbar-track-color
* scrollbar-darkshadow-color

Is it possible to control its look also in Firefox 1.0 and Opera 7.54?

regards

I'm loading a pdf document into my html document through an iframe. The document it is being embedded into is a layer that acts like a popup window who's width and height can be adjusted by dragging the window.

I'm trying to have the iframe maintain 100% height, but can't seem to get it.

<div style="height:350px;">
<iframe src="test.php" height="100%" width="100%"></iframe>
</div>

Now if I change the height from 350 to 100% on the div element, the iframe will resize to fit to 100% as the window is resized. However the downside to this is that when the iframe initially loads it's only about 50px in height.

Suggestions on how to both maintain 100% and initialize at a fixed width?