Hi,

I'm fairly new to web design and, although I have a reasonable grounding in some aspects, there are areas which I'm still attempting to get to grips with.

I'm in the process of creating a home page for my site using CSS3 and HTML5 (based on HTML5 Boilerplate) and am still in the early stages.

I have hit a problem where the <p> tags in a floated sidebar seem to be inheriting their formatting from an <article> element that, as far as I can tell, shouldn't be related to it.

I'd grateful if someone could have a look at the page and let me know where I'm going wrong?

Many thanks.

2 answers

1
point
This was chosen as the best answer

This is what you have in your CSS:

#sidebar h1, p {
    text-align: left;
}
#homeinfo h1, p {
    margin-bottom: 1em;
    text-align: center;
}

You're giving a text-align to the p tag twice in your CSS. The CSS from the second instance is text-align center so this is what will display. You need to be more specific for your sidebar style if you want that to take precedence or put it last in your CSS. Try this:

#sidebar h1, #sidebar p {
    text-align: left;
}
#homeinfo h1, #homeinfo p {
    margin-bottom: 1em;
    text-align: center;
}
Answered almost 6 years ago by Artistic Abode
  • That worked perfectly and I understand now why it was happening. Thanks for your help :) Rogue Wolf almost 6 years ago
Andy Ford 533
2
points

Take a look at your CSS selectors:

#sidebar h1, p  {...}

Basically this means: "Any H1 inside an element with an ID of 'sidebar'. And ANY Paragraph (p) anywhere in the document. It is the equivalent of doing:

#sidebar { /* some styles */ }
p { /* same styles as above */ }

My guess is you probably meant to use:

#sidebar h1, #sidebar p {...}

and

#homeinfo h1, #homeinfo p {...}

You may find that it helps to put multiple comma-separated selectors each on their own line so you can see at a glance the full meaning of each selector. For example:

#example h1,
#example p,
#example ul {
  /* some styles */
}
Answered almost 6 years ago by Andy Ford
  • I started to answer this and then stepped away to have breakfast and Artistic Abode answered quite nicely. Andy Ford almost 6 years ago
  • Thanks Andy; it's pretty obvious now that you have both pointed it out but it certainly had me stumped until you did! Rogue Wolf almost 6 years ago