I'm experimenting with a position:fixed; #header of 100% width and 50px max-height. On full screen for most web browsers I can't gaurantee the content of the layout in the #header will be congruent, however, it will most likely fit the page. The much larger concern however, is upon resize the content of this will look a complete mess. Does anyone have a method they're comfortable with that would scale this content?
Here is a small basic sample of what I'm doing
/* --- Footer/Header Area --- */
#footer {
height: 70px;
max-height: 70px;
width: 100%;
position: absolute;
background-color: #eee
}
#header {
background-color: #fff;
height: 50px;
max-height: 50px;
line-height: 45px;
width: 100%;
position: fixed;
top: 0;
float:left;
box-shadow: 2px 4px 5px #555;
}
#header img {
/* --- TOGOHERE: >>>> margin: 10px 30px 0 --- */
}
#header h1 {
display:inline-block;
font-size: 1.2em;
font-family:Courier New;
text-align: left;
}
#header h2 {
display:inline-block;
font-size: x-small;
font-family: Tahoma;
text-align: center;
padding-right:2cm;
}
#header h3 {
display:inline-block;
font-size: xx-small;
font-family: Tahoma;
text-align: center;
padding-right:2cm;
}
Can you not use alternative container size for each media query. one for large screens, one for medium, one for small and one for extra small.
Related
I've searched at the Stack Overflow and other sources, for example here.
This is the code, I'm talking about:
.container{
width: 100%;
height: 100%; /*adjust this manually and no issue*/
background: #222222;
margin: 0;
padding: 0;
}
There is a jsfiddle of the section I'm talking about. If the container is changed to (say) 180% it solves all because it's made bigger than everything so everything is sitting on top of it.
I have a container which is the parent here and a child called content which has 2 columns in it. When I write too much in the column, it goes over the container as they are both floating. I can change it manually, so once I'm happy with the text just change the height which is OK. But, I don't think this is good practice and I'm sure there is another way that does it automatically by canceling all the floats. I cant get it to work though.
You need to adjust your CSS like this:
/*
Dark Grey: #222222
Orange: #ff8a00
Light Orange: #ffcc8f
White: #ffffff
*/
body {
background: url("images/river.jpg") no-repeat top center fixed;
background-color: #222222;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
h2 {
color:#ff8a00;
font-size: 1.75em;
letter-spacing: 8px;
padding:30px;
border-bottom: 1px dotted #ff8a00;
width:50%;
margin:0 auto;
padding-top:5%;
}
h3 {
color:#ff8a00;
font-size: 1.1em;
letter-spacing: 8px;
border-bottom: 1px dotted #ff8a00;
margin:0 auto;
padding-top:5%;
}
.container {
width: 100%;
height: auto;
background: #222222;
margin: 0;
padding: 0;
position:relative;
}
.content {
margin:0 auto;
width: 60%;
height: auto;
text-align:center;
background: #fc0;
/*Change to #222222 */
font-family: proximaNova;
font-size:1.1em;
color:white;
display:block;
}
.bio {
margin:0 auto;
width: 70%;
height: auto;
text-align:center;
background: #222222;
/*Change to #222222 */
font-family: proximaNova;
font-size:1em;
font-style:normal;
margin-top:30px;
line-height: 30px;
}
.left-column {
width: 48%;
display:inline-block;
height: auto;
text-align:left;
background: black;
/*Change to #222222 */
font-family: proximaNova;
font-size:1.0em;
margin-top:5%;
}
.right-column {
display:inline-block;
width: 48%;
height: auto;
text-align:left;
background: black;
/*Change to #222222 */
font-family: proximaNova;
font-size:1.0em;
margin-top:5%;
}
.footer {
width:100%;
background-color: white;
text-align:center;
color:#222222;
font-size:1em;
font-family: proximaNova;
}
.nav-text {
margin-left:20px;
margin-top:25px;
font-family:trench;
font-size:22px;
color: white;
float:left;
}
You're adding 100% height everywhere, as if that's the solution to everything, and that's the cause to most of your issues. If you want to auto adjust sizes to anything then the logical answer for the property is... auto. By setting all your 100% heights to auto and getting rid of your floats (you could use floats, but you must clear them, as we're at it, so showing you another option), you can do this easily, without the ultra complicated and convoluted ways you were trying.
I've forked your fiddle so you can add paddings, margins etc. Also changed the background on one of your divs just so you see how the box model works, but of course you can (and should) change it to anything
See MDN page for more info on HEIGHT PROPERTY syntax, behavior and examples
Try this
jsfiddle
.container{
width: 100%;
background: #222222;
margin: 0;
padding: 0;
float:left;
}
i am trying to keep the footer div at the bottom of the screen when the content is shorter than the view port, but it also has to remain at the bottom on the page content(not the view port) when the content is taller than the view port.
So far it remains at the bottom of the content when zoomed in, but i can't get it to stick to the bottom when zoomed out. There are samples with position: absolute; that i have seen, but it makes the footer remain at the bottom of the view port and not the content when zoomed in.
I have to do this for a school unit, is there a way to do this?
For now i have the footer position as relative, though i guess that wont do anything but stick it close to the last div, yeah? but i seem to find what i need to do.
Here is the site:
http://www.foodforthought.webatu.com/Index.html When you zoom right out you will see the footer not stay at the bottom.
Here is my CSS:
* { padding: 0; margin: 0; font-family: verdana; }
html {
height: 100%;
}
body {
font-size: 13px;
color: #000;
background-color: white;
background-position: center;
background-repeat: repeat-y;
background-image: url('../images/background.jpg');
}
/* Main div container */
#wrapper {
margin: 0 auto;
width: 960px;
height: auto;
}
/* Header div */
#wrapper #header {
height: 200px;
background-color: green;
}
/* Special event section */
#header p {
position:relative ;
left: 30px;
top: -100px;
width: 300px;
z-index: 1;
color: white;
border-style: dashed;
padding: 5px;
border-width: 1px;
}
/* Horizontal list div */
#wrapper #navigation {
height: 25px;
background-color: white;
display: block;
}
/* Horizontal list */
#navigation ul {
padding-top: 5px;
list-style-type: none;
text-align: center;
width: 960px
}
/* Horizontal list items */
#navigation li {
display: inline-block;
text-transform: uppercase;
vertical-align: middle;
}
/* Horizontal list link */
#navigation a {
height: 25px;
width: auto;
display: block;
line-height: 15px;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: black;
padding-left: 8px;
padding-right: 8px;
}
/* Horizontal list hover attribute */
#navigation a:hover {
color: Darkgrey;
}
/* Content div */
#wrapper #content {
display: inline-block;
height: auto;
width: 950px;
background-color: white;
padding-left: 10px;
padding-right: 0px;
}
/* Content headings */
#content h2 {
text-transform: capitalize;
padding: 10px;
}
/* Content image(global) */
#content img {
padding: 2px;
border-width: 1px;
margin: 10px;
margin-left: 20px;
Margin-right: 15px;
}
/* Content bullet list */
#content ul {
padding: 15px;
font-size: small;
margin-left: 10px;
}
/* Content paragraph text */
#content p {
padding-left: 10px;
font-size: small;
}
/* Content image */
#content #img1 {
float: left;
border-style: dashed;
}
/* Content image */
#content #img2 {
float: right;
border-style: solid;
border-width: 1px;
border-color: #BDA27E;
}
/* Content image */
#content #img3 {
float:left;
border-style:double;
margin-top: 20px;
margin-left: 8px;
border-width: 5px;
border-color: #996633;
}
/* Side menu div*/
#wrapper #content #menu {
float: right;
padding: 0px;
margin: px;
width: 220px;
height: 1118px;
}
/* Side menu*/
#menu ul {
list-style-type: none;
float: right;
text-align: right;
width: 170px
}
#menu li {
background-image: url('../images/pg_menu_bg.png');
}
/* Side menu link */
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 0px;
}
/* Side menu hover attribute */
#menu a:hover {
color: darkgrey;
}
/* Footer div */
#wrapper #footer {
height: 40px;
background-color: #82AAF1;
width: 960px;
margin: 0px, auto;
position: relative;
bottom: 0;
}
/* Foot note */
#footer p {
text-align: center;
color: #6A1B1B;
padding-top: 15px;
font-size: 10px;
}
.padext {
padding-top:2px
}
Sorry i am still a beginner.
Thank you for you time.
If you HTML is like this:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
apply the following CSS.
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
The padding-bottom of the #content is set as the height of the footer.
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
I recommend you to refer the following link : How To Keep Your Footer At The Bottom Of The Page With CSS
I am following this tutorial link but do not know how to put the footer on the bottom of the page so when the user open the page the footer is on the very bottom of page regardless of size of the monitor.
So that when they change the size of window or use a bigger monitor footer should be at the end of page.
The important part is that I do not have much text in my content section so the scroll bar is expected to be invisible in any size of monitor.(those that are not very tiny)
*Please also note that I have looked at the previous question but could not find a correct answer.
* If you know of any other tutorial I would appreciate your suggestion. (I need float layout)
Layout
container
{
header
content
{
leftnav | rightnav
}
footer
}
Css
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
In the tutorial the footer is in a container div.
If you remove from the container width:90% the example will be rendered across the whole width of the screen.
Use the sticky wrapper jQuery plugin, or use position: fixed with bottom: 5% and left: 0 and margin-left values in -ve.
<footer style="background-color: crimson; color:springgreen; font-family: serif; text-align: center; font-size: 15px; position:absolute; width: 99.82%;margin-left: -6px; margin-right: -6px;"><h1>THIS IS MY FOOTER</h1></footer>
Browser: Google Chrome
System Screem: 15.6"
I have experienced that the appearance of our divs, headers, footers & navs varies from screen to screen and may be browser to browser.
try this :
#footer{
position: absolute;
bottom: 0px;
height: 50px;
width: 100%;
}
I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.
Below is the CSS code I am currently using:
body, html {
font-family: Arial;
font-size: 11.5pt;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, div {
font-family: Arial;
font-size: 11.5pt;
}
#outer {
text-align: center;
margin: 0px;
}
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 2px;
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
#header {
background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
width: 1024px;
height: 280px;
}
#menu {
width: 1024px;
height: 61px;
}
#content {
background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
background-repeat: no-repeat;
width: 804px;
height: 357px;
padding-top: 80px;
padding-bottom: 10px;
padding-left: 110px;
padding-right: 110px;
line-height: 24pt;
}
#footer {
margin: 0px;
padding: 0px;
}
.txt {
color: #BF2736;
font-weight: bold;
}
Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones.
http://meyerweb.com/eric/tools/css/reset/
#wrapper {padding:0;}
The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.
Change the Padding of the #wrapper to Zero
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 0px; -- Change This to zero!!!
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
You might want to read about css reset tool
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on
Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.
problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it:
50.116.81.173/~speedcit/images/footer.jpg
And problem of your top white space is what others said before.
I been following a tutorial for making my webpage css 100% height from this SITE. I been able to achieve what i want but now I am having an issue with my footer. Every time I resize the page smaller the footer will slightly scroll upwards into the content. Is there a way i can stop that? Here is my Live EXAMPLE
Thank you
css
<style>
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#333333;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size:small;
color:#5e5e5e;
line-height: 130%;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: 0;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/**************************************************/
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:925px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-right: 15px solid #000000;
border-left: 15px solid #000000;
}
div#contentArea {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#contentArea p {
text-align:justify;
padding:0 1em;
}
#content {
margin-left: 240px;
margin-right: 0 auto;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
/*padding:1em;*/
height: 175px;
border-top:15px solid #000000;
}
div#header p {
margin:0;
}
/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/
#left2 {
float: left;
width: 200px;
background: #dddddd;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
height: 400px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#7A7A7A;
border-bottom:15px solid #000000;
}
div#footer p {
padding:1em;
margin:0;
}
a.footer {
color: #c7c7c7;
font-size: 80%;
padding-right: 20px;
letter-spacing: 1px;
}
p {
margin:0 0 1em;
}
</style>
Add margin-bottom:60px; to the #content css definition.
Full block:
#content {
margin-left: 240px;
margin-right: 0 auto;
margin-bottom: 60px;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
Since you have an explicit height set on your content div, you could do:
padding-bottom:36px; on your div#container line 32
But if your content div changes in height, it may not account for that padding anymore.