Help. I just upgraded my website so that it's mobile-friendly. Now a lot of links don't work. In fact, the very same link will work in one place on the page (the menu), but then not work elsewhere on the same page. I seem to have numerous links throughout the site that don't work even though the code looks right. Even when I put in absolute coding, it still isn't clickable. I would appreciate any help.
Thanks. This is my home page: http://hotsermons.com/index.html
The problem you've added some divs on links, So when you hover on the link, you actually hover on this div not the link.
To solve this make sure you're using position and z-index properties correctly.
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.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I recently switched my menu to a responsive menu. I'm not the best with html so I used a free menu. It works perfectly fine, even on mobile, but it doesn't seem to work on firefox. Sadly our site gets a bit of traffic after some advertising for our horse and I just switched the whole site to the new design. Now I don't want people to look at our site and not see a menu so I don't know what to do which is why I'm asking for help here.
http://ykw-gypsyhorses.com/ is my website. Does anyone know how to fix it?
I don't want to mess up my coding again so I haven't tried anything yet.
Try adding position:absolute; and z-index:10000; to the menu's selector. This will ensure that the menu stays on top.
Currently having a big problem with the layout of a site. It works fine in every other browser but for some reason, in IE, the menu's aren't expanding when they are clicked on. The screenshot below is how the list should look when a button is clicked on, this has also pushed down the elements of the bottom of the website such as the footer and images. The website address is www.citybathcoll.ac.uk if you want to see it first hand. From what I can see, it might be an unclosed tag but I can't see anything that stands out. Any help would be appreciated, Thanks.
Screenshot: http://imgur.com/ML3BYRk
I was finishing up a website that Im doing for a friend and I ran into a problem on this page
http://directv.spacecommand.tv/order/
(For informative purposes. He's an authorized dealer for all the companies listed on the website so were able to use content from their respective websites. We asked.)
The form that is there isnt clickable. I tried looking for a mistake but I cant seem to find out what it is. Im 17, this is my first website, im lacking some experience. So it could be something obvious. If you notice something wrong, please let me know. Thanks.
EDIT: Im using nested DIVs. Ive tried stacking them with z-index but it doesnt seem to work.
Remove the z-index: -1 declaration in #maincontainer. This is causing the div to be placed beneath the body, making it unclickable.