with the following CSS I managed to create a sticky menu on my wordpress website. Unfortunately, my menu now overlaps the titles on all pages. how do I manage to separate my menu and content so all the content start underneath the menu?
#header-grid {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
<div class=header-grid>
Instead of class="" use id=""
Instead of absolute or fixed (which will overlap), use:
position: sticky;
/* QuickReset */ * {margin:0; box-sizing:border-box;}
body {
height: 300vh;
border: 4px dashed #000;
}
#header-grid {
background: rgba(255,0,0,0.6);
height: 60px;
z-index: 170;
margin: 0 auto;
width: 100%;
position: sticky;
top: 0;
left: 0;
right: 0;
text-align: center;
}
<div id="header-grid">HEADER</div>
Page content
Related
I have one static full page slider with the css :
#slider {
bottom: 0;
height: 100%;
left: 0;
margin-bottom: 0!important;
position: fixed;
right: 0;
top: 0;
z-index:-1;
}
and a header at the top of page with the following css :
header {
height:137px;
text-align:center;
margin:10px;
}
and a footer at the bottom of page with the following css :
footer {
height:34px;
margin:10px;
background:rgba(39,39,39,1);
min-width:1000px;
}
Is there any way to keep header at the top and footer at the bottom of every page (responsive page)? The height main-content is set at min-height:700px to keep footer at bottom.
Yeah simple. JSFIddle
.header {
position: absolute;
top: 0;
height:137px;
text-align:center;
margin:10px;
margin-top: 0;
min-width: 1000px;
}
.footer {
position: absolute;
bottom: 0;
height:34px;
margin:10px;
background:rgba(39,39,39,1);
min-width:1000px;
}
I know it's been asked a few times, but upon playing around a bit I still couldn't center what I need to. What I'm looking to do it center those buttons vertically on the page. I want to put centered text above it, too.
My (sloppy) code: JsFiddle
HTML:
<div>
</div>
CSS:
div {
text-align: center;
}
a {
text-align: center;
margin: auto;
}
.cbtn {
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Here is one way of doing it, assuming you want the buttons centered both horizontally and vertically on the page.
The HTML is:
<div class="wrap">
<div class="button-wrap">
</div>
</div>
and the CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
}
.button-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 60px;
width: 350px;
margin: auto;
text-align: center;
}
You need to declare the width and height properties of the body and html elements to be 100%, and the same for div.wrap.
The trick is to wrap the links/buttons in div.button-wrap, which is absolutely positioned and given specific width and height values to match the buttons. The height of 60px is based on the height of the .cbtn, and the width of 350px is 5 times (60px + 2x2px + 2x1px + 4x1em) which is about 350px. However, since we can use text-align: center for centering the inline blocks, the exact width is not too critical, just make it wide enough.
The centering works by setting all the position values to 0 (left/right/top/bottom) and then setting margin: auto.
This is all based on CSS 2.1 so it should work in most browsers. The only limitation is the inline-block property, which IE7 does not recognize.
However, since you are using CSS2 animations, inline-block is probably okay.
Fiddle reference: http://jsfiddle.net/audetwebdesign/METYC/
Full page view: http://jsfiddle.net/audetwebdesign/METYC/show
check this :
http://jsfiddle.net/AT8S6/
you can change the width,height and margin property of section for different results .
HTML
<div>
<section>
</section>
</div>
CSS
div {
text-align: center;
height:400px;
width:100%;
border:2px #000 solid;
}
a {
text-align: center;
margin: auto;
}
div section {
width:65%;
height:50%;
margin:20% auto;
}
.cbtn {
display:block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
float:left;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
You could set the following rules on the div:
div {
position: absolute;
left: 50%;
height: 50%;
margin-top: -(height of div);
margin-left: -(width of div);
}
Example link below:
http://jsfiddle.net/AT8S6/1/
The site is here:
http://www.cottonbrewing.com/members
It's fine if the content doesn't require the page the scroll.
CSS:
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
margin: 0 auto;
font-size: 12px;
font-weight: normal;
clear:both;
padding: 10px 0px 10px 0px;
text-align: center;
}
Edit 1: I must also make sure the footer is at the absolute bottom if the content is small, such as you see here: http://www.cottonbrewing.com/ that the footer is at the bottom.
Change position:absolute; to position:relative;
ADDITION
In response to the comment, follow these guidelines for a "sticky footer":
Body
body
{
height:100%;
}
Your container div:
#container
{
min-height: 100%;
position: relative;
}
Your footer div:
#footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 30px; /* can be changed, along with padding */
}
Delete bottom:0; and change the position to relative.
Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.
I'm trying to center a page and then make it 100% in height.
I have a div called "content" as the parent element of all elements in the HTML page.
What do I need to do next? I'd like to stay away from any CSS-hacks.
This is currently working in IE7, but not in Firefox 3.
EDIT: I added height: 100%; to #content that's what made it work in IE. Firefox still not solved.
My stylesheet so far is:
html, body
{
width: 100%;
height: 100%;
}
body
{
background-color: #000;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#content
{
position: relative;
text-align: left;
background-color: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 840px;
height: 100%;
padding: 0px 5px 5px 5px;
}
To center content, put it inside of an element that has a fixed width (important!) and has margin: auto;
There is no cross-browser was to make your div have 100% height unless you use javascript. If you are desperate for this functionality and are willing to use javascript, you can dynamically set the height of your content by setting it to the window height. I've never done this so I won't tell you how exactly, but it should be easy to find by googling.
Ahah! Think I got it for now. This works in Firefox 3 and IE7. I will test on some other browsers later. I do still need to figure out adding some padding around my content.
This requires this heirarchy on my page
html
|__body
|__div id=container
|__div id=content
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#container
{
position: absolute;
text-align: center;
background-color: #000;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
#content
{
text-align: left;
background-color: #fff;
margin: 0px auto;
width: 830px; /* padding thing I'm working on */
height: 100%;
}
body
{
background-color: #000;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#content
{
text-align: left;
background-color: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 90%;
height: 100%;
padding: 0px 5px 5px 5px;
}
Try this. This will work. Remove the html,body selector, you don't need that.
This works for me in Firefox 3 & Safari 3. Don't have access to IE.
html{
position:absolute;
top:0;
bottom:-1px;
left:0;
right:0;
height:100%;
text-align:center;
}
body{
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:0;
min-height:100%;
min-width:30em;
max-width:50em;
width:expression("40em");/*IE doesn't support max/min width*/
padding:0 1em 0 1em;
}
This should do it better.
No extra markup and/or id.
No need for javascript and/or expression in css.
Should work fine on all browsers.
<style>
html
{
background-color:red;
margin:0;
padding:0;
border:0px;
}
body{
background-color:yellow;
position:absolute;
left:-400px; /* 50% of content width */
width:800px; /* your content width */
margin-left:50%;
margin-top:0;
margin-bottom:0;
top:0;
bottom:0;
border:0;
padding:0
}
</style>
For centering the page, I typically just put the content div in the center tag, because margin-left/right:auto really doesn't work in all versions of IE.
For making the page the whole height, you can fake it a couple of ways. My favorite is to create a background image for the body tag that is centered horizontally but tiles vertically, so that would give the main div its white background. You probably still have a footer though, so you can position it with bottom:0 and that should keep it at the bottom and give you a content div which appears to extend for the whole page.