Testing on an android (2.3.3) mobile browser and Opera Mini I have found that a couple of containers on my site with overflow:hidden are showing the overflow...
This is an example of one of the elements with the problem:
<div class="button">
<span>Some Text</span>
</div>
.button {
display:inline-block;
position:relative;
padding:10px;
border:1px solid black;
border-radius:100px;
overflow:hidden;
}
.button:before {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:blue;
mix-blend-mode:multiply;
}
.button span {
position:relative;
z-index:1;
}
On the mobile browsers you can see the corners of the :before element going outside the rounded corners of the parent. How can I fix this?
MM.. i don't know what browser you're testing this in but i can say that it works just fine on chrome...
I don't see the need to have a :before for background when you can simply add background-color: blue;
.button {
display:inline-block;
position:relative;
padding:10px;
border:1px solid black;
border-radius:100px;
overflow: hidden;
background-color: blue;
}
.button span {
position:relative;
z-index:1;
}
<div class="button">
<span>Some Text</span>
</div>
Related
I have a div fixed on the top and a div content below it.
When I scroll the page I want div content to be over the div top, I put z-index in div content but nothing happens...
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
}
#content{
background:red;
margin-top:120px;
height:5000px;
z-index:300000;
}
html
<div id=top></div>
<div id=content></div>
I need div top to be fixed and content relative.
what is wrong?
https://jsfiddle.net/y97o6kaL/
Give z-index: -1; to #top will work for you.
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
z-index: -1;
}
Working Fiddle
I would add position: relative; to the #content div.
This would remove the need for any z-index styles.
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
}
#content{
background:red;
margin-top:120px;
height:5000px;
position: relative;
}
<div id=top></div>
<div id=content></div>
This is our code. css:
.mydiv
{
position: absolute;
background-color: white;
margin-top:40px;
display: block;
left: 50%;
transform: translate(-50%, 0);
max-width:10%;
max-height:30%;
overflow: auto;
}
body
<div class="mydiv">
<img border="0" src="http://atldunia.com/youtube/FixedP7.jpg" />
</div>
This div automatically adjusts to the size of the contents. Both the scroll bars appear on demand. However, we are unable to add a button that is right aligned and appears outside the scroll making it always visible.
http://atldunia.com/youtube/FixedPosPopup7.htm
I assume you wish to add a "close" button. If so, you can wrap your content in another layer and add the button to the first.
.popup-wrapper { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:400px; max-height:400px; overflow:hidden; }
.popup-close { display:block; position:absolute; right:0; top:0; width:32px; height:32px;
background:#404040; line-height:32px; vertical-align:middle; text-align:center; font-size:24px;
color:#909090; cursor:default; }
.popup-close:hover { background:#808080; color:#c0c0c0; }
.popup-content { display:block; position:relative; width:100%; height:100%; overflow:auto; }
.popup-content > img { display:block; position:relative; width:auto; height:auto; }
<div class="popup-wrapper">
<div class="popup-content"><img src="http://atldunia.com/youtube/FixedP7.jpg"/></div>
<span class="popup-close">×</span>
</div>
You will need modify a couple things to your liking, but you get the idea.
I need to make a layout in CSS, somewhat like this.
Green & red are 2 squares on left and right corners respectively. How do I make Yellow region occupy all the space in between, and also align the text in ('Login', in the screenshot) as centered.
Also I tried couple of things with Twitter-Bootstrap too. col-md-1, pull-left etc. didn't quite achieve what I intended. Any help is appreciated.
Here is my working code (without any Bootstrap)
<head>
<style>
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
float:left;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
float:right;
}
#labelText{
height:40px;
float:left;
width:100%-80px;
background-color: #f3ff11;
}
</style>
</head>
<body>
<div id="myContainer">
<span id="leftLogo"></span>
<center>
<span id="labelText"><H2>Login</H2>></span>
</center>
<span id="rightLogo"></span>
</div>
You can use display:table and display:table-cell to achieve this.
First fix your markup:
<div id="myContainer">
<span id="leftLogo"></span>
<span id="labelText"><h2>Login</h2></span>
<span id="rightLogo"></span>
</div>
Then your CSS:
div, span, h2 {
margin:0;
padding:0;
}
#myContainer {
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
display:table;
}
#leftLogo, #rightLogo, #labelText {
display:table-cell;
height:40px;
}
#leftLogo, #rightLogo {
width:40px;
}
#leftLogo {
background-color: green;
}
#rightLogo {
background-color: red;
}
#labelText {
text-align:center;
background-color: #f3ff11;
}
Demo: http://jsfiddle.net/TjGC3/
You can use position:absolute; to position your colored squares inside a wrapper with position:relative and width:100%;
FIDDLE
HTML:
<div id="myContainer">
<div id="labelText">
<span id="leftLogo"></span>
<H2>Login</H2>
<span id="rightLogo"></span>
</div>
</div>
CSS:
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
position:absolute;
top:0;
left:0;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
position:absolute;
top:0;
right:0;
}
#labelText{
height:40px;
width:100%;
background-color: #f3ff11;
position:relative;
text-align:center;
}
h2{
line-height:40px;
margin:0;
padding:0;
}
I am trying to make the sidebar fill the height between the header and foot. As you can see it is going behind the footer. I would like it to stop at the top of the footer. Any help would be great!
Demo at: http://www.jsfiddle.net/pEbhK/
The HTML:
<div class="header">
<h2>Development Area</h2>
</div>
<div class="sidebar">
<h2>Current Projects</h2>
<ul>
<li>iCalendar</li>
<li>MyBand - Student Center</li>
</ul>
<h2>Future Projects</h2>
<ul>
<li>Mobile Application</li>
<li>RSS Feed</li>
</ul>
</div>
<div class="clear"></div>
<div class="footer">© 2013</div>
The CSS:
html, body, h1, h2 {
margin:0px;
padding:0px;
}
.clear {
clear:both;
}
.header {
display:inline-block;
width:100%;
background:#ABBFF2;
height:100px;
border-bottom: 5px solid #7F9DEB;
text-align:center;
}
.header h2 {
padding-top:38px;
}
.sidebar {
position: fixed;
height:100%;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
.sidebar h2 {
text-align:center;
}
.footer {
position:fixed;
display:inline-block;
bottom:0px;
width:100%;
height:30px;
border-top:5px solid #7f9deb;
text-align:center;
}
Try height:calc(100% - 140px) in .sidebar
.sidebar {
position: fixed;
height:calc(100% - 140px);
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
updated jsFiddle File
A non-calc() way of doing this...
Your sidebar and footed have position: fixed, so they are positioned with respect to the view port.
You can size the sidebar using the following CSS:
.sidebar {
position: fixed;
top: 105px;
bottom: 35px;
left: 0px;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
}
The value for the top offset is the header height + 5px for the border. Likewise, the bottom offset is the footer height + 5px for its border.
See demo at: http://jsfiddle.net/audetwebdesign/Lfpxq/
Note: You may want to add a min-height to the sidebar to prevent the content overflow issues. I think the same issue arises when using the calc() method.
Or write this to .footer in the css
background-color: #fff;
I have two divs one inside another, i would like to overlap one div with other and also use css idnex, but ie doesn't let me do this, is there some kind of workaround?
Please view this code in IE since it works in other browsers.
Here is jsfiddle: http://jsfiddle.net/xkDCX/1/
And the code:
<div class="container">
<div class="button"></div>
<div>
body{
margin:50px;
}
.container{
position:relative;
width:410px;
height: 300px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index:22;
}
.button{
width:20px;
height:20px;
border:2px solid black;
position:absolute;
right:-10px;
top:-10px;
background:black;
z-index:11;
}
The thing here is that the filter you added doesnt work at all only in IE so when you see the style in other browsers they dont recognize it at all.
UPDATE:
Would this worked out for you?
<div class="container">
<div class="button">
<div class="but"></div>
</div>
<div class="background"></div>
<div>
<style>
body{
margin:50px;
}
.container{
position:fixed;
width:410px;
height:300px;
margin:0;
padding:0;
}
.container .background{
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index: 50;
}
.container .button{
position:absolute;
width:410px;
margin-left:auto;
margin-right: auto;
z-index: 100;
}
.container .but{
position:absolute;
width:20px;
height:20px;
background:black;
right:-10px;
top:-10px;
border:2px solid black;
}
</style>