CSS help

[webster23]

I am not exactly knowledgable on CSS and need help. I got a templete for my site.

Basically I wanted to make the header backgraound color and left navigation background color alittle darker. I was able to accomplish this somehow in an outdated html editor. Here is what the darker header and left navigation area looks like: http://www.glassetchingsecrets.com

This is how I want it to look or at least something similar, but when I put the CSS page format coding (<style type="text/css" media="screen">)
in a .txt file to make it faster and more SEO friendly it goes back to the lighter color show for this page: http://www.glassetchingsecrets.com/howtosteps.html

Please let me know if you know how to make the colors darker after placing the coding in a .txt file. I tried to change multiple color codes in the "<style type="text/css" media="screen"> coding"

If you have an answer or recommendation please let me know. If you need to see the coding for the page just look it up in the browser.

Thanks everyone,
Eric

[unlmtdrw]

Hi Eric,
This should be a quickie fix, I think.
In your external styles text file (mystyles.css), you don't need the start/end style tags anymore. This information is handled by the link meta tag (i.e. <link rel="stylesheet"...etc.) in the head of your page.

In your mystyles.css, remove the "<style media="screen" type="text/css"> /* <!-- */" at the beginning and the "/* --> */ </style>" at the end.

Once you delete those, your "How To Steps" page should reflect the styling within the external file.

good luck,
Robena

[webster23]

Robena,

OMG thank you so much! I really appreciate this, you are freaking awesome.

It worked great and just how I wanted it. Thanks

Also, if you or anyone else has any suggestions for my site to be more search engine friendly, please let me know.

-Eric

[abajan]

Hi Eric

It is advisable, though not necessary, to keep structure (HTML), style (CSS) and behavior (JavaScript) separate from each other, wherever practical. (In fact, Michael Wallent, Lead Program Manager at Microsoft, when the article linked to was published, suggests going a step further and separating content as well.) Bearing this in mind, consider replacing

<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script>

with

<script type="text/javascript" src="googleAnalyse1.js"></script>

and putting

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

into a separate JavaScript file named googleAnalyse1.js

Please note: Just like how your mystyles.css file contains neither “<style media="screen" type="text/css">” nor “</style>”, googleAnalyse1.js should have just the script itself, as I’ve shown above, and nothing else!

Now, do the same thing with

<script type="text/javascript"> 
try { 
var pageTracker = _gat._getTracker("UA-8160150-1"); 
pageTracker._trackPageview(); 
} catch(err) {}</script>

but give the file it links to a unique name like googleAnalyse2.js or whatever you feel is appropriate.

To keep things organized, place both googleAnalyse1.js and googleAnalyse2.js into a folder named javascript, and mystyles.css into one called css. That will keep things from getting messy as you add more style sheets and JavaScript snippets to your site.

For the time being, don’t worry about separating content. I just think Mr Wallent’s article is rather interesting and actually makes a lot of sense when you think about it.

On another matter, where you have

<img style="width: 309px; height: 263px" title="" alt="" width="309" height="263" src="http://www.v7n.com/forums/images/100_0916.jpg" />

and other image related markup, it is neither necessary nor desirable to use inline CSS as the dimensions are already declared (width="309" and height="263" instructs browsers to display that image 309 pixels wide by 263 pixels high.)

Lastly, would you not rather have the site centered like this? Just curious.

I know none of the above relates to SEO optimization (at least, not to my knowledge) but it’s worth considering nevertheless.


Cheers,

~ Wayne

[webster23]

Wayne,

Thank you so much. Gosh, I really appreciate the help here. I will look into it soon.

Also,is ebizinsider.com yoursite?

Thanks
-Eric

[abajan]

Originally Posted by webster23

Wayne,

Thank you so much. Gosh, I really appreciate the help here. I will look into it soon.

Also,is ebizinsider.com yoursite?

Thanks
-Eric

Glad to help wherever I can but my knowledge of (X)HTML, CSS and programming languages is quite limited. But I try to learn as much as possible from quality resources like these forums, sites like CSS-Tricks.com and so on.

No, eBizInsider.com isn’t mine but I usually find centered, fixed width sites to be visually appealing - especially those with drop shadows like eBizInsider. If you do decide to go with a similar layout, there are numerous opinions on what width works best but 960 pixels seems to be ideal in most (not all) instances.

Enjoy the journey.

~ Wayne