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.
Related
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
One for the CSS gurus - is it possible for a div to 'escape' the constrained in the boundaries of a div with fixed dimensions and overflow:hidden?
Ive recreated the example here: http://jsfiddle.net/Wt3q4/1/
Ive tried setting z-indexes on all the elements, and assigning the div with class b position:absolute with no joy.
Since .b is nested with an element that's position:relative;, setting .b to absolute won't do anything. That I know of, with the element structure you have defined, there isn't going to be a CSS work around.
Without knowing more about your layout and what you're trying to accomplish, it's difficult to advise. You could try setting up a "double container" if that makes sense, and use a jQuery function to move the element out of the overflow:hidden; element when you want to show it.
http://jsfiddle.net/Wt3q4/3/
HTML
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
<div id="show" class="button">Show!</div>
<div id="hide" class="button">Hide!</div>
CSS
.a{
position:relative;
height:200px;
width:200px;
border:3px solid #f00;
background:#ccc;
}
.b{
position:relative;
height:200px;
width:200px;
background:#ccc;
overflow: hidden;
}
.c{
width:50px;
height:300px;
border:3px solid #00f;
background:#dad;
margin:30px;
position:absolute;
z-index:333;
}
.hidden{
display: none;
}
.button {
width: 50px;
padding: 5px;
text-align: center;
border: 3px solid #aaa;
background: #ddd;
margin: 20px;
float: right;
}
jQuery
$('#show').on('click', function(){
$('.c').prependTo('.a');
$('.b').addClass('hidden');
});
$('#hide').on('click', function(){
$('.c').prependTo('.b');
$('.b').removeClass('hidden');
});
Based on my understanding of CSS's block formatting context, your div.b is a child of div.a, which means that div.a sets the block formatting context for div.b. Once you set overflow: hidden on the parent element, any child content that flows out of the parent content box will not be visible.
This is more apparent if you set outline: 1px solid black on the parent container so that you can see the extend of the content box, both with overflow hidden and visible.
Your question does touch on the essentials of CSS's visual formatting model.
How about something like:
.menu > li > ul {
position: absolute; /* you still need this here */
background-color: #9F26B4;
width: 10000000000000000px;
margin-left: -100000px;
padding-left: 100000px;
list-style: none;
z-index: 1000;
top: 0;
left: 0;
}
This, for example, overflows the entire page from left to right (assuming that the body overflow-x is set to hidden) and then set element width to enormous width, margin it to negative left to fill any left content, and padding to the left to move object inside the element to desirable X position. What you think?
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
Ok, so am I missing something but I can't seem to line up a simple ul list of list items so that they stretch the entire width of their parent div. Here is an example of my problem here http://jsfiddle.net/37E55/17/.
What I'm trying to do is get grey boxes to line up in a row so that the first box's left hand edge is inline with left hand edge of the #wrapper div and the last box's right hand edge is inline with the #wrapper div's right hand edge.
I have tried successfully to line the boxes up by giving them an absolute positioning but is there a way to use a combination of margin and padding that I'm missing?
#wrapper {
width: 400px;
height: 300px;
background-color:#F0F0F0;
margin: 10px auto;
}
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
<div id="wrapper">
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
</div>
I knew there was a way to do it with inline-block instead of floating (if you do not have to support overly old browser).
Here's a fiddle demo!
The li do not have margin applied, they are evenly disposed in the area and cling to borders. I followed this guide.
ul {
font-size: 0 !important; /* remove physical spaces between items */
text-align: justify;
text-justify: distribute-all-lines; /* distribute items in IE */
list-style-type: none;
margin: 0;
padding: 0;
}
/* fully justify all items in browsers other than IE */
ul:after {
content: "";
display: inline-block;
width: 100%;
}
ul li {
text-align: left; /* customize to suit */
vertical-align: top; /* can customize to suit */
display: inline-block;
width: 31.3%; /* optional, only need for text content to wrap */
margin-bottom: 1em; /* optional, customize to suit */
}
use :last-child to select the last box and apply margin-right: 0 to it. Make sure the remaining margins will fill the space properly.
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
.box:last-child {
margin-right: 0;
}
If you have to stick with a width of 92px you won't get them to align properly. The remaining space that the margins need to fill is 32px, which doesn't divide evenly by 3.
The first thing you need to do is remove the last element's right margin.
.box:last-child { margin-right:0; }
Beyond that, sometimes you don't have the ability to fit elements with, for example, exact even margins based on their space and the size of the container. Sometimes you can apply different margins on (for example) every-other element to keep the layout looking "even" but to handle the lack of space, something like:
.box:nth-of-type(2n) { margin-right:14px } /* add extra pixels to right margin of even elements*/
In your case though, only one of the boxes needs extra margins, say, the first. Here's how I did it (with color contrast increased just to make it easier to see).
.box {
width: 90px;
height:90px;
background-color:blue;
margin:0px 13px 10px 0px;
float:left;
}
.box:last-child {
background:green;
margin-right:0;
}
.box:first-child {
background:yellow;
margin-right:14px;
}
Cheers
Your boxes with the margins were too large. Note that padding is in additional to the specified height and width. See it work on http://jsfiddle.net/37E55/32
I want my li elements that form a horizontal menu to be distributed evenly across the width of my ul element. I normally float my li elements to the left and add some margin. But how do I put the proper spacing so they extend from the left of my ul element to the right edge?
Here's an example jsfiddle of a menu not distributed across the ul.
The spacing has to be the same between each li. But the li elements may be different lengths.
Yet another approach. This is something I use when trying to span a menu evenly across the page. It is nice if you have a dynamic menu that will change depending on certain conditions (like an admin page that only shows up if you are logged in as an admin).
CSS:
nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}
I was kinda lazy, and just copied this from my current project, so you will have to adapt it to fit your code, but it is my preferred method of creating a horizontal menu
EDIT: You can make it look like it spans better by adding this:
CSS:
nav div ul li:first-child {
text-align: left;
}
nav div ul li:last-child {
text-align: right;
}
again, untested, just typed.
You'll need to set the width of the li elements to force them to fill the space:
ul {
width: 100%;
}
li {
float: left;
width: 33%;
}
(Fiddle demo)
If you add more items to the list, you'll need to adjust the percentage width - eg with four items, the width will be 25%.
I have two answers for you.
If you want to stick with the float model:
Your ul element needs to have the overflow property set (without this property, your ul (or any element containing floated elements) is not given a height (this is expected behavior, mind you: http://www.quirksmode.org/css/clearing.html) and will therefore default to a height of 0 - the effect of this will be that if you set different background colors for your ul/li and body, the background of your ul will not seem to display).
ul {
text-align: center;
width: 300px;
overflow: auto;
}
Your li elements need to have widths set, otherwise - as floated elements - their width will be set to whatever they contain. I've used pixels, below, but you can use a percentage value too.
li {
float: left;
margin: 5px 0 5px 0;
width: 100px;
text-align: center;
}
Use the display:inline-block property for your li elements (if support for old browsers isn't a priority). IE 7 does not support this, so it's not useful if you need wide cross-browser support, but it creates the effect you want - though make sure you then delete any spaces between your </li> and <li> tags, otherwise they will be counted in the overall width and will show up as spaces between the elements.
One advantage that this method has is that you don't have to know or set the width of the container ul if you use percentage widths on your contained li elements, you still get the centering for free with the text-align property you already have. This makes your layout very responsive.
Here's markup and CSS that works the way I think you are requesting:
Markup:
<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>
CSS:
li {
display:inline-block;
margin:5px 0 5px 0;
width:33.33%;
}
ul {
text-align: center;
}
If you'd rather keep the markup on multiple lines, then you'll have to fiddle with the left and right margins of your li elements in the CSS.
If you add li elements, you'll have to change the percentage width to match (for example, with four li elements in your markup, you'd need to change your CSS to have a width of 25% for each one).
Html:
<ul>
<li>1</li>
<li>2 <br>4</li>
<li>3</li>
</ul>
Css:
ul {
list-style: none;
font-size: 0;
text-align: justify;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
font-size: 100px;
display: inline-block;
}
codepen
I don't get your question clearly so I assumed that you might want this:
li {
border:solid 1px red;
clear:both;
display:block;
float: left;
margin: 5px;
width:100%;
}
ul {
text-align: center;
width:300px;
}