Clickable area on button is too small - html

So I was experimenting with a new type of button, using a tutorial I cannot find now...and the end product WORKS but the clickable area on the button is extremely frustrating, small. I've tried editing the css since I think this is just a css issue but I cannot get it to work. Because of the small clickable area it seems to not work on a mobile device.
The website in question is http://forrestburdette.com/
The button in question is the top right button for their Children's Outreach Ministries. It seems to only be clickable on the far right middle of the button. I need some guidance on where I went wrong! Hoping this is an easy fix!!!

Currently the button is underneath the header which is why the link is being cut off. To solve this you need to add a z-index to the div containing the button, like so:
.forrest_burdette_childrens_outreach_button {
position: absolute;
top: -9px;
right: -1px;
width: 220px;
height: 52px;
z-index: 1; /* add z-index */
}
This will bring the button above the header, allowing the full width of the link to be clickable

Related

Various CSS questions to customize theme

I'm really new to programming and trying to customize a theme that I am using. However I am having several issues where if I fix one thing something else breaks. I've researched solutions for about 3 days and I think it's time I reach out to some more experienced with CSS for help.
I tried setting up a JSFiddle but it's not working correctly as I can't access the HTML file directly. The website is www.preethijagadeesh.com. Would it be possible to review the html/css files and provide suggestions for the following requirements?
Center the title (I believe this is found in the 'site_header'
class which is pasted below). I am using margin to change the percentage and it looks
different on various browsers.
I would also like to 'fix' the title so that when I scroll the title
goes with me. I used 'position: fixed' but it cause all the
content in the 'index' ID (pasted below) to overlay on the title/site_header.
The text in the 'About' page appears to be more on the left with
a lot of white space on the right. No matter what I am unable to get
the content to center regardless of which class I update.
The line/border_bottom that appears under the navigation items should be
the same length as the text. I tried updating it but now every time
I hover over the items the text/options move around
overlay a
black color on the thumbnails on hover. I got it to 'kind of' work.
It's just when I hover on the thumbnails, the images and the
'background color' flicker
Widen the gap between the thumbnails.
Right now, there are two columns, it would be great to just put some
space in between them.
Please let me know if there's any other information I can provide.
Change
.header_image {
float: left;
margin-top: 80px;
max-width: 100%;
}
to
.header_image {
text-align: center
margin-top: 80px;
max-width: 100%;
}
Add these to .site_header:
.site_header{
/* old css remains here... */
position: fixed;
top: 0;
left: 0;
right: 0;
}
Move the padding properties from the a to their parent instead (the .page_link div).
and 5. I can't get the thumbnails to display on your jsfiddle so I can't really give the answer. But for 4 I think something like this will help:
put a <div class="thumbnail-overlay"></div> inside your thumbnail html.
For the css:
.thumbnail-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}
.thumbnail-overlay:hover{
background-color: rgba(0,0,0,0.5);
}
Hopefully this helps.
.header_image is floating, so you can't center it nicely. If you remove the float and then use text-align: center;, the image should center.
Not really sure where you are wanting the title to appear - should it be above the content or to the left of the content?
You have removed the padding from the links to resize the underline, but it's only been changed on hover. This is what is causing the "jumping" navigation links. If you add this code to .navigation a (instead of .navigation a:hover), this should work nicely:
.navigation a {
padding: 0;
margin-right: 6px;
margin-left: 7px;
}
Instead of using .thumb_image:hover, try using .thumbnail:hover .thumb_image and see if that's helps with the flickering. Also, maybe remove the background-position: 0 -30px;.
Is a plugin being used to generate and control the thumbnail images? The absolute positioning being used on the thumbnail images will make it difficult to reposition them.
You should be creating the site offline and reviewing your work before migrating the site to your host.
If your host does not allow you to migrate your site and/or denies you access to your HTML files, you need find a new web host.

Html element changes position when the page is refreshed in chrome

