Probably a newbie question but I would like my div and its contents to stay exactly as they are when the screen resolution is reduced (i.e. horizontal scroll bar will appear at the bottom).
I would also like to know how you would stop the contents of the page from stretching when its above the maximum size.
Hope this makes sense.
<style>
#header_container {
background: #d1d4fa;
height: 4.5em;
}
#header_layout {
height: 8.5em;
background: #edeef9;
}
</style>
<body>
<div id="header_container">
<div class="container">
<div id="header_layout">
</div>
</div>
</body>
</html>
Also, em is scalable font size. Reference.
Use px to keep your font of same size regardless of screen size.
You can set a defined width for your containers and elements.
#header_container {
width: 960px;
}
Related
I want my background to be full screen with 100vh but i also want it that if I minimize the screen vertically that the background stays at the end of the picture that is on the background
header{background: #efe0d9; display: inline-block;width: 100%; float: left; height:100vh;padding: 1% 0 0;}
I want to have a background that ends at the bottom of the screen becase then the picture that is on the screen is big enough but when I minimize the screen vertically the pictures stay the same size (as wanted) but the background also goes up so the pictures are overlapping with next part of the websiteenter image description here
Have you tried setting min-height?
Edit: This may not be exactly what you're looking for, since I had to add an extra element, But you could try wrapping the <header> in a container with its height set to 100vh, making the header's contents take up the minimum height you want to cover, and giving the same background color to the wrapper and the header.
Check the snippet and toggle to full screen to see the background expand beyond the header's contents.
#container {
background: #efe0d9;
height: 100vh;
}
header {
background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
text-align: center;
}
body, p, hr {
margin: 0;
}
<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>
Edit: Adding a container div with its height set to 100vh and display set to flex, and giving the header a min-height seems to have done the trick. Here's an updated fiddle.
I have been creating a website for a client. I was using a laptop that was about 1280 by 800 in resolution. The website looked fine at that size. I just recently moved over to a desktop with a monitor nearly reaching 2000 in resolution. The website no longer looks that great. Is there a standard or a suggested max and min width/height for the body of a website? If someone were to view this, it would look unprofessional. What should I do?
Use % instead of pixels for defining the widthof your page elements.
Something like:
HTML:
<body>
<div class="siteWrapper">
<div class="header">
....
</div>
<div class="main">
....
</div>
<div class="footer">
....
</div>
</div>
</body>
CSS:
html, body {
width:100%;
}
.siteWrapper {
width:100%;
padding-left: 50px;
padding-right: 50px;
margin: 0 auto;
background-color: #333;
}
The above siteWrapper class will extend according to the screen width, which is 100% of the width and add a padding of 50px on either side. You can follow the same approach with the inner child divs and their elements too to achieve a responsive look.
This is just an example of course so the padding pixels, width percentages, background-color, etc are just random values kept for explanatory purposes.
I am trying to make a horizontally scrollable website. I took screenshots of my clients demo website, and labeled them out as images 1-8. To make the site scrollable horizontally I put all the images in a div and set no-wrap property. The problem is: Each image is too big for my screen. I want each image to perfectly fit the size of my view port. My question is: How do I make each image fit the entire screen fully, regardless of screen size?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="jquery-2.1.1.js"></script>
<script src="jquery.scrollpath.js"></script>
<script src="createScroll.js"></script>
</head>
<body>
<div id="scrollable">
<img src="1.png"></img>
<img src="2.png"></img>
<img src="4.png"></img>
<img src="5.png"></img>
<img src="6.png"></img>
<img src="7.png"></img>
<img src="8.png"></img>
</div>
</body>
</html>
CSS:
#scrollable {
display: inline;
white-space:nowrap;
float: left;
}
Try this, use vh with max-height:
CSS:
#scrollable {
width: 100%;
white-space: nowrap;
overflow-x: scroll;
}
img {
display: inline-block;
height: 100vh;
}
See JSFiddle: http://jsfiddle.net/48ck23L9/4/
Note that the second image is originally smaller than the viewport.
If you want something really responsive I'd go with DIV elements and background images. It's about images after all.
jsBin demo (resize to see the magic!)
<div id="scrollable">
<div style="background-image: url(1.jpg);"></div>
<div style="background-image: url(2.jpg);"></div>
<div style="background-image: url(3.jpg);"></div>
</div>
The Simple CSS:
#scrollable{
height:100%;
overflow-x: auto;
white-space: nowrap;
}
#scrollable > div{
background: none 50% / cover;
display:inline-block;
width:100%;
height:100%;
margin-right:-4px;
}
Note: Usign this technique as you can clearly see the images will be cropped-to-fit but every image will do exactly what you asked for:
I want each image to perfectly fit the size of my view port. My question is: How do I make each image fit the entire screen fully, regardless of screen size?
Otherwise, if you want to preserve the whole image, than the answer is banally simple. make it 100% height the container area.
You can use the vh and vw units.
img {
height: 100vh;
width: 100vw;
}
Can anyone enlighten me to why the following occurs with this test case?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
margin: 0;
padding: 0;
}
.section {
background-color: #000000;
color: #ffffff;
}
.wrap {
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="section">
<div class="wrap">Some content here</div>
</div>
</body>
</html>
When the window is big enough to accommodate 960px, everything works as expected.
When the window is resized to smaller than 960px a horizontal scrollbar appears (As expected). However, when scrolling horizontally it appears that the .section div has not been stretched across the document and appears only to be the width of the window, therefore revealing the body's white background.
I would normally expect the black, .section div to stretch across the document since it's display: block by default.
Does anyone know why this is happening and more importantly, how to get the result I expect?
Cheers
It's because the witdth of your section is only as big as what's in it. In this case this means your wrapper which is set to 960px. Setting the section in percentage only works as percentage of the available screen, so width:100% wouldn't solve this. You should set your section width to a specific number and that would fix the issue.
Edit: Use min-width instead of width and it works even better for when you go bigger than you min-width.
section is sizing to it's contents, try setting width:100% on .section
In addition, you may want to add this to .wrap
margin-left:auto;
margin-right:auto;
that will center the wrap div
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.