I have a problem with html links in wordpress.
For example if I want to add:
Dvi1
and
<div id="div1">
text
</div>
If I click on div1 I'm redirecting to homepage, not going to the div1 location(<div id="div">). What could be the problem?
PS: If I use adblock it works, without it, it doesn't.
You can use an anchor tag to achieve your functionality...
Place <a name="div1"></a> as the first line in your DIV and then when you click on the link it should take you there without any issues.
Related
I want to make a button with the discord logo but when I try to add the anchor tag the text goes down a bit and it becomes uncentered.
Is there a way to fix this or a different way I should be approaching this?
HTML Code:
<li class="nav__btn">
Join our Discord
</li>
Try reading this to see if it could help out.
https://coder-coder.com/how-to-center-button-with-html-css/
I would assume it would work the same way with an image button. Also try experimenting with div tags.
You have mistake in your code here: "button" >< img class.
Better use button tag for this, see example button with icon.
Also, provide some screenshot what exactly do you need.
I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
I've got a really simple problem that I'm sure there is a simple fix for, but I just can't find it.
I'm trying to jump from one page to another using an anchor, in order to load the new page on a particular div. Obviously this doesn't work, instead the page just loads at the top.
This is what my <a> tag looks like:
<a href="projects.html#link" onclick="location.reload()" class="col-sm-4
noHighlight">
Then, on the page "projects.html" I have this:
<div class="container" id="link" name="link">
<br>
<h2 style="text-align: center;">Test</h2>
<br>
<h5>
</h>
</div>
If, when the projects.html page has loaded, I force refresh my chrome browser tab, the page does load at the correct div. If I then scroll back to the top and force refresh the tab one more time, it doesn't work. The location.reload() was an attempt to force the browser to force refresh by itself, but nothing appears to change with or without it.
Any advice would be appreciated, If I need to post more code I will, but I don't really have much javascript or CSS that could be conflicting.
Thanks,
your boi, Boi.
Add the following code to your child theme CSS: html {scroll-behavior: auto !important;}
I am having a problem with what seems like it should have a simple solution.
I have anchor links set up in a html page and am having a problem with one of the links.
Here is the code I am using...
<div class="top-menu">
About</br>
Jersey</br>
SocialMedia</br>
Art</br>
</div>
The links
<a id="about"></a>
<a id="jersey"></a>
<a id="social"></a>
<a id="art"></a>
The anchors
The problem I am having is that 'About','Jersey' and 'Art' work perfectly fine, but 'social' keeps linking to 'jersey'.
I am using nice scroll, and a scroll to anchor script, however I have removed these and get the same effect.
As said previously I have also tried linking with name="" and id="".
The anchors were not inside a div, but I have tried that also.
EDIT: Also just tried using div tags instead of a.
It means you have multiple element having same Id also there is another possibility that Id is in scroll limit
I am still unsure as to this problem however I have found a solution. I have placed the anchor inside the div below it.
Here is my problem :
I've try to add a "link" into another one. Explanation :
I have an image, which is inside a link, so when I click anywhere on this image I'm redirected to the page I want. What I'm trying to do is, to add a small "edit icon" at the top right corner of this image, so I can edit its properties on another page dedicated to this.
The fact is that I want to have this "edit icon" as a link, when I click on it I want to be redirected on another page, not the page which is the url of the main image container link...
so the code looks like this :
<a href...>
<span ... with style : size and background image so it looks like a clickable picture...>
<a href...>
<span... the second span with another background (edit icon), FLOAT RIGHT (to get it in the corner of the container span) and small sized...>
</span>
</a>
</span>
</a>
If I do things this way, the second block (edit icon) appears OUT OF the container...
and if I change my order. It sometimes appears but it's not clickable. What am i doing wrong? is it impossible to make links into links? or is it a special way to do that?
You can't place a link into an other one. You should place the links each after like this:
<div id="container">
<a id="show" href="link1.html"><div></div></a>
<a id="edit" href="edit.html"><div></div></a>
</div>
Here is an example for you :
http://jsfiddle.net/gXV73/1/
You can use two different images, one for the edit icon and one will be your main big image.
Put both the images in two different divs, and use position:absolute; and z-index:100; left:/*something*/; right:/*something*/ for the small edit image div.
or show me the code so that i can help better.