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;
}
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 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'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
I'm having an issue with a fluid sidebar and a content box next to it.
I designed my left #sidebar to my liking, but not I'm having trouble making a content box that fills up the remaining space next to it.
I'd like to have the whole project take up 100% of the page width. The problem is coming from the min/max widths on my sidebar.
Been goin' hard on this all day and still having problems, void space between, overlapping ,ect.
http://jsfiddle.net/DrDavidBowman01/PjLgE/
CSS
#container {
width: 100%;
display: block;
height: 100%;
}
#sidebar {
display: block;
width: 22%;
float:left;
min-width: 236px;
max-width: 332px;
height: 100%;
position: fixed;
border: 2px solid #0C6;
background-color: #000;
}
#content {
width: 88%;
height: 400px;
border: 6px solid #F00;
display: block;
color: #fff;
float: left;
position: relative;
max-width: calc(88% - 236px);
min-width: calc(88% - 332px);
}
HTML
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
It's a combination of two things. First, if you want to have divs take up 100% height, then you'll need to set the body and html to that as well.
html, body {
height: 100%;
}
Second, you have set the sidebar as position: fixed. This is just like having position: absolute set on it. If you want the sidebar to remain visible at all times, you can do a margin-left: 22%; (or whatever the width of the sidebar is) on #content. If you want the sidebar to flow with the rest of the page, just remove the fixed position.
This is because your sidebar is position: fixed. The best route would be to relatively position/float the sidebar at 100% height and position a fixed wrapper within it.
basic demo
I am trying to build a page that has a header and a left-sidebar, and has an iframe in the content area. I wan't the Iframe area to fill the whole content area(the whitespace), but cant seem to get it to work. I am looking for the IFrame to fit perfectly, meaning that it begins where the header and left menu edges end. I can only seem to get it to span from one side of the page to the other, or get it in the middle of the whitespace.
Can anyone help?
Here is the JsFiddle: http://jsfiddle.net/P9CH9/2/
When removing the <div id="iframe-content"> it will span the iframe from one side of the page to the other.
I was able to achieve what I wanted by manually adding the margin top and left to the iframe container and also set the Top, left, right, bottom to 0 as such:
.abs-frame-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-left: 250px;
margin-top: 55px;
}
Here is the latest JFiddle, I added black to show where the iframe is since JsFiddle doesn't seem to allow Iframes. http://jsfiddle.net/P9CH9/4/
You set width 100% for wrappend and fixed the menu, so the wrapper does not consider at all the menu and gets the full width of the screen
Main Modification :
.menu {
background: none repeat scroll 0 0 #202020;
float: left;
margin-top: 55px;
position: fixed;
width: 25%;
height: 100%;
z-index: 2147483647;
}
.wrapper {
float: left;
margin-top: 55px;
width: 75%;
margin-left: 25%;
}
And this solution is responsive.
See : http://jsfiddle.net/joseapl/P9CH9/5/