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?
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>
I have found lots of ways to center a nav using tricks. Either by setting the line height and the height equal to each other or using vertical-align with display:table. It worked but my border always came at the bottom of the container rather than text.
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
display:block;
}
nav a{
height:100%;
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
To clarify the problem, I want to vertically center the text or the "a" tags within the header block. I would like to do this and also be able to put borders on the "a" tag where the border is close to the text.
You could use the table-cell display vertical-align approach.
* {
margin:0px;
padding:0px;
}
header {
display:table;
width: 100%;
height: 100px;
background-color:blue;
}
nav {
height:auto;
width:100%;
display:table-cell;
vertical-align: middle
}
nav a {
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
position: relative;
border-bottom: 3px solid blue;
}
nav a:hover {
border-bottom: 3px solid #F3008A;
}
<header>
<nav> Link
Link
Link
Link
</nav>
</header>
http://jsfiddle.net/wdabedbv/
You need to remove display:inline-block; and give line-height. It will solved your issue.
Check below your updated code:
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
}
nav a{
height:100%;
text-align:center;
line-height:100px;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
Try to use :Before as i did since your Height of the nav is fixed it wont be a problem.
Fiddle Link Demo
* {
margin: 0px;
padding: 0px;
}
header {
display: block;
height: 100px;
background-color: blue;
}
nav {
height: 100%;
width: 100%;
display: table;
}
nav a {
height: 100%;
text-align: center;
display: inline-block;
text-decoration: none;
color: black;
margin-left: 25px;
font-size: 25px;
display: table-cell;
vertical-align: middle;
}
nav a:hover:before {
background-color: #F3008A;
postion: absolute;
width: 50px;
content: "";
height: 3px;
position: absolute;
z-index: 4;
top: 64px;
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
I would assert that it is best to use flexbox since it is modern and responsive. The following will work nicely in all relatively modern browsers.
nav {
display: -webkit-flex;
display: flex;
}
nav > div {
background-color: pink;
height: 40px;
-webkit-flex: 1;
flex: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-contents: center;
justify-contents: center;
-webkit-align-items: center;
align-items: center;
}
nav > div:nth-child(odd) {
background-color: red;
}
nav > div > a {
text-align: center;
-webkit-flex: 1;
flex: 1;
}
<nav>
<div>hi</div>
<div>hi2</div>
<div>hi3</div>
</nav>
See this JSFiddle.
Here is a helpful guide with pictures.
So im fully aware of the amount of questions asked about "Sticky Footers", and have also referenced many, MANY different questions on here and websites about sticky footers. I've created a fresh template away from this project that work and have examples of how sticky footers operate, be it inside the wrapper or out...
However, i just cant seem to get it operate correctly within my solution.
Currently the footer appears to be "sticky", however on one of my main pages, the content (images and text) seem to overlap the footer, due to the footer not being pushed to the bottom correctly. It seems to sit just below the screen (Meaning you have to scroll slightly to see the footer) - But on this page it sits in that location, doesnt get pushed down and then the content overlaps.
I've tried everything, Removing 100% on HTML, BODY, WRAPPER, contentDiv, but basically, one thing works, which breaks another.
What im after is, ContentDiv = 100% (pushing down the footer). So i should be able to create a blank page, the footer be glued to the bottom, and if content increases it pushed it down... Simple right? But tearing out my hair with this :/
So, any help would be massively appreciated, as i have a short deadline to get this sorted.
Fiddle Demo
CSS
html
{ margin: 0px; padding: 0px; height:100%; }
body
{ margin: 0px; padding: 0px; height: 100%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
/* { margin: 0px; padding: 0px; height: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; } */
p { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; }
h2 { margin:0px; padding:0px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
/* PAGE FORMATTING - START*/
span:hover { /* text-decoration: underline; */ }
a:link, a:visted { }
ahover, a:active { }
.link_nav_header{
padding:0px;
font-size:20px;
font-weight:bold;
color:#333333;
cursor:pointer;
}
.but_default
{
padding: 2px;
border: 1px solid #009900;
background-color: #33FF00;
/* background-color: #dddbdb; */ /* TWO COLOURS? */
}
.but_events-buybutton
{
padding:3px;
min-width:90%;
margin-bottom:5px;
color:#ffffff;
background-color:#378ec8;
}
.but_all
{
min-width:90%;
cursor: pointer;
margin: 2px;
}
/* HEADER - START */
.hdr_container
{
width:100%;
height:110px;
padding:0px;
margin:0px;
position:relative;
background-color:#0099ff;
color: #ffffff;
overflow: hidden;
}
#hdr_profile-icon {
margin-top: 1%;
margin-right: 1%;
float: right;
background-color: inherit;
}
/* NEW NAVIGATION */
#nav {
width: 100%;
padding: 0;
margin: 0 auto;
background-color: #333333;
position: absolute;
bottom: 0%;
}
#nav ul {
list-style: none;
/* width: 800px;*/ /* REMOVE TO STRETCH NAV TO FULL WIDTH */
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
text-align: center;
}
#nav ul li{
width: 11%; /* STRETCHES NAV TO FULL WIDTH */
}
#nav li a {
padding: 8px 15px;
display: block;
text-decoration: none;
font-weight: bold;
color: white;
text-transform:uppercase
}
#nav li:first-child a {
background: red;
width: 10px;
font-weight: normal;
}
#nav li a:hover {
/* color: #c00; */
background-color: #0099ff;
}
#nav a:hover a:focus {
/* color: #c00; */
background-color: red;
}
/* MAIN CONTENT - START */
#wrapper {
clear: both;
/* margin: 0 auto; */
width: 100%;
height:100%;
min-height: 100%;
/* margin-bottom: -75px; */
z-index:10;
}
.contentDiv
{
clear: both;
width:65%;
min-width: 800px;
height:90%;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
/* z-index: -9999; */
}
/* TABLE - START */
.tbl_container-centered
{
width:100%;
height:100%;
min-height:100%;
/* padding-bottom: 20px; */
margin-left:auto;
margin-right:auto;
display:table;
overflow:auto;
/* margin-bottom: 75px; */
display: inline-table;
vertical-align: middle;
}
.tbl_containerpaneltext-centered
{
width:95%;
min-height:35%;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.tbl_head-genericthread
{
min-height:3%;
max-height:3%;
text-align:center;
color:#ffffff;
background-color:#0099ff;
}
.tbl_events-head {
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid;
text-align: left;
border-collapse: collapse;
}
.tbl_grid-events
{
background-color: #ffffff;
}
.tbl_pickseats-famtable
{
width:100%;
background-color:#e1e1e1;
}
table#tbl_events{
height:100%;
min-height:100%;
border-collapse: collapse;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
}
.link_moreinfo{
padding:0px;
font-size:14px;
font-weight:bold;
color:#0099ff;
cursor:pointer;
}
#event_row {
height: 140px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#basket2 {
background: red;
}
/* FOOTER CSS - START */
.footer_container
{
clear: both;
width:100%;
height:75px;
bottom:0;
background-color:#0099ff;
/* position:absolute; */
}
.footer_container, .wrapper:after {
/* .push must be the same height as footer */
height: 75px;
}
.wrapper:after {
content: "";
display: block;
}
.footer_global-bottom {
width: 100%;
margin: auto;
padding-top: 20px;
text-align: center;
color: white;
background: #333333;
}
.footer_global-bottom a {
color: white;
text-decoration: none;
}
/* ERROR HANDELING */
.error {
background: #ef7474;
border: 1px solid #f5aca6;
text-align: center;
}
.success
{
background: #74e963;
border: 1px solid #59e836;
text-align: center;
}
.alerts_box {
padding: 10px;
width: 250px;
position: absolute;
visibility: hidden;
font-size: 10px;
color:black;
}
.alerts {
width: 275px;
z-index: 2;
padding-bottom: 40px;
}
have you considered using this piece of code:
.footer_container {
position: fixed;
bottom: 0;
z-index: 100;
}
If you want full content being visible you can add to wrapper something like this:
margin-bottom: (footer-height)px;
Or use padding-bottom instead of margin-bottom.
in your #wrapper rule-set change height:100% to height:auto and remove min-height:100%.
jsFiddle
#wrapper {
clear: both;
width: 100%;
height:auto;
z-index:10;
}
I believe that setting the height to 100% is setting it to 100% of the browser window, not 100% of the content. I could be wrong about that though.
This will place the footer at the end of the content. On pages where the content is less than the height of the window, you can wrap the footer and give the footer wrapper a class like this:
.minContentFooter {
position: absolute;
bottom: 0;
}
If the case is that the content is loaded dynamically and you don't know if it will fill a browser window, then you will need a bit of javascript to have it both ways - either at the bottom of the content or the bottom of the window when there is minimal content.
Problem was solved, not by CSS, but by Javascript.
The problem was due to the page loading dynamic content from a table, it never knew how big the contentDiv was, so didnt know where to but the footer.
The sticky footer is achieved by setting CSS % heights, and also using javascript to help correct for pages with no content or those with dynamically loaded content.
The code below explains the active javascript:
var totalHeight = $('#header').height() + $(id).height();
var contentDivHeight = $('#content').height();
var wrap = $('#wrapper');
if (totalHeight >= contentDivHeight) {
wrap.removeClass('wrapper-height');
wrap.addClass('wrapper-minHeight');
} else {
wrap.addClass('wrapper-height');
wrap.removeClass('wrapper-minHeight');
}
The code checks the height of the header and the content contained within the content and if its over the footer switches to a css class enforcing min-heights rather than heights to allow the footer to flow to the end of the content.
Many Thanks for everyone's help.
I'm trying to centralize my nav bar, I've tried text align center, and margin auto, but it stays fixed to the left. I also tried to add a width, but still it stays fixed. Thanks in advance for your help. Please check out the JSFIDDLE. The HTML is as follows:
<section class="contain">
<div id="section-nav" class="section-nav">
<div class="top">
<ul>
<li class="logo">Magna Contra</li>
<li class="active">Festival: Paris</li>
<li>Festival: Paris</li>
<li>Festival: Paris</li>
<li>Festival: Paris</li>
</ul>
</div>
</section>
And the CSS:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
padding:15px;
text-align: center;
margin: auto 0;
}
li a{
text-decoration: none;
color:#bbbbbb;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 0.78em;
letter-spacing: .2em}
li a:hover{
color:white;
}
.logo a{
color:#bbb;
font-size: 0.78em;
text-decoration: none;
text-transform: uppercase;
}
.logo a:hover{
color:white;
}
.active a{
color:white;
}
.container {
display: table;
width:980px;
height: 100%;
}
.contain{
display: table;
width: 100%;
text-align: center;
margin: 0 auto;
}
.block {
display: table-row;
height: 1px;
}
.navigation {
display: inline-block;
padding: 10px;
width:100%;
margin: auto;
height: 150px;
}
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: left;
}
.navigation:nth-child(odd) {
background: #222;
}
.push {
height: auto;
}
.container {
margin: 0 auto;
text-align: center;
}
.block:nth-child(odd) {
background: #fff;
}
.search {
border:0px;
background-color:transparent;
color:white;
display: inline-block;
height:28px;
}
.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}
The easiest option is to add text-align: center to the ul:
ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}
I would also set the lis to display: inline-block to give you more control over their styling.
Your div "section-nav" is not closed. I would fix this first.
You have also applied text-align:left to your .top div, which is the main container for the navigation buttons.
In the given fiddle you have
.top {
text-align: left;
}
change it to
.top {
text-align: center
}
fidd ->http://jsfiddle.net/ztyUF/2/ Is this what u ve asked?
I used this when I had the same problem and have pretty much duplicated it for multiple sites. He explains it much better than I can.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
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;