I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.
I'm trying to make a homepage for this website. The design is simply a block down the left hand side of the page showing the logo at the top and then a series of links underneath, all of which is on the same background. To the right of this is one big image which fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.
The height is a different story however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. The main image I want to keep the aspect ratio of and just have it overflow it's div as required to keep most of it displayed and the side bar I just want to fit to 100% of the page height. Here is my code at present:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
#font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks
Here’s just a simplified code example of the HTML:
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
and here’s the CSS using vh:
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
It works for me.
I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.
The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.
jQuery
function windowH() {
var wH = $(window).height();
$('.sideBar, .mainImg').css({height: wH});
}
windowH();
This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.
I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.
JSFIDDLE (Remove 'show' at the end of the url to see code)
The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.
If you want a pure CSS only approach then you can do something like this,
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.
Refer to this JSFIDDLE to see how it works.
Helpful read about responsive web design
On Chrome, just adding display: flex on the body is enough.
On Firefox, you must add height: 100vh to get the desired result. And a margin: 0 will get rid of the annoying scroll bars.
<body style="display:flex; height: 100vh; margin: 0;">
<div style="background-color: red; flex:1;"></div>
<div style="background-color: green; flex:2;"></div>
<div style="background-color: blue; flex:1;"></div>
</body>
Sample code for exact Covering the page height.
HTML
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
Main content
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 1020px;
margin: auto;
height: 100%;
background: #ddd;
padding:16px;
box-sizing:border-box
}
.header,.content{
background:#fff;
padding:16px
}
.content{
margin-top:16px;
min-height:calc(100% - 160px);
}
Example Link :
https://codepen.io/rahdirs/pen/jeRVod
Related
I want to make a fixed header so I follow the steps listed in W3School, but the content becomes shorter... I don't know how to say, please see the pictures.
This is the picture that I follow the code
.header {
overflow: hidden;
width: 100%;
height: 46px;
background-color: #2f4779;
position: fixed;
top: 0;
z-index: 100;
}
<div class="header">
<div class="logo">
123
</div>
<div class="nav">
<ul>
<li>Discover and Explore</li>
</ul>
</div>
</div>
And here is the picture that I didn't write the fixed header.
Without fixed header
My plan is to make everything inside the viewport. How can I solve the problem?
Generally what I do in this situation is to add padding to the top of the body so it works for every page, and also use a css variable to keep the sizing consistant.
:root {
--headerHeight: 46px;
}
header {
height: var(--headerHeight);
background-color: #2f4779;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
body {
padding-top: var(--headerHeight);
}
section {
height: 200vh;
}
<header></header>
<section>
<h1>Test</h1>
</section>
Well, when you give an element a fixed (or absolute) position, it is removed from the normal flow, so you need to add a padding top of 46px (eaqual to header's height) to the section that follows the header.
You'd probably benefit from using CSS Grids or CSS Flexbox. grid-template-columns is a great property and it makes your life a lot easier.
#grid {
display: grid;
width: 100%;
grid-template-columns: 50px 1fr;
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
<div id="grid">
<div id="areaA">A</div>
<div id="areaB">B</div>
</div>
Do give them a read :)
This is a quick mock-up to create a full-size webpage, however whenever I test this, a small margin of space is present at the top of the screen.
How can I get rid of this small space at the top?
HTML
<body>
<div id="container">
<header id="header">
<div class="header_container">
<h1 class="header_logo">Blog</h1>
<nav class="menu_nav">
</nav>
</div>
</header>
</div>
</body>
CSS
body,html {
margin: 0;
height: 100%;
}
#container{
height: 100%;
width: 100%;
background-color: orange;
}
#header {
width: 100%;
height: 80px;
background-color: green;
}
.header_container{
margin-left: 50px;
margin-right: 50px;
}
This is being caused by the margin on the top of the h1.
To fix this, either give the header a property of overflow:hidden to make the header taller, or remove the margin of the h1 using margin-top:0.
JSFiddle: http://jsfiddle.net/jdwire/8QV4f/
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
Hi I am trying to create a responsive layout where I have three different size elements and I want an equal margin on both sides of middle element for all screens.
Here is my HTML and CSS
<section class="container">
<div href="/" class="pull-left logo"><img src="/images/logo.jpg"></a>
<div class="slogan pull-left"><img src="/images/slogan.jpg"></div>
<div class="pull-left support"></div>
</section>
<style>
.pull-left
{
float-left;
}
.slogan
{
margin: 0 17%;
}
</style>
Since logo and support sections are of fixed size. Above Css works fine for one resolution but as screen size goes down the margin doesn't remain same.
Any ideas how to achieve that?
EDIT: Here is the fiddle. http://jsfiddle.net/VdYua/22/
Initially there is an equal margin on both side of .slogan div. But on re size last div goes to next line. I want the margin to be decreased without braking layout.
Are you looking for something like this?
HTML:
<div class="centered">This is some content in the centered DIV</div>
CSS:
.centered { background: #888; margin: 0 auto; width: 50%; }
Using margin: 0 auto will center the elements horizontally, meaning that it will have "Equal margin on both sides"
You do have to set a width on elements when using the above method, but as shown you can use percentage widths (as I image you may well be for a responsive layout)
You cannot however use this technique on floated elements, so you may be looking to add something like this to your CSS:
.container { margin: 0 auto; width: 50%; }
If I have misunderstood your question please let me know.
EDIT: In response to the comment below I think I have managed to achieve what you're looking for, see this fiddle
HTML:
<section class="header">
<div href="/" class="logo"><img src="/images/logo.jpg" /></div>
<div class="slogan"><img src="/images/slogan.jpg" /></div>
<div class="support"></div>
</section>
CSS:
.header { padding: 0 50px 0 300px; position: relative; }
.logo, .support { background: red; height: 50px; position: absolute; top: 0; }
.support { background: blue; right: 0; width: 50px; }
.logo { left: 0; width: 300px; }
.slogan { background: black; height: 50px; margin: 0 auto; width: 50px; }
The positioning/padding aspect of things isn't particularly pretty (if the width of .support or .logo change, you have to change that in the css) however I think this is the only safe way of doing it with pure HTML/CSS in a cross browser way (I'd be interested to see anyone elses take on it though), the important this is that it works and is completely valid.
I'm having a problem with a webpage.
I'm using the min-height property to place the footer at the bottom of the page (if content is not long enough) and after the content (if content is longer than the window). There are plenty of tutorials that describe this method and I too did it this way.
html, body { height: 100%; }
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
}
and some other code. It works fine then.
The problem occurs when I create two additional divs to add drop shadows to the container div. I have:
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
...
</div>
</div>
<div>
I figured html and body height remain 100%, left-shadow div have min-height of 100%, and right-shadow and container have height of 100% (I'm assuming that the 100% will mean 100% of the height of the parent element).
However, it does not work (in Firefox, it works in Chrome, I don't really care about IE), and I've tried all sorts of combinations to get it right, but to no avail. Any help would be appreciated.
EDIT: (partial code)
<html>
<head>
...
</head>
<body>
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
<div class="header">
header content
</div>
<div class="content" >
content goes here
</div>
<div class="footer">
footer content here
</div>
</div> <!-- end container div -->
</div>
</div>
</body>
</html>
And the relevant css:
html {
overflow-y: scroll;
height: 100%;
}
body {
margin: 0 0 0 0;
height:100%;
}
.left-shadow
{
width: 1084px;
background: url("images/left-shadow.png") repeat-y left;
/* both bg images are 30px wide. 1024 + 30 + 30 = 1084px */
margin: auto;
min-height: 100%;
}
.right-shadow
{
width: inherit;
background: url("images/right-shadow.png") repeat-y right;
margin: auto;
height: 100%;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 1024px;
height: 100%;
}
EDIT 2:
So I just found out that this question belongs at doctype. So from now on, I'll ask questions in the right place. But since this is already up, I'd ask that people respond anyway without getting into where questions should be posted. Thanks.
First of all, to create a shadow effect use CSS. If CSS solution isn't what you're looking for then maybe try to set a shadow as a background image of .container. Right now your mark-up is overloaded by unnecessary elements.
But if that extra mark-up is the only way to do what you want to do, then try something like this:
* {
margin: 0;
padding: 0;
}
html, body, .shadow, #container {
min-height: 100%;
}
#container {
position: relative;
}
#content {
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #0a0;
}
And HTML mark-up (these shadow divs make it look terrible):
<body>
<div id="shadow-left" class="shadow">
<div id="shadow-right" class="shadow">
<div id="container">
<div id="content">
Page contents
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
</body>
I really recommend using this simple solution for a "sticky footer" instead. Just gets rid of problems: http://ryanfait.com/sticky-footer/
All that it requires is for you to be able to define a fixed height for your footer, which should be no problem in virtually all cases.
Works in all common browsers!