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/
Related
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 could use some help solving this css problem. Basically, I have 3 sections.
div class="app-container">
<div class="menu">
</div>
<div class="content">
</div>
</div
The menu div, should contain my menu. It should be displayed on the left side with a fixed width. The height should also be 100%.
The content div, should use what's rest of the width available.
This is how my site looks like now.
The problem happens when there it more content to the right, and you have to scroll down to view it. When this happens, my menu does not follow along.
This is how it looks when there are way more content. (you can see to the right that I have scrolled down)
Code
html, body {
}
.app-container {
}
.menu {
height: 100%;
width: 16rem;
top: 0;
left: 0;
background-color: #2D3E50;
color: white;
padding: 1rem;
position: absolute;
}
.content {
padding: 1rem;
padding-left: 17rem;
background-color: white;
height: 100%;
}
As you can see, I have made a padding-left on the content, and filled in the menu in the absolute position.
What should I do so the menu keeps continuing no matter how far you scroll down?
Update
Try using position: relative; to body and position: absolute; to your menu element. Set height of the menu to 100%.
I have two divs: menu and content. Menu is fixed on the left, and content is centered. The problem is that with lower screen resolutions, the menu overlaps the content.
Here's some css:
#content {
width: 1000px;
min-height: 100%;
margin: 0 auto;
}
#menu {
z-index: 20;
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
So, basically, I want the content to be centered with a left minimum of x px.
Is there an easy solution for that?
just set up a Wrapper div parent to the content div... and give the wrapper margin-left: 100px; or however much you want.. simple as that
you could use min-width
That should be the easiest solution. Otherwise post your code on http://jsfiddle.net/ so we can review it
I've wasted numerous hours on this and cannot seem to get it to work, I've read many answers on here already but none seem to be helping.
I have a header DIV then then two DIV's underneath floated Left of eachother. the menu on the left and content on the right. the right i have set Overflow: hidden so it sits next to the menu div on left and against broswer on right.
Now i want the menu Div on the left to fill the height downwards to match the content div on the right but i cannot for the life of me seem to get the settings right.
The link to website is here http://www.mxbempire.com
Anyone shed some light on this?
im not 100% sure what you are asking.
however using static attributes on your header and menu would give it a 'wiki-feel'
adding this to your CSS will give an example
.menu{position:fixed; top:80px}
.headercontainer{position:fixed; top: 20px;}
.user{padding-left: 200px; float:none;}
.card{margin: 90px 25px 0 250px;}
use this in your css
.headercontainer {
width: 100%;
height: 60px;
margin: 0 auto;
background-color: #2C2E33;
position: fixed;
top: 0;
.two {
float: left;
width: 220px;
position: fixed;
top: 60px;
}
You can try adding this styles to your css:
.headercontainer {
position: fixed;
z-index: 10;
}
.menu {
height: 100vh;
margin-top: 60px;
position: fixed;
}
.three {
margin-left: 220px;
padding-top: 60px;
}
I'm not sure how it will behave on older browsers, soo just try it.
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;
}