Newbie...CSS & Initial site layout...

[marvc]

Anyone know of a good resource or tutorial that'll walk me thru setting up the CSS portion of my site layout? I ask because I have a situation where I've created a simple logo or image placed inside of a table. Now I can view this image fine on my systems running IE6 & 5.5. These are XP & w2k systems, but if I attempt to view this on a linux box running NS4.7, I'm unable to view the images. The tables show fine, only the images are missing. Anyway it was stated to me that it may be a problem in how I have css set up on my server. Not really sure since I'm not familiar with it, but this is what I have by means of css:
<style type="text/css">
BODY {
SCROLLBAR-BASE-COLOR: #EDEDED;
SCROLLBAR-ARROW-COLOR: #BAC1BF;
}
SELECT {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 11px;
COLOR: #000000;
BACKGROUND-COLOR: #EDEDED
}
TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #EDEDED
}
A:link, A:visited, A:active {
COLOR: #000000;
}
A:hover {
COLOR: #4e0000;
}
#cat A:link, #cat A:visited, #cat A:active {
COLOR: #BAC1BF;
TEXT-DECORATION: none;
}
#cat A:hover {
COLOR: #BAC1BF;
TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
COLOR: #000000;
TEXT-DECORATION: none;
}
#ltlink A:hover {
COLOR: #4e0000;
TEXT-DECORATION: underline;
}
.thtcolor {
COLOR: #CCCBC4;
}
</style>
<!---Ends CSS Style Sheet--->

I'd like to learn how to modify this and have it so that I can detect the different browsers and I guess resolve them accordingly.

Any help is appreciated.

Any tuts that reference this subject from a visual perspective would be a greeeaaat help as I'm totally CSS-illeterate.

[La Gal]

I don't know anything about how NS4.7 behaves on a linux box, but I do know that NS4 will not recognize about 80% of your style declarations - on any box.

BODY {
SCROLLBAR-BASE-COLOR: #EDEDED;
SCROLLBAR-ARROW-COLOR: #BAC1BF;
}
/*you can't change the scrollbar colors in NS4*/

A:link, A:visited, A:active {
COLOR: #000000;
}
A:hover {
COLOR: #4e0000;
}
#cat A:link, #cat A:visited, #cat A:active {
etc
etc
/*Pseudo-classes active and hover are not recognized by NS4*/

TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #EDEDED
}
/*NS4 has a background-color bug where it will only color behind the text. This bug shows up on most elements, including form elements.*/


The following sites helped me to makes sense of CSS - hope they can help you too.

http://www.w3schools.com/default.asp

http://www.dansteinman.com/dynduo/ - this one's a bit dated now - but if you're still trying to accommodate NS4 it's very helpful. It deals mainly with DHTML, but as CSS is a component of DHTML there's a lot to be learned here - also covers javascript browser detection:

http://www.richinstyle.com/ - the CSS bug table is especially handy.

[marvc]

ok..what about this. I found a tutorial (http://www.solardreamstudios.com/tutorials/css/import.shtml) on CSS that uses the @import tag. Where would I place this link in my header, or does it matter? Do I have to remove the one that's already there. The link I'm speacking of is:

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

do I remove:

<style type="text/css">

This is based on 2 style sheets with the following code added:
@import url(adv_styles.css);
p {font : 11px Verdana, Arial, Helvetica, sans-serif;}

and

body p {font : 12px Arial, Helvetica, sans-serif;}

Is this the only modification I need to make to ensure my sheets look the same in every browser???

???

[marvc]

Thanks for the links. Does this mean that I should simply upgrade NS on this linux box to the latest version? Or should I not even bother with the limitation?

[marvc]

Richnstyle.com seems preety consistent. Question, which version do I need to be concerned with? I see CSS1 & CSS2, should I consider CSS1 to be outdated and focus my learning efforts on CSS2?

[Vladdy]

I checked out your home page (and its source code) and it seems like you are just in the beginning of creating your web site. It is also apparent that you are pretty confused about how to approach the design. Here are a couple of things that you need to consider in order to aim your efforts in the right direction:

1. Decide which browsers you want your web site to work in. boxer_1 makes some good points in this thread (http://www.codingforums.com/showthread.php?s=&threadid=3463) about the target audience being the deciding factor.

2. Once you have determined the range of browsers and their versions you can find out how they deviate from the existing standards and what are the common features they support. If these features are not sufficient then you have two choices:
- reconsider the scope of browsers
- use browser recognition scripts and have browser specific branches in your layout/code.

3. Based on the above pick up the layout method. You basically have two choices:
- Use table if you need to support older browsers and would like to have more uniform layout between different browsers
- Use CSS positioning of DIV elements if you are looking for separation of content from presentation, ease of maintaining and updating your code.
(Looking at your current source code: you are using table to layout your page, and CSS for other formating.)

[marvc]

I appreciate the feedback. Going back to your first comment I will respond by acknowledging that I am confused about the process for getting started and would like to ask if you know of a "path" or "format" to follow that will ensure some form of success, regardless of how small. I'd like to start w/HTML since it seems to be the easiet and most consistent to learn.
I'm overwhelmed by the number of options available, html, xhtml, etc, and confused by it also. I view a lot of source from a lot of the sites and they "seem" to follow the same format I was trying to follow. Again is there a "format" or "Standard" to follow, if so what is it? How would I get started?
I can see the concept for my site clear as day, and in theory it's "easy", it's "application" that's a killer.

[Vladdy]

Most of the sites do use the table layout. While it provides consistent presentation over the wider variety of browsers it results in bigger, harder to maintain code. In the long run CSS positioned divs will take over as browsers become compliant with the latest standard. So in some way tables vs. divs is designing for the past vs. designing for the future (imho).

Lets say your page has four areas:
- Banner
- Navigation
- Content
- Footer

Table layout:
<table>
<tr><td colspan="2">Banner goes here</td></tr>
<tr><td>Navigation goes here</td>
<td>Content goes here</td></tr>
<tr><td colspan="2">Footer goes here</td></tr>
</table>

DIVs:
<div id="banner">Banner goes here</div>
<div id="menu">Navigation goes here</div>
<div id="content">Content goes here</div>
<div id="footer">Footer goes here</div>
You define the div element classes in a css file and link it to your pages. If you need to change the layout of your page(s) you can modify the css file without touching your html code.

As far as reading material, I would suggest the following links:
General Design Principles (http://www.wdvl.com/Authoring/Design/Basics/)
WebReference has a good set of
tutorials (http://webreference.com/html/tutorials/)

And certainly the standards from W3C (http://www.w3.org/) :
HTML 4.01 (http://www.w3.org/TR/html4/)
CSS (http://www.w3.org/TR/REC-CSS2/)

Hope that helps