I think I'm pretty good at using semantic markup on my pages but I still have a handful of classes like this:
/**** Aligns ****/
.right_align { text-align: right; }
.left_align { text-align: left; }
.center_align { text-align: center; }
Which, technically, is a no-no. But when you just want to position some text in a table, how crazy am I supposed to get with the semantic markup?
Why do you want to align the text?
The answer to the question is the name of the id or class you need to have for your selector. Do you want to align it right because it's a price?
table .price {
text-align: right
}
Just ask yourself why do you want to apply a particular style, and all will become clear.
I probably overdid it, but my last work project was pretty close 100% semantic- anything I needed which was not semantic (say, a filler div which I could not do without for a layout requirement), I added dynamically using jQuery.
If you want tight coupling between the table cells and the alignment, you could just assign the attribute style="text-align:right" directly on the tag. There is no reason to go the extra level of indirection through a class if you dont use it for a level of abstraction anyway.
I try to consider why I want a column right aligned in a table. For example, if the column contains currency amounts then I would use a style named currency instead of right_align.
Semantic markup is an admirable goal, but in the real world, you sometimes have to make compromises. In some cases, the only sensible way to do something is to break semantics and just throw in a right_align.
Edit: People seem to be misunderstanding my point in this. You should use semantic markup where possible. However, there are cases where it really is just a stylistic choice and there is nothing inherent to the data that you can use to describe or classify it. This is most typically true with large sections of tabular data, especially if it is dynamically generated.
I've had cases where clients want to be able to dynamically control what columns appear in data grid. There's no way to know ahead of time what type of data they're going to choose to show. If they want a way to center or right align a dynamically generated column, it's better to have center and right align classes available for them to use than to have them sticking style attributes everywhere.
100% semantic markup is a silly goal. Your graphic designer will say, "Let's right align this", and the reason will be "because it looks good that way". What are you supposed to do, add a class of "looksgoodthatway" to the div? Just right align it and get on with your life! :)
From experience, for usability reasons you should keep tokens on as many lines as possible.
I use the following notation
matcher,¶
matcher¶
{¶
··attribute:·property;¶
}¶
Why you ask? This solves many problems with collisions, as it reduces the number of places 2 unrelated changes can occur in 2 different places at once ( which causes the collision ), and when the collision does occur, its much easier to see what caused it and chose the correct solution.
This is because SCM's DIFF is row oriented, and if you have all your content on 1 row, you get 2 choices, hose one complete set, or hose the other.
Also, that particular style I find, if adhered to, makes it easy to write lint checking code that detects errors in your CSS.
For insance, spot the typos:
matcher
matcher,
{
attribute property
attribute
}
In this case, code that simply checks for whitespace and delimiter conformance also detects coding mistakes!.
Related
Hello so if some variable exists (token within) I want to change 2 divs order - turn them other way around, from controller.
I found way to do this with ng-repeat directive but I don't really want to use ng-repeat in this case because I already have many ng-repeats in this two divs and I think it may cause some problems, maybe even longer loading.
Is there any other way to change divs order from controller? Maybe I can just add some classes to elements whenever variable exists or not, if I remember good I can change elements order with flexbox help.
Could you guys show me path how to accomplish this task? I would be grateful
if you provide some little demo.
Nobody answered my question which I already have found solution for. Someone in comment section said that I should use ng-repeat because it's good solution but I could not really figure out how to use it and keep tone of html content inside those 2 divs. I don't want to bind all of it from controller, do I?
So what I did instead is wrap this 2 divs inside another div with display: flex and then used ng-class directive on this 2 divs inside new container to dynamically add classes with this rules:
1st div
.flex-container--child_1 {
order:2;
}
2nd div
.flex-container--child_2 {
order:1;
}
The ng-class add this two classes to divs whenever some variable exist like I wanted.
<div ng-class="{'flex-container--child_1': authentication.isAuth}">...</div>
I wrote this post if somebody ever came across same problem and find this question on SO.
How do I completely remove the sidebar from MediaWiki, and I mean in the sense that the content div occupies 100% of the width of the browser space? I've successfully implemented an extension where non-registered users do not have a sidebar or toolbox to begin with and hence the extra space now seems rather superfluous in such cases.
I'm trying to create my own skin from Vector and have tried so far to change the margin-left: 10em and corresponding tags in div#content and mw-panel in the skin's css file but no luck so far.
Why use CSS when you can edit the sidebar menu and have this stored in the database
Navigate to MediaWiki:Sidebar edit the page and remove the components you don't need
If you want to use CSS then you can try,
#sidebar{
display:none;
}
to see if it gives you the desired effect.
Or you can do what dreamweiver said and use JQuery
$('#side-bar').remove()
If, as you are writing, you are creating your own skin, then you simply do not have to print the sidebar! It is there because you have a piece of code in your skin printing it.
Search your skin code for $this->data['sidebar'], and you will find the loop that prints the sidebar.
However, I'm guessing that you skin has some kind of navigation,and rather than reinventing the wheel, I would recommend using the sidebar, with it's built-in functionality (possible to set from MediaWiki:Sidebar, etc), even if you chose to use it in another fashion. it doesn't have to be printed as a sidebar,just because that's the name -- it could be a top menu, a dropdown, ...
I am trying to be semantically correct here in my web pages, but not sure how to proceed:
My data looks like this or needs to:
Name: lastname, first mi Address: 123 Main St. City, State, Zip: more...
Fieldx: data1 Fieldy: more data...
What I dont' want is the regular table data look with column headers across the top:
name Address
lastname, first mi Some address...
I'm not sure what to look up to do this. When i looked up tableless CSS, I only find forms and layouts.
Am I wrong here to thing I should be using the form layouts with CSS (and no tables)...it's just not a "form"?
edit: do I just put everything inside a div and then in spans with float right?
I think DIVs are the way to go. DIVs give you much better flexibility when combined with CSS.
What you have is structurally a list of name/value pairs, which corresponds to a two-column table. It could also be marked up as a dl element, if we take the liberal modern interpretation that dl is not really a definition list but a description list, which in turn is effectively a list of name/value pairs. And it could also be marked up as a ul element where each li element contains two span elements (with classes), but then you lose the array-like idea in the structure. Finally, you could use some div or p container, containing span elements with alternating classes.
All of this has little to do with semantics (meaning). Rather, it is about structure. Instead of considering which of the approaches is more “correct”, consider which is most comfortable in styling (and possibly in processing, e.g. in client-side scripting). If you want tabular layout, using a table is natural. (Somewhat amusingly, if you don’t want such layout, then you probably should not use a table, because old versions of IE don’t let you style a table element in a non-tabular way.)
If you intend to have the data as inline text as in your example, then I would use
<div class=foo>
<span class=name>Name</span> <span class=value>lastname, first mi</span>
<span class=name>Address</span> <span class=value>123 Main St. </span>
...
</div>
This is a bit verbose markup, but it can be styled easily, since div and span have no default styling (except that div implies line breaks before and after), and you can conveniently use class selectors.
Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/
Is there a way to stop a label control that is not visible from taking up space on a form?
server side:
label.Attributes["style"] = "display:none";
or
label.Visible = false;
or, client-side (css):
#label-id { display: none; }
Set it's visibility to hidden through CSS. Or set it through the code behind to false. From the code behind a false setting should cause it to not be rendered at all.
Optionally, replace the label with a literal control and only emit something to it when you need to.
2 good answers already, so just a couple of notes:
Using Visible=false at the server-side is usually better since that will not output any HTML at all, as opposed to CSS which will output it but just hide it. Unless of course you need it there so you can unhide client-side.
The label itself usually doesn't add any space, it is the white-space before/after it that might, so yet another option (if you work in HTML source view 99% of the time like I do) is to remove any white-space before/after the control. Not as robust as the other options since it could be easy to get that white-space back by mistake (especially if the IDE does it for you while working in design view). Just thought I'd mention it, since this can be good to know if you want the label VISIBLE but don't want the "extra space".