I'm trying to teach myself CSS. Would appreciate comments on the mess of stuff I have on this web page. I'm not really trying to do anything fancy, just control text size, color, positioning mostly. Seems to me I've got some pretty repetitive stuff.
Thanks!
<!-- m --><a class="postlink" href="http://home.earthlink.net/~jhall11/ropr/ropr_home.htmFirst">http://home.earthlink.net/~jhall11/ropr ... e.htmFirst</a><!-- m --> of all, it looks pretty good. The only problem I guess is the errors it loads with? Or is that just my browser
Anyways, check out this URL, it's pretty good for information on css:
<!-- m --><a class="postlink" href="http://www.htmlhelp.com/reference/css/">http://www.htmlhelp.com/reference/css/</a><!-- m -->
If there are still errors, I'd be glad to help. I took a quick look at the source and the errors could also be related to the javascripts.
HavikThink strongly about quitting tables and use CSS for layout. You can start by looking at examples from some good websites like:
<!-- m --><a class="postlink" href="http://www.glish.com/css/">http://www.glish.com/css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->
For example:
<div id="head">
<!-- Your top banner -->
</div>
<div id="contents">
<!-- You contents -->
</div>
<div id="leftbox">
<!-- Left Links -->
</div>
<div id="rightbox">
<!-- Right links -->
</div>
Then use CSS to specify layout:
div#contents {margin-left: 160px;
width: 444px; /* 700-160-96 = 444px */
padding: 2px; /* no need of <td width="2"> for this */}
div#leftbox {position: absolute; left: 0px; top 120px;
width: 160px}
div#rightbox{position: absolute; left: 604px; /* 160+444 */
top 120px; width: 96px}The errors are with javascript, I'm fixing that. Just wanted to see if my css thus far would embarrass me if it gets out in public.
I'll consider using CSS rather than tables, but not just yet. I sometimes have trouble with Netscape 7 on a PC on certain sites... and I'm guessing it is from CSS not loading properly. Text and images jumbled or off to the side. I want to wait until I understand it better.<style type="text/css">
<!--
#leftnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px
}
.leftnav {
color: #a00000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin-left: 4;
margin-right: 2
}
If you want to make use of the cascade in CSS try to avoid repetition and make use of the document tree.
#leftnav assumes an unique container DIV,
.leftnav is a class selector, triggered by the class="leftnav" attribute.
maybe not to use the same name for different things, unless you wanne go into the <div id="leftnav" class='leftnav"> ...
And margin units UNLESS zero, need an unit. (px, em, %)
span.wrapper td {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif
}
which translates to:
Selects any td element that is a descendant of a span element with a class attribute that contains the word wrapper
span.table, tr, td {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif
}
which translates to:
Selects any span element with a class attribute that contains the word table
or
any tr element
or
any td element.
span.body, p, ol, ul {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif
}
which translates to:
Selects any span element with a class attribute that contains the word body
or
any p element
or
any ol element
or
any ul element.
I'm not sure if you want this ....
h1, h2, h3, h4, h5, h6 {
color: #a00000;
font-size: 16px;
font-weight: bold; Arial, Helvetica, sans-serif
}
This is not the way to go, if you want to build in the spirit of the DOM.
serious, making all the h-elements the same font-size is not advisable, just leave them and use them for structuring titles, subtitles, paragraphs, headers, whatever..
a:link{color:#a00000; font-family: Arial, Helvetica, sans-serif}
a:visited{color:#a08080; font-family: Arial, Helvetica, sans-serif}
a:active{color:#c00000; font-family: Arial, Helvetica, sans-serif}
Here we have the a-tag declarations. Most of the time the font is declared in the p-tag, and the hyperlinks are of the same font-family. You could get jumpy links if you do this. And you missed the a:hover pseudo class. The order should be LVHA, so this comes before the a:active line.
Good luck with the tableless-cold-turkey, and have phun!
WisbinWisbin, you have me whuped. I better hit the books!
Originally posted by prairiegirl
I sometimes have trouble with Netscape 7 on a PC on certain sites... and I'm guessing it is from CSS not loading properly.
Id bet with 100:1 odds that the problem in those cases are NOT with NS 7, but that the webapges are badly coded (ie broken)Here is a page that messes up for me in Netscape 7. I always use Netscape, but when I have problems, I load a page in IE to check. This site sometimes does okay, most of the time not. Is it CSS?
Did I say ... NO LAUGHING AT MOI?!?!
<!-- m --><a class="postlink" href="http://abc.abcnews.go.com/primetime/imacelebrity/show.htmlOriginally">http://abc.abcnews.go.com/primetime/ima ... Originally</a><!-- m --> posted by prairiegirl
I always use Netscape, but when I have problems, I load a page in IE to check.What is the point of that? IE is notoriouly bad at interpreting CSS. If CSS breaks in NN7 then I highly doubt it would work in IE...Pyro, you are rapidly turning into my internet dog.... er God... look at that page in both and tell me. Wassup?
JulieWow, that's terrible in NN7, isn't it... I don't really want to look through all the code on that page, but like I said earlier, if the css was coded correctly (ie. to w3c standards) I'd bet it would work just great in NN7. It's possible that they used some IE specific css to do it, and that would explain a lot...Oh, man. I was hoping you'd ... well, I don't know what I was hoping you'd do.
I suppose I should send them one of my standard "This doesn't work in Netscape...blahblahblah." I used Netscape 4ish for the longest time. Just recently went to 7, and STILL I find the evil empire perkolating all over the place. I'll copy and paste what you said. Yeah! Me smart.Originally posted by prairiegirl
I'll copy and paste what you said. Yeah! Me smart. ...lol
This page is a perfect example of what one musn't do: mix table layout with CSS positioning.
Absolute butchery of HTML rules. Some examples:
<style type="text/css">
<!--
/* ads */
...
-->
</style>
First lesson in style sheets: style elements can not appear in body.
<spacer type="block" height="2" width="1">
Thats not a HTML 4.01 element
<table border="0" cellspacing="0" cellpadding="0">
<form method="get"...>
<input name="domain" type="hidden"...>
<input name="keyword" type="hidden"...>
<tr>...
Hmmm... thats a pre-css form hack. No longer valid.
Man I quit. There isnt anything right in this page!http://banners.dollarmachine.com/pic/2014000/hal001.gif (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)
Thanks!
<!-- m --><a class="postlink" href="http://home.earthlink.net/~jhall11/ropr/ropr_home.htmFirst">http://home.earthlink.net/~jhall11/ropr ... e.htmFirst</a><!-- m --> of all, it looks pretty good. The only problem I guess is the errors it loads with? Or is that just my browser
Anyways, check out this URL, it's pretty good for information on css:
<!-- m --><a class="postlink" href="http://www.htmlhelp.com/reference/css/">http://www.htmlhelp.com/reference/css/</a><!-- m -->
If there are still errors, I'd be glad to help. I took a quick look at the source and the errors could also be related to the javascripts.
HavikThink strongly about quitting tables and use CSS for layout. You can start by looking at examples from some good websites like:
<!-- m --><a class="postlink" href="http://www.glish.com/css/">http://www.glish.com/css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->
For example:
<div id="head">
<!-- Your top banner -->
</div>
<div id="contents">
<!-- You contents -->
</div>
<div id="leftbox">
<!-- Left Links -->
</div>
<div id="rightbox">
<!-- Right links -->
</div>
Then use CSS to specify layout:
div#contents {margin-left: 160px;
width: 444px; /* 700-160-96 = 444px */
padding: 2px; /* no need of <td width="2"> for this */}
div#leftbox {position: absolute; left: 0px; top 120px;
width: 160px}
div#rightbox{position: absolute; left: 604px; /* 160+444 */
top 120px; width: 96px}The errors are with javascript, I'm fixing that. Just wanted to see if my css thus far would embarrass me if it gets out in public.
I'll consider using CSS rather than tables, but not just yet. I sometimes have trouble with Netscape 7 on a PC on certain sites... and I'm guessing it is from CSS not loading properly. Text and images jumbled or off to the side. I want to wait until I understand it better.<style type="text/css">
<!--
#leftnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px
}
.leftnav {
color: #a00000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin-left: 4;
margin-right: 2
}
If you want to make use of the cascade in CSS try to avoid repetition and make use of the document tree.
#leftnav assumes an unique container DIV,
.leftnav is a class selector, triggered by the class="leftnav" attribute.
maybe not to use the same name for different things, unless you wanne go into the <div id="leftnav" class='leftnav"> ...
And margin units UNLESS zero, need an unit. (px, em, %)
span.wrapper td {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif
}
which translates to:
Selects any td element that is a descendant of a span element with a class attribute that contains the word wrapper
span.table, tr, td {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif
}
which translates to:
Selects any span element with a class attribute that contains the word table
or
any tr element
or
any td element.
span.body, p, ol, ul {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif
}
which translates to:
Selects any span element with a class attribute that contains the word body
or
any p element
or
any ol element
or
any ul element.
I'm not sure if you want this ....
h1, h2, h3, h4, h5, h6 {
color: #a00000;
font-size: 16px;
font-weight: bold; Arial, Helvetica, sans-serif
}
This is not the way to go, if you want to build in the spirit of the DOM.
serious, making all the h-elements the same font-size is not advisable, just leave them and use them for structuring titles, subtitles, paragraphs, headers, whatever.. a:link{color:#a00000; font-family: Arial, Helvetica, sans-serif}
a:visited{color:#a08080; font-family: Arial, Helvetica, sans-serif}
a:active{color:#c00000; font-family: Arial, Helvetica, sans-serif}
Here we have the a-tag declarations. Most of the time the font is declared in the p-tag, and the hyperlinks are of the same font-family. You could get jumpy links if you do this. And you missed the a:hover pseudo class. The order should be LVHA, so this comes before the a:active line.
Good luck with the tableless-cold-turkey, and have phun!
WisbinWisbin, you have me whuped. I better hit the books!
Originally posted by prairiegirl I sometimes have trouble with Netscape 7 on a PC on certain sites... and I'm guessing it is from CSS not loading properly.
Id bet with 100:1 odds that the problem in those cases are NOT with NS 7, but that the webapges are badly coded (ie broken)Here is a page that messes up for me in Netscape 7. I always use Netscape, but when I have problems, I load a page in IE to check. This site sometimes does okay, most of the time not. Is it CSS?
Did I say ... NO LAUGHING AT MOI?!?!
<!-- m --><a class="postlink" href="http://abc.abcnews.go.com/primetime/imacelebrity/show.htmlOriginally">http://abc.abcnews.go.com/primetime/ima ... Originally</a><!-- m --> posted by prairiegirl
I always use Netscape, but when I have problems, I load a page in IE to check.What is the point of that? IE is notoriouly bad at interpreting CSS. If CSS breaks in NN7 then I highly doubt it would work in IE...Pyro, you are rapidly turning into my internet dog.... er God... look at that page in both and tell me. Wassup?
JulieWow, that's terrible in NN7, isn't it... I don't really want to look through all the code on that page, but like I said earlier, if the css was coded correctly (ie. to w3c standards) I'd bet it would work just great in NN7. It's possible that they used some IE specific css to do it, and that would explain a lot...
Oh, man. I was hoping you'd ... well, I don't know what I was hoping you'd do. I suppose I should send them one of my standard "This doesn't work in Netscape...blahblahblah." I used Netscape 4ish for the longest time. Just recently went to 7, and STILL I find the evil empire perkolating all over the place. I'll copy and paste what you said. Yeah! Me smart.Originally posted by prairiegirl
I'll copy and paste what you said. Yeah! Me smart. ...lol
This page is a perfect example of what one musn't do: mix table layout with CSS positioning.Absolute butchery of HTML rules. Some examples:
<style type="text/css">
<!--
/* ads */
...
-->
</style>
First lesson in style sheets: style elements can not appear in body.
<spacer type="block" height="2" width="1">
Thats not a HTML 4.01 element
<table border="0" cellspacing="0" cellpadding="0">
<form method="get"...>
<input name="domain" type="hidden"...>
<input name="keyword" type="hidden"...>
<tr>...
Hmmm... thats a pre-css form hack. No longer valid.
Man I quit. There isnt anything right in this page!http://banners.dollarmachine.com/pic/2014000/hal001.gif (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)