I'm trying to solve the problem showed on the picture.
I have a site of a width of 980px (margin:auto) centered in the middle of the page and I need surrounding background of a width of 400px each side. But when user narrows the width of the browser the background shouldn't affect horizontal bar (only the width of the page itself 980px)
Plus there's an image which is placed 80% in the main page and the rest outside of the page. I also want this piece of the image (20%) not to affect the horizontal bar when user narrows the width of the window.
THANKS!!!
image:
http://tinypic.com/r/ri58io/8
code: link to fiddlehttps://jsfiddle.net/c0ro66s4/
The thing with this design is that the 'background' boxes have a fix width. When the fill the rest of remaining width (next to the content) no scrollbar appears (at least, not in Firefox).
So what I've did is made a media query. When the screen size is bigger than (980+400+400=) 1780px the boxes will have their normal width. As soon as the screensize becomes under the 1780px, the width will be set to auto and we use the 'left' position, which makes them fill the screen and won't show the scrollbars.
I made the testcase in JSFiddle with half the sizes (otherwise it wouldn't fit on my screen).
<div id="content">Content</div>
<div id="bgLeft"> </div>
<div id="bgRight"> </div>
body, html { margin: 0; padding: 0; min-height: 100%; }
#content {
background: lightblue;
position: absolute;
width: 490px;
height: 100%;
left: 50%;
margin-left: -245px;
}
#bgLeft {
background: lightgreen;
position: absolute;
width: 200px;
right: 50%;
margin-right: 245px;
height: 100%;
}
#bgRight {
background: lightgreen;
position: absolute;
width: 200px;
left: 50%;
margin-left: 245px;
height: 100%;
}
#media screen and ( max-width: 890px ) {
#bgLeft {
width: auto;
left: 0;
}
#bgRight {
width: auto;
right: 0;
}
}
Set the image as background in both boxes and a align the one in the left box on the right and the one in the right box on the left.
DEMO
EDIT
Added your background-images: DEMO 2
Related
I would appreciate some wisdom here: I have 2 divs side by side each with a width of 50% of its parent div (body set at 200%) - to act like seperate horizontal pages. I would like each div to remain in full view when reducing and expanding the browser window. Currently by expanding the window size when the blue div in viewable the red div gets dragged into view as the scrollbar moves towards the centre of the browser.
body {
position: relative;
width: 200%;
height: 100%;
}
.block1 {
position: absolute;
width: 50%;
height: 100%;
background-color: #B00;
min-height: 800px;
left: 0px;
}
.block2 {
position: absolute;
width: 50%;
height: 100%;
background-color: #00A;
min-height: 800px;
left: 50%;
}
<body>
<div class="block1">
</div>
<div class="block2">
</div>
</body>
why not making only one div to be displayed and you add a button or something after clicking it will add some styling effect to hide the visible div and show the hidden one?
I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ).
I will make it resizable with jQuery resizable.
The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same.
Any idea what to do?
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
background-color: red;
}
<div>
</div>
View the snippet in full page.
vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.
Next (The resizing part) can be done with CSS resize property.
**PS: In the div bottom right corner you can see the resize icon and do the resizing.
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
div {
position: fixed;
bottom: 0px;
width: 500px;
background-color: red;
resize:vertical;
overflow:auto;
}
<div id="demo"></div>
You can add min-height to div so that it will not resize itself beyond a specific height.
Like this
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
min-height: 500px;
background-color: red;
}
<div>
</div>
I'm trying to achieve an example as shown on this site. Click on the "Projects" button on the top right corner below the main menu to reveal the container I am interested in replicating.
When stretching the webpage from left to right and top to bottom, that project pop up is responsive and the padding around the page keeps the same value. I was able to get my width responsive but cannot figure out how to get the same thing for my height since I don't have a specific value for my height. I want the box in my site to be responsive on bigger computer screens than what I am using right now (15" macbook pro) because right now it only takes up half the screen on a bigger monitor.
Here's my code:
nav {
/* max-width: 1266px; */
width: 87.92%;
margin: 50px auto 23px auto;
height: 40px;
background-color: pink;
}
.content {
/* width: 1266px; */
width: 87.92%;
height: 540px;
margin: 0px auto 0px auto;
background-color: aquamarine;
}
<nav>
</nav>
<div class="content">
</div>
Try here.
I want there to have 50px padding at the top and bottom of the webpage even as you shrink the page top to bottom. Right now my nav has a margin-top of 50px, but ideally, I'd like the entire page to have a padding of 50px at the top and bottom. I just don't know how to go about this and I can't seem to find an answer anywhere!
Thank you!!
You can use calc() for this:
height: calc(100vh - 163px);
100vh = total height of screen
163px = 113px + 50px
(113px is the height of your nav with margins and 50px is the distance to the page bottom)
There are several ways to do. One way is to use fixed or absolute positioning. The page http://kokopako.fr/profile fixes the position. Notice that the body in that page no longer scrolls when the Projects menu is open. This is something you need to enable using JavaScript.
So, imagine originally the body is tall and only the navigation is visible at the top:
body {
height: 1900px;
}
nav {
height: 40px;
background-color: pink;
width: 87.92%;
margin: 50px auto 23px auto;
}
.content {
background-color: aquamarine;
display: none;
}
Then when you click no "Projects" button, you would add an extra class, say projects_visible to body so that it doesn't scroll.
.projects_visible {
overflow: hidden;
}
Then the navigation and the content would display automatically with fixed position.
.projects_visible nav {
position: absolute;
top: 50px;
right: 50px;
left: 50px;
margin: 0;
}
.projects_visible .content {
display: block;
position: absolute;
bottom: 50px;
top: 123px;
right: 50px;
left: 50px;
}
I have found this vertical centring method which seems pretty common..
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
What I'm trying to center here is the entire site, and this code goes perfectly as expected when the screen preview is larger than the div height (larger than 740px). However, Once the browser window is minimized less than div's vertical size (740px) parts of the header disappear above the top of the page.
I can sort of understand why this is happening seeing that 50% becomes less than half the div's size which will be equalized with margin-top.
What I'm looking for is a fix for this issue? Or even a completely different method, I just need to center the site both vertically and horizontally.
try this:
#container {
height: 740px;
width: 960px;
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}
By the way, Smashing Magazine recently published a nice article about this.
You need to add a media query:
#media screen and (min-height:740px) {
#container {
top:0;
margin-top:0;
}
}
This will only apply the formatting where the screen is at least 740px tall. If you want to learn more about media queries, check http://www.w3.org/TR/css3-mediaqueries/
Absolute Centering like Lino Rosa mentioned is the best approach here for easy horizontal and vertical centering while allowing you to add some responsive touches, like fixing your height issue.
Ideally, you should be using percentages for the width and height declarations so that your content will vary with the viewport. Of course, sometimes you just need pixels :-)
Here's what I've done:
.Absolute-Center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#container {
width: 960px;
max-width: 90%;
height: 740px;
max-height: 90%;
overflow: auto;
}
By setting a max-height and max-width, the box will never be more than 90% of the container (in this case, the browser viewport) even if it's less than 960px wide or 740px tall, so even small screens see a nice centered box. overflow: auto ensures that if the content is longer than the box, the user can scroll in the box to see the rest.
View the demo
If you must have the box exactly 960px by 740px no matter the screen size (forcing the user to scroll around to see all of the content on a small window), then only apply the Absolute Centering styles to #container using a media query, like so:
#container {
width: 960px;
height: 740px;
overflow: auto;
margin: auto;
}
#media screen and (min-height:740px) and (min-width: 960px) {
#container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
}
View the demo
I encountered the same issue. As the height of my element is dynamically changed, I can't give it a fixed height.
Here is a demo below, hope it helps.
.wrapper {
display: table;
height: 100vh;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
background-color: lightblue;
}
.content {
width: 30%;
height: 30%;
background-color: red;
}
<html>
</html>
<body>
<div class="wrapper">
<div id="container">
<div class="content">
</div>
</div>
</div>
</body>
I'm making a single page website, so it is a long page.
But I want to make a first div which is full height and full width of the page, and has a logo centered. Then I want to put divs below it with fixed heights.
So when the page is opened, the logo is always centered, and the div below is not yet visible (because the first takes full height). And when they start scrolling, the next div is right under it and shows up.
Is this even possible? I tried looking for this but found nothing.
Thanks
Max
Here you go: http://jsfiddle.net/BramVanroy/NMeAQ/
html, body {
width: 100%;
height: 100%;
}
#logo {
width: 100%;
height: 100%;
background: #ccc;
}
#logo > img {
border: 10px white solid;
left: 50%;
margin-left: -130px; /* the width of your image divided by 2 */
top: 50%;
margin-top: -130px; /* the height of your image divided by 2 */
position: absolute;
}