Here's the situation. I'm building a webpage where i position an image on the right side of the page. When I make the browser window smaller, i want horizontal scroll bars to appear, so i include overflow: visible property. I also want the image to be positioned fixed so that when the page is scrolled down the content in the middle along with the background scrolls but the image stays as it is. But I am not able to bring both features to my page.The two properties seem to conflict each other. Is there a way around it?
Your code is too little.The problem of the front with the example of code.
try img fixed:
img.fixed{
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 55;
}
I think you need to use css concept called media types....
you can not achieve this using only position:fixed
add this css to your page
#media all and (max-width: 699px), (max-height: 500px){
.overflowDiv{
position:fixed;top:100px;height:100px;width:100px;
overflow:scroll;
}
change max-width and max-height according to your need
here is jsfiddle demo
Hope it'll help you.
Thank you
Related
I am not sure why there is a spacing (margin/padding) to the left in the second and third tabs. The test site location is: http://new.vonsazkin.com/index.aspx
Click on Residents in top menu and then click on the Events tab or the Records tab. You'll notice that the grid is pushed down. If I set the width of the grid to auto, then it moves up where I want it, but it shrinks. The max width I can set is 66.67% but it is shifted to the right. I want the grid to be 100% width and not have the spacing on top. You can right click in the browser and click the Inspect Element option to view the page code and CSS for the site.
Any clue?
Thanks in advance!
Interesting :) I found where the problem is: style.css
.residents_block .tab-pane {
display: block;
...
This display: block is messing with showing/hiding tabs. With this CSS other tabs are there but have opacity: 0. I believe this is some custom css (which breaks bootstrap functionality) and you should remove it...
All you need to do is absolute position the table when its parent is relatively positioned.
.resident_workspace_form .table-wrapper {
position: relative;
}
.resident_workspace_form table.alt {
position: absolute;
}
The padding between tabs
I didn't really understand what's your problem, but if you have in mind the space between the tabs - you have padding. Also tabs have height at media (max-width: 1199px) and (min-width: 992px) The height of tabs.
I want to display my footer at the bottom of the page, relative to the content area. So it should adapt if my browser is smaller or larger, up until where the content area stops.
I tried to follow this link but I can't seem to get it to work on my website.
I added the PUSH div at the bottom of my content area
I set the correct heights and adjustments in the css
My footer is still displayed half way on my screen and also messes up the titles. The guys that sold me the Wordpress theme are reluctant to help me ...
If anyone could guide me in the right direction that would be a great help!
I think this could do what you want:
body {
padding-bottom: 50px;
/* Set a padding-botton equivalent
to the height of your footer
this is for preventing the
footer to be covered because
of its z-index
*/
}
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: -999;
}
Hope it works ;)
Add the following code to your css:
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}
The footer will be always on the bottom.
Ok so the issue here is this, you can stick the item to the bottom as #Dzhambazov suggested either with position:absolute or position: fixed it is going to stay in place at the bottom even if that is halfway up your content.
So you can go with other alternates like: How do you get the footer to stay at the bottom of a Web page?
Mentioned in the comments, but this is not going to be as easy with a prebuilt theme as you will be fighting with the theme dev's structure.
What you could do as a fix to make it more bearable is to increase the minimum height of the content so that it "fakes" the footer further down, this has its draw backs and could mean that your footer is off the bottom of the view port, but if it is irritating you to that level. you could try.
#content {
min-height: 200px;
/* forces the content block to take up space */
}
hope that helps other wise stick the footer to the bottom as mentiones and have it always display, but note that may trash mobile so you will want to remove the positioning via a media query for phones etc.
The situation i'm facing :
i have an asp.net with a header, sidebar and another right sidebar. the thing is when i execute my website in browser and mimimize browser window. the sidebar on the left jumps on the content page and controls get all mixed. see picture for an idea.
Another problem is when i executed that website in a wider screen resolution the controls ( panels ) had a bigger margin and evertyhing look wider.
Any ideas how to fix this ?
Thank you in advance
EDIT:
Sidepanel ( right ) CSS code:
#droite
{
position: fixed;
top: 22.5em;
right: 5%;
width: 13%;
background-color: White;
}
What I did on my website (firedrake969.github.io) was add some simple jQuery code to hide the sidebar whenever the window became too small. If you don't mind using jQuery, I'd say that's the way to go. However, if you don't want to use jQuery, I don't think position:fixed can have the bar hide just with CSS/HTML if the browser window gets too small.
You probably need something similar to this. the max-width can be set to any screen width you choose.
#media screen and (max-width:768px) {
#droite
{
position: fixed;
top: 22.5em;
left:5%;
width: 100%;
background-color: White;
}
}
I am having some troubles here: http://test30.hscreativedev.co.uk/index2.html
When the width of the window reduces (#media (max-width: 768px) it is impossible to scroll down and read all the text.
So far, I've tried overflow-y: scroll but it doesn't work.
Does anyone have any suggestion? Min-height: 100% on that div won't work.
Thank you very much.
Im not sure if you meant to do this, but you've got your content on position: fixed and the background scrollable.
You'll need to remove the position: fixed on the content container and add it to the background instead.
EDIT:
If you want to have your text over the image as you have currently, either change the picture of the woman to a background-image on the inner-cover or cover-container divs or add position: absolute to your content and add top: Ypx, Y being the distance from the top of the page.
See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.
You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}