I am using position: fixed and bottom: 0 to affix something to the bottom of the screen. The name, however, appears to go off of the screen, on my 11" Air, and you can see the site here. I've posted my CSS code below for the div.
Broken JSFiddle: http://jsfiddle.net/MgdQv/
#credits {
color: #363636;
bottom: 0;
padding-right: 10em;
text-align: right;
position: fixed;
width: 100%;
opacity: 0;
-o-transition:1.5s;
-ms-transition:1.5s;
-moz-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
#credits:hover {
opacity: 0.8;
}
Add right: 30px (30px being the value of margin-right of parent body) and it should behave as expected.
Edit: and maybe remove padding-right: 10em. Forgot that I had desactivated it in Firebug before answering...
Also do not post link to a website: after you've fixed your problem, your question will become meaningless to future visitors of this question because the link will have changed... Please post relevant HTML and CSS reproducing your problem (and a fiddle)
You only must add an height-attribute to your #credits.
Related
I'm having unexpected issue on mobile Safari and Chrome that I can't replicate on the desktop. I was modifying a nav to fixed at the top, but found when I scroll down the footer hides the nav on the mobile browser.
I recorded an example to show you what I mean:
What's expected and works on desktop browser (footer slides under nav):
https://drive.google.com/open?id=1bmUMsfEpauuXx2Jhyf7l2YQrORj6E__z
What happens on mobile Safari and Chrome on iPhone (footer slides on top of nav):
https://drive.google.com/open?id=1-ri1DqmWPY8hrUP4LaUr-aGpnfH3eVhC
Site is available here:
http://michaelespinosa.com/projects/eskimo/index.html
Here is the css for the nav:
#eskimo-sidebar {
position: fixed;
top: 0;
left: auto;
right: auto;
width: 100%;
height: 200px;
margin-bottom: 60px;
z-index: 99;
}
Here is the css for the footer:
#eskimo-sidebar {
position: relative;
background-color: red;
}
I feel like I must be missing something obvious. Appreciate the help in advance.
Your website has a lot of problems, especially on mobile. What about the issue you mentioned, try to set z-index: 10 (or 100) to the element with eskimo-sidebar id.
For some reason the footer on one page of my site is not full width. There's a huge white space on the left that I cannot seem to get rid of and its causing my entire footer to be shifted to the right.
This is the current CSS:
#main-footer {
width: 105%;
margin-bottom: -50px;
margin-left: 0;
margin-right: 0;
height: auto;
padding: 50px;
background-color: #2E2E2E;
}
#top-footer {
height: 30px;
background-color: #77CAE9;
margin-left: 0;
width: 105%;
}
I have a feeling it's related to the page width but I can't figure out where to adjust that either. I'll be so grateful if someone can help me out with this!
EDIT: The URL to the page is http://tstand.com/blog
Thanks :)
Angela
Start with moving your <footer> outside of the <div class="container">.
The class .container is used to centre it's content in middle of the screen. See more details here here:
http://getbootstrap.com/css/
A common cause for this can be a default padding or margin of <body> or even <html>. In that case CSS like this should fix it:
body {
margin:0;
}
If the problem persists please post a complete, but minimal example that demonstrates the issue.
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.