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.
Related
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.
So working on this website and faced with an issue of blank space on the right side of the page on mobile view. I've looked at everything and still cant seem to get rid of it.
I deleted each section of the site hoping to find the area where the issue was (overflowing form something I thought) but it was always there so I don't know what to do.
[link removed] is the site on the dev server.
Im really stumped by this so hope someone can help me. Thanks in advance
The issue is visible only on mobile and almost no way to debug that (well there is a way, kind of a hard way to debug that).
Any long story short ... i suppose one of the page elements is not behaving as it should in mobile view. With this i mean, an element, element X for example is wider then the width of your mobile screen so it creates that white screen issue.
What im gonna propose here is not a 100% solution, is more like a workaround but it will work if the issue is what i supposed:
Apply this css rule on the body tag:
body { overflow-x: hidden; }
http://validator.w3.org/nu/
Copy Paste your url or paste your code (at the "Check by" dropdown) and you'll see unclosed elements.
Close your elements, I think there is the solution
Thanks to everyone for your help. So I found the issue, As Arber suggested it was an element behaving badly. It was the contents of the carousel overflowing causing whitespace to appear, so I was able to rectify the problem. Thanks again! Tthe validation helps with a few other side issues too.
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/
I am working on a site here:
My Site
The issue I am having is when you shrink the window or view the site on a mobile device the images jump from the div container they are in, (the div id="client") into the widget div below it.
I do not know how to solve this issue and am having a hard time finding the html for the widgets in all the different .php files I have.
I am working on wordpress from a template that I have edited.
I am not sure if this is just a simple css problem or if code if conflicting each other.
If you need more information please let me know. I wasn't sure if posting any code would help.
I figured it out, all I needed to do is edit the parent div css and add
overflow:hidden
I'm working on my html project, and everything is going well.
Now I'm doing the same project with framesets, but I discovered that the page in a frame set won't scroll as a whole page (you can only scroll each frame at a time).
How can i solve this?
Please help
It sounds like what you want is perhaps a static design around your scrolling content, correct?
If so, what you should actually do is make a single page (not a frameset) with your desired DIV layout (a good example can be found here), and then have your content div use CSS that will allow it to scroll (e.g. overflow:scroll;).
Hope this helps.
Don't use frames! I know this is a horrible answer to your question, but believe me - loads of peeps would agree!
If you can, use plain ol' CSS and NO FRAMES.
Also, there is rogue synchronised scrolling Javascripts floating around on the Interwebs - But I wouldn't use them. People who have Javascript off won't get that effect.