Quote:
Originally Posted by Amazin-Flash
he's not very experienced thats for sure. what do you mean by "the ALIGN attribute on the <a> element is both deprecated and doesn't actually do anything"?
I assume you know what deprecated means. It means it's not part of the current HTML specification and should not be used. Many browsers still allow it, but at some point in the future they won't.
One of the goals of modern web development is to separate the content of web pages (the HTML) from the presentation and styling (the CSS). There are a range of benefits to be gained from this.
To this end, old HTML tags and attributes which specify presentation are deprecated. The purpose of the "align" attribute is to specify how text should be presented. The right way to do this is in CSS, via the "text-align" attribute.
On to part 2: what I meant by doesn't actually do anything. By default, <a> is an "inline" element. If you want to start learning HTML/CSS you should start with the difference between inline, block and inline-block elements. These are absolutely fundamental to how CSS works and nothing else will make sense until you understand them. The idea is that only block elements are supposed to act as containers for other things. "Align", or "text-align" as it would be in CSS, specifies how things
inside a container should be aligned. <a> is an inline element, therefore not a container, therefore text-align or the align attribute both have no effect whatsoever. If you want the <a> center-aligned on the page, you can do one of two things. (Note, I'm putting the styles directly on the elements for convenience, in the real world they should be separated). First, you could put the <a> inside a container. <div> is a sort of general-purpose container:
Quote:
<div style="text-align: center;">
<a href="http://www.ukbusinessforums.co.uk/forums/general-business-forum.47/">business link</a>
</div>
Note that block-level elements like div automatically expand to take up available space horizontally (but inline and inline-block elements don't). That's also what I meant when I said that his "width: 100%;" on the <ul> was superfluous at best.
The other thing you could do is tell the <a> that you want it to act like a container. The text-align will then take effect on the text it contains:
Quote:
<a style="text-align: center; display: block;" href="http://www.ukbusinessforums.co.uk/forums/general-business-forum.47/">business link</a>
There are other CSS attributes that will have no effect on inline elements, for instance "width". If you want something to have a set width, that thing you're talking about is some sort of container or box. Therefore it should be a block element.
If you're wondering what inline-block is, it's an element that looks inline from the outside, but like a block from the inside. For instance, an inline-block element will not expand horizontally into available space, because on the outside it behaves like an inline element. But the text-align attribute will work, because it appears to things inside it like it's a block.
Quote:
Originally Posted by Amazin-Flash
thank you so much man, will look into it. God this is so complicated. how did you know which line which coloum is? how can I find out?
Don't go hunting through that. The problem you're trying to solve is unlikely to be found there. Just because the validator says that your HTML/CSS is valid doesn't mean that it's going to look how you want it to look. That black background thing is likely to be found elsewhere.
Either paste the full CSS file here, or right-click the problem element in Chrome and choose Inspect Element. In the developer console, the Style tab in the top right shows which CSS rules are being applied and the Computed tab shows the final outcome of what the browser has decided the element should look like. Try looking at the "background" attributes, probably "background-color". You might have to hover over the element to see what happens in the Console then.
Last edited by ChrisV; 10-28-2014 at 08:01 PM.