Blog Documentation Book a Demo

adding more IDs to critical markup

unipusunipus New
edited July 2005 in Vanilla 1.0 Help
pretty please, give the individual LI's of the MenuForum IDs? if'n you did that, I'd be able to do a lot more to style them. Meaningful IDs would be super nice, such as li id="Menu-Discussions" rather than just li id="Menu1".

I'm working on a style sheet which attempts to break the mold of everything else to date, so as I come across obstacles to that, I'll let you know. I can't imagine most of them being any more complex than this.

Comments

  • unipusunipus New
    edited July 2005
    new one: wrap the "start a new discussion" text in another tag. maybe an h2? anything would suit my purposes, really, so Ill leave it to the true semantizoids to bicker it out, but mainly I want to be able to make that text go visibility: hidden; now: <a class="PanelButton StartDiscussionButton" href="post.php">Start a new discussion</a> better: <a class="PanelButton StartDiscussionButton" href="post.php"><h2>Start a new discussion</h2></a> [edit] okay, that totally does not validate. oops. <button> does, but it would cause a lot of problems for other people to have <button> as the default there I guess? or actually, it seems like it might not be so bad? Hmm, there must be some other solution where I do not have to fork the code on my site.
  • domdom
    You cannot nest <h2> inside <a> because it is a block-level element. You can however nest them the other way around.

    Semantically, I would say that link isn't really an h2, so probably a span would be the best. However, I question why you need it at all. Why not just hide the <a> tag entirely?
  • unipusunipus New
    if you hide the tag entirely then you have no link whatsoever. whereas otherwise I can do something like this: .PanelButton { width: 190px; height: 29px; display: block; margin-bottom: 10px; background: url(StartDiscussionButton.jpg) no-repeat; text-decoration: none; } .PanelButton button { visibility: hidden;} with a few tiny alterations I now have a really nice little "start a new discussion" graphic which degrades nicely. but only if the code is altered in some way. (although in this case I think the failure to validate is truly pointless semantics since the .PanelButton link defaults to a block element in the vanilla style anyway... in other words the argument about not having block-level headings inside the inline link falls apart. no?)
  • jonezyjonezy New
    i think it makes sense to mark anyhting that is unique on the page with an id... i was the only problem is that elements can be generetaed dynamically (like menu tabs) but then again any particular install would (could) know about those ahead of time.
  • domdom
    No. display: block; does not make something a block level element, it just makes it display like one. Subtle difference, but there's a method in the madness somewhere.

    Anyway, there are other ways to achieve image replacement than the way you are using. Such as: 
    .PanelButton {
  width: 190px;
  height: 29px;
  display: block;
  margin-bottom: 10px;
  background: url(StartDiscussionButton.jpg) no-repeat;
  text-decoration: none;
  <strong>text-indent: -9999px;</strong>
}
  • stuhartleystuhartley
    edited July 2005
    this has a good list of different types of image replacements
  • unipusunipus New
    well okay, that works a lot better. thanks.


    still want those IDs, though!
  • unipusunipus New
    bump? whimper? drunk?
This discussion has been closed.