I'm new to web development, mostly just trying to teach myself how with internet tutorials and such. I'm a complete newbie, so this might be a dumb question, but I've searched google up and down, and have yet to find an answer.
Basically my problem is, I've created a web page with position: fixed; header at the top of the page. I've adjusted the margins of the page so that everything seems to look great. The page displays exactly as I intended it to.
However, I've come across a small flaw which I find myself incapable of fixing: I have a few links on the page that link to specific headings elsewhere on the same page. (For example, I have an element such as <section id="section_3">...</section>, and elsewhere on the same page I'm using .... It works and leads me to the appropriate header, but unfortunately the top of <section> element I linked to (mostly just the section heading) is being covered up by the fixed header at the top of the page, so I have to scroll up a little to read the section header. I've tried linking to an <h1> rather than a <section> element, thinking it might be incompatibility with html5 or some such, but I have the same problem that way too.
I'd like to have it so that the section header is the first visible element under the header when I follow these ID links. How can I do this? I would assume this is a common enough situation that there would be a simple fix to it, but I can't seem to find anything on the subject. (I have no issues using html5 or css3. Currently this is just a personal project, and by the time I'm making anything public I expect it will be far enough down the road that there won't be any issue using those. For the time being, it only needs to work on my browser.)
Thanks in advance for anyone who can help!
Just adding #johnniebenson comment, add the css like this for the related section. Let suppose the header's height is 60px and you would like to give some space below header about 40px then do this. Example: #section_3:target{ padding-top: 100px;margin-top: -100px}
You can try setting the padding-top of each section equal to the height of your header. Then link to the h1 in each section. That should do the trick.
Related
I'm making a web page to try to learn HTML, CSS, PHP, and Javascript better. I've been revisiting the code trying to work out a few bugs and I discovered that my search bar is hiding the page contents and a button on my sidebar. I spent about 10 to 11 hours this week to try to fix the problem. The thing is though I'm not sure what the problem is and so I don't know which part of my code to post. All I need help with is identifying a few possible problems. If you have an idea what the problem might be I would really appreciate your help. So far none of my ideas have worked.
Here is a picture of what the page currently looks like.
Can you try adding a css property of padding-top: 100px; to the content under the header and see if that does anything?
from the diagram it looks as if your search bar has been removed from the normal document flow. This is usually done in CSS setting the position attribute to absolute or fixed rather than static or relative.
Check your styling for position and set it to static or relative.
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
This is probably a really simple question. I have a link on the page tsawebmaster1.hhstsa.com/web_design.html that links to a div on the same page as the link itself using tsawebmaster1.hhstsa.com/web_design.html#seven_steps and it works just fine. The problem is that my fixed header is at the top of the page and thus overlaps the content by 100px, so when it takes you to that div, the user does not see the top of the div linked to. Is there a way I can link 100px less than a certain div.
I don't know if this will work but you should try this:
Our seven core steps to web design will teach you the simple steps on how a website is built. Before delving into any new topic, it is important to develop background knowledge of the whole picture. This way, when you start actually learning web design in depth, you'll be able to connect your under
Try put an empty paragraph between your logo and the contents.
You better use javascript to reach your goal. the window.scrollTo(x,y) function can make your page scroll to a specified amount of pixels on click (also it will look much more neat).
documentation: https://developer.mozilla.org/en-US/docs/Web/API/window.scrollTo
usage:
click to scroll down 100 pixels
I have a site with a header div and an iframe used to display a map in the rest of the page, resizing to the maximum space it can under the header div.
I can get the method working on Firefox and Chome, but the iframe won't fill the div on IE9. Anyone know what the issue is? Rather than post html, here's a few links to the problem page and the old page I'm re-designing that does work in the same way in IE9.
New problem page (doesn't resize div in IE9):
http://permitmap.paydirt.co.nz/devtest/permitmap.html
Old page using the same technique that does work in IE9:
http://permitmap.paydirt.co.nz/
It might be my abuse of Twitter's Bootstrap? I use bootstrap it as it's meant to be used on normal content pages, but this page is a one-off that needs to display a map in as much of the page as possible while still following the styling for the header as the rest of the site.
And my use of tables for layout is also bad practice I know, but it's the only method I've found to achieve the desired effect with the iframe (believe me, I've tried a lot of ideas out that don't use tables!).
Thanks in advance any CSS / HTML gurus out there that can help!
How much time is lost making IE behave like other browsers!? Microsoft must cost the planet an incredible amount in lost man hours and extra expense supporting IE.
Ah, just noticed I had to solve this issue with the original page.
Removing the DOCTYPE element from the top of the page resolves the issue in IE9!
Im wondering if anyone else has come across this problem when designing websites. Basically every time I zoom far out from my webpage the structure breaks and images and containers jump in to other parts of the page.
I have tried my very best to avoid this by measuring every div to the last pixel but this issue occurs, is there any tips for sorting this problem out.
Sorry that I cannot show an example, everything is on my localhost.
For a better website which doesnot breaks on zooming , please go through the following links.
Choosing the Dimensions for Your Web Page
Layout
How to create flexible sites quickly using standards like CSS and
XHTML
In Search of the Holy
Grail
Also here is the Blueprint Tests: grid.css. Check that link by zooming!!!
Cheers.
use html table tag right after your body tag when you put your body content in a table the content take automatically the width and height of their cells so when zooming it should not be a problem