I have a responsive site I'm working on and when you go below 800px wide the menu becomes fixed at the top with a toggle drop down menu.
What's happening is that the div is extending outside of the HTML and Body area and making add a sideways scrollbar. I'm not sure how to get around this.
Any help would be greatly appreciated!
Here is my code
HTML:
<div class="navMobile">
<div class="menuBox">
<div class="navMobileBtn"><img src="<?php echo get_template_directory_uri(); ?>/img/menuBtn.png" /></div>
<ul class="navMobileBox">
<li><a class="location" href="#">Location</a></li>
<li><a class="building" href="#">Building</a></li>
<li><a class="space" href="#">Space</a></li>
<li><a class="links" href="#">Links</a></li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</div>
</div>
CSS:
.navMobile {display:block;}
.navMobile {
height:auto;
}
.navMobile .menuBox {
height:auto;
min-height:40px;
width:100%;
display:inline-block;
position:fixed;
top:0;
left:0;
right:0;
background:#fff;
z-index:99999;
}
.navMobile .menuBox ul {
display:block;
clear:both;
height:auto;
width:100%;
padding:0;
margin:0;
border-top:1px solid #eee;
font-family: "proxima-nova";
}
.navMobile .menuBox ul>li {
display:block;
clear:both;
padding:10px 0;
text-align:center;
border-bottom:1px solid #eee;
}
.navMobile .menuBox ul>li a {
padding:0;
margin:0;
text-transform: uppercase;
letter-spacing: 0.2em;
color:#ccc;
font-size: 0.9em;
font-weight:500;
opacity: 1;
}
.navMobile .menuBox ul>li a:hover,.mainnav ul>li a:focus {
text-decoration: none;
}
.navMobile .menuBox ul>li:last-child a {
margin-right: 0;
padding-right: 0;
}
.navMobileBtn {
clear:both;
height:40px;
width:40px;
}
For anyone looking for a solution like I was, here you go:
This issue is caused by the fact that if the main containing element, either body or html depending on the browser*, is not set to a specific width and height its content can grow beyond the bounds of the window causing the base of the document to be larger than the window.
Normally this causes scrollbars, which is expected behavior. However, in the case of fixed elements, it also changes the starting positions for fixed elements by moving the right and bottom values to the position of the main element rather than the edges of the window. This makes the fixed elements scrollable within the window, which is the very opposite of how fixed elements are supposed to behave.
As a side note some browsers use the body element to scroll the content, while others use the html element to scroll the content by default. This needs to be reset to the body for consistent results.
Solution, set the width and height of the html and body element to 100% so that it remains the size of the window. You also need to set standard resets for the margin specifically and for good measure padding and border. Finally setting the overflows to their proper elements guarantees that the browser is using the correct element to scroll the document.
html, body {
position: relative;
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
overflow: auto;
}
Adding this to your reset css should solve the problem in the future.
This is what did it for me anyway. Hope it helps someone else.
try add these into your .css
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
height: 100%;
position: relative;
}
acctually just one of them would probably solve your problem, but i'm not sure wich.. probably body
Related
Okay so this is quite hard to explain but basically I position the title div perfectly so that it is centered in the header div.
It remains in this position on some computers.
However, on other computers it jumps further down the page - even with the same positioning attributes. (This is tested on the same web browser.)
I have tried with absolute, relative etc. positioning, still no luck!
Note: This div contains text.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Thanks!
Hi is difficult to understand exactly your issue but I can give you a few tips to have a nice center vertical and horizontal:
For horizontal alignment you can use display:inline-block if you want all the div centered:
#header {
text-align:center;
}
#title {
display:inline-block;
}
For vertical align use line-height equal to the total height
#header {
line-height:170px;
}
This only work for one line text if you want another option tell me
And the demo here http://jsfiddle.net/8JLzy/7/
Edit
To work with a text of more than one line you can do this : First your html add a wrapper inside #title:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
And on the CSS work with display property:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
New demo http://jsfiddle.net/8JLzy/16/
use line-height, not position:relative
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}
content has been hidden after position absolute<
position absolute be hide my content
i want my content to be border 5px
but after type this code my content has been hidden
see: http://qass.im/checked
.wrapper > ul {
list-style: none;
position: relative;
z-index:1;
clear:both;
border:5px solid #ccc;
}
.wrapper > ul > li {
position: absolute;
left:0;
top:0;
width: 100%;
}
Absolutely positioned elements don't affect the height of their containers. If your <li>s are positioned absolutely, you need to manually give your <ul> a height that's big enough to hold them, or else it will think its height is 0 because as far as it knows there aren't any contents inside of it. Change your css for the <ul> to this, and then modify the height until you get something that works as you want it to:
.wrapper > ul {
list-style: none;
position: relative;
z-index:1;
clear:both;
border:5px solid #ccc;
height:30px; /* Added this line to create a space for the <li>s */
}
NOTE: You may also need to change the top and left on your <li>s to account for the border.
It regularly occurs that I want to center a css box inside another one both vertically and horizontally. What's the simplest way to do so that satisfies the following constraints?
The box should be precisely centered, not approximately.
The technique should work in modern browsers and in IE versions back to 8
The technique should not depend on explicitly knowing the width or height of either the centered content or the containing box.
I generally know the container is larger than the content, but supporting larger content (which then overflows symmetrically) would be nice...
The underlying content of the container must still be able to respond to clicks and hovers except where obscured by the centered content
I currently use 4 (!) nested divs to achieve this, with css along the following lines:
.centering-1 {
position:absolute;
top:0; left:0; right:0; bottom:0;
text-align:center;
visibility:hidden;
}
.centering-2 {
height:100%;
display:inline-table;
}
.centering-3 {
display:table-cell;
vertical-align:middle;
}
.centering-content {
visibility:visible;
}
You can see this in action as a jsbin snippet.
However, this approach, while workable, feels like extreme overkill due to the large number of wrapper divs, and it doesn't work with content that's larger than the container. How can I center things in CSS?
Horizontal centering is easy:
.inner {
width: 70%; /* Anything less than 100% */
margin-left: auto;
margin-right: auto;
}
But vertical centering is a little tricky. The best technique for modern browsers is to combine inline-block and a pseudo elements. This originates from "Ghost element", the last technique at http://css-tricks.com/centering-in-the-unknown/. It sets adds a pseudo-element and uses inline-block styles get the centering.
The CSS:
.outer {
height: 10rem;
text-align: center;
outline: dotted black 1px;
}
.outer:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
width: 10rem;
display: inline-block;
vertical-align: middle;
outline: solid black 1px;
}
An example on Codepen: http://codepen.io/KatieK2/pen/ucwgi
For simpler cases, the following may be good options:
For single lines of content, you can do a quick and dirty vertical centering job on the text within an element by using line-height larger than your font-size:
.inner {
border: 1px solid #666;
line-height: 200%;
}
The solution with widest support is to use a non-semantic table. This works with very old versions of IE and doesn't require JavaScript:
td.inner {
vertical-align: middle;
}
And here is simple solution for known height elements (which could be in ems, not px):
.outer {
position:relative;
}
.inner {
position: absolute;
top:50%;
height:4em;
margin-top:-2em;
width: 50%; left: 25%;
}
You can get by with 2 fewer elements. Anything less than this is going to require things that IE8 (and IE9) doesn't support.
http://cssdeck.com/labs/0ltap96z
<div class="centering-1">
<div class="centering-2">
<div class="intrinsically-sized-box">
<p>You can put any content here too and the box will auto-size.</p>
</div>
</div>
</div>
CSS:
body {max-width:750px;}
.generalblock {
margin-top:2em;
position:relative;
padding:10px;
border:20px solid cyan;
font-size: 18px;
}
.centering-1 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
visibility:hidden;
display: table;
width: 100%;
}
.centering-2 {
display:table-cell;
vertical-align:middle;
}
.intrinsically-sized-box {
visibility:visible;
max-width:300px;
margin: 0 auto;
background: yellow;
position:relative;
border:1px solid black;
}
<style type="text/css">
ul,li{ padding:0; margin:0; overflow:hidden;}
li{ list-style:none;}
img{ border:0;}
.box{ width:950px;}
.box li{ float:left; width:300px; height:250px; margin-right:10px; margin-bottom:20px;}
#box_img1 {width: 300px;
height: 250px;background-image: url('support.png');}
#box_img1 a:hover {width: 300px;
height: 250px;background-image:url('GotJobButton.png');}
#box_img2 {width: 300px;
height: 250px;background-image: url('support.png');}
#box_img2 a:hover {width: 300px;
height: 250px;background-image:url('object.png');}
</style>
<ul class="box">
<li id="box_img1"></li>
<li id="box_img2"></li>
</ul>
Question:
I want to make it change picture on mouseover. But it does not work, so what goes wrong here?
You are changing the background of the anchor element, not its parent list item. This should be resolved if you use
#box_img1:hover { background-image:url('GotJobButton.png'); }
#box_img2:hover { background-image:url('object.png'); }
You also do not need to respecify the width and height of the element, as they have already been defined and should be retained even in the hover state.
You put the background-image on the box, but the :hover on the a. Right now, you're changing the background-image of the link, instead of the background image of the link.
Either put
#box_img1 a { // current code + display: block; }
or
#box_img1:hover { // but not sure if this is allowed/supported across all browsers }
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}