I've been experimenting with various columns techniques and I'm liking this one. I plan on having one more image under them and centered. I have the images flipping once selected. My problem is the text on the back (.flip-item-desc) is inheriting the 50% width from the container (#top div). I can't figure out how to make the text div fill the back of the image.
#top div, #bottom div{
background-color: aqua;
text-align: center;
margin: 1% auto;
width: 50%;
height: auto;
}
.flip-item-desc{
font-family: sans-serif;
font-weight: bold;
color: white;
text-align: center;
font-size: 80%;
line-height: 1.237;
background: rgba(0,0,0,0.5);
width: 96%;
height: auto;
margin: 2% 2%;
padding: 2%;
position: absolute;
top:0;
left: 0;
overflow: hidden;
}
I copied and pasted my code with hosted image here: https://jsfiddle.net/digi57/ojLtu049/1/
I added a few lines in your CSS code -
.flip-item-desc {
min-width: 96%;
}
.back {
overflow: hidden;
}
here is the fiddle - https://jsfiddle.net/ojLtu049/2/
Related
Here, I am trying to create the browser tab.
JsFiddle
.intrnlTabs {
background: #f0f1f3;
height: 35px
}
.intrnlTab {
background: #e7e9ec;
display: inline-block;
height: 30px;
text-align: left;
margin-top: 5px;
line-height: 35px;
border-top-left-radius: 10px;
position: relative;
margin-left: 12px
}
.intrnlTxt {
display: inline-block;
max-width: 150px;
height: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 30px;
padding: 0 20px 0 10px
}
.intrnlCls {
position: absolute;
right: -23px;
height: inherit;
background: #dee1e5;
box-sizing: border-box;
top: 0;
width: 33px;
transform: skewX(30deg);
border-top-right-radius: 5px;
cursor: pointer;
display: inline-block;
text-align: center
}
.intrnlCls:hover {
background: #d7d8d8
}
.intrnlClsicon {
transform: skewX(-30deg);
display: inline-block
}
Output What I got
Output What I'm expect
I want newly added tab header should go behind previous tab without adding z-index value. I have achieved it adding z-index value. But, I don't want to add z-index value.
You don’t need to calculate a specific z-index for each item, or assign it via JS to begin with.
Adding a z-index of 1 to these “X” items is enough already to achieve what you want:
.intrnlCls { z-index:1; }
I have a simple page with a textarea that I want to fill the entire screen, except for a bit at the top. It works perfectly in Chrome but doesn't stretch to the bottom of the window in Firefox. This is the CSS I'm using:
body#pad textarea {
position: fixed;
top: 3em;
right: 0;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
When I add height: 100% it does reach 100% in height, but that's not what I want, since it needs a little space at the top of the screen. Is there any pure CSS way to fix this? I'd really like to make it look and function like it does in Chrome without any Javascript.
As MDN
When both top and bottom are specified, and height is unspecified or
either auto or 100%, both the top and bottom distances are respected.
In all other situations, if height is constrained in any way, the top
property takes precedence and the bottom property is ignored.
So I suggest this trick to do, just remove top: 3em; and add height:calc(100% - 3em);
textarea {
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 3em);
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
<textarea placeholder="write..."></textarea>
Don't know why FF misbehave so here is a workaround using CSS calc()
Firefox appear to follow this rendering rule and by doing so actually have a preset height (and width) for the textarea element. It is this preset that overrides the top-bottom/left-right settings and therefore become constrained causing the constraint rules (top-bottom / left-right) to apply.
To make all browsers behave the same, a height and width need to be set explicit, where I used CSS calc() to get the correct height.
(the right and bottom properties can be removed as they no longer affect the rendered result)
html, body {
margin: 0;
height: 100%;
}
textarea {
position: fixed;
top: 3em;
left: 0;
width: 100%;
height: calc(100% - 3em);
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
resize: none;
}
<textarea>
write more...
</textarea>
In some situations the top-bottom/left-right properties is needed when using positioning, so for a textarea, one can use a wrapper like this
html, body {
margin: 0;
height: 100%;
}
div {
position: fixed;
top: 3em;
left: 0;
right: 0;
bottom: 0;
}
textarea {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
resize: none;
}
<div>
<textarea>
write more...
</textarea>
</div>
this css seem to work [https://jsfiddle.net/ubc4nz9k/]https://jsfiddle.net/ubc4nz9k/ set padding-top to your needs
#pad textarea {
width: 100%;
height:100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
#pad {
padding-top: 20px;
position: fixed;
width:100%;
height:100%;
left:0;
right:0;
}
i have a html div that is styled with css, this div contains some data(a string), and although setting the div width the same as the width of another div (25%) but the div only wraps the text that is written inside it while the other div fits the specified area perfectly.
the div with the problem :
.item_name {
background-color: #F30;
position: absolute;
height: 15%px;
width: 25%px;
background-repeat: repeat;
background-position: center center;
top: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
line-height: 35px;
color: #FFFFFF;
}
the other div:
.item_block {
background-origin:content-box;
background-color:#FFECC1;
height: 20%;
width: 25%;
line-height: 450px;
font-family: Arial, Helvetica, sans-serif;
text-indent: 0px;
vertical-align: middle;
text-align: center;
position: relative;
float: left;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
here's a JSfiddle contains my code
I think this has got to be the problem :
height: 15%px;
width: 25%px;
in class .item_name
Change it to
height: 15%;
width: 25%;
and add this to you css :
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
this should do pretty much as the parent element has dimension set, child will inherit it in %age!!
I use % for everything so my site works the same in all screen resolutions. However the position of the content is misplaced and varies from resolution to resolution and from browser to browser. A thing that I noticed and is probably related to the problem is that the background image doesn't react to zoom. The content however reacts.
html {height: 200%; width: 100%;}
body {
min-width: 99%;
height: 100%;
margin: 0;
padding: 0;
color: #969696;
background-color: black;
text-align: center;
font-family: Arial;
font-size: 100%; }
container {
position: relative;
height: 100%;
margin: auto;
width: 85%;
text-align: center;
border: 1px solid red;
background-image: url('images/bgmain.png');
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden; }
navbar {
position: relative;
min-height: 2%;
margin-top: 21%;
margin-left: 2%;
padding: 0 auto;
width: 95%;
text-align: center;
overflow: hidden; }
For example the navigation bar in my resolution is fine while on other resolutions its misplaced. Is there any mistake? Do I miss something? Thanks in advance.
A reset of css styles would help to gain much control to your styles. Refer to this link http://meyerweb.com/eric/tools/css/reset/ and this http://developer.yahoo.com/yui/reset/ and also this http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
I've discovered that I can have one or the other, but can't seem to figure out both.
My HTML is as follows:
<div id="middle">
<div id="middleinner"></div>
</div>
And the CSS goes a little something like this (z-indexes set for something else on the page, left out here because it's irrelevant, plus there's a few commented out things as I tried to figure it out as I went along):
html, body{
font-family: helvetica, sans-serif;
font-size: 1em;
height: 100%;
overflow: hidden;
}
#middle{
/* display: table;*/
display: table;
height: 80%;
width: 90%;
/* position: fixed;*/
position: absolute;
top: 10%;
left: 5%;
right: 95%;
bottom: 90%;
color: #000;
z-index: 0;
}
#middleinner{
padding: 0.5em 1em 0.5em 1em;
background-color: #F9F9F9;
display: table-cell;
/* display: inline-block;*/
border-radius: 1.5em;
vertical-align: middle;
/* margin-left: auto;
margin-right: auto;*/
text-align: center;
/* position: relative;*/
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
z-index: 20;
}
Anyway, if I change middleinner's position to relative instead of absolute, I've got vertical alignment at the cost of proper overflow handling. If I set it to absolute, I've got proper overflow handling at the cost of vertical alignment.
Is there a pure-CSS way that I can handle this?
Yes, a combination of line-height, inline-block, and vertical-align can do it.
#middle {
width: 80%;
margin: 10px auto;
border: 1px dashed black;
height: 500px;
line-height: 500px;
vertical-align: middle;
text-align: center;
}
#inner {
height: 50px;
width: 80%;
overflow: auto;
display: inline-block;
line-height: 1.1em;
}
Demo
To have it work with a dynamic height element, you'll have to use some JavaScript, since you're using jQuery, I'll go with that. It's perfectly possible to use vanilla JS for this one too.
resize = function(el) {
el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
var $middle = $("#middle");
resize($middle);
$(window).on("resize", function() {
resize($middle);
})
})