clean me up

**prairiegirl** · 02-28-2003 03:03 PM

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!

http://home.earthlink.net/~jhall11/ropr/ropr_home.htm

**havik** · 02-28-2003 03:10 PM

First 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:

http://www.htmlhelp.com/reference/css/

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.

Havik

**nkaisare** · 02-28-2003 03:33 PM

Think strongly about quitting tables and use CSS for layout. You can start by looking at examples from some good websites like:
http://www.glish.com/css/
http://www.thenoodleincident.com/tut...son/boxes.html

For example:
<div id="head">

</div>
<div id="contents">

</div>
<div id="leftbox">

</div>
<div id="rightbox">

</div>

Code:

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}

**prairiegirl** · 02-28-2003 04:35 PM

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.

**Wisbin** · 02-28-2003 07:36 PM

Code:

<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, %)

Code:

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

Code:

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.

Code:

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 ....

Code:

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..

Code:

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!

Wisbin

**prairiegirl** · 02-28-2003 10:04 PM

Wisbin, you have me whuped. I better hit the books!

**Stefan** · 03-01-2003 02:40 AM

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)

**prairiegirl** · 03-02-2003 10:17 PM

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?!?!

http://abc.abcnews.go.com/primetime/...rity/show.html

**pyro** · 03-02-2003 10:39 PM

Originally 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...

**prairiegirl** · 03-02-2003 10:41 PM

Pyro, you are rapidly turning into my internet dog.... er God... look at that page in both and tell me. Wassup?

Julie

**pyro** · 03-02-2003 10:48 PM

Wow, 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...

**prairiegirl** · 03-02-2003 10:57 PM

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.

**pyro** · 03-02-2003 10:59 PM

Originally posted by prairiegirl
I'll copy and paste what you said. Yeah! Me smart.

...lol

**nkaisare** · 03-02-2003 11:46 PM

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:

Code:

<style type="text/css">
<!--
/* ads */
...
-->
</style>

First lesson in style sheets: style elements can not appear in body.

Code:

<spacer type="block" height="2" width="1">

Thats not a HTML 4.01 element

Code:

<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!

celebguy_dv · 03-04-2003 02:58 AM

http://banners.dollarmachine.com/pic/2014000/hal001.gif

Thread: clean me up

Thread Tools

Display

clean me up

Thanks! Havik and nkaisare

Clean me up Scotty!

Whew! Eek!

Re: Thanks! Havik and nkaisare

Okay, no laffing!!!

Re: Okay, no laffing!!!

okay, but loooook

Those evil gatesians

Re: Those evil gatesians

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions