I'm trying to get the first initial first section to take up the whole height of the page.
I've tried this question here: Making a div fit the initial screen but I cannot get it to work, everything just overlaps.
My nav bar is centered on the first section and will stick to the top when the page is scrolled, I just need the first part to take up the whole page.
Like this:
Spotify also do it on their website
My HTML:
Title
<body>
<span id="top"></span>
<div id="floater"></div>
<div id="centered">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navbar">
<a class="navbar" href="#about">about</a> <a class="navbar" href="#portfolio">portfolio</a> <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a> <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a>
</div>
</div>
</div>
</div>
<div>
<a>Random Text here, blah blah blah!</a>
</div>
</body>
My CSS
html,body{
border: 0;
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#floater {
position:relative; float:left;
height:50%; margin-bottom:-25px;
width:1px;
}
#centered {
position:relative; clear:left;
height:50px;
margin:0 auto;
}
#sticky_navigation_wrapper {
width:100%; height:50px;
}
#sticky_navigation {
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;
}
I think the best solution, which I use on sites like this, would be to wrap each section in a containing div (or , if all your target browsers support it or you don't mind using a html5 shiv).
like so
<div class="section">
<p>Hello World</p>
</div>
<div class="section">
<p>Hello World</p>
</div>
You can then give that div height: 100% and width: 100% like...
.section{
height: 100%;
width: 100%;
}
You can see it all put together in this jsfiddle: http://jsfiddle.net/Ucetz/
I do this to my webpages all the time. Just add a containing div with the position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; style. That should give you a shade like area to cover the whole webpage. You can then put whatever you want inside that div.
To center vertically, do a little math and use a div. Thus, if the height of your div is going to be 400px then make the position: fixed again with the same specifications above, except change the top to 50% and then margin-top a negative value to half of the height. So, in this case it would be margin-top: -200px;
<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :)
</div>
</div>
and then for your navigation bar after you get passed the first layer, put that on position: fixed; as well, just make sure it is above the code given above. That way, it appears on the bottom.
<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div>
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->
Be sure to include height: 100% in the style for the HTML and BODY tags. Then set the height of the sections.
Use Viewport Height.
Set the height of your div (also works with section) to whatever percentage you want your div to fill up the screen.
.section_div {
/* fill up 85% of screen heigth */
height: 85vh;
/* fill up 100% of screen width */
width: 100vw;
/* you can also use min-height instead of height. */
}
Related
I must start off by saying I'm on a HUGE learning curve with this, and the website project is in my spare time as a present to somebody, so my knowledge is limited, although I think I understand the basics.
ALSO please note that I do have another more basic, less interesting site which is already built as a back-up so I won't be broken-hearted if I'm told all my code is rubbish and I need to start again!
I'm creating a one-page, horizontally-scrolling portfolio site for a make-up artist, which requires me to have a fixed banner with my menu listings on the left hand side, and with javascript, the page scrolls nice and smoothly to the relevant section.
Everything looks great on my screen resolution, with my browser at the right size, but I've noticed that if I shrink the browser window down, the fixed navigation banner starts to scroll out of place, while everything else stays together as it should.
The end result should be that everything stays in its place, with the only 'moving part' being the content on the scrolling section, so when the browser is resized, everything either re-sizes or at least scrolls together.
I've played around with wrapping everything in a content div and I've experimented with different positioning, but nothing seems to be working.
Here's my basic html layout for the sections:
<html>
<body>
<div id="banner"> <!--this is the fixed nav banner-->
<ul>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<div id="portfolio" class="bigpanel">
<div id="portfolioimages">
<!--IMAGES GO HERE-->
</div>
</div>
<div id="about" class="panel">
</div>
<div id="testimonials" class="bigpanel">
</div>
<div id="contact" class="bigpanel">
</div>
<div id="footer">
</div>
</body>
</html>
...and the CSS:
body {
width: 15000px;
height: 580px;
background-color: #fcf4f1;
position: absolute;
margin: 2% 0 5% 0;
}
#footer {
position: fixed;
left: 935px;
top: 645px;
margin: 10px;
}
#banner {
position: fixed;
height: 580px;
width: 200px;
background-color: #fff;
opacity: 0.8;
line-height: 20px;
margin: 45px 0px 0px 20px;
padding: 0;
z-index: 999;
}
.panel {
width: 930px;
float: left;
padding-left: 242px;
padding-right: 1040px;
margin-top: 45px;
}
.bigpanel {
float: left;
padding-left: 242px;
padding-right: 1040px;
margin-top:45px;
}
Pic of how the site is at the correct size
...and a pic of how it looks when it's squished in height!
I've tried to be as thorough as possible so sorry for the long one!
Any help would be greatly appreciated.
Ok, I don't know whether I have the answer that will work for everyone but it certainly has for me.
I basically had a long look at how I'd defined the widths and heights for basically all elements in my website and worked out that although the widths needed to be fixed for the main body and the banner, the height could be responsive depending on the viewport size.
I wrapped everything in a very wide wrapper div, with a height set to 100%, but set the body height to 84vh, with a max-height of 700px (so my images can have the same max-height and always look good).
This way I could also set the banner to height: 84vh with a max-height of 700px so it never overflows, but always sizes down.
I set the margin for my wrapper to centre it vertically, and now whilst everything fits inside its containers, there's no vertical scroll!
I'm sure a lot of it is an ugly solution, caused by my bad coding but it works now!
I thing you have to play with the top poperty on you #banner div by putting it to 0. This work only with positions like fixed, absolute, relative, etc. What it will do is to fix you div at the top of your browser window, no matter what. It is the "top padding" (disantce) you div will have relativly to the to of the screen.
So you should just add
top: 0;
to
#banner
and it should work!
If you want an exemple of it's efficacity, I recommend you to look at this codepen: http://codepen.io/Symsym/pen/LsjCK
Cheers! and tell me if it works.
<body>
<div class="banner"> <!--this is the fixed nav banner-->
<ul>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<div class='content'>
<div id="portfolio" class="bigpanel">
<div id="portfolioimages">
<!--IMAGES GO HERE-->
</div>
</div>
<div id="about" class="panel">
about
</div>
<div id="testimonials" class="bigpanel">
testimonials
</div>
<div id="contact" class="bigpanel">
contact
</div>
</div>
<div class="footer">
footer is here!!
</div>
css code:
body {
background-color: '#fcf4f1';
overflow:hidden;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
.banner {
position: fixed;
width: 200px;
background-color: '#ccc';
opacity: 0.8;
padding: 0;
z-index: 999;
top:20px;
left:0;
}
.content{
width:800px;
margin-left:200px;
overflow:auto;
float:left;
}
.panel {
margin-top:10px;
width: 930px;
float: left;
}
.bigpanel {
float: left;
margin-top:20px;
}
.footer {
position: fixed;
bottom: 0;
left:0;
right:0;
background:red;
margin: 10px;
}
you can scroll on content.
First question so sorry if this is a bit squiffy.
I'm trying to get a full (100%) width fixed header with content within, such as logo and navigation links, that is aligned to the main container. I'd like to do this without the use of margining left or right on the logo/nav content as that doesn't seem particularly flexible.
I tried putting the header div within the container block, that fixes the alignment issue but then I can no longer go full width.
So basically how do I get content in a full width fixed header to align with content in the main content of the page?
Here is my html (sorry if its messy, I've only been at this a week or so):
<body>
<div id="header">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Here is my CSS, I left the logo image out and in place is just a beige block:
body {
margin: 0px;
background-color: darkgray;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
width: 960px;
margin: 0px auto;
height: 1000px;
background-color:gray;
}
#footer{
width: 100%;
height: 100px;
background-image: url("images/bg-header.jpg");
}
Any advice?
Thank-you
Add an inner wrapper to your header HTML
<body>
<div id="header">
<div id="header_inner"><!-- inner div -->
<div id="logo">
</div>
<div id="nav">
</div>
</div><!-- end inner div-->
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Then add the same width styling as your container to the wrapper:
#header_inner{
width: 960px;
margin: 0px auto;
}
Then the main content and your header content will align.
Some side notes:
classes are always better than IDs for styling
fixed width are generally not a great idea if you're going for a responsive solution
For Fixed Header or Footer you can use
.header_class {
width: 100vw;
float: left;
position: fixed !important;
top: 0px;
background: url: ('images/img.png') no-repeat;
height: 100%;
}
another better suggestion you can follow facebook header css means upper blue section css (css class name: .fixed_elem, .fixed_always)
I had a little trouble understanding what exactly you were looking to do so I made this example which shows a full page with header and one contained within the middle content area. The main problem I saw was that when you do things like width:100% it doesnt do 100% it is allowed.. but the full width of the parent element. You can use width:inherit to get the max width allowed. Here is the example with a full white header width and one contained using black. Its all in how you structure the parent child DOM relationship structure
<!doctype html>
<html>
<head>
<style>body {margin: 0px;background-color: darkgray;}
header{background-color: white;height:100px;width:100%;}
#header{width: inherit;height: 100px;position: fixed;top: 0px;background-image:url("images/bg-header.jpg");opacity: 0.9;background-color: black;}
#logo {height: 100%;width: 300px;background-color: beige;}
#container {width: 960px;margin: 0px auto;height: 1000px;background-color:gray;}
#footer{width: 100%;height: 100px;background-image: url("images/bg-header.jpg");}
</style>
</head>
<body>
<header><div></div></header>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="nav"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
The easiest solution is to add a container inside the #header. Create a class .container that has the properties shared by the #container and this container. Also make sure that the container inside the #header gets 100% height.
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
body {
margin: 0;
background-color: darkgray;
}
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background-image: url("http://placehold.it/100x100");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
height: 1000px;
background-color: gray;
}
#footer {
height: 100px;
background-image: url("http://placehold.it/100x100");
}
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
<div id="header">
<div class="container">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
</div>
<div id="container" class="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
Basically you want to have a full width 100px header and footer which are fixed to top 0 and bottom 0. but at the same time you want the content to not exactly roll under the header and footer. I hope I understood the question here.
To achieve that obviously give position fixed to header and footer but now to get your content aligned right, you have to give a margin of the height of header and footer ( 100px)
Here is the code snippet... I have added different colors and some filler content to see the difference.
body {
margin: 0px;
background-color: darkgray;
}
#header,
#footer {
width: 100%;
height: 100px;
position: fixed;
left: 0;
background: blue;
opacity: 0.5;
text-align: center;
color: red;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
float: left;
}
#nav {
height: 100%;
width: 450px;
background: cyan;
opacity: 0.5;
float: right;
}
#container {
width: 960px;
margin: 100px auto;
height: 1000px;
background-color: orange;
}
<div id="header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="container">
<div id="content">
content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>
</div>
</div>
<div id="footer">footer</div>
Hope this was what you were looking for.
I've had this problem many times before, where you want full width images, but they're in containers at a fixed width. At any rate there's a few things you can do here. You can add a container class to every section you want in a container; You put a mini-container in divs you want to break the rules, (this also requires taking said div / #header out of the main #container)
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
Than put a div inside of that called content, and set content up like this.
.content {
width: 960px;
margin:0 auto;
display:block;
}
So your markup/html should look like
<div id="header">
<div class="content">
<ul>
<li><a>Home</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
There are more options, but these seem to make sense for this issue.
Hope This Helps,
-Alex
I have an project that includes 3 divs to be layered on top of each other using the z index in css, but when I apply that to the three and adjust the top positioning, theres a big empty space left where the two other div were previously. Anyone come across this and figured out how to resolve it?
Heres the html
<div id="kit" data-role="page" data-theme="a">
<div data-role="header">
<h1>HI 9829 Kit</h1>
</div>
<div class="kit edgeLoad-EDGE-1809939789" style="margin: auto;"></div>
<div class="container edgeLoad-EDGE-1809939789"></div>
<div class="buttons edgeLoad-EDGE-1809939789">
</div>
<div data-role="footer" data-position="fixed">
<h3>©2013</h3>
</div>
</div>
and heres the css
#kit .kit{
width:700px;
height:670px;
background-image:url(../img/9829-Kit_2.png);
z-index:1;
}
#kit .buttons{
position: relative;
margin: auto;
height: 670px;
width: 700px;
z-index:3;
}
#kit .container {
position: relative;
margin: auto;
background-image: url(../img/9829-Kit.png);
background-repeat: no-repeat;
height: 670px;
width: 700px;
z-index:2;
}
In order for the z-index to operate properly, position attribute should be set, nevermind if it is set to absolute, relative, or fixed.
I have a simple webpage consisting of 3 DIVs. I need a descent CSS styles that would do the following:
top and bottom divs have to be of fixed minimal width (e.g. 20 px, if not possible, down to 0 px).
middle div should be of fixed width, eg 1000 x 700 px.
When I set fixed width/height for every div, everything is fine except the screen is not stretching. If I set top and bottom divs height to auto, I have second (fixed size) div to be attached to the top side of the screen, and top div size is 0, also bottom size di is strange size.
HTML code with all CSS attributes:
<body style="background-color:#030303; margin:0px; padding:0px;">
<!--head-->
<div style="margin:0 auto; width:100%; height:auto; border:0px solid red; background-color:#181818; position:relative;">
(some images)
</div>
<!--gallery-->
<div id="galleria" style="height:700px;width:1000px; margin:0 auto; border:1px solid green; ">
<img src="img/thumb1.jpg" data-title="My title" data-description="My description">
<img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description">
</div>
<!--footer-->
<div style=" margin:0 auto; top:0px; width:100%; height:auto; position:relative; border:1px solid red; line-height:128px; background-color:#181818">
<div align="center" >
(some images)
</div>
</div>
</body>
Your question is a bit confusing (when you say width, do you mean height?). If I understand right, you want the three divs to add up to the total height of the viewport. I know of two ways to do this -- with absolute positioning or with display: table styles. In my experience, the first is more efficient.
<div id="topbar">Top</div>
<div id="mainarea">Middle</div>
<div id="footbar">Botton</div>
#topbar, #mainarea, #footbar { position: absolute; overflow: auto; }
#topbar { height: 20px; top: 0; left: 0; right: 0; }
#mainarea { top: 20px; left: 0; right: 0; bottom: 20px; }
#footbar { height: 20px; left: 0; right: 0; bottom: 0; }
If you want to actually assign a width, too, then get rid of the 'right' styles and assign the same width to all three (it's generally unwise to force a width on people, though).
First lets get the styling out of your HTML and into a proper CSS format. Next I stripped the HTML down to a simple form so you you can help define your question better:
http://jsfiddle.net/HF6Cc/
HTML:
<body>
<!--head-->
<div class="head">header</div>
<!--gallery-->
<div id="galleria" class="middle">
<img src="img/thumb1.jpg" data-title="My title" data-description="My description">
<img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description">
</div>
<!--footer-->
<div class="footer">footer</div>
</body>
CSS
body { width:1000px; margin:0; padding:0; }
.head { margin:0 auto; background-color:orange; }
.middle { margin:0 auto; background-color:lime; }
.footer { margin:0 auto; background-color:yellow; }
Now, what exactly are you looking to do with this layout?
I'm pretty proficient in CSS and HTML but I just can wrap my head around how this will work correctly.
I want to have a width of 990px for the container but i have about 1237px width of due to added shadows to the left and right
ive got it positioned but i want the overflow to be hidden until 990px width...
is there a way to make this happen?? here is my current code.
CSS:
body, html {margin:0; padding:0;}
body {background:url(../images/bg-x.jpg) top center repeat-x; background-color:#000;}
#main-wraper { }
#main-container {margin:0 auto; width:990px; background:url(../images/container-bg.jpg) no-repeat; height:660px;}
#main-left {background:url(../images/bg-left.jpg) left center no-repeat;}
#main-right {background:url(../images/bg-right.jpg) right center no-repeat;}
#shadows {width:1237px; margin:0 auto; overflow-x: hidden}
html:
<body>
<div id="shadows">
<div id="main-left">
<div id="main-right">
<div id="main-wraper">
<div id="main-wraper-liner">
<div id="main-container">
<div id="main-container-liner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is the link
http://hithouse.businesscatalyst.com/index.html
thanks in advance.
If I got you right, you don't want the shadow to be displayed, when the screen is smaller than 990px. What I would do is this:
leave the body as it is
create a transparent png with a height of 1px and a width of 990px + shadows (left and right)
use this much simpler markup
you're ready to go
HTML
<div class="content">
<div class="shadow"></div>
<h1>Normal content goes here</h1>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div.content {
position: relative;
width: 400px;
height: 100%;
margin: 0 auto;
border: 1px solid red;
}
div.shadow {
position: absolute;
top: 0;
left: -28px;
width: 456px;
height: 100%;
background: transparent url(https://dl.dropbox.com/u/1336931/_Stackoverflow/example_shadow.png) repeat-y 0 0;
}
DEMO
Try before buy