CSS - Ideas Dressing Up These Tabs...

I am working on this website and it shows correctly in FF mac and win, Safari mac and win, opera, netscape...etc, but in IE 7 and IE 6 ...the main content column is displaced below.


#left is floating left and #text is floating right
widths are correct. I even extended the width of the containers that wrap those two divs. Nothing.

Since it's a site with Joomla framework, I waded through the code trying to look for a table within the #text div that could've been causing this. I set all tables to 80%width for IE.

Already figured it out.
So thank you.

Hey,
Ive used Macromedia Dreamweaver to design the following site. But for some reason the CSS seems to only work in IE. When I view the page in firefox, the CSS doesnt seem to work properly.

Ive never encounterd this before, and have run out of ideas.
What do you think?

Website Here

Cheers,
Smitch

Hi,

I am new here, altough I have been comming here to search for solutions very often. I am a very great fan of CSS and have developed my own website (for my small bussiness) in pure CSS and XHTML.

Now, when I started developing my website I created a layout. I have stuck with the same layout ever since. This was my idea, altough the layout is used in different ways by other websites.

However something I did a lot was to browse other pure CSS websites. When there was something I liked I tried to recreate it (I never copied what other people did, always re-created myself).

The problem is that I started my website with the following colour scheme; Black, White and Red. After browsing some website I must admit that I did copy coloures from other websites. Again it is only the coloures I copied! All the implementation (CSS, Xhtml, JavaScript is my own) and when there was an image I liked (for example for the borders) I recreated it on my PC.

Now I am asking this question here because you people do CSS websites all the time. I know that some of you have been in this bussiness for some quite time and thus have the best advice on what should I do. Whether to leave my website as it is or else change it (note that I still did not launch my website). My question is related with Ethics as much as with legaility of what I did.

I am giving some extra detail of what I mean by copy the colour scheme and recreating images.

Copy Colour Scheme: Here I used a colour picker tool. I did not copy my colour scheme from just one website, but from various and used them within my layout (My layout is totaly different from the websites of which I copied the colours from).

Recreating images: This has been done for the borders and shading. Again I have taken ideas from different websites. What I did is see how they did it and then recreate it. Sometimes I altered the images to better fit my requirments. However I have some images which I recreated nearly pixle by pixle the same altough I am not using the same image that the websites are using (I have recreated a small part of it).

Now I checked the websites and there does not seem to be any copyright to protect images or colour scheme.

Also I am not planning to insert my website for any competition. I must admit i like the design I have but not really intrested in any awards. I am new to web development and the only reason I am creating the website is because I wanted a web presence.

Again, I have created all the CSS and HTML by myself using also some on-line tutorials. The only thing I see as a problem is the colour scheme and some images.

dd

Hi

i have a content div inside a container div, the content in the content div stretches automatically but the container div doesnt stretch to accomodate the bigger content div....is it possible to get it to stretch the same as the content?

the only solution ifound was to fix the height and set the overflow to auto so that i get a scroll bar but that looks rubbish ;o(

cheers
Andy

I'm working on a video blog right now and I REALLY like the way this is set up.

See Gary Vaynerchuk WineLibrary(dot)TV videos

On Gary's videos there are always the Share Links above the video. These aren't part of the player but somehow built into the post template I imagine.

I also imagine aside from the css/html aspect this task of creating the links is being automated but I could be wrong.

Anyone have any ideas on how I could accomplish something similar?

Thanks

Fixed.

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)

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!

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 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>

I've found a number of great examples of how to do tabs with CSS (http://unraveled.com/projects/css_tabs/ being the one I'm working off of), but they all link to various other HTML pages. Does anyone know of a reasonably simple way to do them inline? (think www.johnkerry.com) I'm sure there's javascript involved, but does anyone know of a good resource on how to accomlish something like this?

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>


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

I am using tabs to switch between screens.
So the tabs could be information, telephone, notes etc.
So its the same customer just different aspects of their information.

This has worked well however I now want to add a sideways tab system.

This means I want to use similar tabs but rotate it 90 degrees.
So its on its side.

I was wondering if anyone had come across tabs that where on thier side before and a link to a tutorial would be great! thanks.

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

I have an issue with my first website.

I'm trying to center the tabs at the top of my page, but I cannot seem to figure out how to do it. I've tried using floats, auto margins, clears, etc., but nothing seems to be working.

Could I get some help on this?

http://bud12345.fusedtree.com

Here's the CSS:

Code:

body {
  font-family: Verdana, sans-serif;
  background-color: #50AD34;
  color: #000000;
  text-decoration: none;
  word-spacing: normal;
  text-align: left;
  letter-spacing: 0;
  line-height: 1.3em;
  font-size: 1.2em;
}

.update {
  font-style: italic;
  font-weight: bold;
  font-size: 0.9em;
}

span.updatehead {
  text-decoration: underline;
}

div.update {
  border-style: solid;
  border-width: thin;
  border-color: #F77900;
  padding-left: 1.0em;
}

#tabsC {
      float:left;
      width:100%;
      background:#50AD34;
      font-size:93%;
      line-height:normal;
      }

#tabsC ul {
      margin:0;
      padding:10px 10px 0 50px;
      list-style:none;
      }

#tabsC li {
      display:inline;
      margin:0;
      padding:0;
      }

#tabsC a {
      float:left;
      background:url("tableftC.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }

#tabsC a span {
      float:none;
      display:block;
      background:url("tabrightC.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#464E42;
      }

#tabsC a:hover span {
      color:#FFF;
      }

#tabsC a:hover {
      background-position:0% -42px;
      }

#tabsC a:hover span {
      background-position:100% -42px;
      }