CSS - Looking For A Tutorial On How To Create Tabs For Content...

Hello, I have been spending hours on tutorials of css only to find some things work in one browser, while not in others. I would like to find a tutorial which only applies to IE CSS1(2) OR IE & Netscape css1(2). Is there such beast?

Whats the best CSS Tutorial you ever seen? I want to improve more on my web design so I want to know what CSS tutorial was the best? It can be anything like making a horzontal menu or best looking form. I dont care what it is...

Thank you.

Amazon has an amazing menu, the one that says 'see all 41 product categories'. All the options pop out and there is no need to continously click to find out what you are looking for. Genius!

Is this basic? Can anybody point me in the right direction for a tutorial?

It would seem I am always "taking" from this sites and never giving much back, but not today. I had posted a message a few days ago which generated a reply with a link to this site - http://www.sitepoint.com. While I was there, I requested a sample download of some chapters of a book. It was in the book "Html without tables" or something like that they pointed me to this sample site - www.footbagfreaks.com What an awesome way to learn css layout. I checked it in both IE and NS and it was pefect. There are three .html files and one style sheet. I know I will be studying this code if only to get the basics down. I hope this works for you.

I find that I'm constantly running into conflicts with
css and how it displays in internet explorer and
mozzilla,let alone the rest of the browsers.
Does anybody know a good trusted up to
date css tutorial site where one can learn css that is
cross browser friendly?

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 downloaded my fair share of drop down menus and have always had problems with understanding how it works and what adjustments move or alter what part of the menu. I experimented a bit and got it working on a Mac but it doesnt look right on a PC and vise versa.

Is there a tutorial out there that is really descriptive on how it works and shows which adjustments alters what on the menu than just giving you a downloadable sample to play with.

Was working on a new design for one of my sites today and when I inadvertently discovered using buttons as tabs, however...

I am more of a programmer than I am a designer. The tabs look differently in Firefox than they do in IE.

In IE, I give the currently tab more padding than the other buttons and those other buttons stay attached to the <div> below them.

In Firefox/Mozilla, the other buttons are raised up.

See here*

*You will notice that the Home page has rounded corners, while the About page does not; can't decide which one I like better

The other issue I have in IE is that when I button is being clicked/activated, it detaches itself from the <div> below.

--

Maybe a good time to also ask how I can accomplish something using div's or span's that I used to do with table's:

How would I have a 700px wide box, with a div at the top, split 50/50 so that I could have a small logo at the top left and a search box (on the same row) at the top right? I have always:
Code:

<table width="700">
<tr>
<td width="50%">logo</td>
<td width="50%" align="right">search box</td>
</tr>
</table>

--

One mo If I am using HTML 4.01 strict, can I still use: Code:

<td align="center" valign="middle">

or do I have to: Code:

<td style="text-align:center;vertical-align:middle">

Cheers!

Hi,

New to CSS and all. Trying to work on a web site. I used a Wordpress theme and modified it to my liking. I am having a small issue that I would really appreciate help on.

marinhome.inwire .net/lessons

The page uses tabs. When you click from one tab to another, the tab content is shifting down. Can somebody please let me know what the problem is?

Thanks,
Gaurav

I have been monkying around all day with this code and can't seem to get it reversed correctly, so that all the tabs start on the right side instead of the left. I end up messing it up pretty badly and I can't seem to figure out where I am going wrong with it.... any help is appreciated.

The example can be seen he http://homelesspixel.de/tabs/

For ease of use I'll paste the HTML and CSS in one:

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>Untitled Document</title>
</head>
<style type="text/css">

body {
	color: #333;
	background-color: #fff;
	padding: 20px 20px;
	margin:0;
	font: normal 11px helvetica, arial, geneva, lucida, sans-serif;
}

h1 {
	font-size:2em;
	font-weight:normal;
	margin:1em 0;
}

ul#topnav {
	margin:0 0 100px;
	padding: 0 0 0 12px;
	list-style: none;
	border: none;
} 

#topnav li {
	display: block;
	margin: 0;
	padding: 0;
	float:left;
}
	
#topnav a {
	display:block;
	color:#444;
	text-decoration:none;
	background: url(images/lia.gif) no-repeat;
	margin:0;
	padding: 0.2em 2.4em 0.2em 36px;
	border-right: 1px solid #aaa;
	position: relative;
	font: bold 11px helvetica, arial, geneva, lucida, sans-serif;
}
#topnav a#a0 { left: 0px;}
#topnav a#a1 { left: -30px;}
#topnav a#a2 { left: -60px;}
#topnav a#a3 { left: -90px;}
#topnav a#a4 { left: -120px;}
#topnav a#a5 { left: -150px;}
#topnav a#a6 { left: -180px;}
	
