HTML & CSS

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.
 
I recommend to start focussing on HTML5, as XHTML is basically shelved

"XHTML 1.0 Transitional" doctype.
 
<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>
 
You used valign="center", vertical alignment can only be top, the middle, or the bottom. center would be middle.
 
<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..
 
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.
 
</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.
 
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.
 
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.
 
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.
I made all the changes above and it still seems to display strangely and with no styling what so ever :/ Totally confused!
 
Your style sheet is showing as Chinese characters in both Firefox and Chrome.
None of your classes are being applied.

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

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.
 
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.
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!
 
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.
 
Top Bottom