CSS - Creating Tabs With Style Sheets

This is half a PHP problem, but it seems to be more CSS than php, so I'll post it here

With web pages on our (And our clients) site, we are experiencing problems with PHP occasionally dropping the style sheet, resulting in no formatting.

The CSS file itself does nothing fancy, it simply sets heading and general fonts, colours and sizes for TD's , links, DIVs etc.
There appear to be no javascript or other errors when the stylesheet is dropped. It does not happen every time, but is frequent enough to be annoying (Say 1 out of every 10-15 page loads )
The css file is inlcluded in the following manner within the header:

Code:

<LINK REL="stylesheet" HREF="<?=$base_url?>/main.css" type="text/css">

The Apache server is 1.3.29
PHP: 4.3.5
Server: Free BSD 4.7

Any ideas?

Hey all, i have about three different style sheets for the same website, all making the website look differently colour & gradient wise depending on which style sheet i use.. My question is how do i make it so that people can select which style they want to view the website in? like on forums when you get a drop down list of different skins and such... im just curious on how id go about making a drop down list of different styles and once a user selects one it will always be that one on their next visit.. Any help on this would be most appreciated. Would it be hard to do this? where should i begin?

Note: Im extremely new to this CSS Style sheeting so be gentle lol.

i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css...

when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css..

what shld i do to attain that?

Hey guys, how do i put the bold command into a css sheet?

I want to have bold consistantly throughout a page.
-------


body {
font-family: Arial;
font-size: 13.5px;
}

td {
font-family: Arial;
font-size: 13.5px;
}

th {
font-family: Arial;
font-size: 13.5px;
}

.bodystyle {
font-family: Arial;
font-size: 13.5px;
}

.small {
font-family: Arial;
font-size: 9px;
}

.medium {
font-family: Arial;
font-size: 12px;
}

.big {
font-family: Arial;
font-size: 16px;
}

.xbig {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}

.expanded {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
letter-spacing: 2px;
}

.justified {
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}

.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}

.box1 {
padding: 3px;
border-width: medium;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
font-style: italic;
word-spacing: 2pt;
padding: 3px;
border: 1px solid;
}

Is there anyway to make GoLive automatically apply styles to external style sheets rather than internal?

Hi,

I have a style shete which contains multiple styles for differnet devices - however i am habing problems with the "handheld" media type - it wil lonly display the 1st style of the sheet (if you know what i mean).

I have enclosed my code
Code:

@media handheld
{

	.frmInput
	{
		width: 1em;
		height: 1.3em;
		border: 0.1em solid #00004F;	
		background-color: #F2F2FF;
		color:#000000;
	}
		body
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.2em;
		font-weight:bold;
		background-color: #000033;
		color:#000000;
	}

} 

If testing it using visual studio.net 2005's pocket pc 2003 emulator.

Can anybody help ??

thanks in advance

Andy

I swear I've done some searching on this but I haven't been able to find a satisfactory answer.

I have a style sheet in the root of my site with this declairation in it:
Code:

#nav
{
	float: left; 
	width: 190px; 
	height: 600px; 
	min-height: 600px; 
	margin-right: 10px; 
	background-image: url(images/gradientBg.jpg); 
	background-repeat: repeat-x;
}

The file the id="nav" is in is being included in the index.php page that's being called from the root also. So we have a structure that looks like this:
Code:

/root
  styles.css
  index.php

/includes
  nav.php

/images
  gradientBg.jpg

The stylesheet is being included like this
Code:

<link rel="stylesheet" type="text/css" href="/styles.css" />

Now for my problem...

The styles and backgrounds all show as expected in Firefox. However, in IE any of the styles that apply to files from the /include directory like nav.php are not followed at all.

I find it hard to believe that my only option is to make the styles inline but I'm not sure what else to do at this point.

Thanks for staying with me this far and for any advice.

hi.

I am trying to create rounded tabs similar to the
tabs on this page of yahoo personals:

http://personals.yahoo.com/us/search/dashboard

notice how there is a bit of an extension over the table
boundaries where the rounded tabs exist over the search type.

i am guessing this happens on of two ways:
1) there is another table that sits on top of the main table and the
slice of tab with the rounded corners appears there.

2) a mix of float, position:absolute, etc which positions the top
tab slices.

I am using javascript and CSS to round the tabs. I have tried
option #2 with so-so results. I am wondering what approach (please feel free to advise others if there are others) would
be the most easy on the eye and bullet-proof to multiple browsers?

I would be happy to provide code but thought i'd get the discussion going as the question is more conceptual than "why-doesn't-my-code-work".

thanks!

is it possible to create this in css ?



if so, does anyone have a tutorial on how to ? or what its called so i may research it more (content box? container box?)

ty

