I've just been teaching my self HTML & CSS and I'm running into my first annoying bug.
Here is my code:
http://pastebin.com/Rk6TjqKZ
It's the only image I have on it so far, and it used to appear, but ever since adding a class to the
I also need help positioning my buttons.
You have the source of the image as
imgur.com/xNiamwg
but this is a web page - you need the source to be the actual image itself:
http://i.imgur.com/xNiamwg.png
(note the PNG extension - not all images have an extension, as it isn't strictly necessary, but they usually do.)
Additionally, you have a semicolon after your source attribute - attributes should only be separated by whitespace.
An example of working code:
<img src="http://i.imgur.com/xNiamwg.png" title="Hosted by imgur.com" />
Related
I'm trying to resolve an issue whereby a HTML element uses a Javascript variable to define the image it should display, but errors on load. Have a look at this line:
<img src="../../Images/{{variableData.data.canEdit}}.png" />
This currently works great, except under the browser's console, it is displaying an error to say that it cannot find the literal string "{{variableData.data.canEdit}}.png". I assume this is because AngularJS is loaded after the HTML elements are rendered by the browser.
How can I work around this?
I did try using the following Angular statement on the element like so:
ng-if="typeof(variableData.data)!=='undefined'"
But I imagine this makes no difference and the browser will still display a not found error message for the .png image.
The page all functions correctly, I just don't want those error messages in the browser's console.
Any ideas?
Many thanks
ng-if="variableData.data"
this should work fine
Change
src="<img src="../../Images/{{variableData.data.canEdit}}.png" />"
to
ng-src="<img src="../../Images/{{variableData.data.canEdit}}.png" />"
This makes sure it doesn't attempt to load until runtime of the javascript.
Changing the ng-if to just the variable (ng-if="variableData.data.canEdit") will make sure the element is loaded after the variable.
You have to put just variable like this
ng-if="variableData.data.canEdit"
Thanks to #PierreEmmanuelLallemant for answering this one in the comments.
The solution was to use ng-src within the img element, and then wrap the img element within a div and use an ng-if. Like so:
<div ng-if="variableData.data.canEdit"><img ng-src="../../Images/{{variableData.data.canEdit}}.png" /></div>
Using ng-src ensures that when Angular loads it sets the source attribute. Wrapping the img inside a div with ng-if makes sure that anything inside the div is not rendered until variableData.data.canEdit is defined.
Many thanks
I've build a page with a form and for some reason my button for the form and my footer element is not showing up on the page.
I have added a link so you can check out my code. And I know its a HOT MESS! so if you can give me any tips on the css and html please feel free to let me know.
http://jsfiddle.net/jeramiewinchell/j6n0w1tj/
enter code here
Fair point in the edit. I said it was a mess without giving anything positive.
Here are some tips that could improve the HTML (with links for reference):
You should specify a doctype (e.g.: <!doctype html>) instead of having an empty <!DOCTYPE> tag.
http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
It would be nice to have a <html> wrapping everything, and a <head> wrapping the title and links. I'm not clear if it's technically valid not to have them (the W3C HTML validator will not validate a page without a <head> although it will validate without the <html>), but it's nice and it will help keep things organized.
The links should have a type indicating the mime type (in this case type="text/css").
http://www.w3schools.com/tags/tag_link.asp
Closing empty elements (e.g.: img, link, input) is not mandatory in HTML5, but it is in XHTML. Depending on the doctype that you choose, you should close them accordingly. Using /> at the end is valid for both HTML5 and XHTML, so you may want to consider it.
http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
Don't nest <p> tags. Paragraphs are block elements that should contain only phrasing content (= not block/paragraph elements). How to fix it: replace <p class="site_section1"> with a <div class="site_section1">.
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Always close the block tags that you open. For example, you never close the <p class="site_section1"> (altough as I said in the previous point, you should making it a <div>... and then close it). The result in the browser may be unpredictable.
I mentioned in my comment above (sorry, I don't know the name in English), you should avoid crossed tags/nesting of tags. This is incorrect: <label>...<select></label>...</select>, it should be <label>...</label><select>...</select>.
Again, not mandatory but it could be nice to set a value attribute in the <option> tags. If you don't specify a value, the value sent will be the content inside between the <option> tags (that may be what you want in this case).
Don't forget all the code and to close the tags correctly! Things like this: <button type="submit">Save</buttons </div> can have disastrous results (although it looks more of a typo to me).
Don't close tags twice (e.g.: you have </body> twice)
And for the CSS (also with some links for reference):
Avoid unnecessary styling. E.g.: border-radius:0px is unnecessary because 0 is the default value for border-radius (unless you have defined some previous style and you want to overwrite it).
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Specifying units is required for values different than 0. E.g.: margin-left:15 is that 15 in px or em?
http://www.w3.org/TR/CSS21/syndata.html#length-units
The units are optional when the value is 0. Some people find it more readable and better because it is shorter; I personally like them. Your call, but always:
Be consistent: if you omit the units for a zero value, do it in all your definitions. It looks awkward to me to see a padding:0 (without units) next to a margin:0px. It will help you read and maintain the code later.
You could merge many styles together. For example: .zonelist23, .zonelist24, and .zonelist25 are the same, you could define one style only (e.g.: .zonelist_bml30) or set all of them together: .zonelist23, .zonelist24, .zonelist25 { ... }
Not mandatory, but nice: The font-family tag should have several names as a "fallback" system. That way, if the browser does not support the first font, it will go to the next and so on.
http://www.w3schools.com/css/css_font.asp
Just out of curiosity: did you meant to put in the stylesheet .header or is it header? I personally try to avoid classes/ids with the same name as a tag to keep the code easier to understand, but that's a personal choice. As far as I know there's nothing against naming a class like a tag.
One way of having fun and learning (you may now think that I have a strange way of having fun and learning):
Go to the W3C HTML Validator.
Click on the the "validate by direct input" tab.
Copy your code in the box.
Click on the "Validate" button.
View the first error, and read the comments (visit the links for reference).
Fix the code according to what you've read.
Click on the "Revalidate" button.
Repeat steps 5-7 until no errors are found.
(You can do the same with the CSS in the W3C CSS Validator)
Please see this fiddle : http://jsfiddle.net/j6n0w1tj/1/
I have corrected your code.
Kindly follow the steps mentioned by #monty82, who has given an excellent explanation on how to proceed with your code.
Wrong html:
<label>..<select></Label><option></option></select>
Correct html
<label>..</label><select><option></option></select>
Tags like <input>,<br> are self closing tags,close it like <input
type="radio"/> and <br/> not as </br>.
Please make sure whether your opening and closing tags match
I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!
OK, i figured out what to do.
First go into visual mode.
Select Preformatted in the formatting drop down. A little grey box is created.
Inside the grey box, copy and paste your raw HTML.
Save it and switch from visual to HTML views a few times. There should be no mangling.
IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).
Wordpress does a strange thing where if you switch between visual and "text" mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.
If you are just trying to display code on your website you should be able to wrap the code like this:
<code><p>Example code post</p></code>
This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts
If it is a block of code that needs to not wrap you could also use the "pre" tag like so:
<pre><code><p>Example code post</p></code></pre>
This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets
Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.
First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won't be lost.
Decoded Code
Rendered View File
Hope, it helps future reader to find a way.
Wordpress is very buggy. It took me a long time to finally succeed. For my Wordpress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :
<pre><code><p>Example code post</p></code></pre>
That did not work.
The only way it works for me is:
Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.
Hope that helps.
Perhaps, You should try out this plugin
http://wordpress.org/extend/plugins/insert-html-snippet/
Hope this helps!
One way to do is to make the code commented. Something like,
<!--div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div-->
instead of
<div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div>
maybe a little odd, but I'm stuck nevertheless:
I have an input type="image" which acts as a button within a software. I have to tweak the button for a template.
<input class="tweaked" src="" title="add to basket" alt="add to basket" type="image">
The problem:
I cannot change the type, because the software seems to "bind" to input type="image"
If I just omit the src attribute I get failed to load on IE and other browser
Question:
Is it possible to have an input type="image" without src attribute looking nice across browsers, that is without the "failed to load image"-icon? If so, how can it be done?
Thanks for help.
One option is to make the source of the image be a 1x1 clear pixel PNG. It's quick and dirty, and it will most likely work. You may even already have such a file that the site is downloading.
If, however, you don't want to add another HTTP request, perhaps you can set the source to be your image sprite, then in your CSS align the background so that the sprite is way, way off the image. This will get rid of the 1x1clear.png file, but it may degrade in a weird way in some cases.
Wacky idea that probably won't work, but you can try using a css (or jquery) selector to look for a missing src tag and set it to css display: none or add a temp src tag pointing to a dummy image.
Today I was working on a tab navigation for a webpage. I tried the Sliding Doors approach which worked fine. Then I realized that I must include an option to delete a tab (usually a small X in the right corner of each tab).
I wanted to use a nested anchor, which didn't work because it is not allowed. Then I saw the tab- navigation at Pageflakes, which was actually working (including nested hyperlinks). Why?
Nested links are illegal
They must be doing some really crazy stuff with JavaScript to get it to work (notice how neither the parent nor the nested anchor tags have a name or href attribute - all functionality is done through the class name and JS).
Here is what the html looks like:
<a class="page_tab page_tab">
<div class="page_title" title="Click to rename this page.">Click & Type Page Name</div>
<a class="delete_page" title="Click to delete this page" style="display: block;">X</a>
</a>
Actually, the code I had pasted previously was the generated DOM, after all JS manipulation. If you don't have the Firebug extension for Firefox, you should get it now.
Edit: Deleted the old post, it was no longer useful. Firebug is, so this one is staying :)
I suspect that working or not working nested links might depend if your browser renders page in strict mode (e.g. XHTML DTD, application/xml+html MIMEtype), or in "quirks" mode.
In spite of nested tags are illegal but writing them using JS will work!, try this:
$('<a>', {
href: 'http://google.com',
html: '<a>i am nested anchor </a>I am top Anchor'
}).appendTo($('body'))