#topnav a:hover {
	background: url(images/liahover.gif) no-repeat;
}

#topnav a.here {
	position:relative;
	z-index:102;
	background: url(images/liahover.gif) no-repeat;
	border-right: 1px solid #777;
	padding: 0.2em 1em 0.2em 35px;
	margin: 0 4px 0 0;
}
	
ul#subnav {
	position:absolute;
	z-index:101;
	margin: -1px 0 0;
	left: 10px;
	padding: 1px 0px 3px 30px;
	background: #bbb;
	border-top:1px solid #fff;
	border-bottom:1px solid #999;
	width: 720px;
}
	
#subnav li {
	position:relative;
	z-index:102;
	display: block;
	margin: 0;
	padding: 0;
	float:left;
}
	
#subnav a {
	color:#fff;
	display:block;
	text-decoration:none;
	margin:0;
	padding: 2px 12px 2px 10px;
	background: transparent;
	background-image: none;
	border: 0 none;
}
	
#subnav a:hover {
	color:#444;
	background: transparent;
	background-image: none;
	border: 0 none;
}

#subnav a.here {
	color:#444;
	background: transparent;
	background-image: none;
	border: 0 none;
	margin:0;
	padding: 2px 12px 2px 10px;
}
	

</style>
<body>

<h1>Example of CSS-driven tabs</h1>

<ul id="topnav">
	<li><a id="a0" href="#">Home</a></li>
	<li><a id="a1" href="#">About</a></li>
	<li><a id="a2" href="#">News</a></li>
	<li><a id="a3" href="#">Proof</a></li>
	<li><a id="a4" href="#" class="here">Process</a>
	<ul id="subnav">
		<li><a href="#">Vision</a></li>
		<li><a href="#">Team</a></li>
		<li><a href="#" class="here">Culture</a></li>
		<li><a href="#">Careers</a></li>
		<li><a href="#">History</a></li>
		<li><a href="#">Sponsorship</a></li>
	</ul>
	</li>
	<li><a id="a5" href="#">Expertise</a></li>
	<li><a id="a6" href="#">Help</a></li>
</ul>

</body>
</html>

Hello,

I am having some problems with my code. I'm not able to insert these forms properly into these divs. I would like the forms to be placed within the tab (more or less centered), however, how it is now the form is half way in and half out of the tab. When I try and move the form over it distorts the tab image. Please help me fix this problem. I'm uncertain about what is wrong and how to fix it. Thank you in advance.


Code:

<head>

<style type="text/css">

body
{
    color: black;
}


/*Form Formatting*/

fieldset
{
   margin: 1em 0;
   padding: 1em;
   border: 1px solid #ccc;
   background: #000000;
}

legend
{
   font-weight: bold;
   color: #FFFFFF;
}

label
{
   display: block;
}

input [type="text"]
{
   width: 200px;
}

input.radio, input.checkbox, input.submit
{
   width: auto;
}

input.radio
{
   float: left;
   margin-right: 1em;
}

input.author:focus, input.email:focus
{
   background: #E9C2A6;
}

input[type="text"]
{
   border-top: 2px solid #999;
   border-left: 2px solid #999;
   border-bottom: 1px solid #ccc;
}

.required
{
   font-size: 0.75em;
   color: green;
}

.author, .email, .subscribe-yes, .subscribe-no, .checkbox/*.HTML_Box, .Plain_Text*/
{
   color: #FFFFFF;
}
/*--------------------------------------------------------------------------------------------------------------------------------------*/

/*Form Placement*/

#Display_Name
{
   margin: auto 33% auto 33%;
   width: 150px;
   left: 100px;
}

#Details
{
   margin: auto 33% auto 33%;
}

#Subscription
{
   margin: auto 33% auto 33%;
   width: 150px;
}

#Mailing
{
   margin: auto 33% auto 33%;
   width: 180px;
}

#Submit_Subscription
{
   margin: auto 33% auto 33%;
}

#HTML_Box
{
   float: none;
}

#PText_Box
{
   float: right;
}
/*------------------------------------------------------------------------------------------------------------------------------------*/

/*Background Tab*/

