How can you collapse div and p -elements if they are empty by CSS such that the tags are not shown for the user in the source code?
These elements are in my source code although they are empty.
This causes bugs with the rest of the site.
I run this unsuccessfully
div.unsuccessful,
div.unsuccessful p {
visibility: collapse;
}
This suggests me that you apparently cannot do such a thing by CSS.
Perhaps, other tool such as PHP is needed.
CSS has no influence on the actual HTML code, so this cannot be done. In the (upcoming) CSS3, you could stop them from being rendered using the :empty pseudo-class:
div:empty {
display: none;
}
That is of course not the same thing, but it would probably fix the problems you're having.. if only browsers actually supported it, which they don't, yet.
The best option is to remove them at the server, using a scripting language like PHP. I suppose you could do it client-side with JavaScript, but that's a horrible solution, imo.
That being said, what problems are you having with these empty tags? Why are they there in the first place? It seems to me that some redesign is in order, to prevent the unnecessary tags from being generated in the first place.
Also, be careful. Empty tags are not always meaningless. In fact, removing every empty <div> out there can be considered harmful.
Yes, if you want to stop them being in the source, you'll need to make the appropriate considerations in your server code. Alternatively, you can also set the HTML in JavaScript, but it's not the recommended approach for this problem, probably. You may like to say a bit more though, about what you're trying to do.
Visibility property is intended to set whether the content of the object is displayed or not. It won't remove the element from inside the DOM.
collapse New for Windows Internet
Explorer 8
Used in tables to remove rows and columns; for all other elements, same as hidden.
Also why do you want to do this?
div { display: none; }
removes an element completely from the page.
It'll still show up in your source code, no matter what you do with CSS. The browser combines the HTML source and the CSS directives into a displayable page, the original source is not modified. CSS can only influence the visual display of elements, it can not alter elements. To actually remove elements from the DOM you'll need Javascript (or not put the elements there in the first place).
Yes, you will have to use server side processing to show or not-show some code to the user:
if ($showAdminLink) {
echo "<p>Admin panel</p>";
}
No matter what tricks you try, anything done on the client side (HTML, Javascript, CSS) can be altered and played with.
Related
My professor asked us to develop a website using pure HTML,
JUST HTML. And it's really hard to design without CSS but I have to follow her instructions.
Anyway, my question is do you consider this code as CSS even if I removed the type="text/css"?
<style>
a {color:white; }
</style>
This maybe a dumb question but thanks for your time to answer it, I just really want to use CSS to make it easier.
Could you suggest anything that would make my coding easier? I just don't want to have repetitive code.
You are having this snippet,
a {
color:white;
}
is an element selector with the color property, whatever you write, i.e, between <style> tag, or style attribute, or stylesheet, all are CSS, if your professor is vintage fan, and is asking you to assign the color to a than you can use the font tag with color attribute with a value of white
<font color="white">Hello</font>
Demo
Note: Please read the box on the Mozilla Developer Network which says
SO DON'T USE IT
And just incase your professor understands, and his mind comes back to 2014... than would like to point out that even using
a {
color: white;
}
will target all the a elements in your document, so make sure you use a class or a specific selector to select particular a element.
Anyway, my question is do you consider this code as CSS even if I removed the type="text/css"?
CSS is CSS, not matter how it is added to the document or labeled.
it's really hard to design without CSS but I have to follow her instructions.
Could you suggest anything that would make my coding easier?
I'd start by clarifying if CSS really is forbidden and, if it is, what the purpose of forbidding it is. I can think of a number of possible reasons:
To prepare you to deal with code written by someone from 1996
To make you focus on the structure and semantics instead of the appearance
The course you are taking is almost two decades out of date
How you deal with the problem depends on which of those is the reason.
If it is the first one, then you need to look at all the obsolete, deprecated (and possibly non-standard too) presentational features of HTML (like <font> and background attributes).
If it is the second one, you just don't worry about how it looks and deal with the structure and the semantics. Let the browser's default stylesheet control the way it looks.
If it is the third one, then you probably have little option but to grit your teeth and bare it or find a better course.
<style>
a {color:white; }
</style>
Yes you write type="text/css" or not it will be considered as css.
The content of a style element is CSS, for most practical purposes (it would hardly make sense to use anything else there, since no other style sheet language is supported by browsers). The attribute type="text/css" does not change this, because the de facto default style sheet language is CSS.
On the other hand, the style element, including its content, is HTML. The content is not defined in HTML but in other specifications. Similar considerations apply to style attributes, as in <a style="color: white">...</a>: the attributes are HTML, and but they contain embedded CSS.
When you are told to use “pure HTML, JUST HTML”, then you are probably expected to refrain from using CSS or JavaScript in any way. On the other hand, you are probably allowed to use images, even though images are not HTML but are used via external references or data: URLs. There is nothing particularly logical in such a requirement.
As suggested in other answers, simply do not try to control the rendering of the page. Worry about the rendering only if it becomes intolerably messy and there is a reasonable way to prevent that in “pure HTML”. For example, don’t try to set link colors (this would in fact be an improvement over the way most web pages deal with links), backgrounds, fonts, etc. But if you use e.g. a data table, consider using , which often makes a table essentially more readable.
Yes, you can:
and too you can put style inline in your body or header
<style>
a{
color: #ffffff;
}
</style>
and so, all your css you can write it in your native .html without use of another .css file
Just got a new webpage with css for a fancy box popup from the design team;
And they don't know or don't care to look for existing classes and ids;
I need a working solution without any IFRAME
The problem is that there are already over 20.000 css lines in the main css file, and at some point something will get overwritten and the entire website will do a big BANG!
This new webpage has very common class and id names, and I am talking about almost 100 tags with css properties;
I want to know if there is a method to encapsulate this new css properties and the future ones;
And if there is a way to do this, how can it be done?
With this webpage I got lucky, I pasted the tags with content and just before this, I used the style type"text/css' tag; But i will not always be lucky;
Just because we get webpages with css code written by different people, it does not seam fair to me to create new css classes if some of the properties or names or ids intersect with each other.
I now have about 10 classes for the a tag and im most part, the properties are the same;
Use targeted rules and let the cascade take care of it for you. Put your popup in a wrapper with as detailed of a name as you like.
<div id="myPopupDivWithCommonIds">
<!-- rest of popup -->
</div>
And target your css rules to that div.
#myPopupDivWithCommonIds .error { color: bright-pink; }
#myPopupDivWithCommonIds #main { width: 93.21%; }
Etc. etc. This takes care of the css rules and prevents your new stuff from overflowing. You will have to take care to make sure none of the other rules trickle down; the best way for that is to judiciously overwrite any properties that are defined (what Pekka said). You could also go nuclear on it and include a custom 'reboot' or 'bootstrap' stylesheet and again re-target all of its rules to your new popup div (like you said, it's difficult for 20k lines of css; but including another file with the resets rules targeted to your div by appending the #id selector as above helps a little).
Oh, and that still doesn't address the problem of repeated ids technically being invalid markup and very likely to interfere with any JavaScript you're trying to run on that page.
If this sounds like a mess, well, it is. Your developers and designers have got it to that point and short of a serious refactoring, you're not going to get back to a clean solution. An iFrame may seem like a hack or impossible for your use case, but it really would clean up a lot of your correctly foreseen problems.
I tried to find an answer but nothing...
I have a small application that loads in to other websites inside a div tag. This div has a specific id like -> "myAppHere"
Now, all the html is inside this div, but as I can see my elements are affected by each site own css rules.
Is there a way to cancel all the other sites css rules?
something like:
#myAppHere *{
padding: 0;
margin: 0;
etc....
}
because the above sample code doesn't work well.
You cannot simply add:
#myAppHere * {
...
}
cause general rules are overwritten by more specyfic rules. You didn't say in what way app is loaded in that div(is it inner frame, plain HTML etc.) so it's hard to find a solution.
What you can do(assuming it's just extra HTML added to your #myAppHere element) is to check CSS styles set to each element(using e.g. Firebug) and write your on rules in your CSS file, which are more specyfic.
That's a scary requirement you have there.
You can try adding !important to the css rules, like so:
#myAppHere *{
padding: 0 !important;
margin: 0 !important;
etc....
}
but even this won't override some elements that have a style attribute with !important in the rules, such as when this happens:
<div id="myAppHere">
<div style="margin: 20px !important;">Hello</div>
</div>
You may be able to go into the other website's source with javascript, and strip out all style and class attributes... that's probably the only way to be sure. Something like this, if you're using jquery with your javascript:
$("#myAppHere *").removeAttr("style");
$("#myAppHere *").removeAttr("class");
Careful about removing those class attributes though, because it means that if you want to style it yourself, you won't have any classes to work with. You could add new classes in afterwards with more javascript though.
If you insert a complete HTML document inside a div element, the result has invalid markup in a manner that seriously messes things up. In particular, if the inner document has any style element, it will in practice be taken as applying to the page as a whole.
The solution is to stop doing that (and first consider whether you can legally do such things at all – it would normally constitute copyright violation). Technically, you would need to remove or rewrite much of the content of the document being embedded (there is no simple way to deal with CSS code in them or linked from them, for example), or to use an iframe element (or frame or object element) to embed a page as “autonomous” (so it will be displayed in an independent sub-window).
First of all, I've seen this question IE Compatibility issue, but I have a slightly different issue:
I have a span with display: block and I want to put a H2 tag inside it. Will this look good in every (major) browser?
The answer on the previously stated link, was to make the H2 display:inline, which I don't want, and also I don't want to replace the span with a div, because I would have to change a lot of CSS.
PS. I don't want my HTML to validate (using the validator), I just want it to work.
When you say "I don't want my HTML to validate (using the validator), I just want it to work." You're making a very big mistake. If HTML doesn't validate, there's no telling what might happen. The standards are there for a reason.
Replace the span with a div, you don't need display block on the div as it has this by default. A span is an inline level element, whereas an H2 is block level. An inline element cannot contain a block level element (true up to HTML5, where you can wrap block level elements in anchors)
This will validate, and will work!
It works on current browsers (including old versions), and it is unlikely that this will change. Errors like this are common enough to make it rather pointless to browser vendors to change their error recovery mechanisms. HTML5 is about to make the error recovery rules mandatory.
On the other hand, what is the point of using span with display: block, instead of using div? And CSS should be written so that it does not depend on specific choices of markup elements where different choices could make sense; for example, as a rule, .foo is a better selector than span.foo.
Any extensive change to markup or style sheets has a nonnegligible risk of causing problems even when the change is a such an improvement and a simple one. (For example, a global search and replace often does too much, or misses something.) This could be a reason for continuing the use of invalid markup, in cases where it has minimal risk in practice.
we can solve IE second line problem first
h2{}
h2 span{ float:right;}
Correct way in all browsers
<h2><span>sub content</span> Heading</h2>
wrong way ie browser
<h2>Heading<span>sub content</span></h2>
I've been looking through various websites and came across multiple ways to make "buttons". What are the pros and cons to each way?
<div class='btn'><a>Click Me!</a></div>
<span class='btn'><a>Click Me!</a></span>
<a class='btn'>Click Me!</a>
CSS:
.btn{
display:inline-block;
min-width:100px;
text-decoration:none;
cursor: pointer;
}
Those are all three the exact same thing. They're all just a link, the only difference is that parent class is used as a selector target. They are effectively identical.
There is one differences between the first and second 2, though. a div, by default, is a block element while a span and an a tag are both inline, thus a dive fills up the entire width of the container, but that can be changed with css (as your example does).
Why not just, I don't know.. call me crazy.. but why not just use an actual button?
The only reason I can think of to NOT use a button is if you want the links to be search spider visible. If you're going to use javascript to post a form, then i suggest using a button instead.
I recommend reading this article by Chris Coyer. It's titled "When (and when not to) use an anchor tag?".
Here's an excerpt:
I think if you are going to put a href attribute on the anchor that
actually does something even if JavaScript is disabled, then the
anchor is the right choice. If the app is totally JavaScript dependent
all behavior is attached via JavaScript, I guess it doesn't really
matter what element you use. Maybe it's even better not to use an
anchor since the behavior probably bears no resemblance to what anchor
links do. You could probably talk me out of that though. The thing is,
anchors give you ("for free") lots of the visual functionality that
you want with deep browser support. So...
I'm not sure about the a tag (more info here), but the span tag is inline and the div tag isn't. Otherwise they're all pretty much the same.
the <div> and the <span> must have an action using javascript but the <a> can have a link to another page without using java script code
If you are using a form submit i prefer to use a input button. As it doesn't need further Javascript code to submit a form.
The difference between span and div is that div is a container element whereas span is not. How this is helpful to you? Check out his link.
If you dont want to apply any style and if you are okay in writing (or) if its a simple get request to server (or) if you are willing to write some javascript event handlers then go with anchor tags
I think the best method is the third one because you use only one DOM element instead of two. This will improve the performance and will make your code more semantically because you are not creating empty DOM elements for styling.
In addition, with the example 1 and 2 if the anchor is smaller than 100px the clickable zone will be smaller than the example 3.