On the wordpress site i'm building a want a link that refers to a section on the same page.
Code here:
test
The code on the landing section here:
<a name="offer"></a>
Somehow the link is ignored. Maybe it has to do with the wordpress setup? Here the site: http://bbwebdes.myhostpoint.ch/webauftritt/
I've tried everything with relative and absolute links but nothing is working and I have no clue why.
You need it to be an ID if you're referencing an internal link
<a id="offer"></a>
Also might I suggest using a DIV or a SPAN instead of using a link, since it could lead to horrible outcomes.
<span id="offer"></span>
Your code has two mistakes.
You should use id instead of name.
and you should use div or span instead of a.
Try this:
<div id="offer"></div>
//<a id="offer"></a> --> Dont use this
Related
How do I create a link using HTML to scroll down to a certain a h1, just using HTML? Is it possible?
I have an idea from using Bootstrap studio but not sure if it’s actually the correct way of doing it. You link to the Id of the element you want to scroll to by creating an Id for header and then adding the if to the link tag.
<a href=“#h1”>Scroll Down to header</a>
<h1 id=“h1”> Header</h1>
Is this right? Or is it more to it then that?
I’m new at StackOverflow btw... I looked for this answer but couldn’t find anything.. must have been saying the wrong thing.
Correct. As long as you include the # before the id you are referring to, the code will scroll down to the referenced element.
Reference to this question: Link to an element within the current page
Extra
If you want an animated scroll, check out this question: jQuery scroll to element
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
I'm currently working on the following site:
http://strauss.co.at/sup/
I'd like to use bootstrap's scrollspy to keep track of the current menu item. i added the data-spy="scroll" and data-target="#navbar" to the body tag. #navbar is the container of the bootstrap nav component (this is what I found is in lots of different articles here on stackoverflow and other sites). still it does not work. what am I missing here?
Additionally, I'm using the affix plugin to make the menu sit on the top of the page after a specific offset. I can see a little jumping there. Is there any way to smooth this? should I do it with css 3 transitions or is it more of a content-element-that-gets-pulled-out-of-the-flow problem?
thanks
You're really close! You just have to change the href on the anchor elements to the id of the element you want to link the scrollspy to.
For example, where you have:
SUP in der Physiotherapie
You should have:
SUP in der Physiotherapie
Note that simply changing this with inspect element won't work, whereas Bootstrap uses javascript when the DOM first loads to initiate the scrollspy.
Thank's so much!
I just noticed that TYPO3 automatically added the path to the links. I didn't have it in my template.
I figured out that I can also solve this by adding the data-target="#id attribute to the link.
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.
I am attempting to add itemprop="image" for a corporation's logo (as shown here: http://www.schema.org/Corporation), but I am using the Gantry Logo plugin from the Gantry framework for Wordpress. As a result, the image is actually loaded by a reference in CSS, and not using the HTML tag.
Unfortunately, it seems that the itemprop="image" can only be added to that tag, as that is where it grabs the URL from.
Can anybody think of a way around this without attempting to hide a logo on the site and place the tag on it?
(The site I am specifically referring to is http://www.bpsresolver.com for reference.)
"Can anybody think of a way around this without attempting to hide a
logo on the site and place the tag on it?"
That's exactly what needs to be done.
The way to do it is to open the source for this Gantry Logo plugin and find the logo's <a id='logo'></a> that the css refers to and change it to <img src='yourimage.jpg'/> I usually use WindowsGrep to find id='logo' or whatever it may be in your case.
But to answer your question: "Is there a way to add microdata to an image referenced in CSS?" - No :)
What I ended up doing to fix it was going to the logo.php plugin located in /plugins/gantry/widgets/. At the bottom of that file is where the <a> tag is that miro mentioned.
Instead of removing it and replacing it (since it had a number of other CSS properties attached that needed to stay the same), I simply added the <img> tag in between the <a> tags, and changed the CSS that referred to the image from background: url(url_to_image); to background: transparent;.
Lastly, I wrapped the whole thing in a <div> tag which I used to indicate the scope, and placed itemprop inside <img>.