I'm creating a table of contents using the id linking method. How do I get it to work properly? I've triple checked and for some reason, it's not responding when I click on the link.
I've tried creating an id and name within the tag. It only seems to work for the top of page id. I'm using Shopify's blog editing feature which accepts HTML.
1. Example
<h3 id="Test">My Header Here</h3>
I've got it to work before but it's not anymore. Maybe I have to clear my cache?
you just add height at your tag
for example
<html>
<head>
</head>
<body>
<div style="height:600px">
1. Example
</div>
<div style="height:600px">
<h3 id="Test">My Header Here</h3>
</div>
</body>
</html>
The code is correct.
What happens if you try the code below instead? Both of these should be valid, so it would be weird that one works and the other doesn't.
1. Example
<a name="Test"><h3>My Header Here</h3></a>
Related
i just get into a small problem.
i tried to include iframe inside and also outside of div code but nothing show
adding like frameborder="0",etc didn't work either
then i tried on another .html file to make sure the iframe is good and it's showing like usually.
so why the iframe won't opened the src file, did i do something wrong ?.
heres my code (the problematic one):
<html>
<head>
<title>Buat.in</title>
</head>
<body class="container">
<div>
<div class="additional-ui">
</div>
<div>
<iframe src="backgroundui.html">
</iframe>
</div>
<div class="ui-bttnmenu">
<ul>
<li>Tentang
</li>
<li>Daftar Desain
</li>
<li>Lokasi
</li>
<li>Hubungi
</li>
</ul>
</div>
<footer class="foot-ui">
<p>Designed & Written by :</p>
and also i haven't applying the separate style file here, the class="" will be linked to my style later, i test it on firefox 85.0.1 ubuntu.
(Edit) heres the additional info for backgroundui.html:
<html>
<body class="secondary-ui-container">
<h1>Buat.in</h1>
<p>Your "trusted designer"</p>
</body>
</html>
fun fact theres something happened, when i run iframe inside the background.html (supposed to be the ui) the iframe works normally else on the main page.
or should i rebuild all from zero again ?.
Firefox has recently implemented a security feature which does not allow cross tab tracking which is the fundamental of iFrame. Previously, this feature only prevented only https and ssl certified sites.
You may change this behavior in your own Firefox installation by typing about:config in the address bar and setting security.mixed_content.block_active_content to false.
Here are some more docs about x-frame-options:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Total Validator doesn't find this link and write this warning to me:
Add a skip navigation link as the first link on the page.
How can I write this link in a better way?
<html>
<body>
Skip to Content
navbar with menu
<div id="skip">
</div>
</body>
</html>
From what I have tested, they do require the text link to contain the word "skip", and the href attribute to start with a #, no matter if this element exists.
With the code you have submitted, it works with my own installation of TotalValidator (I am not saying that I would use this tool).
For information, TotalValidator web site uses the following code
<div id="skip">Skip navigation</div>
[...]
<a id="content"></a>
In spite of what the first comment says, the ID value "skip" is technically fine; it does not need to be changed to "skiptocontent". The reason why TotalValidator does not detect the skip link is probably something else. The link goes to somewhere in the page, and that "somewhere" is not explicitly marked as the main content. You can do this using WAI-ARIA landmarks.
With markup such as the following, it should be obvious for a validator that your first link is a skip link to the main content:
<body>
Skip to Content
<!-- navigation menu goes here -->
<div role="main" id="skip">
<p>...</p>
</div>
</body>
You can also use "semantic" elements, e.g.
<body>
Skip to Content
<header><h1>...</h1></header>
<nav><!-- navigation menu goes here --></nav>
<main id="skip"><!--role="main" is redundant on the main element-->
<p>...</p>
</main>
<footer>
</footer>
</body>
See the WAI-ARIA specification for documentation on main (role) and the HTML5.2 spec for the main element.
I am updating a website that I didn't create, this has been a bit of a chore. There is an instance where links to other parts of the site have been used and they aren't working. I have studied the code and can't seem to figure out why the link isn't appearing ... please help
This is the code snippet ...
<article class="grid_4 maxheight">
<div class="box1 maxheight">
<div class="box-indent">
<h3><strong>01.</strong>Projects</h3>
Lorem Ipsem sit dolor ...
</div>
<div class="aligncenter">Suggest </div>
</div>
</article>
this code is repeated for 3 separate boxes and none of the anchor tags are creating a link at all, nothing ... doesn't even exist I don't know what is causing this to not work, all the other links on the page seem to work just not these 3
Give Full path of contacts.php in href attribute in anchor <a></a> tag.
Or make the contacts.php saved in same folder then It will links to the corresponding page.
If link and data in <a>anchor tag</a> is invisible then check css property of that class/id and make display: block for that css.
It is working for mine.
I have a simple website, as I'm a beginner programmer. I inserted a <p> tag, which worked all fine and dandy. There was two words in the paragraph which I wanted to link to a different page on my website, and it decided it didn't want to work. I don't know why it didn't work, because I have <div> tags in the same document to the same page that were working fine.
Edit: To define what wasn't working: It wasn't clickable. It changed color, like a normal hyperlink tag should, but was just a piece of text. You just couldn't click it. Even tags with an invalid or nonexistent href should be clickable. Right? Maybe I'm wrong, again, I am a beginner.
The other strange thing was that in my CSS file, I had the text-decoration set to none, so it shouldn't have changed color in the first place.
CSS:
a{
text-decoration:none;
}
This is the HTML that I had an issue with:
<p id="p1">Ingsoc is the Newspeak word for English Socialism. (For more on Newspeak, see the Ministry of Truth page.)</p>
And here's an example of a link with the same destination that worked just fine:
<a href="TruthPage.html">
<div id="minitrue">Ministry of Truth</div>
</a>
Instead of
<a href="DifferentPage.html">
try
<a href="http://www.yoursite.com/folderpath/DifferentPage.html">
where 'yoursite.com' and 'folderpath' are changed to match your situation.
The code looks ok to me. You could try...
<p />
<div>This is just basic text that was doing what it was supposed to. This was the text that I wanted to link to a different page.
</div>
if it's working within a div tag
Your problem is that your href="DifferentPage.html" is not vailid. My suggestion is to open that other page on your site, then copy the location in the address bar.
I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.