I'm using chrome and when I go to this page the menu is not visible. The menu is the 3 lines button at the top right. If you go now and open the inspector the element is hidden because is above the header. Now if you refresh the page the menu is correctly positioned. Also happens in chromium. The page in question is: http://playszone.com/ (Don't click on the link, read below)
In order to reproduce the problem you should not click on the link. Open a new tab and copy paste the url. Then refresh the page.
If you go to inspector and disable and enable the position on the body > .wrapper > header > .icons it will show at the right place. I really cannot understand what is making the page to wrongly position the element, only when open in a new tab and write the site url.
What is the problem? Is my fault or what?
Add this, it fixes it. bottom: 1px
.icons {
display: inline-block;
height: 55px;
position: absolute;
right: 0;
bottom: 1px;
}
Or...
.icons {
display: inline-block;
height: 55px;
float: right;
}
Actually it's not in the right place. It's in the "same place" in the code, but when you hover the code of the "icons" div, it shows you on the page that it's actually a little bit lower, behind your white menu and since the menu is probably rendered on top of it, you can't see it.
A quick fix would probably be to set the "icons" div with absolute positionning and setting the position-top to 0px.

how to show sub-menu when using the scroll bar on a menu?

Good morning, I have a menu where you need it has a vertical side bar. As you can see in the picture, I could add it. However, when the mouse pointer hovers over the menu items, submenus appear, but they are hidden by the bar. I would like the sub menus stay overlapped the bar, ie, they appeared in front, not getting hidden. Already tried changing the z-index of the submenu, but it did not work. Anyone know any alternative, or how can I solve this?
then, as the system menu is all dynamically mounted, I created an example in jsFiddle. The problem is that the menu has sub-menus, and when I try to access them, they are "inside" the box that creates the scrollbar. link: jsfiddle.net/tBJe3/10/
thank you!
try this one,
.menuLateral {
margin-left: 4px;
margin-top: 1%;
position: relative;
width: 35%;
height:200px;
color: #B2C2B9;
float: left;
overflow:visible;
}
http://jsfiddle.net/tBJe3/11/
In your code you have set position: relative; for almost all containers. If you remove them, your absolutely positioned sub-menus will be relative to the document and also will be on top of your scrollable content.
Here is the updated version of your code in JSFiddle.
Please note, that by doing in this way, some of your sub-menus will not appear where you want. So maybe you need to make with fixed positions or position them manually (and dynamically) using JavaScript.

Horizontal Shif of Facebook button in floating bar under Firefox

I have a floating bar that contains 5 social buttons. Only the Facebook button is shifting about 20 pixels in the left.
In the tens of CSS elements of the button under elements inspector, when I deactivate the position: absolute; of the code below, the button goes to its normal place. But I am not sure if it is the appropriate solution since it can affect the beahviour in other browsers.
.fb_iframe_widget iframe {
position: absolute;
}
Do you have an idea about this problem? Your help is appreciated.
You can try adding this to your CSS:
.fb_iframe_widget iframe {
position: relative !important;
}
That should fix it.
I also got this problem today. It seems that Facebook recently made a change to the Like buttons.
I'm adding this code to all my sites with Fb Like buttons now.

Can't Make Image Move via CSS

I'm trying to move the image for Trip Advisor on this page (at the bottom right). As seen in this screenshot, it needs to move up and to the right to fit in the orange/pink box.
When I apply negative margin, the image gets hidden behind the orange/pink box. I've tried adding various z-index values to make it appear on-top, however nothing seems to work.
Any idea what I'm doing wrong?
Note: This image (for Trip Advisor) is reused on the home page as well. Any CSS styling applied should not affect the positioning of the image on the home page.
No problem! Hope this helps.
.TA_rated {
width: 155px;
height: 77px;
position: absolute;
left: 265px;
top: -6px;
margin: 0;
}
Edit: only tested in Safari, but should be OK elsewhere...