btw, just the style not the stuff inside them lol

I have a menu where the submenu li's have a blue/darker blue background color and hover color.

I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up

Here's the part of my styles for the list that I'm trying to change..
Code:

/* original backgrounds for the menu */
ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

Is it the way I tried to rename the style?
Code:

/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
  background: #afe4bf;
  color: #000;
  padding-left: 20px;
}

.green ul.menu li ul li a:hover {
  background: #88b796;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

thanks in advance for any help, Kathy

Friends,

I've got two files I'm working with - index.php and main.css

Code:

<LINK href="styles/main.css" rel="stylesheet" type="text/css">

Is printed to load my stylesheet (the directory is correct).
The following is in main.css

Code:

<STYLE type="text/css">
#dateTime {font-family: verdana; font-size: 10px; color: #FFFFFF;}
</STYLE>

and on index.php I have a td (the following):

Code:

<td ID="dateTime">Date: Sunday, Nov. 5th</td>

But, when I view index.php - my styles don't carry over and I can't see my CSS. Any help?

Regards,
Jonathan

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

i'm trying this CSS Tab deelio, but I can't seem to get it right. I'm kind of new to this, but check out this page and tell me what I'm doing wrong. Thanks!

(URL address blocked: See forum rules)

I have too many items for one row of tabs, how do I get a second row?

Save this as tab.png
URL

Here's my working fine one row code:

design.css
Code:

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}
 
ol#toc li {
    float: left;
    margin: 0 1px 0 0;
}
 
ol#toc a {
    background: #bdf url(tab.png);
    color: #008;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}
 
ol#toc a:hover {
    background-color: #3af;
    background-position: 0 -120px;
}
 
ol#toc a:hover span {
    background-position: 100% -120px;
}
 
ol#toc li.current a {
    background-color: #48f;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
}
 
ol#toc li.current span {
    background-position: 100% -60px;
}
 
ol#toc span {
    background: url(tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}
 
div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

h1.html
Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1 row</title>
    <link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>1 row</h1>
<ol id="toc">
    <li class="current"><a href="h1.html"><span>H1</span></a></li>
    <li><a href="h2.html"><span>H2</span></a></li>
    <li><a href="h3.html"><span>H3</span></a></li>
</ol>
<div class="content">
    <h2>H1</h2>
    <p>Pic and text...</p>
</div>
</body>
</html>

And here's my bad attempt at 2 rows!

design2rows.css
Code:

ol#toc {
    height: 2em;list-style: none;
    margin: 0;
    padding: 0;
}
 
ol#toc li.first {
    float: left;
    margin: 0 1px 0 0;
}
 
ol#toc li.drop {
    clear: left;
    margin: 0 1px 0 0;
    padding:0 0 0 6px;
}
 
ol#toc a {
    background: #bdf url(tab.png);
    color: #008;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}
 
ol#toc a:hover {
    background-color: #3af;
    background-position: 0 -120px;
}
 
ol#toc a:hover span {
    background-position: 100% -120px;
}
 
ol#toc li.current a {
    background-color: #48f;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
}
 
ol#toc li.current span {
    background-position: 100% -60px;
}
 
ol#toc span {
    background: url(tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}
 
div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

q1.html
Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tab 2 row</title>
    <link href="design2row.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tab 2 row</h1>
<ol id="toc">
    <li class="first">
    <li class="current"><a href="q1.html"><span>1</span></a></li>
    <li><a href="q2.html"><span>2</span></a></li>
    <li><a href="q3.html"><span>3</span></a></li>
    <li><a href="q4.html"><span>4</span></a></li>
    <li><a href="q5.html"><span>5</span></a></li>
    <li><a href="q6.html"><span>6</span></a></li>
    <li><a href="q7.html"><span>7</span></a></li>
    <li><a href="q8.html"><span>8</span></a></li>
    <li><a href="q9.html"><span>9</span></a></li>
    <li><a href="q10.html"><span>10</span></a></li>
    <li><a href="q11.html"><span>11</span></a></li>
    <li><a href="q12.html"><span>12</span></a></li>
    <li><a href="q13.html"><span>13</span></a></li>
    <li><a href="q14.html"><span>14</span></a></li>
    <li><a href="q15.html"><span>15</span></a></li>
    <li><a href="q16.html"><span>16</span></a></li>
    <li><a href="q17.html"><span>17</span></a></li>
    <li><a href="q18.html"><span>18</span></a></li>
    </li>
    <li class="drop">
    <li><a href="q19.html"><span>19</span></a></li>
    <li><a href="q20.html"><span>20</span></a></li>
    <li><a href="q21.html"><span>21</span></a></li>
    </li>
</ol>
<div class="content">
    <h2>1</h2>
    <p>Pic and text...</p>
</div>
</body>
</html>