I'm working on a personal website, not a responsive website but i just want to have same "layouting" at least between different screens (not mobile).
For example :
<div class="first-div">
<div class="second-div"></div>
</div>
CSS looks like :
.first-div{
width:100%;
height:100%;
background-color:blue;
}
.second-div{
width:1380px;
height:1000px;
background-color:red;
}
When i test this in my 13" screen the red (second div) is quiet, but, in another laptop (even 13") i have to scroll horizontally to see all the second div (the red one).
My question is what is the good width to set even if i do not want a responsive design ?
I guess by using the words same "layouting" and same “width” you mean percent sizing.
if you change your css to this for example and give the first div a position: relative:
.first-div{
width:100%;
height:100%;
background-color:blue;
position: relative;
}
.second-div{
width:95%;
height:95%;
background-color:red;
}
you'll almost get the same layout in every screen, so that for example the first div fills the whole screen and the second one gets only 95%
You can try
.first-div{
width:100%;
height:100%;
background-color:blue;
}
.second-div{
margin:0px auto;
width:98%;
height:98%;
background-color:red;
}
If you're going on fixed width, some screens will have to scroll.
You're mixing relative and fixed here.
If you want to make sure it doesn't go over a certain limit, use max-width, and accept that some screens won't work as expected.
Related
I have a dashboard left, and need that dashboard to be in the same size of the page, everytime it needs to get bigger i want to apply the scroll, at the moment i am doing something like this:
style="overflow-y: scroll; height:450px;"
this is applied to all my section, the thing here is that i set the height a value, i tried with height auto and 100%, but without success, any help with this?
my page is getting bigger because of that dashboard if i cant mantain the page size and give it a scroll it would help a lot
Thanks
you can try to set the min-height:100%
Is something like this appropriate.
body{
padding:0;
margin:0;
}
.a{
display:block;
position:absolute;
top:0;
left:0;
width: 20%;
height:100vw;
overflow:auto;
background-color:purple;
padding:0;
margin:0}
.b{display:block;
width:80%;
background-color:pink;
padding:0;
margin-left:20%;
min-height:100vw}
<div class="a">
</div>
<div class="b">
content
</div>
Use height: 100vh; // viewport height
Check compatibility here
http://www.caniuse.com/#search=vh
And if you want to support old browsers calculate "$(window).height()" and assign it to this div
How can i fix this issue? Everything is ok in desktop version but in mobile version pages overlap. Dont know what to do :D
enter image description here
Code:
Appreciated if you show us a little of your code to know your scenario. Anyways I think I have got what you need.
Use containers relative positioned inside an absolute container. Give them a width. Make them float left.
Use #media tags to resize them when you desire to change.
It is the right way to work. First you define for small devices then resize if larger. And you use relative positioning when you desire wrap normal (not flex) boxes.
I give you an example. I begin giving 100% width for small devices and I resize to 50% for larger screens (In the example im doing the change at 500px but you can use other). Give a look. Run the snippet on fullscreen to see the change and resize your browser screen to the minimum. Or copy paste the code and try it.
Your containers appearently seems absolute positioned.
.absolute {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.one {
display:block;
float:left;
text-align:center;
position:relative;
width:100%;
height:50px;
background:#f1f0f1;
}
.two {
display:block;
float:left;
text-align:center;
position:relative;
width:100%;
height:50px;
background:#a0aca0;
}
#media only screen and (min-width:500px) {
.one, .two {
width:50%;
}
}
<div class="absolute">
<div class="one"> PEACE </div>
<div class="two"> IN THE WORLD </div>
</div>
I understand how everything is supposed to work but I have no idea why it is not working. I am trying to have my page to have two main fixed divs. The left one stays the same at all times and the right one overflow downward when there is more content.
This as of right now works perfectly. The problem is the body or my #bodywrapper divs or anything I make to have a min-width to store the #header and #bodyholder so that when the page shrinks to lower than 1280px horizontally it will require the whole page to overflow/produce a scrollbar so that you can see both the #header and #bodyholder divs. I have attached examples of what I am talking about.
since I do not have 10 rep points yet so here are the links to the images:
correct:
s1190.photobucket.com/user/obancooper/media/ex-correct_zpssnk69nck.png.html
wrong:
s1190.photobucket.com/user/obancooper/media/ex-wrong_zpsszf6kkoj.png.html
To help, the following is the best I can describe in HTML/CSS what the problem is:
html:
<div id="bodywrapper">
<div id="header">
</div>
<div id="bodyholder">
</div>
</div>
CSS:
#header { top:18px;
left:0px;
padding-right:0px;
height: 100%;
width: 18%;
position:fixed;
margin:0px;}
#bodyholder {width:82%;
min-width:1050px;
right:0px;
overflow:auto;
height:100%;
position:fixed;
}
#bodywrapper {
width:100%;
min-width:1280px;
overflow:scroll;}
My site is pumpingfe.com.
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;
}
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!
I need to fit an image inside a 300x300 div without stretching the image. I've seen this on the huff post, the slider on this page :
http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html
The images are clipped but not stretched.
Instead of using max-width, max-height.
How do I do this?
Those images on the site you linked to are actual size, so the simple answer is just to resize the image.
You can't really do this without "stretching" the image if the image happens to be less than 300px wide or tall, but you can do it without changing the ratio, which is what I think you mean.
Here's the basic idea:
<div><img></div>
If you want to use 300px as a minimum width (you expect small images that need to be bigger), try this:
div {
width:300px;
height:300px;
overflow:hidden;
}
div img {
min-width:100%;
}
Demo: http://jsfiddle.net/Z47JT/
If you want to clip images (because you expect them to be big) but not enlarge them, try this:
div {
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
div img {
position:absolute;
}
Demo: http://jsfiddle.net/Z47JT/1/
Combine both these techniques if you want.
Another way is to simply use background-image on the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-size which isn't fully supported. Otherwise, it's a great easy solution.
Use the flex box solution
Here is the html,
<div><img /></div>
Add styles
div{
width:100%;
height:250px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div img{
flex-shrink:0;
-webkit-flex-shrink: 0;
max-width:70%;
max-height:90%;
}
simple way to do this....
.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}