CSS Help needed

[bluestrobe]

I organize my web pages with 3x3 tables to keep things in their place. I also have no borders so it looks like my contents are just floating. Is there a way to only make the outside border visible while leaving the other borders invisible? I know it's a dumb question but I couldn't find an answer to it anywhere.

 

[Alone]

Yeah, the guys in the "bizz" call it CSS.

 

[bluestrobe]

Originally posted by: Alone
Yeah, the guys in the "bizz" call it CSS.

I know about CSS and am learning it. However this is an HTML table question.

 

[HeroOfPellinor]

Ignore the CSS snobs.

Yes, it's very easy infact and the technique is a staple of HTML design with tables. It's a table within a table.

You create a table with zero cellpadding and zero cellspacing and create one row and one cell. You give the cell a bgcolor property and then place your 3x3 table inside that cell and give the table tag a cellspacing value that corresponds to how thick you want the border to be.

Por ejemplo:

<table cellspacing=0 cellpadding=0><tr><td bgcolor="red">

<table cellspacing=1 cellpadding=1>
<tr><td bgcolor="white">asddasda</td><td bgcolor="white">aadd</td><td bgcolor="white">aadsads</td></tr>
<tr><td bgcolor="white">asddasda</td><td bgcolor="white">aadd</td><td bgcolor="white">aadsads</td></tr>
</table>

</td></tr></table>

If you meant you wanted just a border around the whole 3x3 but not between then you'd change the cellpadding property in the first table to be 1 and the cellspacing property for the inner table tag to 0.

 

[sourceninja]

Awesome, I love it when we use things for what they are not designed to do and ignore proper standards!

 

[jjones]

or you could try css and put the table set within a div like so:

<div style="border: 1px solid red">
<table.....your tables go here>
</div>

 

[hellman69]

Originally posted by: jjones
or you could try css and put the table set within a div like so:

<div style="border: 1px solid red">
<table.....your tables go here>
</div>

or you could just move that style property into the table tag and not use the div.

Trevor

 

[Zap]

Another way is to just have a table within a table:

<table border="1"><tr><td>

<table border="0">
***** your 3x3 cells here *****
</table>

</td></tr></table>

 

[sourceninja]

CSS i used today to format a table to look like a spreedsheet

<style type="text/css">
table.grid {
border-width: 1px ;
border-spacing: 2px;
border-style: solid;
border-color: gray;
border-collapse: collapse;
background-color: white;
}
table.grid th {
border-width: 1px;
padding: 1px ;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: 0px ;
}
table.grid td {
border-width: 1px;
padding: 1px ;
border-style: inset ;
border-color: gray ;
background-color: white;
white-space: nowrap;
-moz-border-radius: 0px ;
}

then I just <table class="grid">

 

[HeroOfPellinor]

Originally posted by: sourceninja
Awesome, I love it when we use things for what they are not designed to do and ignore proper standards!

I love having to use ridiculous workarounds and 5 times the amount of work of tables to get anything close to cross-browser and older browser support in CSS. :thumbsup:

 

[TMoney468]

^Don't blame CSS, blame IE

And the common misconception about web design is that the website MUST look the same in all browsers, when in fact you should design towards the most standards-based/progressive browser and create a lesser design for older/less compatible browsers. See Andy Clarke and Transcending CSS

 

[bluestrobe]

CSS is in my future, but not now. Thanks for the help to those who stayed on topic.

 

[sourceninja]

CSS is very much on topic. It is the correct way to do what you wanted to do. Every other way is wrong.

 

[HeroOfPellinor]

Originally posted by: TMoney468
^Don't blame CSS, blame IE

And the common misconception about web design is that the website MUST look the same in all browsers, when in fact you should design towards the most standards-based/progressive browser and create a lesser design for older/less compatible browsers. See Andy Clarke and Transcending CSS

Yeeeeaaaahhh......that's real practical. I code some very complex pages with calendars and all kinds of customizable elements using just tables so I'm not sure what I can't do because I'm not using CSS.

Originally posted by: sourceninja
Every other way is wrong.

I'll bring my sites down right now and wait until I can do them the correct way. Thx2u.

 

[jjones]

There's no reason you have to use css right now; however, some things are considered deprecated and presumably one day the things you are currently doing will no longer work with some browsers. But at its heart CSS is nothing more than a style sheet and the idea behind it is to control the look of a page, and the look of your entire site. By changing the style sheet you can change the look rather easily instead of having to go in and change the html in each and every page. But once again, each to their own.

 

[Alone]

It's like using <p> tags to create line breaks instead of <br />. Tables are for tabular data, hence the name. Any other use is wrong.

 

[TMoney468]

Originally posted by: HeroOfPellinor

Originally posted by: TMoney468
^Don't blame CSS, blame IE

And the common misconception about web design is that the website MUST look the same in all browsers, when in fact you should design towards the most standards-based/progressive browser and create a lesser design for older/less compatible browsers. See Andy Clarke and Transcending CSS

Yeeeeaaaahhh......that's real practical. I code some very complex pages with calendars and all kinds of customizable elements using just tables so I'm not sure what I can't do because I'm not using CSS.

While in some instances it isn't practical to design up to the highest, most standards-compliant browser, the growing trend is to create better designs using the more advanced features of CSS. And as jjones points out, if you create several complex, multi-page sites, having a central stylesheet which has the design for all of the pages can easily be modified without having to edit every page. It comes down to being proficient and comfortable with what you code with, whether it's CSS or tables

 

[bluestrobe]

Since we got all the l33t CSS hax0rs in here, why doesn't someone direct me to a web site that explains how a CSS web site is made. Explaining CSS from the ground up including directories, file locations and such.

 

[jjones]

This might help.

http://glish.com/css/

 

[bluestrobe]

http://glish.com/css/7.asp

I like that one. Maybe I'll play with it later this week.

 

[bluestrobe]

Originally posted by: bluestrobe
http://glish.com/css/7.asp

With this example, why do they put part of the content into the <head> section. The sample has a few things that don't make sense to me as mentioned.

 

[jjones]

The css appearing in the head section is the css the page is using, the other css that appears in the body is the example text you see on the page. The other stuff that doesn't make sense is css hack for the older IE5 compatibility; not really necessary these days.

 

[lozina]

How do you find the css/div nazi in your office?

Find the guy who's constantly working but never gets anything done!

*rimshot*

 

[HeroOfPellinor]

Originally posted by: jjones
The other stuff that doesn't make sense is css hack for the older IE5 compatibility; not really necessary these days.

Right. If you're designing sights for your WoW clan. If you're designing a site that has any commercial value, you'd be a fool not to make it compatible with IE5 and below that if possible. You never know when your next potential customer or client is going to be using an old browser. I've seen this personally, and especially older guys with money tend to like to keep their old computer and old browsers because they "work fine for them" or "haven't given them any problems" or whatever......hell I'm not going to argue.

 

[sourceninja]

Actually, every company I've done work for has not wanted support less then IE6. For a few reasons, they want their site to look like it was designed in modern day and not the 90's, and they are worried about clients blaming security problems on their site when its the browser that has the holes. If your client is using IE5, they have spyware.