/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2
{
   background: transparent url(../../Working/red_tab.php.png) no-repeat bottom right
}

.cssbox
{
   /* intended total box width - padding-right(next) */
   width: 250px !important; /* IE Win = width - padding */
   width: 320px; /* the gap on the right edge of the image (not content padding) */
   padding-right: 15px; /* use to position the box */
   margin: 20px auto;
}

/* set the top-right image */
.cssbox_head
{
   background-position:top right;
   /* pull the right image over on top of border */
   margin-right:-15px;
   /* right-image-gap + right-inside padding */
   padding-right:40px
}

/* set the top-left image */
.cssbox_head h2
{
   background-position:top left;
   margin:0; /* reset main site styles*/
   border:0; /* ditto */
   /* padding-left = image gap + interior padding ... no padding-right */
   padding:8px 0 0px 40px;
   height:auto !important;
   height:1%;  /* IE Holly Hack */
   font-family: Comic Sans MS, Arial, sans-serif;
}

/* set the lower-left corner image */
.cssbox_body
{
   background-position:bottom left;
   margin-right:25px; /* interior-padding right */
   padding:15px 0 15px 40px;  /* mirror .cssbox_head right/left */ 
}

</style>

</head>

<body>

<!--Tab-->
<div class="cssbox">
    <div class="cssbox_head">
        <h2>Mailing List</h2>
    </div>

<div class="cssbox_body">

<!-- Contact Info -->
<div id="Display_Name">

    <fieldset id="Details">
        <legend>Contact Details</legend>
        <!--Name-->
                
                <label for="author" class="author">Name: <em class="required">(Required)</em></label>
                <input name="author" id="author" type="text" size="25"/>
                
            
        <!-- E-mail Address-->
            
                <label for="email" class="email">Email: <em class="required">(Required)</em></label>
                <input name="email" id="email" type="text" size="25" maxlength="200"/>
                    
        <!-- E-mail Format-->
            <div id="HTML_Box">
                <p>
                    <input class="checkbox" id="HTML" name="HTML" type="checkbox"
                    value="HTML" />
                    <label>HTML</label>
                </p>
            </div>
            
            <div id="PText_Box">
                <p>
                    <input class="checkbox" id="Plain_Text" name="Plain_Text" type="checkbox"
                    value="Plain_Text" />
                    <label>Plain Text</label>
                </p>
            </div>
                    
    </fieldset>

</div>    
    
<!-- Subscription Question -->
<div id="Subscription">
<fieldset id="Mailing">
    <legend>Join Mailing List?</legend>
    <p>
        <input id="add-subscribe" class="radio" name="add" type="radio"
            value="subscribe" checked="checked" />
        <label for="add-subscribe" class="subscribe-yes">Subscribe</label>
    </p>
    
    <p>
        <input id="add-unsubscribe" class="radio" name="add" type="radio"
            value="unsubscribe" />
        <label for="add-unsubscribe" class="subscribe-no">Unsubscribe</label>
    </p>

<!-- Mailing List Submit Button -->
<div id="Submit_Subscription">
    <input id="enter" type="submit" value="Submit" />
</div>

</fieldset>
</div>

</div>

</div>


</body>

</html>


--------------------------------------------------------------------------------
  

Code:

<div id="s_site">
	<a href="#site">This site</a>
	<h2 id="site_h">About This Memorial Site</h2>
	<p id="site_p" class="tab_cont">This site is brought to you by the Royal Canadian Branch 3 Legion John Bernard Croak Victorian Cross.  In honor of those fallen and served in WW2.</p>
</div>

the h2 and p element are hidden using display:none; when I click on the anchor link i'd like them to apper using display:block; It seems like I may need to use javascript but I'd rther not use javascript at all, except for thos eunfortunate enough to still be using IE.

I can't figure it out I've tried amny thing that didnt work. I've been searching for a selector that will let me access these hidden elements but I can't come up with anything.

I half accomplished what I was trying but I can't get the changes to stick.

Thanks for reading

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>

Hello all -

I am trying to implement tabs to my forum, I currently have some on there but I like the looks better of the new ones that I am trying to get going. I find that when I get them working (using additional CSS as well as navbar/header edit) it will not work in all browsers. If I post the CSS as well as the navbar/header code would you be able to help me track down my issue?

EDIT - I was going to post screenshots but was not permitted

Heya,

Any ideas how I can center the tabs on this page?

http://explosiveracing.net/testing/menu.html

The HTML and CSS is self explanatory.

Thanks