I use a certain website to watch foreign videos, and recently they began shoving a bunch of annoying spam links that pop up on the site. One of these is an invisible link to a spam site that covers the entire page, making it so that you're forced to click on it if you want to do anything else on the page. You can see this yourself if you try going to the site, as you'll probably notice your cursor will look like it's hovering over a link no matter where on the page you put it: miomio.us. It happens no matter what page on the site you go to, and even after you accidentally click on it, it tends to keep reappearing.
I am aware that the Inspect Element tool on Firefox/Chrome can be used to temporarily edit the HTML of the page, and I wanted to know how I might go about editing the code to get rid of this and preventing it from reappearing (I know that changes will all disappear when I refresh but I'm fine with only temporarily making it go away). This is the HTML of the element:
<div id="d9wrz21" style="position: fixed; inset: 0px; z-index: 2147483647; background: black none repeat scroll 0% 0%; opacity: 0.01; height: 750px; width: 1536px;"><a id="lkhin" href="http://au79nt5wic4x.com/hzdiwnivp?awvo=41&refer=https%3A%2F%2Fmiomio.us%2F&kw=%5B%22youtube%E3%83%90%E3%83%A9%E3%82%A8%E3%83%86%E3%82%A3%E5%8B%95%E7%94%BB%E5%80%89%E5%BA%AB%E3%81%8A%E7%AC%91%E3%81%84%E3%81%8B%E3%82%89%E3%82%A2%E3%82%A4%E3%83%89%E3%83%AB%E3%81%BE%E3%81%A7%E3%83%90%E3%83%A9%E3%82%A8%E3%83%86%E3%82%A3%E3%81%AE%E7%84%A1%E6%96%99%E5%8B%95%E7%94%BB%E3%82%92%E8%A6%96%E8%81%B4%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%22%5D&key=09ebdae44542192f133e1224de135f65&scrWidth=1536&scrHeight=864&tz=-5&ship=&pst=&v=20.2.v.6&res=7.1055&dev=e" target="_blank" style="display: block; height: inherit;"></a></div>
If I try to right click on it in Inspect Element and click "Delete Node," the entire block of code simply automatically reappears. Trying to change the href also doesn't seem to work. Any suggestions on anything that can be done about this? I know nothing about HTML, so I would appreciate if responses could be put in layman's terms :D
Related
Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:
Create some placeholder text inside the anchor element like this:
<a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>
Change the element CSS to indent this text outside the viewing window:
.logoWithText {
background-image: logoWithText;
width = 200px;
height = 100px;
display: inline-block;
text-indent: -9999px;
}
The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.
But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.
Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.
Why not
Html
<a href="http://yoururl.com" class="logo--text">
<img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>
CSS
.logo--text{ width:200px; height:100px; }
I have a little experience with dabbling in css but I cannot figure this out. I bet there is only one number somewhere thats wrong but I cant find it.
I was wondering if someone could please help
Website: www.maxanthonyphotography.com/portfolio
P.s The website isn't finished yet anyway but my ocd is driving me mad
thank you in advance
Looking at the style.css file you have around line 2120
div {
height: 650px;
(etc)
}
This will mean that all div tags on the page will have a height of 650px (unless you override it with a class or something).
for now try changing that line to height: 100%;
for future reference (depending on the browser) right click on the page and go to inspect element, this will show you what is going on with different elements on the page.
I have a problem where if the previous page browser button is used, the current page button state for the page that was previously viewed remains. This results in that multiple menu items appear in their 'current' state when the previous page browser button is used. If the 'current' state of the previously viewed page is rolled over, it reverts to it's normal state. Doesn't make sense? Click here to view the site. I've never had this issue before, and tired everything! Any advice appreciated!
Your issue here is that when you leave the page and then go back, your original image (which was hovered when you left) isn't getting swapped back to its non-hover state until the mouseout event occurs.
My suggestion would be to use background-image instead of imgs, and then you can change it on hover easily using the CSS :hover selector, something like:
<a id = "groove" href = "/groove/">
</a>
CSS:
#groove {
background-image: url('groove.gif');
height: 20px; /*just an example*/
width: 100px; /*another example*/
}
#groove:hover {
background-image: url('groovehover.gif');
}
I hope that helped!
Seeing as there is no Javascript associated with this, it seems like a simple issue of caching.
In any affected browser, try clearing your cache and then refreshing the page.
Two days ago I spontaneously bought myself a domain. The day before that, I hardly even knew what a domain really was. Since then, I've been trying to teach myself HTML for the very first time. Basically what I'm trying to say is, I'm very new - and will probably be poor in my explanations.
I just succeeded in making an 'image-button', sorta. It's where I make a button-like image and then use it as navigation on my website (just like a regular link). My issue is that the link 'border' itself is bigger than the image, so you can press an inch outside the image itself and it will work. How do I make the invisible link 'border' the same size as the button?
This is my site:
http://www.djeveln.com
On the test page (djeveln.com/test) is where I test things. There's the button I'm talking about, in case you can't understand my explanation very well.
Here's my HTML:
<a class="ButtonLink" href="http://www.djeveln.com" title="Home">
<img src="/images/button.png" class="TestButton"></a>
Here is the CSS I use for the image position and size:
img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/
position: absolute;
width: 100px;
height: 75px;
top: 400px;
right: 250px;
}
Hope you can help me! :P
Your button image contains a large transparent area (with the actual button more or less in the center), and that's what is causing the "borders".
Although there are CSS workarounds for that, I'd recommend you just open the image in Photoshop (or any other image editor), and crop the transparent area away. Make your image the exact size of your button.
One more tip, that can make your life way easier as your learn: use a debugging tool like the Chrome Developer Tools, or Firebug (if you're on Firefox). With those, you can inspect any element on your HTML (right click it and choose "inspect"), check the CSS applied for them (and also modify it on-the-fly for testing), and much more. That's how I spotted the transparent border on your image.
At a quick glance, it looks like you've simply made the image too large. There's a lot of transparent image outside the button that is part of the click target. How are you making the button?
If you made it in Photoshop, for instance, you should crop the image to be tight to the border of the button.
You could do that in CSS, but you'd be making work for yourself -- I'd modify the source image.
I have taken over a website that was coded in tables (looks like DW) and is half coded in typo3 CMS and half hard coded.
Anyway, my boss has asked me to make the logo clickable to link to the homepage from every page that the logo shows. The problem is that the logo is part of the whole image that makes up a third of the page, so linking the whole image is out of the question.
I don't want to have to restructure and slice the images to separate the logo from the BG image, so is it possible to place a link section over the logo only?
I thought about an empty div that sits over the logo section only with a link tag that fills it 100%, is this possible and would it work? The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html... you can save the BG image and see its not just the logo...
Please tell me how I can make a link that sits over the logo only on that image.
Is the background image on the <body> element? If so, this should work:
<body>
Example Company
</body>
With this CSS:
a#logo_link {
position: absolute;
display: block;
visibility: hidden;
left: 42px;
top: 42px;
width: 42px;
height: 42px;
}
Note the <a> tag needs to be directly inside the <body> tag, or else the position may be incorrect. It can be anywhere in the body tag however, at the beginning or the end.
I've also placed the company name inside the link, since it's a bad idea to have a link without any text. A blank link cannot be understood by browsers designed for disabled users, and it may trigger spam algorithms in search engines. The visibility property will make the link invisible, even though it is still there and can be clicked on.
I provided an example answer. If you're allowed to load a JQuery library and can place the anchor somewhere on the page.
http://jsfiddle.net/XFvQD/
You would be looking for something like this:
<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
</body>
</html>