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.
Related
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
I have a class js-drawer-open that gets applied to the body & html when a drawer is triggered to open.
.js-drawer-open {
overflow: hidden;
}
This works perfectly on desktop to prevent content outside the drawer from scrolling when the drawer is open. However on IOS this doesn't work as the element inside the body are position:absolute. The only way I could get it to work was with the following...
.js-drawer-open {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
But now my issue is if you scroll down the page and then open the drawer the page jumps back to the top of the screen which can be very frustrating for the user.
I think this is due to position: fixed being applied and I wanted to know if there is any way around this?
Any help would be much appreciated.
Maybe I'm missing something as you don't have a fiddle, but it sounds like your click event causes the jump to the top of your page. Take a look at: How to prevent a click on a '#' link from jumping to top of page in jQuery
I've set the Linkedin Follow button within a hidden element, so only when you hover an icon, the hidden element becomes visible and button is shown.
Problem is that in Firefox v35.0.1 the followers number is shown not on the same row, as if there is no enough space on the same row. Look at the photo:
When I'm expecting the source code it seems the iframe is being set width and height in the moment of becoming visible (on hover) and then (on blur) its width/height is set back to 0. In Chrome the iframe has a constant width/height, which doesn't change on hover.
I tried to set the iframe width with css, which didn't work because when I expected the code it turned out there is another iframe in the Linkedin iframe and the internal iframe has again wrong dimensions.
Any ideas?
UPDATE: when I set the wrapping element to be visible all is good, so this seems to cause the problem, but how can I fix it?
UPDATE 2: You can see the problem yourself: link (make sure open it in Firefox!)
EDIT: Someone edited my post removing Linkedin tag from it, but I truly believe that this is more their issue than Firefox's or CSS, as there is something within their javascript that adds the width/height to the button iframe and adds them wrong. Also in IE the same issue appears. I added the button twice - first time as it was and second time in a visible wrapper and it's obvious that in the visible wrapper all is OK, though in the hidden wrapper is broken.
UPDATE 3: I realized that the button iframe width is the same as its #body element's 'min-width: 57px', so if Linkedin team correct that min-width to let's say 120px this may solve this problem.
problem is here :
in firefox the loaded width are 2px in the element but in webkit(chrome and opera) are 106px.
the style is not making enough width to show elements in one line.
and here is answer :
.social-details {
width: 195px;
/* float: left; */
position: absolute;
left: -120px;
top: -7px;
background-color: white;
padding: 11px 10px 8px 10px;
z-index: -1;
border-radius: 5px;
visibility: hidden;
}
and
#social .social-linkedin:hover .social-details {
visibility: visible;
}
its allow the element load with 106px of width and it is hidden to users.
I am absolutely beginner in HTML and CSS.
What I would like to do is to create a strip in the left hand side of a webpage, similar to this:
https://www.inside.com/all
The strip has a number of clickable icons, and when one slides down the page, the strip and logos stay at the same location.
Is there any way to look at the page source and find out how it is implemented?
If not, I appreciate any help on how to go about this.
The key is using position: fixed; and height: 100%;.
CSS code
.verticalStrip {
position: fixed;
top: 0;
left: 0;
width: 200px;
background-color: grey;
height:100%;
}
.content {
padding-left: 250px;
}
HTML Code
<div class="content"> content of the page....</div>
working demo: http://jsfiddle.net/h85er/
If you're using a modern browser such as Chrome, Firefox, or even newer versions of IE, there's an inspector tool you can use. In chrome, just right click any part of the page you want to see the source for and click Inspect Element.
Otherwise, most browsers will allow you to view the page source. Often, it's a simple right click, or an option somewhere in the toolbar.
That navbar can be easily recreated by using a div element at a fixed position at the left side of the screen position:fixed;left:0;top:0;. Then, a list (ul) can be used for individual navigation elements. Naturally, you'll want to use list-style: none; to remove those ugly bullet points.
EDIT: JSfiddle available here
At the top of a website I'm currently working on, I defined a «Skip to content»-Link with the following markup:
Skip to content
I placed this link somewhere outside the viewport, using CSS position: absolute. As soon as somebody focusses the link (when «tabbing» trough the page), the link gets moved back to the viewport and it pushes the content below down a bit, so it gets the space it needs.
#skip-to-content {
display: block;
text-align: center;
position: absolute;
top: -999px;
}
#skip-to-content:focus {
position: static;
outline: 0 none;
border: 1px solid #681;
top: 0;
}
If you now click the link, my browser skips to the content correctly, but after that the link looses focus, so the content slips up again a little bit (because the link above gets moved out of the viewport again). So in the end, you need to scroll up a little bit to see the beginning of the content. It looks, as if the anchor link would skip too far.
Is there any way I can make sure, the link always skips to the content and not some pixels below?
Please don't suggest any JavaScript-Solutions, this is basic functionality that needs to work in every browser. Thanks for your help.
— André
While not an elegant solution, try adding this to your CSS, it may give you an idea of how to fix it.
#content {
margin-top: -60px;
padding: 60px 1.1em 1.1em;/*add approx 1.1em in px for top padding here*/
}
Where 60px is the approximate added height when the skip link is visible. It's just moving the top edge of #content up a little bit. You can try different measurements to get the padding back to where it needs to be. I didn't want to suggest wrapper divs or anything, but that could work to give you the exact 1.1em top padding you originally had.
If you can figure out the exact total added height when the link is visible, use that measurement in ems instead of px.
You could just not reset the position back to static in your :focus rule.