www.webdeveloper.com
Results 1 to 15 of 15

Thread: clean me up

  1. #1
    Join Date
    Feb 2003
    Location
    Tejas
    Posts
    28

    clean me up

    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

  2. #2
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    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

  3. #3
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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">
    <!-- Your top banner -->
    </div>
    <div id="contents">
    <!-- You contents -->
    </div>
    <div id="leftbox">
    <!-- Left Links -->
    </div>
    <div id="rightbox">
    <!-- Right links -->
    </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}

  4. #4
    Join Date
    Feb 2003
    Location
    Tejas
    Posts
    28

    Wink Thanks! Havik and nkaisare

    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.

  5. #5
    Join Date
    Feb 2003
    Posts
    8

    Talking Clean me up Scotty!

    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
    In the land of plenty, miss pixelperfect is a *****

  6. #6
    Join Date
    Feb 2003
    Location
    Tejas
    Posts
    28

    Whew! Eek!

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

  7. #7
    Join Date
    Nov 2002
    Posts
    984

    Re: Thanks! Havik and nkaisare

    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)
    // Stefan Huszics

  8. #8
    Join Date
    Feb 2003
    Location
    Tejas
    Posts
    28

    Cool Okay, no laffing!!!

    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

  9. #9
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104

    Re: Okay, no laffing!!!

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

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  10. #10
    Join Date
    Feb 2003
    Location
    Tejas
    Posts
    28

    okay, but loooook

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

    Julie

  11. #11
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    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...

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  12. #12
    Join Date
    Feb 2003
    Location
    Tejas
    Posts
    28

    Those evil gatesians

    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.

  13. #13
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104

    Re: Those evil gatesians

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

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  14. #14
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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!

  15. #15
    celebguy_dv Guest

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles