div is a block element and span is an inline element so according to xhtml 1.0 validation it is not right but still several websites uses this method for styling is it all right ? or it will cause some problem please help me ?
It is not right + You never need to do this => thus never should.
Websites that do that wont be 'strict xhtml compliant' but in reality HTML like this will work just fine in any modern browser. That doesn't mean you should do it though - because theres no need to.
As of today 11th March 2014, modern browsers WILL give you problem as they render block element differently from inline element.
I encountered this incident myself, read my experience and solution: http://diophung.blogspot.sg/2014/03/web-developer-conform-to-w3c-standards.html
It's wrong, and embarrassing for not knowing such standard (your web designers will laugh at you) !
Nesting div within span may cause serious problem in firefox when you need to get the offsetTop(offsetLeft) of the span.
However this performs normal in chrome(v57.0.2987.98).
so I agree with the answer of Konerak:
"the browser will try to interpet it in their own
(unspecified/unpredictable) way. It might work out fine, it might
break. It might work now, break later. "
It all depends on the browser itself.
The specification about the offsetTop/offsetLeft is here:
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop
The following is my testing code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="margin:100px">
<span id="span-divWrapper">
<div id="div-nestedInSpan" style="border:1px solid black;">I am the div nested in span</div>
</span>
</div>
<button onclick="showDivOffsetTop()">show div offsetTop</button>
<button onclick="showSpanOffsetTop()">show span offsetTop</button>
<script type="text/javascript">
var div = document.getElementById("div-nestedInSpan");
var span = document.getElementById("span-divWrapper");
var showDivOffsetTop = function(){
alert(div.offsetTop);
}
var showSpanOffsetTop = function(){
alert(span.offsetTop);
}
</script>
</body>
</html>
Related
I am trying to find a way to make my code appear as text in HTML but in the way you see the code on here
I want my code to appear like this on the website
right now when I run the code, I got it to appear as text but it looks like this:
<h1>"this is a heading"</h1>
But I want it to look like this:
<h1>"this is a heading"</h1>
basically, I'm trying to get the code that appears on my website to look like I took a screenshot of the code editor and put it on the site
If you don't understand what I'm trying to ask please ask me and I will try to elaborate further
quick answer will be make a div, give it a specific background color, use overflow properties to make it scrollable. Use monospace font and give specific color and background color. That'll look like a screenshot you took from code editor. but it'll be scrollable and it's necessary if you have a lot of codes.
<h1><span style="background-color: #e4e6e8;">"this is a heading"</span>
</h1>
A simple inline style should be sufficient for a one off but if you wanted to repeat it then defining a class either in the <head> section or by defining the class in a stylesheet and adding a link again in the <head> section would be a better approach.
Classes can be re-used easily and if you need to make changes then you only need to change the class attributes/definition and upon reload you changes are reflected everywhere the class was used/inserted.
This is simplest way for your apparently simple need.
<h1><span style="background-color: #e4e6e8;">"this is a heading"</span></h1>
To learn more about styling HTML why not follow this link perhaps Styling HTML Elements # Tutorial Republic (Sadly no affiliation!)
I'm not sure if I understand your question but You can use the <pre>...</pre> tag to obtain code like text :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My document</title>
<script>
function escapeHTML(html){
const chars = {'<':'<','>':'>'};
let s = html;
s = s.replace(/[<>]/g, m => chars[m]);
return(s + "<br>");
}
</script>
</head>
<body>
<h1 style="font-size:1.6em">"Title"</h1>
<div style="font-size:1.4em">code</div>
<pre id="output" style="font-size:1.4em;display:inline-block;background-color:#cccccc">
Your code is written here
</pre>
<script>
let display = document.getElementById("output");
display.innerHTML = escapeHTML('<h1 style="font-size:1.6em">"Title"</h1>');
display.innerHTML += escapeHTML(' <div style="font-size:1.4em">code</div>');
display.innerHTML += escapeHTML(' <pre id="output" style="font-size:1.4em;display:inline-block;background-color:#cccccc">');
display.innerHTML += escapeHTML(' Your code is written here');
display.innerHTML += escapeHTML(' </pre>');
</script>
</body>
</html>
Is the following W3C Compliant:
<div>
<h3>Heading</h3>
This is the text for this section.
</div>
Or does the text require a container element?
<div>
<h3>Heading</h3>
<p>This is the text for this section.</p>
</div>
The first example doesn't sit right with me, but a content editor asked me and I realized I don't really know if it's okay.
Both examples are valid.
Technically in the first one, the text is inside a container, the outer <div>.
Anyway it is perfectly valid to put text directly inside the <body>, which means the following HTML document will pass validation with no errors or warnings:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>Heading</h3>
This is the text for this section.
</body>
</html>
The more relevant question is whether it is semantically correct. To put it simply, paragraph text should be surronded by a <p> tag. More generally each type of content SHOULD be written inside the semantically relevant tag.
I will advise you to use the second approach.
When you use the correct Heading Tag it helps boost your page SEO wise.
Moreover, paragraph tag, P, helps some browser to render your page in “reading mode”.
Finally, a div is a block-displayed element. This CSS code looks a bit weird: div {color: blue}. But, p { color: red; } make more sense for a lot people.
Technically, both are conforming HTML (unless you validate it against the strict HTML4.x/XHTML1.x scheme which has no connection to reality anymore). Hovewer, the second approach would be probably more convenient from the styling/scripting perspective, where it's always better to have a possibility to address any piece of content directly. The first example has an implicit paragraph, and explicit is usually better than implicit.
What is the correct way to put Header and Footer in CSS 3 ?
I am reading up on http://www.w3.org/TR/css3-gcpm/ and I would like to know if the below is the correct interpretation of how to use running elements .
Running elements has the property of being shifted from the normal "flow" of the document and headers and footers need that .
That is the significant part I am trying to achieve and , otherwise there is a string-set attribute which can be used to name a section and use it elsewhere int he page margins .
I am also curious if 3rd party implementations support them ? I know of some similar markup's in some tools but I want to know if this is what CSS is trying to mean?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Testing</title>
<style type="text/css">
div.header {position: running(header)}
div.footer {position: running(footer)}
#page{
#top-center {content: element(header)}
#bottom-center {content: element(footer)}
}
</style>
</head>
<body>
<div class="header"> HEADER </div>
<div class="footer"> FOOTER </div>
<div>
Normal Text
</div>
</body>
<html>
http://jsfiddle.net/VubtS/ - But of-course browsers won't display that since it is for paged media .
I am trying this in some HTML - PDF convertes to see how much they comply with CSS 3 but apparently none of them renders this . Is my markup correct as per the Css3 definition ?
I believe that your syntax is correct. However I am also not seeing browser support for it yet. Most of the commercial HTML to PDF tools I have looked at (Winnovation, DynamicPDF, EvoPDF, RasterEdge, wkhtmltopdf and more) use WebKit or another layout engine that does not support CSS3 Paged Media.
I think these do though ...
Prince (It uses it's own layout engine PrinceXML)
DocRaptor (It uses PrinceXML as a webservice)
RealObjects
Antenna House
Just to confirm #theChrisMarsh's answer, the syntax is correct.
I have direct experience with Flying Saucer which, although otherwise only supports CSS 2.1, includes support for CSS-3-style running elements for paged media. Browsers of course don't do anything with it because they are #media print although it might be different if you try to print (but e.g. Firefox print preview is awful as of FF 27.0).
I've always understood it that <header> should go at the top shortly after the opening of the <body> tag and <footer> should go at the bottom just before the closing of the <body> tag. Their positioning depends on how you want to lay out the site.
I've noticed that there are a couple of similar questions and answers at SO already, but let me clarify my specific question here first:
I've got lecture slides which states like this:
http://mindinscription.net/webapp/csstest/precedence.PNG
To be frank, I haven't heard of this rule of css precedence myself, and I googled to find something with similar topic but not quite like that : here
To have a test myself, I've made a test page on my own server here
After running it on FireFox 3.6.3, I am sure it does not show the way as it should be, according to the statement in lecture slides:
imported stylesheet ? am I doing it wrong? I cannot see its effect using FireBug
it says that embedded stylesheet has a higher precedence over linked/imported stylesheets, however, it doesn't work, if I put the linked/imported tag AFTER that.
inline style vs html attributes ? I've got an image where I firstly set its inline style to control the width and height, then use direct html attributes width/height to try modifying that, but failed...
Below is the source code :
<html>
<head>
<style type="text/css">
#target
{
border : 2px solid green;
color : green;
}
</style>
<link rel="stylesheet" href="./linked.css" type="text/css" media="screen" />
</head>
<body>
<div id="target">A targeted div tag on page.</div>
<img src="cat.jpg" alt="" style="width : 102px; height : 110px;" width="204px" height="220px" />
</body>
</html>
Can any experienced CSS guys help me figure out if the slide is correct or not?
Frankly speaking, I am puzzled myself, as I can clearly see some other "incorrect" statements here and there amongst the slides, such as JavaScript is on client-side (how about server-side JavaScript?) and "Embedded styles are in the head section of a web page
"(what the heck? I am not allowed to put it inside the body tag?)
Sorry about this silly question, the exam is on TOMORROW, and I now see a lot of things to think about :)
First, with imported stylesheets they mean stylesheets embedded using the #import rule.
Second, a few lines below that explanation in the CSS 2.1 spec there's an explanation of the cascading order. Other parts of the spec might be useful for your exam, too. Good luck.
Update: A bit of googling resulted in:
http://www.blooberry.com/indexdot/css/topics/cascade.htm
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
http://www.boogiejack.com/CSS_4.html
http://www.communitymx.com/content/article.cfm?page=2&cid=2795D
etc.
The properties by <style></style> are being reassigned by the selector in linked.css.
There is no element with id="div" for imported.css.
When you set an html element to have display: none, the content inside that element (e.g. images and flash) wont be loaded by Firefox until the element is set to be displayed.
But Internet Explorer dont behave like that. It loads everything inside hidden elements from start.
Is there a way to prevent IE from loading such content without using javascript?
Don't insert any content into that element? Only load it using ajax when the user makes is visible.
As my question regarded a solution not using javascript, I'll answer my own question and just say there is no way so far to prevent IE from loading external files that are part of hidden content.
As the other answers suggest it, there are ways to avoid the problem, but not to solve it. So the answer to my specific question is "NO".
Actually if you set the visibility to hidden, ie won't load it.
Here is an example of what ZippyV is talking about (with a twist)... copy and paste the code below into a new file with an HTML extension and run it!
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>This is the title</h1>
<p>This is a paragraph</p>
<div id="hidden-content"></div>
<p>Another paragraph</p>
<input type="button" id="add-content" value="Add Hidden Content" />
<script type="text/javascript">
$(document).ready(function() {
$("#add-content").click(
function() {
var info = unescape('%53%68%68%68%2E%2E%2E%20%73%65%63%72%65%74%20%69%6E%66%6F%72%6D%61%74%69%6F%6E');
$("#hidden-content").html(info);
}
);
});
</script>
</body>
</html>
The twist is that the hidden content to be displayed is first escaped (using the Javascript escape() function). Also, you can place the javascript in a separate file!
display: none should be hiding the element contents from ie as well as any other browsers.
Did you close all the tags?
function hide_show_content(el_ID){
//try <element hidden> property NOT IExplorer
try{el_ID.hidden = ((el_ID.hidden) ? false : true);}catch(_e){}
//try style=display:none for IExplorer
try{
if(el_ID.style.display==""){return;}
el_ID.style.display = ((el_ID.style.display=="none") ? "inherit" : "none");
}catch(_e){}
}
<span id="text#1" style="display:none;" hidden>TEXT TO BE HIDDEN or SHOWN laiter.</span>
Click to show TEXT