1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HTML & CSS

Discussion in 'Off Topic' started by HoddzDJ, Sep 17, 2011.

  1. HoddzDJ

    HoddzDJ Active Member

    Well this has got me so frustrated today! I have been starting to build the new layout for my site and nothing seems to be showing the same after two hours, it keeps changing and then working again. The page can be found at http://www.pukkaradio.net/index-new1.html and the css file can be found at http://www.pukkaradio.net/style-new.css but I can't figure out why it's how styling any of it.

    If anyone has a spare few minutes and wants to have a laugh and see what stupid mistake I have made then feel free to look over it.

    I also still use tables over divs because I understand them more, I know it's not used much these days but it does the trick for what I need and I find I can do more with them also.

    Any help (as always) is greatly appreciated.
     
  2. Floris

    Floris Guest

    I recommend to start focussing on HTML5, as XHTML is basically shelved

    "XHTML 1.0 Transitional" doctype.
     
  3. Floris

    Floris Guest

    <div align="center"> .. </div>

    To center content have a div as container, with a class, and set the class in your .css to
    the .css file
    .centermypage {
    margin: 0 auto;
    text-align: left;
    }

    the .html file
    <div class="centermypage"> .. </div>
     
  4. Floris

    Floris Guest

    You used valign="center", vertical alignment can only be top, the middle, or the bottom. center would be middle.
     
  5. Floris

    Floris Guest

    <table border="0" cellspacing="0" cellspacing="0" width="491">

    You have cellspacing defined twice, you can probably remove one - or replace it with the cellpadding="0" if that was the intention.

    In html5 i would just use <table><tr><td></td></tr></table> without its' elements, and define the table design with css

    table {
    ..
    }

    tr {
    ..
    }

    td {
    ..
    }

    such as text-align, etc.

    for exceptions make classes you could use in span, div and p, td, etc.
    such as class="alignleft" (or right)

    .alignleft td { text-align: left; }
    you can stack it for various tags. or make the appropriate setup for it..
     
  6. Digital Jedi

    Digital Jedi Well-Known Member

    You might want to look some of this over in the validator: http://validator.w3.org/check?uri=h...atically)&doctype=Inline&group=0&ss=1#line-11

    I ran it through, and the first error I encountered has something to do with your meta tag. Probably having to do with this. I'd start with that first error first. Fix it, then re-validate and see if it caused any cascading errors. I know there are a few lower down that are definite errors in HTML markup, but you'd want to start with the uppermost first and then re-validate as you go along.
     
  7. Floris

    Floris Guest

    </tr>
    </div>
    </table>


    this is simply not valid. you can not have <div> outside table tags, or in front of </table>

    <div>
    <table>
    etc
    </table>
    </div>

    valid

    <table>
    <div>
    etc
    </div>
    </table>

    invalid.
     
  8. Floris

    Floris Guest

    Sorry for the many posts, it's just to help split the things up - a mod could merge them if he wants. But replying to individual code blocks just makes it easier.

    I hope these tips help, good luck.
     
  9. HoddzDJ

    HoddzDJ Active Member

    Thanks for the help Floris and Digital Jedi, I will look through all the things you have pointed out and hopefully that will sort it out! I do need to keep up with times and get up with HTML5.
     
  10. HoddzDJ

    HoddzDJ Active Member

    I made all the changes above and it still seems to display strangely and with no styling what so ever :/ Totally confused!
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Your style sheet is showing as Chinese characters in both Firefox and Chrome.
    None of your classes are being applied.

    hoddz.PNG
     
  12. HoddzDJ

    HoddzDJ Active Member

    How strange, I can't seem to get that in Safari on Mac OS X :S
     
  13. HoddzDJ

    HoddzDJ Active Member

    I have just done some tweaking and I can get it to display like this... but as you can see it is still not centred :/

    Screen Shot 2011-09-19 at 00.39.28.png
     
  14. Cezz

    Cezz Well-Known Member

    You need to set a width on your centermypage class otherwise it will assume 100% width!
     
  15. HoddzDJ

    HoddzDJ Active Member

    How would I go about setting the width of the container but still allowing that black bar and grey bottom border to continue and be full 100% width?
     
  16. HoddzDJ

    HoddzDJ Active Member

  17. HoddzDJ

    HoddzDJ Active Member

    I have managed to get it exactly how I want it except for one thing, it seems to be setting the full width to more than 100% as there is a scrollbar along the bottom. Anyone got any ideas? http://www.pukkaradio.net/new/ :S
     
  18. gldtn

    gldtn Well-Known Member

    I took a look in a rush, and I'm not sure what it is, I'll have to inspect it a little better.. I'm at work right now, so I can't do much.. if you not in a rush when I get home(around 5ish(eastern time) I can help you out with this, probably start from the beginning with the markup and that move on to CSS, that way you can understand it a bit better and go on from there.
     
  19. HoddzDJ

    HoddzDJ Active Member

    Cheers for your help fella, I should be about when you get home and hopefully we will be able to get it sorted!! Again, thanks!
     
  20. HoddzDJ

    HoddzDJ Active Member

    I have been messing around with it for a while and when I change the '#header' CSS to 'position:static' or 'position:fixed' it seems to fix the problem, but then all of my content shows over the header and then it's always at the top of the page which would be fine but you can't read it and the header is quite high.
     

Share This Page