I need all of my anchors to go about 30 pixels above where the anchor tags are placed (there is a floating piece of interface at the top of the page) Is this possible?
Thank you
24  28024 
Is this possible?
yes. : )
Yes it is possible.
Please take a look into how CSS styles can help you to achieve this.
One possible way to achieve this is to use the display property combined with the position property.
This has nothing to do with JavaScript so I have moved this question to the HTML/CSS forum.
hmmm...Perhaps I did not phrase my question correctly.
When I click on a link with an anchor the browser puts the line where the anchor is at the top of the browser window.
I instead want it to put that line about 30 pixels down from the top of the browser window.
Now I can see how I MIGHT be able to make a style for the anchor where it is always 30px above where it is places (margin relative -30px?) or something like that. is that what you mean?
Where does display come into that? i know very little CSS, I am just learning. Thanks
Dormilich, I did not state it so, but my question implies "how" not just "if". Still At least I know It can be done and I am not wasting my time.
Is this website not for newbie questions? Perhaps I should ask elsewhere? let me know . thanks
DogBot, Dormilich was just playing around.
It doesn't matter what skills you have, your questions are always welcome here.
It might help me if you had a link or something to the page that you're working with so that we can see what you're talking about...I'm not sure what you're talking about.
To me, at least, an anchor is an <a> tag, which is a link (also known as a HyperLink)
So when you say:
When I click on a link with an anchor
I don't have a clue what you're talking about.
It's even more confusing when you say:
The browser puts the line where the anchor is at the top of the browser window
A picture (or a link in this case) is worth a thousand words!
-Frinny
A picture (or a link in this case) is worth a thousand words!
yes. : )
edit: sorry, but I couldn’t resist.
Hehe.
Dorm, are you just trying to increase your post count?
;)
here it is
The problem is with "in page links". they end up under the header.
Good point on how to ask a question. I will try to be more thorough
The problem is with "in page links". they end up under the header.
just had a look with Firefox. I can’t spot anything obviously out of place. which links do you mean?
though I’ve spotted another problem. the apostrophes (’ like in Gouvernment’s) are not displayed correctly. there’s some kind of charset problem.
edit: didn’t see anything under the header either.
Ohhhhh I see the problem!
Drom, scroll down the page a bit and click one of the links that says "back to top".
It doesn't scroll back to the top properly!
This IS a JavaScript question after all!
-Frinny
no clue where the anchor is jumping to, but I see a lot of invalid (duplicate and numerical) ids.
This IS a JavaScript question after all!
really? I had JS turned off and don’t see any difference.
You're right Dorm it's not a JavaScript question. Yesterday I thought the DogBot was using JavaScript to scroll to the place that they wanted but apparently they aren't.
DogBot, your HTML is invalid. You cannot have more than one element on the page with the same ID. It looks like you have give all of your <a> tags an ID of "ankor".
But this isn't going to fix your problem.
The page is doing exactly what you are telling it to do: it's going back to the top.
The problem is that the header/title for the page has a position:absolute style. This means that the header/title is not part of the normal page flow any more (it "floats on top" of the normal page content).
This means that the page is actually scrolling to the top.. It's going to the right place (the top of the browser window) but this isn't what you want.
I think you need to put in a spacer of some sort to make sure that the top is actually where you intend it to be.
Maybe the HTML/CSS experts will have a better idea.
-Frinny
my guess is that the position: relative of the <a> tags screws it up.
An immediate fix is to change the href to "#container".
Thank you all.This page has no JavaScript. The reason I posted on the JavaScript forum originally is because I suspect that is where the answer lies.
The "ankor" and other errors where introduced as I tried to implement Frinalave's first suggestion which I misinterpreted. but they are irrelevant. the point is that the page's anchors work correctly, I just need them to scroll to a position about 130px from the top (right below the floating header).
Thanks for your help so far, I have reposted this on the JavaScript forum.
Dogbot
Why did you repost this question in the JavaScript forum?
You just said there is no JavaScript on the page!
Did you try what the Doc suggested?
-Frinny
Frinny. who ro what is "the Doc"? only you, dormilich and dhr.., have replied. I tried all suggestions here. Some pointed out errors in coding (thank you) which I have correcd (if not posted) but those where irrelevant to the problem.
You suggested a spacer. and I do have one. the problem is the anchors.
I reposted there because even though this page currently has no JavaScript. I suspect that is where the answer lies.
Frinny. who ro what is "the Doc"?
That would be me. What I suggested works for me, are you saying it doesn't work for you?
Yes Doc, it solves the "Back to the top" problem. Thank you it is just that I was not concerned about that., but rather in the other direction. I have modified the test page for you to see what I men. Click in one of the two test links at the top and you will see the problem. Thanks Test File
The difference is equal to the height of the header. That is happening because the scrollable part is also part of the header so all this is calculated together rather than being independently.
That is correct doc. The scrolling is that way intentionally as it just seems more natural to have the scrollbar the full height of the browser window as opposed to right next to the content like a frames page. (it actually took some sweat to make it behave this way!) Now the challenge, as you discovered above is to make anchors work "properly". That is..not to end up under the header.
I read all the thread and didn't get an answer.
People should do a research about A (anchor) tags and their "name" attribute, before going off topic all over the place.
When you click on say <a href="#some_anchor">, the browser will look for <a name="some_anchor"> and scroll the page so that this anchor is at the top of the page. I'm having the same problem, I dont want it to be at the top of the page, but a bit lower.
All I can think of right now is some javascript that will scroll down the page a bit further when this happens.
@Rolfen
I realize this is an old thread, but Google is still taking people here. This is the solution I have just implemented.
Look for your anchor tag, i.e.:
<a name="p123"></a>
Replace it with this:
<div style="position:relative;">
<a name="p123" style="position:absolute; top:30px;"></a>
</div>
If you wanted the page to scroll above where the anchor tag was, you can make it negative, i.e. top:-30px;
This is a whole lot cleaner than a JavaScript solution because if another anchor link is clicked within the same page, the same rule can apply.
@Shamusmac
THANK the Lord. I've scoured the inter webs looking for this solution.
Thank you so much for posting despite the oldness of the thread! Saved my butt big time!! Made and account on here just to express my gratitude x)
Sign in to post your reply or Sign up for a free account.
Similar topics
by: ras |
last post by:
Hi,
I've the following piece of code use window.location to open a new window an
pas them some paramenter. I'd like to open the new windows in a frame using
a javascript. how can I do that....
|
by: duikboot |
last post by:
Hi there,
In Photoshop I can, when I want to change the dpi(dots per inch) of a
picture, arrange that the picture won't be resized. Do you know of a way, I
can accomplish this in python with...
|
by: Bryan |
last post by:
Hi, I have a form that I want to click a button on and cause the
location.href to change. this is what I used:
the function:
function testform(){
location.href="http://www.google.com"
}
|
by: Ken Baltrinic |
last post by:
Don't ask my why we need to do this, I didn't write the website policy :( ,
but we are deploying to a website where we cannot place any directories
directly off web root (i.e. aspnet_client) and...
|
by: klynn |
last post by:
I just built a .NET app where I put in the page an anchor such as:
<a id="whatever" href="somesite" target="_blank">My anchor</a>
for just one of my clients, when they click this anchor, ALL of...
|
by: Pim Sohful |
last post by:
Hi,
I have a website full of external links. On the site I have a checkbox where
users can indicate that they want to have the link opened in a new window or
in the same window.
It is rather...
|
by: monomaniac21 |
last post by:
Hi all
is it possible to get a button in an iframe to change location of
parent page?
regards
marc
|
by: libsfan01 |
last post by:
Hi all
is it possible to get a button in an iframe to change location of
parent page?
regards
marc
|
by: oopaevah |
last post by:
Hi,
I have a set of valid xhtml pages that a third party web site is
integrating with via an <iframein his own page. This retains his own
branding template in the header and footer, with the...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
