17

So I have divs that I have within my webpage .. like header , or div boxes .. they adjust fine on bigger screen sizes so that they dont look too tiny on a big monitor , but the issue is that when I resize the window or browser to make it small , all the elements move along till they reach a point where they all meet and it gets ugly .. How can I make it so the divs I have adjust to bigger screen sizes becoming bigger as well , but then stop them from moving along with the window when resizing the window making it smaller ??? I used percentages from all the elements I want to readjust and make bigger on bigger /wider screens

Below is an example of my code .. my header and other elements with these classes move to the point where they overlap when resizing the window

.header{
        position:absolute;
        top:0px;
        width:100%;
        height:100px;
        left:0;
        background:#EB6A4A; 
    }

    .slogan{
        position:absolute;
        top:60%;
        left:40.5%;
    }

    .login{
        position:absolute;
        top:15%;
        left:90%;
    }

        .whitebackground{
        background:#FFFFFF;
    }
4

1 回答 1

23

I'm not sure about your question because you didn't post any code but i think that your solution can be using css style:

max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;

properties in pecentage or pixel as you prefer, so you can tell divs how much expand and how much get smaller.

Hope it helps, if you post your code maybe i can be more useful.

Regards

EDIT 1:

This should resolve your problem:

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;

}
.header{
        position:relative;
        float:left;
        top:0px;
        width:100%;
        height:100px;
        left:0;
        background:#EB6A4A; 
    }

    .slogan{
        position:relative;
        float:left;
        top:60%;
        left:40.5%;
    }

    .login{
        position:relative;
        float:left;
        top:15%;
        left:90%;
    }

        .whitebackground{
        background:#FFFFFF;
    }

Just do the same with the class you didn't poste in css. The idea is having all items with position relative and floated on the left so they don't move. Should work!

于 2013-10-14T19:08:17.677 回答