I have a container div, which contains a slide-out menu. This means I want overflow-x: hidden so that the menu is not visible when "collapsed".
However, I want the height to expand to accommodate the content. At the moment it is just adding scrollbars.
http://jsfiddle.net/bdgriffiths/ySQgm/8/
I suspect the problem may be to do with the floats on the child "menu" elements.
The CSS for the container DIV is:
.container {
font-family:Arial; Verdana; Sans-serif;
background: #efefef;
border: 1px solid #bbb;
border-bottom: 6px solid magenta;
width: 340px;
height:auto!important;
overflow-x:hidden;
overflow-y:auto;
position:relative;
}
And then the menu is made up of the following:
.slideout {
background: magenta;
position: relative;
width: 300px;
height: 40px;
top: 0px;
right:-320px;
z-index:2;
}
.clickme {
float: left;
height: 40px;
width: 20px;
background: magenta;
}
.slidebutton {
color:#fff;
height:40px;
width:30%;
text-align:center;
background-color: magenta;
float:left;
}
JSFIDDLE
I updated your fiddle.
.content {
z-index:1;
/* position: absolute; */
padding:12px;
font-size: 0.8em;
}
The problem is the absolute position set in your .content class. Just remove it and the parent container expand as the .content height grows.
In order to let the off-canvas menu overlap your content, you need to set position to absolute for your .slideout class.
Updated Fiddle
.slideout {
position: absolute;
right:-290px;
...
}
Related
I have 4 divs in this order : #header , #content, #navigation, #footer.
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
float: left;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I am learning css, and in this scenario my understanding is that a non floated block level div named "navigation" will move in to take the place of a left floated div "content".
The text 'NAVIGATION' inside of the div with id "navigation" is not hiding behind the #content div and is instead appearing inside of #footer div.
After going through this question Text in floated div I learnt that content in following div will float around this floated div.
Now since this #content div is only 75% wide, why is the NAVIGATION text not appearing right next to the #content div ? Why does it appear inside of the #footer div ?
display:inline-block is a better way to use float
inline-block is better than float, The reason that using the float method is not suited for layout of your page is because the float CSS property was originally intended only to have text wrap around an image and is, by design, not best suited for general page layout purposes
Yo can do this, first remove
float: left;
in #content and add
display: inline-block;
and add
display: inline-block;
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
display: inline-block;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
display: inline-block;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I have a pseudo element that is refusing to display outside of it's parent div. I've set it half in, half out so you can see the issue on the following fiddle.
Fiddle
Been trying a whole bunch of different solutions that I've found on here for this but I can't get it working.
Any suggestions?
Code :
.box {
display:block;
position: relative;
z-index: 10;
background: #FFF;
width: 350px;
height:140px;
box-shadow: 0 1px 3px #888;
padding:20px;
overflow: auto;
top: 30px;
left:50px;
text-align:center;
border-radius: 5px;
border: 1px solid #FFF;
}
.box::before {
position:absolute;
font-family:FontAwesome;
content:"\f0d8";
color:red;
z-index: 20;
font-size:80px;
left:50px;
top:-45px;
}
Assuming you didn't need that overflow:auto; here is a working solution: https://jsfiddle.net/ug88rptL/1/. I just removed that property.
If you need overflow:auto; and you can use position:fixed; on the ::before pseudo element: https://jsfiddle.net/ug88rptL/2/
Definitive answer after comments:
If you need position:absolute; and imperatively cannot use position:fixed;, just remove position:relative; from the .box div and use different margins to maintain the original positioning. Works as long as you don't set a left or right value for the pseudo-element: https://jsfiddle.net/ug88rptL/10/
the ::before pseudo element is treated as a child element of the element you attach it to, so it will always be inside the box. you're better off wrapping the box in another element and then giving that element the ::before child
Read more here.
.box {
display: block;
background: #FFF;
width: 350px;
height: 140px;
box-shadow: 0 1px 3px #888;
padding: 20px;
overflow: auto;
text-align: center;
border-radius: 5px;
border: 1px solid #FFF;
position: relative;
top: 130px;
left: 30px;
}
.wrapper {
position: relative;
}
.wrapper::before {
position: absolute;
font-family: FontAwesome;
content: "\f0d8";
color: red;
font-size: 80px;
left: 50px;
top: 0;
}
<div class="wrapper">
<div class="box">
BLAH BLAH BLAH BLAH BLAH
</div>
</div>
I am trying to make a css blocks for numbers shown in image below. My idea / goal is to make one responsive block so if there will be one number it will be round, if two then like second. I have been tried to make border-radius: 50% so the first block I succeed to do second was not like in image with border-radius: 50%
So my question is it possible to make such result with one class block or for each button (left | right) I need to write special class for each block ?
For ellipse use 100%:
border-radius: 100%;
For stadium use big value in px:
border-radius: 9999px;
Example
.round{
display: inline-block;
width:50px;
height:50px;
background: red;
border-radius: 100%;
margin: 10px;
}
.ellipse,.stadium{
width: 80px;
}
.stadium{
border-radius: 9999px;
}
<div class="round circle"></div>
<div class="round ellipse"></div>
<div class="round stadium"></div>
Fixed Height Solution
For this you will need a "fixed" height (otherwise, you'll need to calculate this with jquery).
What you'll need to do is something like this;
html,body{background:#222;}
div {
margin:10px;
display: inline-block;
height: 30px;
border-radius: 25px;
background: lightblue;
font-size: 30px;
min-width: 30px;
text-align: center;
line-height: 30px;
padding: 10px;
position:relative;
color:blue;
}
div:before{
content:"";
position:absolute;
left:0;
top:-10px;
width:100%;
border-top:3px solid tomato;
}
<div>1</div>
<div>123</div>
Note: The border-radius should be set to half the overall height for this.
I've also included a min-width to ensure it is always at least a circle.
JQuery Solution For non-fixed heights
$(document).ready(function() {
$('div').each(function(index) {
var height = $(this).height();
$(this).css("border-radius", height + "px");
});
});
html,
body {
background: #222;
}
div {
margin: 10px;
display: inline-block;
border-radius: 25px;
background: lightblue;
font-size: 30px;
min-width: 30px;
text-align: center;
line-height: 30px;
padding: 10px;
position: relative;
vertical-align:top;
color: blue;
}
div:before {
content: "";
position: absolute;
left: 0;
top: -10px;
width: 100%;
border-top: 3px solid tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>123</div>
<div>Not a set height,
<br/>either :)</div>
div{
height:50px;
width:50px;
border-radius:9999px;
background:red;
text-align:center;
display:inline-block;
line-height:3em;
font-weight:bold;
font-size:16px;
}
<div>2</div>
<div>28</div>
My scenario here:
Inside the div which is mentioned below I need to add Find Out More link in right bottom of the div which should contain different bg-color in other words a box structure with an arrow image at the last.
.answerbox
{
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}
How It should look :
Do you mean like this? Here's a jsfiddle
By setting the parent (.answerbox) to position: relative, I'm able to set .more to position:absolute and position it wherever I like in that box; In this case, bottom right of the container.
HTML
<div class="answerbox">
Find out more
</div>
CSS
.answerbox {
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
}
.more {
background: red;
position: absolute;
bottom: 0;
right: 0;
padding: 0 10px;
height: 30px;
}
Edit - In case you want an arrow image on the button
Updated Fiddle
CSS
.more {
background: url('http://dc390.4shared.com/img/AgV87Tvx/s7/arrow_small_right.png') no-repeat left center red;
position: absolute;
bottom: 0;
right: 0;
height: 30px;
padding: 0 10px 0 20px; /* Extra padding left to make room for the button */
line-height: 30px; /* Used to center the text vertically. Use the same value as the height.*/
}
Edit - Let the box grow with the content
Updated Fiddle
CSS
.answerbox {
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
padding: 10px 10px 40px;
}
did you mean something like this:
<div class="answerbox">
<a href='#' class="findout">
find out more..
</a>
</div>
and
.findout
{
position:relative;
top:120px;
left:20px;
background-color:white;
color:Red;
}
see fiddle
I been following a tutorial for making my webpage css 100% height from this SITE. I been able to achieve what i want but now I am having an issue with my footer. Every time I resize the page smaller the footer will slightly scroll upwards into the content. Is there a way i can stop that? Here is my Live EXAMPLE
Thank you
css
<style>
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#333333;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size:small;
color:#5e5e5e;
line-height: 130%;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: 0;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/**************************************************/
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:925px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-right: 15px solid #000000;
border-left: 15px solid #000000;
}
div#contentArea {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#contentArea p {
text-align:justify;
padding:0 1em;
}
#content {
margin-left: 240px;
margin-right: 0 auto;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
/*padding:1em;*/
height: 175px;
border-top:15px solid #000000;
}
div#header p {
margin:0;
}
/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/
#left2 {
float: left;
width: 200px;
background: #dddddd;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
height: 400px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#7A7A7A;
border-bottom:15px solid #000000;
}
div#footer p {
padding:1em;
margin:0;
}
a.footer {
color: #c7c7c7;
font-size: 80%;
padding-right: 20px;
letter-spacing: 1px;
}
p {
margin:0 0 1em;
}
</style>
Add margin-bottom:60px; to the #content css definition.
Full block:
#content {
margin-left: 240px;
margin-right: 0 auto;
margin-bottom: 60px;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
Since you have an explicit height set on your content div, you could do:
padding-bottom:36px; on your div#container line 32
But if your content div changes in height, it may not account for that padding anymore.