PLEASE HELP ME
So I started using the CTRL+ALT+SHIFT+B autospacing feature that comes with the XML Tools plugin using Notepad++ v7.2. Everything is working fine I just have a question about the logic the plugin uses. In this excerpt of code:
<tr>
<td>
<img id="codeImg" alt="matrix code" src="http://i860.photobucket.com/albums/ab170/gondrongsolo/background.gif">
</td>
<td>
<ul>
<li>
<em>Python</em> programming</li>
<li>Shell scripting</li>
<li>Reddit addict</li>
<li>Fitness nut</li>
<li>Raidboss Gamer</li>
</ul>
</td>
</tr>
Why does using the autospacing feature correct it like this? Shouldn't the first <tr> match the same spacing with the </tr> closing tag? I'm finding this happens everything I inserted a tag that doesn't need a closing tag, such as img or p tags.
I would really like to be able to fix the auto formatting because it allows me to read my code more clearly and would greatly appreciate a response. If I need a different plugin please direct me!
So despite the fact you do not need to make img a self closing tag in order to use it in html, you can use it at the end of the tag. If using this plugin you can make it happy when you do <img ... /> without causing errors on the web page. The plugin will read this correctly then and fix the issue resulting in the following formatting:
<tr>
<td>
<img id="codeImg" alt="matrix code" src="http://i860.photobucket.com/albums/ab170/gondrongsolo/background.gif"/>
</td>
<td>
<ul>
<li>
<em>Python</em> programming</li>
<li>Shell scripting</li>
<li>Reddit addict</li>
<li>Fitness nut</li>
<li>Raidboss Gamer</li>
</ul>
</td>
</tr>
Related
I am really struggling to use css to make a new homepage for my smugmug website.
I've managed to get this done:
<html style="height:100%">
<body style="height:100%;margin:0;">
<table style="height:100%;width:100%;vertical-align:middle">
<tr>
<td>
<div style="width:100%;text-align:center">
<span style="display:inline-block">WEDDINGS</span><span style="display:inline-block;padding:0 100px">PORTAITS</span><span style="display:inline-block">COMMERCIAL</span>
</div>
</td>
</tr>
</table>
</body>
</html>
and I want to be able to add a link to each word selection. I can't get my head around it, could anyone please help?
Also if anyone is familiar with smugmug, I paste the code into the theme css box and nothing happens when updating my website.
Thank you.
If you were to add a link around the following line:
<span style="display:inline-block">WEDDINGS</span>
place the link tag in front and after it, link tag being
so it would look like this:
<span style="display:inline-block">WEDDINGS</span>
If clicked on, anything between the tag will redirect them to the page.
As a side note, if you wish to make the linked page open in a new tab, use "target=_blank", like this:
I understand that modern browsers interpret one's HTML code in a certain way, and the result is that what one sees in "inspect element" in Google Chrome, for example, is different than what one sees in "view source".
Mysterious <b> and </b> tags that I had never added to the source code, are somehow appearing in my page when I view it in chrome and Firefox.
At first, I thought it may have been some javascript modifying my code, but after having ticked the "disable all scripts" button and reloaded the page, the mysterious tags remained.
Here is an example - this is a piece of the source code from my website, http://bns.endgame.pk/. No <b> or </b>tags anywhere in sight.
<a target="_blank" style="font-size:14px;" href="http://www.facebook.com/nightmarecake">Cake</a>.</font><br>
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1119589_773184094_1664919821_q.jpg">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1117767_15500423_790147733_q.jpg">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/186942_100001202221967_422509584_q.jpg">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-frc1/372541_547614112_115208298_q.jpg">
</td></tr>
</table>
</div>
</td></tr>
</table>
<div class="contents-container">
<div class="col1">
<div class="table1"><font class="title1">Blade & Soul database<br>
Here is that same exact portion of the website, when I open the site in chrome (all scripts disabled) and take a look at the stuff, with "inspect element":
<a target="_blank" style="font-size:14px;" href="http://www.facebook.com/nightmarecake">Cake</a>
"."
</font>
<br>
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1119589_773184094_1664919821_q.jpg">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1117767_15500423_790147733_q.jpg">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/186942_100001202221967_422509584_q.jpg">
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-frc1/372541_547614112_115208298_q.jpg">
</td>
</tr>
</tbody>
</table>
</div>
</b>
</td>
</tr>
</tbody>
</table>
<div class="contents-container">
<div class="col1">
<div class="table1"><font class="title1">
"
Blade & Soul database"
<br>
These <b> and </b> tags are being inserted at a whole bunch of places all over my files! What the hell is going on, here?! Am I formatting my HTML wrong, or something of the sort? Please help me out.
Please note that I am in the process of going through my file with a vaildator http://validator.w3.org/ as well, but it has been of no help in determining the problem ;__; ...
You are not escaping the content from your user, so someone posted something like: I really, reaally do appreciate it~! >w<b, I let you understand what's going next... (Line 853 on my browser, under the div with shoutbox_comment_section id).
The </b> tag is added by the Chrome development console because it tries to infer what you forgot to get valid XML.
I'm trying to learn about scraping information from a website for iOS and I'm using a website of a local radio station to practice. I have tried by best to figure out the Xpath needed to present the information within the tags in a table. The HTML is as follows (there are many more table rows, this is just the first one).
EDIT
<form action="http://www.someurl.ie/index.php/news" method="post" name="adminForm" id="adminForm">
<table class="category">
<tbody>
<tr class="cat-list-row0" >
<td class="list-title">
<a href="/index.php/news/some-news-story-here">
some news story here</a>
</td>
</tr>
This is the path that I have come up with but it hasn't worked for me. Could anyone direct me as to what I'm doing wrong/missing with this?
#"//div[#class='cat-items']/form[#id=adminForm]/#action/table[#class='category']/tbody/tr[#class='cat-list-row']/td[#class='list-title']/a"])
<div class="cat-items">
If anyone could help or point me in the direction of help I would be very grateful. Thanks!
There are three problems in your XPath expression:
The <form/> id 'adminForm' is unquoted
The attribute #action is a path step in the middle of the expression
The <tr/> class 'cat-list-row0' is missing the zero.
The corrected expression:
#"//div[#class='cat-items']/form[#id='adminForm']/table[#class='category']/tbody/tr[#class='cat-list-row0']/td[#class='list-title']/a"
I'm new to Vim and I'm trying to get used to it. I just created a .vimrc file and got Vim to display line numbers and do incremental searching. I also enabled syntax highlighting. Now I want to enable things to make writing HTML easier. I searched for html.vim in /usr/share/vim and found this:
/usr/share/vim/vim72/syntax/html.vim
/usr/share/vim/vim72/ftplugin/html.vim
/usr/share/vim/vim72/indent/html.vim
Now, what do I have to do to enable HTML auto indentation? Copy those files to ~/.vim? Symlink them? Or does Vim automagically load them from /usr/share/vim/? (It already does HTML syntax highlighting, so I think that's possible - but it doesn't do HTML auto indenting)
I heard set autoindent in .vimrc would do the trick, but what's with .c files? I thought they needed set cindent, but does cindent work with HTML?
The very first thing you should do is try vimtutor and complete it a couple of times. Once the basics are covered you can start to play with plugins…
SnipMate is inspired by TextMate's snippets and/so is beautiful, it has a lot of HTML snippets by default and it's extremely easy to add your own. To use it, type div then hit Tab to obtain:
<div id="|">
</div>
with the caret between the "" ready for you to type an id; hit Tab again to move the caret on the blank line:
<div id="myId">
|
</div>
Beautiful. Many editors have this feature, though.
If you have a lot of HTML to write — say a few emails/newsletters a day — another plugin called SparkUp allows you to produce complex HTML with only a few key strokes and some CSS knowledge. You start by typing something like:
table[id=myTable] > tr*3 > td*2 > img
then you hit <C-e> (CtrlE) to obtain:
<table cellspacing="0" id="myTable">
<tr>
<td>
<img src="|" alt="" />
</td>
<td>
<img src="" alt="" />
</td>
</tr>
<tr>
<td>
<img src="" alt="" />
</td>
<td>
<img src="" alt="" />
</td>
</tr>
<tr>
<td>
<img src="" alt="" />
</td>
<td>
<img src="" alt="" />
</td>
</tr>
</table>
with the caret inside the first empty "". Hit <C-n> and <C-p> to go to the next/previous field.
Magical. The plugin is available for more editors, though.
I second text objects and Surround.vim which are unbelievably useful.
Another cool feature is the visual-block mode (:help visual-block) where you can select columns of text. Say you have:
<ul>
<li><p>My text doesn't mean anything</p></li>
<li><p>My text doesn't mean anything</p></li>
<li><p>My text doesn't mean anything</p></li>
<li><p>My text doesn't mean anything</p></li>
</ul>
place your cursor on the > of the first <li>then hit <C-v>and move the cursor downward to the fourth <li>. Hit I (capital I) to enter INSERT mode just before the > and type class="myElement" then <Esc> to obtain:
<ul>
<li class="myElement"><p>My text doesn't mean anything</p></li>
<li class="myElement"><p>My text doesn't mean anything</p></li>
<li class="myElement"><p>My text doesn't mean anything</p></li>
<li class="myElement"><p>My text doesn't mean anything</p></li>
</ul>
Ho yeah!
Seriously, Vim is great.
Take a look at the AutoCloseTag plugin to close tags as you type them. And set autoindent should be handling HTML indentation for you.
Also you should read the docs in :help text-objects to learn about using the inner and outer tag selections. For example, in normal mode you can do cit to change the text inside the current tag. Or in visual mode at will expand the visual selection to encapsulate the tag around the cursor.
Finally, look at the Surround.vim plugin, which can surround a selection or text object with a tag, or change the tag around it.
This is the site I'm working on and the CSS is in the same directory called saucy.css (sorry I can only post one hyperlink).
First of all, apologies for my awfully invalid HTML and CSS. I promise I'm going to fix it all once the site is up and running! However if this is causing the problems of course I will do it now.
My current problems:
When I add a hyperlink to the Twitter
icon it moves to the top left as it
is now. As you can see from the HTML
it should be under the main box (in
line with the copyright logo etc.) to
the left.
I have this strange text appearing
at the bottom of my page: ​. I am told it is to do with not being able to display a character properly, but I can't see what character it could be.
When I try and edit the CSS to
remove the link formatting on the
navbar, nothing happens.
I am unable to add a border to the
box in the centre of the page. As the
drop downs are part of the table, I
only want a border for the or
which is grey. Is it possible to
do this?
Thank you so much for reading!
Wow, it looks like you rushed to put this together... You really should take your time with it so you don't make mistakes. I see that you've inverted a TD tag where there should be a TR tag. I also see that you've closed a TR tag and decided to just use a TD tag instead, which i'm not sure if that's intentional or not lol. I'm going to comment on some of your code and ask you if it was intentional or not, but I will clean it up a bit first.
You should never just run all your code together, that's very bad practice and will cause you to forget to close tags. Always indent when you can. Whether you can write colspan=4 or not is irrelevant, you should always put it in quotes like this: colspan="4" and for all other properties.
For the level you're at, you should be using xhtml. This will force the browsers to use the standardizations and prevent your site from looking "weird" on one browser but perfect on another.
Here is your code that I commented on. You really need to go through it and match ALL of your opening/closing tags correctly. You've made a nice mess for yourself lol. Have fun.
<table align="center" width="60%" cellspacing="0" cellpadding="5">
<tr>
<td colspan=4>
<div class="logo">saucydares</div>
<div class="slogan">fun and games for couples everywhere!</div>
</td>
</tr>
<tr class="links">
<td class="links" colspan=4 width="100%" align=center>HOME | ABOUT | ARCHIVE | DARE BOX</td>
</tr>
<tr>
<td colspan=4 class="main" cellpadding=10>
<br><br> <!-- Breaks should always be <br /> XHTML only //-->
<table height="270px" width="450px" align=center cellpadding="5">
<tr class="box">
<td align=center>
<div id="dare">Welcome to Saucy Dares! To get going, adjust the settings below and click "Dare me!".</div>
</td>
</tr>
<!-- There is no TR tag here.
Was it on purpose? //-->
<td height="20px" align=right cellpadding="0">
<form name="form">
<select id="mode" name="mode">
<option value="classic">Classic Collection</option>
<option value="long">The Long Game</option>
</select>
<select name="player">
<option value="him">For him</option>
<option value="her">For her</option>
<option value="double">Double dare</option>
</select>
<input type="button" value="Dare me!" onClick="get();">
</form>
</tr> <!-- You closed the parent TR before the child TD //-->
</td> <!-- This TD no longer applies to anything because you
closed its parent row //-->
</table>
<br><br> <!-- Breaks should always be <br /> XHTML only //-->
<b>Latest news</b>
<UL>
<LI> Welcome to the new look Saucy Dares! Now you can take things to the next level with the new game mode, The Long Game. You can also both get involved by selecting 'Double dare' from the second drop down box. Read more about the new game modes on the About page.
<LI>Dares now appear without needing to refresh the page meaning your settings aren't reset every time you view a new dare.
<LI> What do you like about the new design? What is still missing? Let us know on Twitter! You can also follow #SaucyDares to receive updates whenever new features and dares are added.
<LI> You can now share your favourite dares with us by putting them in the Dare Box!
</UL>
</tr> <!-- Because you already closed the TR in your
child table, this is going to cause some
weird effects lol //-->
</td> <!-- More weird effects are going to occur until
you match the correct closing tags to
their opening tags //-->
<tr class="footer"><img src="facebook_border.gif">
<img src="twitter_border.gif" alt="Twitter" border="0">
</td><td width="33%" align=center>© 2010 Saucy Dares</td><td width="33%" align=right>Click here to report an error</td></tr>
</table>
Here is the same code you used for your site but, I removed all the table elements to help you out and got it looking somewhat nice please check it out and let me know what you think or if you need anything else. I might have made some minor mistakes or not up to website standards but, this was done on the fly.
<h3 class="logo" style="text-align:center; weight:bold;">saucydares</h3> <!--center these in your css file. or inline style it like I did. -->
<h3 class="slogan" style="text-align:center;">fun and games for couples everywhere!</h3><!--center these in your css file. or inline style it like I did. -->
<div class="links" style="text-align:center;">
<br />HOME | ABOUT | ARCHIVE | DARE BOX<br /> <br />
</div>
<h5 id="dare" style="text-align:center;">Welcome to Saucy Dares! To get going, adjust the settings below and click "Dare me!".</h5><br />
<form name="form" style="text-align:center;">
<select id="mode" name="mode">
<option value="classic">Classic Collection</option>
<option value="long">The Long Game</option>
</select><br />
<select name="player">
<option value="him">For him</option>
<option value="her">For her</option>
<option value="double">Double dare</option>
</select>
<br />
<input type="button" value="Dare me!" onClick="get();">
</form>
<br /><br /> <!-- Breaks should always be <br />-->
<b>Latest news</b>
<UL>
<LI> Welcome to the new look Saucy Dares! Now you can take things to the next level with the new game mode, The Long Game. You can also both get involved by selecting 'Double dare' from the second drop down box. Read more about the new game modes on the About page.
<LI>Dares now appear without needing to refresh the page meaning your settings aren't reset every time you view a new dare.
<LI> What do you like about the new design? What is still missing? Let us know on Twitter! You can also follow #SaucyDares to receive updates whenever new features and dares are added.
<LI> You can now share your favourite dares with us by putting them in the Dare Box!
</UL>
<div style="text-align:center;" class="footer"><img src="facebook_border.gif"><br />
<a style="text-align:center;" href="http://www.twitter.com/saucydares" target="_blank"><img style="text-align:center;" src="twitter_border.gif" alt="Twitter" border="0" /></a>
<h3 width="33%" style="text-align:center;">© 2010 Saucy Dares</h3><p width="33%" style="text-align:center;">Click <a style="text-align:center;" href="mailto:saucydares#yahoo.com">here</a> to report an error</p>
</div>