Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts

    First CSS site - Very Messed Up

    Please check it out and let me know why I suck...

    http://www.theprojectband.net/index1.htm - (I realize that my nave link for home isn't working because I've got a construction page up as index.html that I didn't want to remove yet.)

    CSS:

    http://www.theprojectband.net/style.css


    Thanks for looking...

    JW

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Questions, or review?

    Do you have any specific questions, or is this supposed to be a review?
    If so, it needs to be moved to the "Site review" forum.

    Please let us know if you want your site to be reviewed; if so, DO NOT cross-post, but wait 'till a moderator moves it to the appropriate forum.

    Quick observation: ouch!!! How much saturated red can anyone use on one page?!!
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No it's not a review submission... I'm very concerned about my layout. I've spent about 15 hours the past 3 nights trying to learn CSS layout to avoid using tables.

    I used HyperText on a mac to code and in the validation window everything looks fine. I've uploaded and Both Firefox and Safario show the tables all squished up... the navigation isn't visible....1/2's of paragraphs arent even showing.

    I'm asking for help....

    If I wanted a review I'd say... Please let me know what you think... I'll be completely changing color scheme and images as that's the least of my concern at the moment... I'm more worried about presenting information in an organized fashion.

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As far as the css, you're on the right track. But without a DOCTYPE, and cleaning up the html, the way your site displays will be hit or miss.

    The way some of your <p> tags are nested is out of order and is likely causing problems too.

    Where your floated containers are breaking through the bottom of the parent container you need to add an element to clear the float. So:
    Code:
    <div id="parent">
      <div style="float:right;">
        Content
      </div>
      <div style="clear:both;"><!-- --></div>
    </div>
    You may want to set clear to right or left depending on the context.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Not sure...

    Ah, okay.

    I only have IE6.0/win available here, in that everything sort of looks okay.
    I'd start with adding a valid doctype, since a number of browsers tend to use this to assert what rendering mode to chose.
    Furthermore, mark up the menu list properly, with ul start and end tags (<ul> ... </ul>). You could place these inside the "nav" div, or replace the div by the ul altogether (you then need to adjust your style rules, though). You could give this one a fixed width, too.

    Since you aim for a fixed width layout, make sure all you main layout blocks have a set width. In this case I think the body element will do as container so you shouldn't have to envelop the whole lot in a container on its own.

    The center element is deprecated and should really not be used; center elements using CSS. The normal technique for fixed width elements would be to set left and right margin to "auto".
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks very much for your help guys. For some reason most of the layout tutorials haven't really "struck a chord" with me so I'm wandering around a bit aimlessly.

    I appreciate the help.

    JW

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem...

    Again, be sure to start with the appropriate DOCTYPE and validate as you make changes to your page. If your html is valid it will give you a better foundation for the css to make things look as intended.

    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #8
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added the <ul>...</ul> tags and that took care of the nav bar.

    I added <div style="clear:both;"><!-- --></div> under my last content block in the body part of my page under the last <div> and that helped as well.

    Just a question... what does the clear property do? This is the first I've seen of it...

  • #9
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This DOCTYPE would be the same as the default on any html page... right?

    as in I can open dreamweaver and copy the one it puts in the page?


    Sorry for the ignorance as I've never realized it was a big deal...so never paid much mind..

  • #10
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is my favorite for comprehensive examples: http://css.maxdesign.com.au/floatutorial/
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Doctype

    The doctype declaration depends on which "flavor" of HTML your page is marked up in: HTML 4.01 strict, transitional or frames, XHTML 1.0 strict, transitional or frames, XHTML 1.1... Judging by your markup, HTML 4.01 strict sounds okay, although with some minor changes you could make it validate as XHTML 1.0 strict (which is basically the same, only with stricter syntax rules).

    A proper doctype declaration would be:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    (Note that the HTML should be in the same case as your html element).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #12
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've checked things out after putting in the:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    and in safari my (block with the picture located in the body) is reaching outside of my main body. In Mozilla it still looks exactly like it did when i started this post..

    Any ideas?


  •  

    Posting Permissions

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