Html frames are good choice for some scenarios on web content, especially simple content management.
My page contains a top frame and content frame. My problem is, as the page moves down to end, the top should move too, and if scrolling equals top heiht, the top woldn's be seem.
Note: There is only one top page in this project and many content pages. The content pages do not contains also a top page code. Jus the known frameset template. The only difference is frames are desired to move .
What I could understand is that you tried to create a section of the page that scrolls as you scroll down/up on the page.
In your CSS, if your iframe id is "frame",
then do this
#frame{
position:fixed;
/* specify widths and heights as you like */
}
If you have a header that needs to stay at the top of the page use the
position: fixed;
technique, if im wrong you need to seriously rephrase your question.
Related
I've created a static portfolio site for myself in GitHub Pages that is incredibly simple to keep maintenance easy. I have a 3-line title at the top of every page that acts as a navigation. However, I've somehow created a small (10 or so px) shift between the home page and all of the interior pages.
When I inspect the code in DevTools, I can see that the content for both pages is 600px wide with a 25px padding on either side of the content. The horizontal content margins are set to auto to center the main content block on each page, but on the interior pages, the margins are slightly different than the home page.
The home page - https://www.parkermyers.com
An interior page with a single img - https://www.parkermyers.com/about.html
An interior page with multiple img tags - https://parkermyers.com/nighttrain.html
Hopefully you can see that there is a shift in the margins when navigating from the home page to either of the two provided interior pages.
The furthest I've gotten in troubleshooting is that it's probably related to the img tag that is present on all interior pages but not the home page (could possibly be the surrounding figure tags as well). For example, on the /about page of the site, when I delete the lone img, the content margins shift a bit and realign with the home page.
So my best guess is that there's something to do with the width or size of the image that makes the content slightly larger and thus affects the margins, but I've messed around with the width to no success.
The comment that mentioned the scroll bar helped me troubleshoot more efficiently to find a solution for my problem! The issue was not directly the img tag, but the vertical space that the images took up meant that there was a scroll bar on the interior pages and not the home page.
After using that knowledge to dig further, I found that
body {
overflow-y: scroll
}
created a permanent space for the scrollbar whether it was being used or not. This solved my alignment issue! A small side effect is that the space for the scroll bar is not invisible when not being used, but it's a small price to pay for consistent alignment.
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want