html
<div id="mydiv"></div>
I want to add HTML code into this div (see following result I want) using ONLY CSS
<div id="mydiv">Lorem</div>
I think :after and :before are not helpful here!
CSS is not HTML. It is not possible to achieve that as CSS is not a markup language.
Just to add you can add content but not the element using :before or :after pseudo-element. Refer the specs
You shouldn't do this for many reasons.
Firstly its just wrong.
Secondly it is not possible.
Css is not for markup html is.
and I dont even understand why you would want to do this at all.
You can use content (just for text) in a couple of browsers but it's a really bad idea. Please solve this differently e.g. with Javascript, you'll need to for HTML anyway.
Related
I'd like to show a title with the first three characters in different color.
I know this can be done with <h2><span>The</span> awsome title</h2> but I was wondering if there is some kind of "nth-child" property that can be applied to characters inside an element.
I'd like to avoid breaking the text by inserting other elements ( etc.)
A (relatively) crossbrowser solution would be welcome.
There is no cleaner way than what you already have.
<h2><span>The</span> awesome title</h2>
With CSS:
h2 {
color: red
}
h2 span {
color: blue
}
There's :first-letter and :first-line, but no :first-word.
I imagine the reason for this is that it's hard to define exactly what a "word" should be.
The only way to do it without changing your markup is to use JavaScript to enclose the first word with a <span> (and style it the same way), but I would only recommend that if the rest of your site already heavily relies on JavaScript to function.
Yep, JavaScript is the only way I can think of (as everyone else has already said!). Demo here.
$(function() {
$('h2').each(function(){
$(this).html( $(this).text().replace(/(^\w{3})/,'<span>$1</span>'));
});
});
This isn't possible with the current CSS operators you are talking about nth-whatever,
This could however be done with JavaScript... if of course you want to go down that route, the best way to do it would be with <span> tags as then you will have no problems with people who have disabled JS.
It is entirely up to you, but if I were in your position I would just man up and use JS, it is called progressive enhancement and unobtrusive JS, as long as the content is not wrecked if the user disables JS it is acceptable, see here:
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
Sadly, there isn't a way to do this with stylesheets. CSS3 provides us with first-letter and first-line, but not first-word, and certainly not first-n-letters.
See also the answers to this question for more: CSS to increase size of first word
JQuery does implement a first-word selector, so if you're prepared to go with the Javascript option, you may be able to do it.
Heh. It seems that JQuery doesn't actually implement it after all. I must have been using a plugin when I saw it.
But here's a link to a Javascript solution that might help: http://www.dynamicsitesolutions.com/javascript/first-word-selector/
Sometimes, I found too many people like to insert a <span> tag in a <button> tag. Sometimes, they place two <span> tags. I want to know, why do they do this?
CSS is supposed to allow separation between content and style. Unluckily, when you need a complex design you often need to alter your HTML markup so you can apply the necessary CSS rules.
I've seen this with <div>. That's done for styling (double borders), but it's also done to handle IE bugs (box-border model bug).
Is there an app out there that will take a .css file and output a demo page of it?
Like take all the span/div/a elements and display what they would look like in an html page?
... without an associated (X)HTML file?
If what you need to do involves CSS with no knowledge of its associated (X)HTML document's structure or classes or ids... then isn't it simple enough to just write up a small page and preview it in a browser?
Not to offend, but personally I think previewing CSS without an (X)HTML document is a little strange. A few reasons:
If you start with CSS you may try to make your HTML cater to your CSS when it should be the other way around.
Starting with the CSS and then writing your page feels like a good way to end up with messy HTML, and if I have to choose between (messy HTML and clean CSS) or (clean HTML and messy CSS) I personally would choose the clean HTML every time.
You also mention targeting <div> and <span>. This is a personal opinion, but I feel pretty strongly that people shouldn't target <div> and <span> without class or id attributes. Since <div> and <span> don't have semantic meaning, I just can't imagine why you'd need to style them unless you were either CSS resetting or fullfilling a requirement, and is your customer more likely to ask for "all employee names should be underlined" or "spans should be underlined"?
... but once you're targeting class and id, you need your HTML document to go with your CSS.
While this will not autogenerate anything from your css, this is an excellent XHTML test page that includes all of the standard tags, page, and form elements you are likely to have used. Apply your style sheet to this page and you will be 80% of the way there. Then just add areas for your custom classes, etc. http://snipplr.com/view/8121/html-test-page-for-css-style-guide
TopStyle does that with an internal view. It is an excellent tool.
http://www.topstyle4.com/
Try rendur: http://rendur.com/
I agree with Richard that you shouldn't expect much if you're styling raw div and span elements. :)
Here's my page
It looks correct in Firefox, but of course in Internet Explorer, there's an issue.
The main body of the page is not displaying correctly. The left and right divs are not showing the white background that I'm trying to get them to.
Your HTML appears to be broken. For example <div id="mainbody" is not closed. Run it through a validator and fix all the markup problems.
Try separating your shortcut for background in your #left id in css. IE may not be parsing it correctly.
The #right div looks OK (I'm using IE7).
You need to change <div id="mainbody" to <div id="mainbody"> as i told you earlier.
Use the W3C validator: [Invalid] Markup Validation of modastudio.com/docs_new/bostondentalposters.shtml - W3C Markup Validator.
You've got a bad doctype that will throw IE into quirks mode, as well as missing tags, double charset calls (that should be UTF instead of 8859), duplicated meta tags, etc.....
You're also nesting tables and lists inside of paragraph tags which is invalid markup for the doctype you're using. A handful of the meta tags are not closed correctly along with capitalization of attributes which are also not allowed with the selected doctype. The stylesheet link tag is not closed correctly. The images tags in the table are not close correctly nor are the break tags.
Fix the html errors first and then see where you're at with your layout.
Good luck and hope this helps some.
Maybe not really an answer to your question, but since you seem to develop in Firefox, you might want to try the HTML Validator extension. Makes this kind of development a lot easier.
I am wanting to implement Thickbox, which I have done a number of times.
My issue is that I am doing some jQuery like:
$('#txtData').load('aerialProductListing.inc');
and when this happens, the CSS is lost.
How can I get the stylesheet recognized again? or can i do something inline to work around?
Edit: txtData is simple:
<div id='txtData'><p></p></div>
aerialproductListing.inc is simple HTML and PHP, nothing fancy and to long to post, but the Thickbox piece isL
US Tip Chart
If a <style type="text/css"></style> element is declared inside the #txtData element, it will be gone after $('#txtData').load(...).