Incorrect scrolling after vertical centering - html

So I have a problem, after setting position: absolute; top: 50%; margin-top: -310px for my main content. The problem is when I minimalize the browser window and the vertical scroll appears, top part of the layout is hidden.
Here is what I mean: http://jsfiddle.net/95Uzt/15/. You can see the menu and contact form but the header above the form is not visible/covered by the browser. What is wrong?

I think you're trying to handle two cases with one piece of code, and that's just not working. You're going to need to use some kind of conditional code to handle the two cases.
Your two cases are:
For a viewport more than 620 pixels, you need to center the content
For a viewport less than 620 pixels, you need the content top aligned.
For more modern browsers that support it, you could look into using CSS:
#media screen and (max-height: 620px) {
.content
{
top: 0px;
margin-top: 0px;
}
}
If you need more extensive browser support, you'll need to use javascript, I think.

Related

Panel position changes when enlarging browser window

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;
}
}

make website adapt to all display size - HTML

I'm writing a website with HTML and CSS. My problem is that when I for example run my website in my browser, I adjust all the margins with percent. But then when I run my browser in fullscreen or if I adjust the size of the window the websites different parts fall apart and doesn't fit together as they should. Why doesn't the percent unit fix that problem since it's relative to the size of the window?
CSS:
#aboutMeDiv
{
background-image: url('noisyBlue.png');
position: absolute;
width: 100%;
height: 118px;
margin-top: 13.6em;
margin-left: -0.7%;
opacity: 0.5;
transition: opacity 0.3s;
}
How can I make it "the same way" even if the window changes?
Thanks!
A more precise answer cannot be given without seeing your code, but this issue can probably be solved by adding a min-width and max-width to your container element.
For example, if the structure seems to fall apart when the width is less than 700px and when it is greater than 1500px, you could use this:
.container {
max-width: 1500px;
min-width: 700px;
}
Of course, this might inhibit responsive design -- especially for mobile browsers. It may be a good idea to check out some already-made CSS frameworks like Twitter Bootstrap and Gumby Framework.
Edit following addition of code to the question:
How can I make it "the same way" even if the window changes? Thanks!
If you want #aboutMeDiv to be "the same way" even if the window size changes, you should use concrete numbers instead of percentages of the div size; i.e. change width: 100%; to a something like width: 700px;. Then, as noted above, you can use a min-width to make sure the screen shows all the content within the div.

conflict between positon:fixed and overflow:visible property in css

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

Vertical alignment of bootstrap modal on mobiles

This question seems to have been asked a number of times on github but I haven't come across any solutions:
https://github.com/twitter/bootstrap/issues/1399
how can the modal be vertically aligned properly on small screens?
Edit: As of Bootstrap 2.0.2, this is no longer an issue. Basically, bootstrap now implements the solution proposed below, which I'll leave here for reference purposes.
Generally, on small screens modals will fill out most of your window, so positioning relative to the button that triggered the modal doesn't make terribly much sense. What I usually do is just overwriting the modal position for phones:
#media (max-width: 767px) {
.modal {
top: 20px;
// negative left margin to position horizontally.
margin: 0 0 0 -280px;
// already in modals.less, just copied for clarification:
left: 50%;
position: fixed;
}
}
(This is in LESS, pure CSS solutions looks similar).

DIV alignment problem

This is the website I'm having problems with: http://bgflirt.com
I need the menu on the left to have a fixed width and the part with the user pictures should resize when the browser window is resized (width in percent). However, as you can see - the part where the content is refuses to align on the right of the menu, but is instead displayed below it. Can someone help me with this ?
For #content_wrap remove width:100% and float:left. This will make box to stretch to fill all available horizontal space.
You'll need to also clear floats in whatever way you prefer. E.g., add overflow: hidden; to #content_wrap.
This works for me in firebug.
BTW, since you use fixed-width graphics for header and footer (frame with those nice rounded corners), you can't really stretch them.
Try using something like this for your CSS:
.container {
position: relative;
}
.sidebar_wrap {
position: absolute;
top: 0;
left: 0;
width: 130px;
}
.content_wrap {
margin-left: 130px;
}
I believe that is much easier to work with than a float.
A couple of things.
First, get rid of the xhtml doctype and instead start using an html 4.01 strict doctype. xhtml, besides being on it's way out, has inconsistent rendering across a lot of browsers.
Second, this is MUCH easier to accomplish with a table. Just set the width of the table to 100% and the width of the first column to 130px. The layout engine will take care of sizing the other side. Incidentally, this will solve some of the other issues you're going to run into such as making both sides have the same height.
your #content_wrap div has a 100% width, like so it's impossible for it to float left when theres a menu with a 130px width...
You should make the menu's width in % if you really want to make the site resizable... something like
#sidebar_wrap{
width: 15%;
float: left;
}
#content_wrap{
width: 85%;
float: left;
}
note that the sum of the width can't be bigger than 100%, and you should take paddings and borders in consideration.