I am trying to make a static header that stays floating at the top. the background is also static,
somehow the background seems to hide the header and show in front of the header.
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#mainframe{
color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
#right{
float:right;
width: 479px;
}
#left{
float:left;
}
#footer{
text-align: right;
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
padding-right: 50px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #F00;
padding-top: 10px;
font-size: 10px;
padding-bottom: 10px;
background-image: url(images/bartrans.png);
text-transform: none;
text-decoration: none;
}
#txt{
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
margin-top: 10px;
font-size: 12px;
}
a {
text-decoration: none;
color:#FFF;
}
#header {
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
border: 1px dotted #F00;
margin-top: 20px;
}
#headercontent {
background-color: #F00;
width: 900px;
margin-right: auto;
margin-left: auto;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="headercontent">
<img src="images/fmenewlogo.png" width="327" height="133" />
</div>
</div>
<div id="page-background"><img src="images/Music_Equalizer_by_Merlin2525.png" width="100%" height="100%" alt="Smile"></div>
Am I missing something here?
You just need to add z-index: 10; to the #header css rule and z-index: 0; to #page-background rule. You can see my Fiddle here.
I wouldn't set the #page-background to position: fixed;
You can set the background-image or whatever you are using to background-attachment: fixed;, so then, when you set the header element to position: fixed; they won't clash. I wish we had more to work from, like a link to the page you are working on.
It's hard to create a test environment for you without the assets you are using.
Also, another thing I see as an issue is that you are using a DIV element to set the background image.
Apply the background image to the BODY element and you won't have to worry about any of this.
See a JSFiddle here to see the code I was working with: http://jsfiddle.net/mikelegacy/5P7TN/
Notice that I have removed the #page-background ID and used the BODY element to apply the background image. You shouldn't apply full page background images with DIVs, that's not semantic.
Here is the code exactly how you should copy/paste it in your editor:
<html>
<head>
<style type="text/css">
html, body {
height:200%;
margin:0;
padding:0;}
body {
background-image: url(images/Music_Equalizer_by_Merlin2525.png);
background-attachment: fixed;
background-position: 0 0;
background-repeat: repeat; }
#content {
position:relative;
z-index:1;
padding:10px;}
#mainframe{
color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
#right{
float:right;
width: 479px;
}
#left{
float:left;
}
#footer{
text-align: right;
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
padding-right: 50px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #F00;
padding-top: 10px;
font-size: 10px;
padding-bottom: 10px;
background-image: url(images/bartrans.png);
text-transform: none;
text-decoration: none;
}
#txt{
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
margin-top: 10px;
font-size: 12px;
}
a {
text-decoration: none;
color:#FFF;
}
#header {
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
border: 1px dotted #F00;
margin-top: 20px;
}
#headercontent {
background-color: #F00;
width: 900px;
margin-right: auto;
margin-left: auto;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="headercontent">
<img src="images/fmenewlogo.png" width="327" height="133" />
</div>
</div>
</body>
Here is that article for full screen background images: http://css-tricks.com/perfect-full-page-background-image/
Some of the methods here use and IMG tag to set the background image. Not exactly semantic, but it's a hack for older browsers. If you could, I would recommend just using background-size: cover;
Related
I'm trying to fix my website main logo. The name is Cerebro Design, and I would like to put Cerebro up and Design down, exactly like this:
This is the CSS code I have so far:
<div style="margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#000;">
CEREBRO DESIGN
</div>
#logo{
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:80px;
color:#fff;
text-align:center;
background:#000;
}
#logo-text{
margin-left:70px;
padding-top: 160px;
max-width:30px;
}
<div id="logo">
<div id="logo-text">CEREBRO DESIGN.</div>
</div>
Then you just add the correct font and you should be good to go.
As a note, is better to use external or internal (<style>...</style>) css than using style="..." on an element.
i would use an image for the logo, but if you want to go css way, this could work for you.
Demo
div {
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#000;
display: inline-block;
position: relative;
overflow: hidden;
}
div:before, div:after{
display:inline-block;
position: absolute;
color: white;
font-size: 95px;
width:500px;
height:500px;
text-align: center;
left: 0;
}
div:before{
content: 'CEREBRO';
top: -10%;
}
div:after{
content: 'DESIGN.';
top: 10%;
}
Can you share the font you are using? My quick aproach (I'm in a small laptop) would be something like this:
HTML:
<div class="cerebro-logo">
<span class="padding">Cerebro
<span class="design-text">Design .</span>
</span>
</div>
CSS:
.cerebro-logo {
margin:auto;
width:500px;
height:500px;
border-radius:250px;
font-size:70px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-weight: 600;
color:#fff;
line-height:80px;
letter-spacing: 10px;
text-align:left;
background:#000;
text-transform: uppercase;
}
.padding {
padding-top: 165px;
padding-left: 50px;
float: left;
}
.design-text {
letter-spacing: 13px;
}
Tip: You can use letter-spacing (for example) to get that spacing effect on the "Design .".
JSFIDDLE link: http://jsfiddle.net/f5qrbbx5/
Just add your text, no need to calculate any margin or padding.
.circle {
width: 500px;
height: 500px;
margin: 20px auto;
background: #000;
border-radius: 50%;
color: #fff;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 94px;
text-align: center;
white-space: nowrap;
}
.circle:before {
content: '';
display: inline-block;
height: 100%;
margin-right: -0.25em;
vertical-align: middle;
}
.circle > * {
display: inline-block;
max-width: 80%;
text-align: left;
vertical-align: middle;
white-space: normal;
}
<div class="circle">
<span>CEREBRO<br>DESIGN.</span>
</div>
So I have some wierd spacing at the bottom of the footer and im not sure whats causing it. the code is as follows:
scss:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
header {
padding:10px;
background:#EFDECD; //#5ee;
// text-align: center;
}
#content {
padding:10px;
// padding-bottom:80px; /* Height of the footer element */
}
footer {
display: block;
width:100%;
height:5em;
position:absolute;
bottom:0;
left:0;
background:#EFDECD; //#EFDECD
text-align: center;
overflow: hidden;
a{
padding: .75rem;
// position:relative;
top: 1.5em;
display: inline-block;
font-size: .72rem;
}
p{
font-size: .72rem;
}
}
video{
width: 100%;
height:auto;
}
.label{
margin-left: .5em;
margin-right: .5em;
}
table{
font-size: .75em;
}
.panel.callout a:not(.button):hover{
color: $anchor-font-color-hover;
}
.headtext{
display:inline-block;
font-size:3em;
margin-left: 1.5em;
text-align: center;
font-family:"Courier New";
font-weight: bold;
margin-left: 6em;
margin-right: 7em;
}
.img2{
// max-height: 20%;
max-width: 25%;
float:right;
display:inline-block;
}
.accorborder{
border: black dotted 1px;
}
h6{font-weight: bold;}
The site is in development and is at www.new.omegadesignla.com please inspect element to view and can also view source code there.
The problem comes from the <br> which is between <div id="wrapper">...</div> and <footer>...</footer>.
If you eliminate position:absolute from your footer rule, the white space below footer will disappear. Is there a specific reason you are using position:absolute?
I want to divide my page in 3 sections (header, content, footer). The problem is that the footer is not at the bottom as it should be, it is at the middle of the page. What am I doing wrong?
#page{
margin: 0 auto;
}
html{ height:100%;
margin:0;
padding:0;}
body{
height:100%;
margin:0;
padding:0;
background:#FFF;
font-family: verdana;
background-color: white;
}
#header{
top: 0px;
width: 100%;
height:2.5em;
border-bottom: 1px solid rgba(168, 164, 164, 1);
background-color: #FAF0E6;
}
#content{ a
width: 100%;
height:100%;
text-align: center;
}
#formulario{
width:48em;
margin-top:2em ;
margin-right: auto;
margin-left:auto;
}
#footer{
margin-top:2em;
margin-bottom: 0px;
bottom:0em;
font-size: 1em;
font-family: "lucida grande";
text-align: center;
width: 100%;
height:1.5em;
background-color: #D0F5A9;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page">
<div id="header">
hi
</div>
<div id="content">
<div id="formulario" >hi
</div>
</div>
<div id="footer">
hi</div>
</div>
</body>`enter code here`
</html>`enter code here`
Thanks for your help
I would recommend you to use class instead of id for the best practice because id can only be used once but you could use class multiple times. You could do it like this:
Demo on Fiddle[Edited]
Have a look at this Fiddle too.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
font-family: verdana;
background-color: white;
background: #FFF;
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: #FAF0E6;
position: relative;
width: 100%;
height: 2.5em;
border-bottom: 1px solid rgba(168, 164, 164, 1);
}
.content {
position: relative;
width: 100%;
min-height: 100%;
text-align: center;
margin-top: -2.5em;
margin-bottom: -1.5em;
padding-top: 2.5em;
padding-bottom: 1.5em;
}
.formulario {
width: 48em;
margin-top: 2em;
margin-right: auto;
margin-left: auto;
}
.footer {
background-color: #D0F5A9;
position: relative;
width: 100%;
height: 1.5em;
font-family:"lucida grande";
font-size: 1em;
text-align: center;
}
<div class="header">hi</div>
<div class="content">
<div class="formulario">HI!</div>
</div>
<div class="footer">hi</div>
#page{
margin: 0 auto;
}
html{ height:100%;
margin:0;
padding:0;}
body{
height:100%;
margin:0;
padding:0;
background:#FFF;
font-family: verdana;
background-color: white;
}
#header{
top: 0px;
width: 100%;
height:2.5em;
border-bottom: 1px solid rgba(168, 164, 164, 1);
background-color: #FAF0E6;
}
#content{ a
width: 100%;
height:100%;
text-align: center;
}
#formulario{
width:48em;
margin-top:2em ;
margin-right: auto;
margin-left:auto;
}
#footer{
margin-top:2em;
margin-bottom: 0px;
bottom:0em;
position:absolute;
font-size: 1em;
font-family: "lucida grande";
text-align: center;
width: 100%;
height:1.5em;
background-color: #D0F5A9;
}
<body>
<div id="page">
<div id="header">
hi
</div>
<div id="content">
<div id="formulario" >hi
</div>
<div id="footer">
hi</div>
</div>
</div>
</body>
You should use position:absolute; for your footer
There are two things need to be noticed:
The footer DIV shouldn't is a child node of content DIV. Because the footer is sibling to the header.
After change the footer of DOM position.Both of
position:fixed;bottom:0; and position: absolute; bottom:0;
is fit for your situation.
This is My JSFiddle.
You need add positionattribute inside footer id and set it to absolute. You didn't mention the position of the footer that's why it was in the middle.
like that
#footer{
margin-top:2em;
margin-bottom: 0px;
bottom:0em;
position:absolute;
font-size: 1em;
font-family: "lucida grande";
text-align: center;
width: 100%;
height:1.5em;
background-color: #D0F5A9;
}
#page{
margin: 0 auto;
}
html{ height:100%;
margin:0;
padding:0;}
body{
height:100%;
margin:0;
padding:0;
background:#FFF;
font-family: verdana;
background-color: white;
}
#header{
top: 0px;
width: 100%;
height:2.5em;
border-bottom: 1px solid rgba(168, 164, 164, 1);
background-color: #FAF0E6;
}
#content{ a
width: 100%;
height:100%;
text-align: center;
}
#formulario{
width:48em;
margin-top:2em ;
margin-right: auto;
margin-left:auto;
}
#footer{
margin-top:2em;
margin-bottom: 0px;
bottom:0em;
font-size: 1em;
font-family: "lucida grande";
text-align: center;
width: 100%;
height:1.5em;
position:absolute;
background-color: #D0F5A9;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page">
<div id="header">
hi
</div>
<div id="content">
A
A
A
A
A
v
A
<div id="formulario" >hi
</div>
</div>
<div id="footer">
This is footer</div>
</div>
</body>
</html>
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li>ESILEHT</li>
<li>UUDISED</li>
<li>ÜLEVAATED/ARVUSTUSED</li>
<li>LOGI SISSE</li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
<div id="tervitus">
<h3 id="tere">TERE TULEMAST</h3>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
<footer>©2014 Janno.</footer>
</body>
</html>
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: absolute;
top: 0;
background-color: #000000;
left: 0;
min-width:760px;
}
#navBar ul{
list-style:none;
margin: 0 auto;
}
#navBar li{
float: left;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #F0F0F0;
color: #000000;
text-decoration: none;
}
#logimine{
}
body{
margin: 15px;
padding: 15px;
background-color: #F0F0F0;
min-width: 700px;
}
.content, .artikkel{
max-width: 65%;
margin: 1em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
#tervitus{
background-color: black;
color: white;
font: 18px "open sans", sans-serif;
font-weight: bold;
}
#tere{
margin-left: 5px;
}
#logo{
}
#regnupp{
color: blue; /*miks see valge on muidu*/
}
.uudised{
max-width: 65%;
margin: 4em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
.uudised{
padding-left: 115px;
}
.uudised img{
float: left;
width: 100px;
margin-left: -75px;
}
.uudised p, h2{
margin-left: 50px;
}
.uudised hr{
margin-top: 50px;
margin-bottom: 50px;
}
footer {
text-align: center;
margin: 0 auto -40px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
font-weight:300;
color:#ffffff;
background-color:#000000;
}
If I understand correctly, the <footer>, when using width: 100%; looks like the width of the <body> element, so I tried quite a few things and nothing. This is my first try at a webpage, so is there anything I can do, to have the <footer> use the entirety of the page width, without drastically changing everything?
Make sure that firstly your css is set up properly such as:
body {
margin: 0;
}
then your footer css should be something like this:
.footer {
margin: 0;
width: 100%;
height: 120px;
background-color: red;
}
This should work obvious then your html should be something like:
<html>
<body>
<div class="footer">
</div>
</body>
</html>
Hope this helps!
JsFiddle
I added extra styles to the JSFiddle for presentation and proof, but the code works the same without.
Do this:
HTML
<body>
<footer>Hi</footer>
</body>
CSS
html,body{
width:100%;
height:100%;
marging:0;
}
footer{
height:120px;
width:100%;
position:absolute;
bottom:0;
}
Block level elements
To understand this issue you need to understand about display:block. Block level elements (elements which declare display:block) by default take up the full width of their containing element.
In this case, the footer is, in all newish browsers, a block level element, and so will take up the full width of its container, in this case the body. There is no need to set width:100%;
Older browsers
In older browsers, the newer HTML5 elements, including block, are inline by default, so you need to set them to be block level in your CSS, like so:
footer {
display:block;
}
This is good practice.
Floats
There are several things which can get in the way of this behaviour, notably floats. If you float an element, to the left or right, it will become as narrow as it possibly can, while still enclosing it’s contents. This may or may be your issue here.
Do please post your code.
set footer width to viewport width width: 100vw;, and add the viewport meta tag to your header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
There is a good full width and sticky to bottom (if you need) solution:
<div class="content">
<!-- content here -->
<div class="hfooter">
<!-- For Content not to lay under the Footer -->
</div>
</div>
<div class="footer">
<!-- footer content here -->
</div>
and CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.content {
height: 100%;
}
.hfooter {
height: 100px;
}
.footer {
height: 100px;
margin-top: -100px;
}
Hope it is that what you need)
DEMO here: http://jsfiddle.net/verber/63gbg/11/
The following is my CSS code:
<style type="text/css">
body {
background-color:#FFF;
font-weight:bold;
font-size:12pt;
font-family:Arial,sans-serif;
}
.container {
width: 800px;
margin: 0 auto;
}
#header {
text-align: left;
padding-top: 220px;
font-size: 60pt;
}
#subheader {
text-align:left;
font-size: 15pt;
color: #666;
margin-top: -5px;
margin-bottom: 15px;
}
#email {
width: 165px;
height: 25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align:center;
border: 2px solid;
color: #666;
border-color: black;
}
input[type=submit] {
height: 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #000;
border-color: #fff;
color: #fff;
}
#socialMedia {
padding-top: 60px;
text-align:center;
}
#video {
padding-left: 600px;
margin-top: -260px;
}
</style>
The HTML divs are divided as follows:
<div class="container">
<div id="header">
<Content>
</div>
<div id="subheader">
<Content>
</div>
<Form Input Field>
<div id="video">
<Embedded Video>
</div>
<div id="socialMedia">
<Social Media Image Links>
</div>
</div>
</body>
</html>
The issue I'm having with this is that while the page attempts to center itself with browser rescale, only the left side of the content is really adjusting. The right side essentially hangs on to the edge of the page, thereby not centering it.
Any suggestions? I tried this using Chrome.
This may be the problem:
#video {
padding-left: 600px;
margin-top: -260px;
}
I'm not sure what size the video container is but maybe this is why it is not centering properly with everything else.
When you use this CSS instead, what happens?
#video {
text-align:right;
margin-top: -260px;
}
Maybe I'm misunderstanding what the problem is. Could you send a screenshot of the issue?
Try setting a max-width on the container:
.container {
max-width: 800px;
margin: 0 auto;
}
Here's a demo: http://jsfiddle.net/Ltf5U/