I am fairly new to CSS and HTML.
And I understand that this question has been asked several times, yet I cannot seem to fix my current issue.
I have been working on little small projects like trying to recreate other websites with extra features.
My current task is recreating a front page search area, such as google.
Implementation and Issue
I have been focusing in the responsiveness of websites when a browser resize occurs, so I have been using Flexbox as often as possible.
Implementation
A main div with a container id, with a min-height of 100% and a relative position.
Inside the container div are nav(#nav), center(#center) and footer(#footer) elements and their respective id's.
nav: a flex display, baseline align-items and min-height of 9vh.
center: a width of 100%, and a min-height of 10vh;
footer: absolute position, bottom 0, width of 100%
I have made some research into the Footer and how to keep it at the bottom of a page while being responsive when shrinking the browser, but I seem to have come to a halt or possibly I haven't fully understood yet how to get the footer to stop at a certain element.
Issue
The issue is that I cannot get the footer to function correctly. I do not wish it to overlaps with the bottons and links in the main content. It stops at the search bar when resizing the browswer, but I would like it to stop when it meets the buttons.
As you will see from the block of code snippets in the JSbin link, I have an issue with the footer.
Current HTML + CSS files and output: JSBin
*{
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#container {
min-height:100%;
position:relative;
}
a:visited{
color: #609;
}
/* ----- Navigation Styling ----- */
#nav {
display: flex;
border: 10px solid goldenrod; /*Colourful Borders*/
min-height:9vh;
justify-content:flex-end;
align-items: baseline;
background:#ff0;
padding:10px;
}
/*Nav Content*/
/* ----- Center Styling ----- */
#center {
width: 100%;
background-color: white;
min-height:10vh;
}
.ctr_img {
height: 92px;
width: 272x;
padding-top: 20px;
}
.ctr_img:hover {
-webkit-filter: invert(100%);
}
.img_mic {
padding: 0 8px;
float: right;
display:inline-block;
top: -30px;
position: relative;
}
.srch_bx {
border-style: hidden;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
max-width: 40%;
min-height: 40px;
}
.srch_in {
width: 100%;
border-radius: 2px;
border: none;
overflow: auto;
outline: none;
left: 0px;
background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
font: 16px arial,sans-serif;
display: inline-block;
text-align: start;
}
.mic_set {
background-size: 30px 30px;
height: 100%;
width: 26px;
}
.btn_sbmt {
padding: 20px 50%;
min-height: 20px;
display: flex;
justify-content: center;
}
.btn_srch, .btn_lcky {
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 2px;
color: #757575;
font-family: arial,sans-serif;
font-size: 1vw;
font-weight: bold;
margin: 11px 4px;
padding: 0 16px;
height: 36px;
}
.lang_diff{
max-height: 28px;
font-size: 0.9vw;
margin-bottom: 24px;
font-family: arial,sans-serif;
}
/* Footer Styling */
#footer {
position:absolute;
bottom:0;
height: 5.2em; /* Height of the footer */
width: 100%;
min-height: 10vh;
background-color: #f2f2f2;
line-height: 40px; /*Specifies the line height.*/
min-width: 400px;
}
.ctry {
display: flex;
margin-left: 30px;
text-align: left;
color: rgba(0,0,0,.54);
border-top: 1px solid #e4e4e4;
max-width: 150px;
}
.ctry_ftr {
font-size: 1vw;
}
.opt_ftr {
display: flex;
justify-content:space-between;
border: 1px solid #e4e4e4;
}
span.blft_ftr a, span.brght_ftr a, span.brght_stg a {
text-decoration: none;
color: #666;
margin-left: 16px;
font-size: 1vw;
}
.brght_ftr{
margin-right: 30px;
float: right;
}
.adv_ftr {
padding: 0 16px;
text-decoration: none;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Testing Ground</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="icon" href="http://www.favicon.cc/logo3d/53653.png" />
<meta charset="UTF-8">
</head>
<body> <!--FLEX-->
<div id="container"> <!-- Added New for Footer behaviour -->
<nav id="nav" class="nav_cls">
<!--Currently at work-->
<p>Navigation Bar Content</p>
</nav>
<center id="center">
<a class="img_link" href="">
<img class="ctr_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/250px-PM5544_with_non-PAL_signals.png" alt="image">
</a>
<div class="in_forms">
<div class="srch_bx">
<form>
<input class="srch_in" type="text" name="search"/>
</form>
<div class="img_mic">
<a href="https://youtu.be/Ye8mB6VsUHw ">
<img class="mic_set" src="https://cdn.sesamestreet.org/sites/default/files/1496328210/Cookie_Big.png" />
</a>
</div>
</div>
</div>
<div>
<div class="btn_sbmt">
<input class="btn_srch" type="submit" value="Don't Hide me!" name="search"/>
<input class="btn_lcky" type="submit" value="Seriously, Don't!" name="luck"/>
</div>
</div>
<div class="lang_diff">
Links:
<a class="lang" href="">Link1</a>
<a class="lang" href="">Link2</a>
<a class="lang" href="">Link3</a>
<a class="lang" href="">Link4</a>
<a class="lang" href="">Link5</a>
</div>
</center>
<footer id="footer">
<div class="ctry">
<span class="ctry_ftr">
First half of a footer
</span>
</div>
<div class="opt_ftr">
<span class="blft_ftr">
<a class="adv_ftr" href="">Footer Link 1</a>
<a class="adv_ftr" href="">Footer Link 2</a>
<a class="adv_ftr" href="">Footer Link 3</a>
</span>
<span class="brght_ftr">
<a class="adv_ftr" href="">Footer Link 4</a>
<a class="adv_ftr" href="">Footer Link 5</a>
</span>
</div>
</footer>
</div>
</body>
</html>
Visited Websites
Footer is displayed over content. I need it always on the bottom of the page
HTML, CSS - Sticky footer displays over content on screen resize
Footer is displayed over content. I need it always on the bottom of the page
How to keep footers at the bottom of the page
Sticky Footer
Footer overlaps main content when window shrunk
:)
Congratulations, first of all, for following the rules of asking on SO.
Your problem comes from placing your footer out of document flow (position:absolute). It looks like you want it placed in document flow. So change position:absolute into position:relative (or static).
To keep it at the bottom of the screen at all times, adjust your #container to display:flex;flex-direction:column;min-height:100vh and make #center grow:
#footer {
position:static; /* this is default value of position
* so you could just remove `position:absolute`
* from your code.
*/
}
#container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#center {
flex-grow: 1;
}
See it working:
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
a:visited {
color: #609;
}
/* ----- Navigation Styling ----- */
#nav {
display: flex;
border: 10px solid goldenrod;
/*Colourful Borders*/
min-height: 9vh;
justify-content: flex-end;
align-items: baseline;
background: #ff0;
padding: 10px;
}
/*Nav Content*/
/* ----- Center Styling ----- */
#center {
width: 100%;
background-color: white;
min-height: 10vh;
}
.ctr_img {
height: 92px;
width: 272x;
padding-top: 20px;
}
.ctr_img:hover {
-webkit-filter: invert(100%);
}
.img_mic {
padding: 0 8px;
float: right;
display: inline-block;
top: -30px;
position: relative;
}
.srch_bx {
border-style: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
max-width: 40%;
min-height: 40px;
}
.srch_in {
width: 100%;
border-radius: 2px;
border: none;
overflow: auto;
outline: none;
left: 0px;
background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
font: 16px arial, sans-serif;
display: inline-block;
text-align: start;
}
.mic_set {
background-size: 30px 30px;
height: 100%;
width: 26px;
}
.btn_sbmt {
padding: 20px 50%;
min-height: 20px;
display: flex;
justify-content: center;
}
.btn_srch,
.btn_lcky {
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 2px;
color: #757575;
font-family: arial, sans-serif;
font-size: 1vw;
font-weight: bold;
margin: 11px 4px;
padding: 0 16px;
height: 36px;
}
.lang_diff {
max-height: 28px;
font-size: 0.9vw;
margin-bottom: 24px;
font-family: arial, sans-serif;
}
/* Footer Styling */
#footer {
/* position: absolute;
bottom: 0; */
height: 5.2em;
/* Height of the footer */
width: 100%;
min-height: 10vh;
background-color: #f2f2f2;
line-height: 40px;
/*Specifies the line height.*/
min-width: 400px;
}
.ctry {
display: flex;
margin-left: 30px;
text-align: left;
color: rgba(0, 0, 0, .54);
border-top: 1px solid #e4e4e4;
max-width: 150px;
}
.ctry_ftr {
font-size: 1vw;
}
.opt_ftr {
display: flex;
justify-content: space-between;
border: 1px solid #e4e4e4;
}
span.blft_ftr a,
span.brght_ftr a,
span.brght_stg a {
text-decoration: none;
color: #666;
margin-left: 16px;
font-size: 1vw;
}
.brght_ftr {
margin-right: 30px;
float: right;
}
.adv_ftr {
padding: 0 16px;
text-decoration: none;
display: inline-block;
}
#footer {
line-height: 2.42em;
}
#container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#center {
flex-grow: 1;
}
<div id="container">
<!-- Added New for Footer behaviour -->
<nav id="nav" class="nav_cls">
<!--Currently at work-->
<p>Navigation Bar Content</p>
</nav>
<center id="center">
<a class="img_link" href="">
<img class="ctr_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/250px-PM5544_with_non-PAL_signals.png" alt="image">
</a>
<div class="in_forms">
<div class="srch_bx">
<form>
<input class="srch_in" type="text" name="search" />
</form>
<div class="img_mic">
<a href="https://youtu.be/Ye8mB6VsUHw ">
<img class="mic_set" src="https://cdn.sesamestreet.org/sites/default/files/1496328210/Cookie_Big.png" />
</a>
</div>
</div>
</div>
<div>
<div class="btn_sbmt">
<input class="btn_srch" type="submit" value="Don't Hide me!" name="search" />
<input class="btn_lcky" type="submit" value="Seriously, Don't!" name="luck" />
</div>
</div>
<div class="lang_diff">
Links:
<a class="lang" href="">Link1</a>
<a class="lang" href="">Link2</a>
<a class="lang" href="">Link3</a>
<a class="lang" href="">Link4</a>
<a class="lang" href="">Link5</a>
</div>
</center>
<footer id="footer">
<div class="ctry">
<span class="ctry_ftr">
First half of a footer
</span>
</div>
<div class="opt_ftr">
<span class="blft_ftr">
<a class="adv_ftr" href="">Footer Link 1</a>
<a class="adv_ftr" href="">Footer Link 2</a>
<a class="adv_ftr" href="">Footer Link 3</a>
</span>
<span class="brght_ftr">
<a class="adv_ftr" href="">Footer Link 4</a>
<a class="adv_ftr" href="">Footer Link 5</a>
</span>
</div>
</footer>
</div>
Another minor issue which needed addressing was using line-height expressed in px for #footer while its height was expressed in em, causing the page to develop a vertical scrollbar. line-height:2.42em fixes it.
On a different note, it would be unfair of me to give you this answer without mentioning the major accessibility problem your example has from lowering font-size on narrow devices. Try opening the example page on any mobile and you'll understand what I mean. At all times, elements in your page should keep a font-size allowing users to read.
The main purpose of web pages is to present content. If you present the content in a form disabling user ability to receive the message, your page does not perform its function.
#footer is positioned absolutely, which means that the parent container doesn't know how big it is (i.e. it is outside of the "document flow"). #container's height is set to min-height: 100%, so at a minimum, it needs to be the full height of the parent (in this case, the body), but if the child content is taller, it will stretch to accommodate that extra height.
Because #footer is not considered when#container is trying to figure out it's height, #container is just making sure it can fit it's other position: static or position:relative children.
So, when you scale down the height of your browser so it is very short, #container is too short - it doesn't leave space for the #footer.
There are a few ways to take care of this, though it is tricky from a responsive perspective if the height of the #footer is variable depending on the content and whether it wraps, etc.
If you know the height, you can add that amount of padding on the bottom of #container (if box-sizing: border-box; is turned on, it will not add onto the height: 100% - it will be included) and it will reserve the space for the #footer.
If you don't know the height, you could leverage display: flex; to fill the full height and have the footer self-align to the bottom, without needing to use position: absolute;. Flexbox has a bit of a learning curve though, I would recommend you read through some tutorials. http://flexboxfroggy.com/ is a fun game that can also help to learn it.
Related
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I uploaded a video here : https://streamable.com/uyddy
I am asking if I can somehow hide the horizontal scrollbar in that specific div, while still being able to scroll? I want to achieve this on mobile devices.
I attached the code here :
https://codepen.io/UrsuGrizzly/full/aVRZyg/
https://jsfiddle.net/o2ucuorL/
<div id="bottom">
All
Images
Videos
News
Maps
<a id="books" href="#">Books</a>
<a id="flights" href="#">Flights</a>
<a id="personal" href="#">Personal</a>
<a id="stools" href="#">Search tools</a>
<a id="moar" href="#">More</a>
Settings
<a href="#" id="tools">Tools</a
</div>
body{
font-family: arial,sans-serif;
font-size: 13px;
}
#bottom{
grid-area: 2/1/3/3;
display: flex;
overflow-x:scroll;
}
#bottom a{
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
color: rgba(0,0,0,0.54);
padding: 14px 16px 12px 16px;
}
#bottom #stools{
border-left: 1px solid rgba(0,0,0,.12);
padding: 14px 16px 12px 24px;
white-space:nowrap;
}
#bottom #all{
color: #4285f4;
border-bottom: 2px solid #4285f4;
}
what I'd do is just to wrap the #bottom div inside a parent div with a fixed height and the overflow property set to hidden. Then you just have to give the #bottom div a padding-bottom with the same height as the scrollbar has (like 10px more or less). And thats all :), works great. Leave here the code:
// HTML Part
<div class="container">
<div id="bottom">
All
Images
Videos
News
Maps
<a id="books" href="#">Books</a>
<a id="flights" href="#">Flights</a>
<a id="personal" href="#">Personal</a>
<a id="stools" href="#">Search tools</a>
<a id="moar" href="#">More</a>
Settings
Tools
</div>
</div>
// CSS Part
body {
padding: 0;
margin: 0;
font-family: arial,sans-serif;
font-size: 13px;
}
.container {
height: 43px;
width: 100%;
overflow: hidden;
}
#bottom {
grid-area: 2/1/3/3;
display: flex;
overflow-x: scroll;
padding-bottom: 10px;
}
#bottom a {
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
color: #0000008a;
padding: 14px 16px 12px 16px;
white-space: nowrap;
}
#bottom a#all {
color: #4285f4;
border-bottom: 2px solid #4285f4;
}
It was probably asked before / someone had a similar problem, but I have been searching for a long time and couldn't find any solution to my problem.
I have a div called loginBox that is centred, and has a form in it. I want the text boxes in the form to take almost the entire width of the form (It should look like google's new sign in form).
I am setting the input's margin to auto and the width to 90% using css, but for some reason it has no effect. Even when I set the width to a number (i.e 200px), the width remains unchanged.
The only way I could make it work is increase the padding of the input to 100px, but this is both not responsive, and not a good practice.
This is the code I am using:
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height=1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width=90%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
Screenshot of what I get right now
Fix your width. Instead of = it should be :. Your code seems fine otherwise. And width: 100% works just the way you intended.
Also, as mentioned in the comments, It should be height: 1500px; in .pageMain
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height: 1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width:100%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
the first look into your css file
height=1500px; // Why =, not :? <----- PageMain class
width=90%; // <---- same here in input class
change:
width=90%;
height=1500px;
to:
width:90%;
height:1500px;
also use * { box-sizing: border-box;} for remove scrollbars.
I just have a quick question about my website. I have a huge whitespace between my footer and the end of my background image, about 500 or so pixels. I can't seem to find the problem and any help is appreciated.
Thanks,
Jacob
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website but don't know how? Look no further </h1>
</div>
<p> Web engineer for hire
</div>
</div>
<div style='align:center;text-align:center' class ="des" >
<h2> Knowledge. </h2>
<p> Straight 'outta Compton </p>
<hr>
<h2> Commitment. </h2>
<p> To excellence and to serve </p>
<hr>
<h2> Perspective. </h2>
<p> New outlook on your web designs </p>
<br>
</div>
</div>
</body>
<footer>
<div id ='footer'>
<p> Copyright #2014-2015 Jacob Platin
</div>
<div id ='footer1'>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
z-index: 110;
position: relative;
}
.des {
position: relative;
bottom: 1564px;
background-color: #e3e3e3;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
box-shadow: 1px 5px 35px black;
text-align: center;
width: 1050px;
height:1000px;
position: relative;
z-index: -1;
margin: 0 auto;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 12px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 65px;
box-shadow: 2px 2px 8px 3px black;
}
.nav a {
text-decoration: none;
color: black;
padding-top: 15px;
font-weight: 700;
color: white;
}
.container > p {
padding-top: 100px;
height: 500px;
position: relative;
bottom: 140px;
font-weight: 700;
color: #cc0000;
text-align: center;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px blue;
}
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
background-position: -10px -60px;
z-index: -1;
height: 1700px;
}
#h1 {
position: relative;
top: -50px;
text-align: center;
font-family: 'Georgia', times, serif;
background-color: black;
color: #e3e3e3;
text-shadow: 5px 5px 5px white;
height: 150px;
width: auto;
margin: 0;
margin-left: 44px;
margin-right:44px;
position: relative;
z-index: -1;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 2000px;
height: 200px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: relative;
bottom: -100px;
}
#footer1 {
height: 78px;
width: 2000px;
background-color: #660000;
position: relative;
margin-top: 24px;
}
#footer > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 15px;
text-align: center;
}
#facebook {
position: relative;
bottom: 123px;
text-align: center;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
When you use position: relative; the browser thinks, "Ok, I'm going to keep the element's technical location the same, but I'm going to make it appear to be in a different spot." You have the following CSS on your .des element:
.des {
position: relative;
bottom: 1564px;
}
This says, "Keep .des there, but make it appear 1564 pixels higher (further away from the original bottom)". This results in a blank space, which is the height of the element, showing up where the element technically still is, even though it appears elsewhere.
You also have the following CSS on your #footer element:
#footer {
position: relative;
bottom: -100px;
}
This makes it appear 100px lower on the page, but keeps the original spot there, and now blank.
Unless I'm mistaken, these two gaps combine for a whopping 1038px of blank space on your page. The solution? You're probably looking for position: absolute;, which doesn't keep the original spot for the element. In fact, I think that if you changed the positioning part of the CSS on .des to be
.des {
position: absolute;
top: 260px;
}
or something close to that, it would get rid of most of the gap, minus the 100px on #footer. Here's a JSFiddle, if you'd care to have a look.
The height of your background image in your CSS is set to height: 1700px; but the background image that you link to is only 1200px high. That would seem to account for the 500px difference
I am new to web designing and I am currently designing a website for my college project.Right now, I am facing a problem which is as follow:-
When I resize the browser window,specially when i resize the browser window to a small size, the div elements jumps out of it's normal flow and everything gets scattered on giving width:100% value in my container id of CSS.
But as as i give the width of the wrapper id in pixels(say 960px), everything works and looks fine. But i want to design a full width browser window website so that it can adjust on any browser window size Please tell me how it can be done.
jsfiddle link is http://jsfiddle.net/9BuHt/3/
My CSS code is as under:-
I am new to web designing and I am currently designing a website for my college project. Right now, I am facing a problem which is as follows:
When I resize the browser window, specially when I resize the browser window to a small size, the div elements jumps out of its normal flow and everything gets scattered on giving width:100% value in my container id of CSS.
But as as I give the width of the wrapper id in pixels(say 960px), everything works and looks fine. But I want to design a full width browser window website so that it can adjust on any browser window size. Please tell me how it can be done. My CSS code is as follows:
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: #e9e5e5;
}
* {
margin: 0px;
padding: 0px;
}
#container {
min-height: 300px;
margin: 0 auto;
width: 1400px;
}
#header {
height: 150px;
width: 100%;
}
#logo {
padding-top: 10px;
padding-left: 20px;
float: left;
}
#header #title_panel {
float: left;
padding-top: 25px;
min-width: 60px;
}
#header #title_panel h1 {
color: #125ab4;
font-size: 36px;
}
#header #title_panel p {
color: #f5071d;
font-size: 20px;
font-family: "Comic Sans MS", cursive;
}
#search_panel {
margin: 10px 0px 0px 80px;
float: left;
width: 180px;
position: relative
}
#search_panel img {
float: right;
margin-top: -20px;
z-index: 1;
}
#search_field, #usrnam_field, #pwd_field {
border-radius: 20px;
color: #999;
padding-left: 4px;
s
}
#login_panel {
float: right;
width: 520px;
margin: 10px 200px 0px 0px;
min-height: 40px;
}
#login_btn, #signup_btn {
height: 20px;
width: 70px;
border-radius: 30px;
background: #125ab4;
text-align: center;
color: #FFF;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
.
}
#login_btn {
float: right;
margin-top: -20px;
text-decoration: none;
}
#signup_btn {
margin: 0 auto;
}
#header h3 {
text-align: center;
padding-right: 20px;
color: #125ab4;
}
#sidebar {
min-height: 200px;
width: 136px;
margin-top: -20px;
border: solid 1px #999999;
background: #FFF;
}
#sidebar_header {
height: 32px;
background-color: #009933;
}
#sidebar_header h2 {
text-align: center;
text-decoration: none;
color: #FFF;
vertical-align: middle;
text-decoration: none;
padding-top: 2px;
}
#sidebar_header img {
position: absolute;
float: left;
margin-left: 15px;
}
#sidebar ul {
list-style: none;
}
#sidebar ul a {
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #009933;
}
#sidebar ul li {
padding-top: 15px;
text-align: center;
display: block;
vertical-align: middle;
}
#sidebar a:hover {
background-color: #009933;
padding: 10px 5px 10px 5px;
color: #FFF;
}
And the html code is as under:-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App Store-The one stock shop for all</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" width="100" height="100" alt="logo"></div>
<div id="title_panel">
<h1>App Store</h1>
<p>The one stock shop for all</p>
</div>
<div id="search_panel">
<form action="" method="post">
<input name="search" type="text" value="Search..." id="search_field">
</form>
<img src="images/Search_icon.png" width="22" height="22" alt="SearchIcon"> </div>
<div id="login_panel">
<form action="" method="post">
<input name="usrname" type="text" value="Username" size="30" id="usrnam_field">
<input name="psswrd" type="text" value="Password" size="30" id="pwd_field">
</form>
<a href="#">
<div id="login_btn">Login</div>
</a>
<h3> </h3>
<h3>Not a member yet?</h3>
<a href="#">
<div id="signup_btn"> Signup</div>
</a>
</div>
</div>
<div id="sidebar">
<div id="sidebar_header"> <img src="images/logo_small.png" width="22" height="28" alt="logoIcon">
<h2 style="">Store</h2>
</div>
<ul>
<li>Technologies</li>
<li>Categories</li>
<li>Developers</li>
<li>Apps</li>
</ul>
</div>
</div>
</div>
</body>
</html>
There are cases where you need to specifically fix small browser windows(this just might be one of them)
.myClass {
width: 50%;
}
but at small sizes, 50% is not big enough and we make it 100%
#media (max-width: 600px) {
.myClass {
width: 100%;
}
}
so when the browser window is less than 600px, we fix it.
here are common device sizes http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
EDIT
after creating an html file of the code and looking at it, it looks like you have a 100% header with some floating elements in it.
under that you have a float left sidebar.
2 fixes that make it look a bit better are:
clear: both; on your #sidebar
and use max-width instead of width on your login_panel
so clear: both will make sure that it accounts for any element floating left or right.
max-width means that the login_panel won't get too big when the screen is huge, but when the screen it small, it won't go off-screen.
As I correctly understand you. You are need to create a fluid markup for any device support. So look to my example and try to adapt your code the same way.
So, for example you need #wrapper width = 960px for desktops and full sized content on mobile devises (if device width < 960px). So your code must be:
HTML
#wrapper {
max-width:960px;
margin:0 auto;
overflow:hidden // if you have float elements inside wrapper
}
If you have a question - welcome