Apply text style (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

gskywalkers -> Apply text style (2/17/2004 20:19:18)

I am working on a web page that has a table with 3 columns and multiple rows. Many of the cells will have nested tables. Is there an external style sheet that I can make that will allow me to have all of the text in these nested tables and all of the cell text indented 5 pixels?



c1sissy -> RE: Apply text style (2/17/2004 20:54:38)

quote:

ORIGINAL: gskywalkers

I am working on a web page that has a table with 3 columns and multiple rows. Many of the cells will have nested tables. Is there an external style sheet that I can make that will allow me to have all of the text in these nested tables and all of the cell text indented 5 pixels?

Hi gskywalkers,

Why don't you go with divs? To make it easy while transfering the tables over into css you can give your tables and cells etc.. a border and work on your div placement. If you have a link to the site then we could see it. Also for the text to indent you can do that with css.

There are also css rules that you can use for tables as well, I think it is in the CSS2 specs.



Peppergal -> RE: Apply text style (2/17/2004 21:14:59)

quote:

Why don't you go with divs?


If I may butt in...sometimes it is just easier to use tables. LOL For instance, on the candle site I'm working on, it's just easier to lay everything out as a styled table rather than make up nine divs nested within a bigger div. In order to validate as XHTML 1.0 strict, I just have to control size and background color with styles. I'm sure that I could do it somehow with an external sheet and save myself a lot of copying and pasting, but the project had to get DONE NOW and I just did embedded styles with each table and cell. The problem comes when FP automatically inserts that stupid border collpase: collapse and default 'bordercolor="fffffff" crap. Sometimes, I've found it also goes in and screws up my styles by adding stupid junk code to it....I know there's an easier way, and little by little I'm getting there.

I just like using tables for some things. ...like the shopping cart. Plus, it helps on pages where I want text next to an image - NN4 flips out over "float" and "align=right" doesn't validate - so by using a two cell, styled table, with the image in one cell and the text in another, I'm able to have text next to a pic easily (I know, that could be accomplished using two divs side by side, but when you're doing multiples of that type on thing on several pages (like on a real estate site, that is basically image-text, image-text over and over again) the tables work....and the page validates....and it will look presentable, if boring, in NN4.



c1sissy -> RE: Apply text style (2/17/2004 21:33:25)

quote:

If I may butt in...sometimes it is just easier to use tables


It might be easier, but this defeats the purpose of CSS. A table should only be used for tabular layout.

lol, plus I don't use front page right now with learning, I do the coding by hand. With homesite. For playing with my family site and staying on top of what I have learned with fp, I use it for that.

Anyhow, I just think that if you are going to go the CSS route, then you should learn it and use it how it is intended to be used. You can get text next to an image with CSS. And you can do multiple thumbs in a row with css as well. Here is one link, and Here is another one that has a lot of information on this.

This is just my opnion on this. I still have a long way to go with learning, and maybe this is why, I have to learn this the right way and do it as it is ment to be done.[;)]



Peppergal -> RE: Apply text style (2/17/2004 22:03:04)

quote:

It might be easier, but this defeats the purpose of CSS.


Well, maybe.... but I'm not a purist. LOL

Thanks for the links - I'll bookmark them and keep them handy. At this point in time I'm pressed to get the site done and done NOW. I can always go back and change it later, but as long as the CSS and HTML validate (I'm moving away from 4.01 transitional and trying to keep everything XHTML 1.0 Strict just to get in the habit) and the stuff works in the main browsers, and is useable for the NN4 type browsers, I'm happy.

I use FP mainly just for the quick "preview" mode. LOL I am working in HTML mode 95% of the time... I just wish that I didn't have to deal with the extra crap. I like to be able to just quickly shift from HTML to Preview or a quick "Preview in Browser". It saves me a few seconds. I use very little of FP's bells and whistles - the only thing I need the server extentions for is the forms and publishing.

Wouldn't the shopping cart count as tabulature data, anyway? What exactly is "tabulature data?"



Peppergal -> RE: Apply text style (2/17/2004 22:07:28)

And I have to ask...how do you get around NN4 not recognizing "float" when you want text next to an image or multiple images lined up?

I realize that you create a special style sheet for NN4 but what do you do with the images then? If you use, in the body, img align=left , you can't validate XHTML 1.0 strict.



c1sissy -> RE: Apply text style (2/17/2004 23:23:20)

quote:

ORIGINAL: Peppergal

And I have to ask...how do you get around NN4 not recognizing "float" when you want text next to an image or multiple images lined up?

I realize that you create a special style sheet for NN4 but what do you do with the images then? If you use, in the body, img align=left , you can't validate XHTML 1.0 strict.

Ok, not sure about this one, lol, beginner right? But I'm sure that the Great Furry One will be able to answer on his next visit [;)]

Here is something on NN4 that I found today while searching about for things. Not sure if this will be of any help, but this is specifically for NN4



Peppergal -> RE: Apply text style (2/17/2004 23:37:34)

BTW those links you've sent/posted are very cool. I've seen them before (I love that giraffe picture). I do plan on reading up on it more.

I've actually been naughty, I suppose, by not even linking a style sheet for NN4 users...I link to the style sheet by using @import and the browsers that don't recognize @imort just see a very plain, boring, but useable page that has everything laid out line by line...except for the parts with tables - then they see that fairly close to the way it looks when using a good browser. If you have NN4 on your puter, go look at a couple of the pages on the candle site with it to see what I mean. (not all the pages are set up that way; the home page, and the pillars page definitely are. I'm working thru the site page by page making it Xhtml 1.o compliant.) It's not stunning, but it works - I figure, if you want stunning, then update the $%#&*# browser. If you're blind , then you don't need the "stunning". LOL

Of course, now I have to consider getting the site Bobby certified...and I don't mean OUR Bobby.... LOL



c1sissy -> RE: Apply text style (2/17/2004 23:47:27)

quote:

Of course, now I have to consider getting the site Bobby certified...and I don't mean OUR Bobby.... LOL


roflol, and the "our bobby" is the first thing that came to mind!

Unfortunatly I don't have nn4 at all on here.

I know I have much to still learn, but from what I have been reading with all of this, it pays to be compliant. Maybe its good that I didn't learn fast with all of this. I'm in an era of change with all of this, lol. It does seem to be tons of work if you already have a site up, but in the long run, it is going to be worth it.

As far as tables, well, they are really for things that belong in tables, not site design. Which gives you the seperation of style and content.

As far as shopping carts go, I have no clue how they are set up. So I don't know how to answer that one.



Peppergal -> RE: Apply text style (2/18/2004 1:07:03)

quote:

I know I have much to still learn, but from what I have been reading with all of this, it pays to be compliant.


That's why I want to make sure that everything validates.

In the context of "site design" I have only used two tables on one page for that purpose (text/image) in the name of design. My other usage of tables is to provide information in a sensible, logical progression. The image is there for information purposes, not for looks. I'm not using the tables, in general, to manipulate layout for design purposes, but rather to present it in an easy to look at manner.

My ultimate goal, therefore, is not so much to be "pure CSS" for its own sake but to provide the information to the user in an eye pleasing, w3c compliant, cross browser friendly manner. I use the CSS to position my general layout elements: navigation, placement of certain content on the page, etc...but for the actual information, I may resort to tables if it will help me present the information in a sensible manner.

On the real estate site, the image is not really for design purposes but for information. It's not eye candy; it's part of what the person is lookng for; it's just another piece of data. Therefore, I feel, in my mind, that using tables in that manner is justified. It's just that the information is in the form of a jpg rather than text.

I admit, that my usage of tables here, at the top of this page for the two pictures is wrong, according to CSS purist standards:

http://www.lightexpressionscandles.com/lightexpill.htm

I'm sure the table below, with all the styles and sizes, is an acceptable use of tables...

But I feel that my other usage of tables on the other pages is acceptable, as well, for the time being. I simply do not have the time nor do I see a reason to use 9 different divs nested, when one CSS-styled table with 9 cells will accomplish the same thing and still validate my page according to W3C standards. My opinion is that if I were to use pure CSS, the page would look ridiculous in NN4, with the skills I currently possess, as the divs would all end up being underneath one another since NN4 doesn't recognize "float" and I would be unable to float the divs. I am working on a tight schedule here and don't have the time to experiment at this point in time.

Using the tables will allow any NN4 users to view my site in a more sensible fashion....and like I said, since the pages are validated, I see nothing wrong with using CSS and tables together in this fashion.

I'm sort of a semi conformist, I guess. Eclectic, if you please. I gladly replace deprecated tags such as <td width="33%"> with <td style="width: 33%;">. Since that works and validates, I see nothing wrong with using it at this point in time.

Considering how far I've come from my first site, though, I'm sure I'll soon abandon tables all together - with very few exceptions - in the future, when I have more time to fool around with it and become more adept. LOL, I still cringe at some of the things on my first site built with Front Page. I 'll have to look and see if it's still on Geocities...they may have taken if off, as i haven't touched it in over a year and a half. LOL



gskywalkers -> RE: Apply text style (2/18/2004 1:10:04)

Thanks for all of the replies. The site that I am working on is what I like to call my "Start Page" It has been in a state of construction since I first put it up 3 years ago. All I am interested in at the moment is what CSS style or styles I need to make all of the cell text and table text indent. I can't get any of the text that is in the small black nested tables to indent unless I do each one separately. I keep taking things out and putting new things in and it would be nice if all I had to do was type in the tables or cells and the text was the way I want it.



Peppergal -> RE: Apply text style (2/18/2004 1:24:57)

In looking at it, I don't understand why you want it to be indented? It looks fine as it is...

Perhaps you could use bulleted lists, with no bullet? Really, that's what the whole page is: a bunch of lists. If you make them a regular bulleted list, you can set the <ul> and <li> properties to indent.

In my humble, and admittedly, novice, opinion, you'd still have to style each individual table cell with a <span> or a <class>. I'm sure someone will correct me if I am wrong here... I honestly don't think tables and CSS were meant to cooperate with each other too much...

I would consider making the main page a lot smaller. I know you didn't ask for a critique, but there is so much information on that one page that it really makes me think "Oh, man, I can't look at all this...." it's a little overwhelming, all those words and boxes....

If perhaps, you break it up into smaller pages, with less info on them, you will find that a pure CSS layout, without the tables will work for you.



gorilla -> RE: Apply text style (2/18/2004 1:38:06)

Well to answer Scotty's question yes of course it is. Just create a style that does it for you and bung it into your external style sheet. It might look sometihng like this:

.nested
{
margin-left: 5px;
padding-left: 5px;
}

That adds up to 10 px and myself I think you'd do beeter to go for padding. Experiment by commenting out first the margin and then padding in the example given above to see which you're happiest with.

Post again - if needs be with a sample, a small sample please [;)] of the html code so that I can gicve somewhat less generic advice.

Just to cover Deb's and Karen's points:

I bow to no one in my advocacy of css layout as an ideal for which to be striven. But there are plenty of times when tables are the only tool available. The classic example is the BBC. This is a crisp elegant site that changes style daily. They use tables. Lots of 'em. They have to, worth a look [:)]

It depends on so many things including browser weaknesses, target audience, I could go on and on. Tables for tabular data alone. Oh come the day. But we're far from that day. Some day we'll have properly coded compliant browsers. Some day.



gskywalkers -> RE: Apply text style (2/18/2004 4:29:57)

Hi Peppergal, Gorilla........thanks again for the comments. In reply to Peppergal, this page is not intended as something others would use, it is my own personal page that opens when I start my browser so the length is not a problem. It is indeed indented, each one done individually until I thought about doing it with CSS. I change things around a lot on this page so it would be nice to have an external page that would control all of the text.

Gorilla, thanks for your help. I don't have it all figured out yet but working on it. I put that code into the html document but the text in the first row of the nested table wont budge.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
<!--
.nested
{
margin-left: 5px;
padding-left: 5px;
}

-->
</style>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td>nested table</td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>



Giomanach -> RE: Apply text style (2/18/2004 4:33:20)

In the table tag, of your nested tables, you will need to to be like so:

<table border="1" cellpadding="0" cellspacing="0" width="100%" class="nested">

That should work, if not, put the class="nested" into the <td> tags

Dan



c1sissy -> RE: Apply text style (2/18/2004 7:11:21)

quote:

ORIGINAL: Giomanach

In the table tag, of your nested tables, you will need to to be like so:

<table border="1" cellpadding="0" cellspacing="0" width="100%" class="nested">

That should work, if not, put the class="nested" into the <td> tags

Dan


Dan I believe that the class needs to be in the td tags. I don't think that it will work in the table tag. <td class="nested"> is how I believe that it should be done. But then tables were never my strong point, so..... lol

quote:

peppergal
Considering how far I've come from my first site, though, I'm sure I'll soon abandon tables all together - with very few exceptions - in the future, when I have more time to fool around with it and become more adept. LOL, I still cringe at some of the things on my first site built with Front Page. I 'll have to look and see if it's still on Geocities...they may have taken if off, as i haven't touched it in over a year and a half. LOL



LOL, I wouldn't even WANT anyone to see my feeble geocities page! And, recently they did email me to see if I wanted to keep it, lol.

Peppergal, know what I just LOVE about this css forum? We get to come in here and discuss what we are learning, give our opnion, and not worry about someone jumping on us if we are wrong, heh, great for the beginner isn't it? I used to worry about being wrong with an answer, but now, if I am, it is addressed in a manner that doesn't scare me off from posting an answer, or letting everyone know, hey, I'm a beginner, but will give my answer and my opnion, knowing that it will be respected, not bashed [;)]



Giomanach -> RE: Apply text style (2/18/2004 7:28:43)

Mom

You can apply styles to tables themselves, but sometimes it is safer to put it in the <td> tags.

Dan



c1sissy -> RE: Apply text style (2/18/2004 7:33:50)

quote:

ORIGINAL: Giomanach

Mom

You can apply styles to tables themselves, but sometimes it is safer to put it in the <td> tags.

Dan


I know you can apply the style to the tables, but with a class and aiming specifically at the td wouldn't you need to make sure that the td is the one that has the class in it?



Giomanach -> RE: Apply text style (2/18/2004 7:38:19)

Yeah, but that makes it long winded as you have to put it in every <td> tag, unless you give the table the class of nested and add the following to the stylesheet:

.nested td{
{
margin-left: 5px;
padding-left: 5px;
}

That way all you have to do it put the class attribute in the table tag and it does it right through the table

Dan



c1sissy -> RE: Apply text style (2/18/2004 7:54:09)

quote:

ORIGINAL: Giomanach

Yeah, but that makes it long winded as you have to put it in every <td> tag, unless you give the table the class of nested and add the following to the stylesheet:

.nested td{
{
margin-left: 5px;
padding-left: 5px;
}

That way all you have to do it put the class attribute in the table tag and it does it right through the table

Dan


Though long winded, will it work if it is in the table? Seems to me that it won't work unless it is in the td. Or, is this where you would have to use a contextual? hmm, me trying to still make sense of those things[:@][:@]



Giomanach -> RE: Apply text style (2/18/2004 7:57:19)

quote:

is this where you would have to use a contextual?

A Wha?

Dan



c1sissy -> RE: Apply text style (2/18/2004 8:23:17)

quote:

ORIGINAL: Giomanach

quote:

is this where you would have to use a contextual?

A Wha?

Dan


Mom senses son off on a search. Look up decendant and child selectors and contextuals. Need to know this with css [;)]



Giomanach -> RE: Apply text style (2/18/2004 8:31:08)

quote:

Mom senses son

Mind Reader!!!!!! [:D][;)]
quote:

Look up decendant and child selectors and contextuals.

Ok, that'll keep me quiet for a while, or will it?? I got so far throught the w3schools tutorial on CSS and gave up, I was about to take a one way ticket to The Land of Nodd.

Gooooogle, here boy, come on boy, time for searchies

Dan



c1sissy -> RE: Apply text style (2/18/2004 8:49:31)

quote:

Ok, that'll keep me quiet for a while, or will it?? I got so far throught the w3schools tutorial on CSS and gave up, I was about to take a one way ticket to The Land of Nodd.

Gooooogle, here boy, come on boy, time for searchies

Dan


I'm sure that you will pick it up faster then I have, lol. I have contextuals until it comes to using them with ID, go figure right? But I know have tons of information to read. The westciv course that I had purchased a while back covers them. So I have some reading to do as well as getting my logo course caught up from being away.



Giomanach -> RE: Apply text style (2/18/2004 8:53:44)

You'll catch up, you always do, no matter how big the delay, I mean, just look at the wash days, oo everyday[:D], but you always manage to get on top of it. From Son to Mother, take it easy and relax, I'm on the other end of the phone if you need me, anytime of the day, even if it is 2am here, I don't sleep much anyway, so it wouldn't make a difference.

Just take your time with it and you'll have it over and done with faster than you think, trust me, I've been there, only not quite as formal as you're doing it.

Dan



Peppergal -> RE: Apply text style (2/18/2004 9:50:47)

quote:

Ok, that'll keep me quiet for a while, or will it?? I got so far throught the w3schools tutorial on CSS and gave up, I was about to take a one way ticket to The Land of Nodd.

Gooooogle, here boy, come on boy, time for searchies

Dan


ROFL, that was too funny. I have a hard time reading the W3Schools stuff myself, but I thought it was just me.

rotflmbo - here google, lol



Giomanach -> RE: Apply text style (2/18/2004 9:55:55)

It's no good looking on Goolge for decendant and child selectors and contextuals, you don't get any results for that, and when you click on their "spelling correction" link, you get something to do with, ummmmmmmm, 1835????? Did they have the Internet on those days?? (well a least we know where all them years went if they did). W3schools don't touch on it, neither does WebMonkey, and I can't find it in the CSS links section[sm=ask.gif].

Anyone know where I can find it??

Dan



Peppergal -> RE: Apply text style (2/18/2004 10:04:31)

quote:


Here is something on NN4 that I found today while searching about for things. Not sure if this will be of any help, but this is specifically for NN4


Okay, I want to know why the float works and doesn't flip it out in NN4.

However, that type of layout would not work for the sites I'm currently working on; they're basically in need of a grid type layout within the main DIV.

quote:

Peppergal, know what I just LOVE about this css forum? We get to come in here and discuss what we are learning, give our opnion, and not worry about someone jumping on us if we are wrong, heh, great for the beginner isn't it? I used to worry about being wrong with an answer, but now, if I am, it is addressed in a manner that doesn't scare me off from posting an answer, or letting everyone know, hey, I'm a beginner, but will give my answer and my opnion, knowing that it will be respected, not bashed


Yes, it is very nice to be able to throw around our opinions and ideas without fear of flames. Good grief, I got flamed incredibly the other day on a homeschooling list because of a math joke I posted....a few people thought it was racist (don't even ask. they were totally out of line and looking for slurs where there was none) and good grief, by the way a few were talking about me, you'd think I had a son in law named Meathead living with me. LOL

PS - does everybody start out with Geocities? LOL My site is still up - I found a Jeopardy-type trivia page I made all by myself and I was quite proud of it. I'll have to see if I can rework it somewhat with CSS, some year when I have time.



Giomanach -> RE: Apply text style (2/18/2004 10:07:50)

quote:

PS - does everybody start out with Geocities? LOL My site is still up - I found a Jeopardy-type trivia page I made all by myself and I was quite proud of it. I'll have to see if I can rework it somewhat with CSS, some year when I have time.


I did, my first site was on Geocities[&:], and now when I look back, it's crap [:D], time to re-work it lol, or just delete it?????

quote:

Yes, it is very nice to be able to throw around our opinions and ideas without fear of flames

Can't do that with the people I live with over here, get your head bitten off just for cracking off a joke funnier that theirs, sad &%$£&*()^%[:-]

quote:

I got flamed incredibly the other day on a homeschooling list because of a math joke I posted....a few people thought it was racist

Happens to everyone, even me, but I'm not racist, can't eat a whole one[:)]

quote:

you'd think I had a son in law named Meathead living with me.

Did you not think of MeatLoaf? [:D][;)]

Dan



c1sissy -> RE: Apply text style (2/18/2004 10:10:22)

quote:

Okay, I want to know why the float works and doesn't flip it out in NN4.


Try studying the code to see how it is done and what you can do to use any of it. How did he do it, and how can you apply it?



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.28125