I have button on my website in a container just like my example here: https://jsfiddle.net/j8z7hbc3/3/
Now when I click on the button, because of the overflow:hidden the amount is not fully visible
Is there a way to fix it?
<div class="container">
<div class="video-wrapper-absolute">
<div class="video-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/C2VjWtMbrzQ?version=3&loop=1&playlist=C2VjWtMbrzQ&autoplay=1&showinfo=0&vq1080" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="coupon">
<div class="button">GET COUPON</div>
<div class="amount" style="display:none;">25% OFF</div>
</div>
</div>
CSS:
.container { position:relative; width:100%; height:200px; overflow:hidden; }
.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
#ytplayer { width:100%; height:100%; }
.coupon { background:orange; margin-top:158px; float:left; position:relative; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }
using clearfix didn't work in this case for me
You could make it visible as seen in this example:
https://jsfiddle.net/aukgf9qs/
My changes to your CSS were moving all container class styles to .video-wrapper-absolute, since I think you just want to hide the overflow of your video. Additionally I have set buttons position: absolute; and changed the margin-top to a just top value, since it is using absolute positioning now.
Full CSS:
.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0;position:relative; width:100%; height:200px; overflow:hidden; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
#ytplayer { width:100%; height:100%; z-index:-1; }
.coupon { background:orange; top:158px; float:left; position:absolute; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }
Related
I want three div's next to eachother (I placed them in a .wrapper div so I could float them to the left). The three div's should be centered on the page. So I thought, if I center the .wrapper with margin-left/right: auto, all the three divs would center up. This didnt work.
Also, when I resize the browser the divs move. I don't want that to happen.
I've googled endlessy and put lots of solutions in the script, nothing worked.
Also, it shows differently per browser (firefox, safari and Chrome).
Here's my HTML:
<div id="container">
<div class="wrapper">
<div id="lost"><img src="images/lost.png"></div>
<div id="compass"><img src="images/compass.png"></div>
<div id="sailor"><img src="images/sailor.png"></div>
</div>
<div id="sea">
<img src="images/seaAnimated.png" class="sea" id="animatedSea">
</div>
</div>
And my CSS:
body,html
{
margin:0px;
padding:0px;
}
#container
{
position:absolute;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.wrapper
{
left:auto;
right:auto;
margin-left:auto;
margin-top:8%;
margin-right:auto;
padding-left:auto;
padding-right:auto;
width:100%;
height:75%;
}
#lost
{
float:left;
width:auto;
clear:both;
margin-left:auto;
margin-right:auto;
}
#compass
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sailor
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sea
{
position:absolute;
bottom:0px;
z-index:2;
background-image:url(images/sea.png);
background-repeat:repeat-x;
background-position:bottom;
height:25%;
width:100%;
}
#animatedSea
{
position:absolute;
bottom:10px;
width:auto;
height:25%;
z-index:-1;
}
try this
css
.wrapper{
text-align:center;
margin-top:8%;
width:100%;
height:75%;
}
#lost{
display:inline-block;
width:50px;
height:50px;
background-color:#0C0;
}
#compass{
display:inline-block;
width:50px;
height:50px;
background-color:#06F;
}
#sailor{
display:inline-block;
width:50px;
height:50px;
background-color:#96F;
}
html
<div class="wrapper">
<div id="lost">123</div>
<div id="compass">456</div>
<div id="sailor">789</div>
</div>
jsFiddle Code
You could use a fixed width on your wrapper to get it to center. You do have to specify a width (and not leave it empty) because divs are block-level, meaning that they fill the entire width by default.
http://jsfiddle.net/isherwood/CBMaX/2
.wrapper {
width: 240px;
margin-left:auto;
margin-right:auto;
}
#wrapper
{
text-align: center;
}
#compass
{
width:33.3%;
}
#sailor
{
width:33.3%;
}
#lost
{
width:33.3%;
}
Try this css. Include this css into your css.
In my header I have a logo with an image sprite on both sides of the image. I am trying to center them horizontally to the top of the browser. The header has to be positioned:fixed.
HTML:
<div id="headerbg">
<div id="header">
<ul id="navleft">
<li id="navhome"></li>
<li id="navnew"></li>
<li id="navbrands"></li>
</ul>
<div id="logo"></div>
<ul id="navright">
<li id="navsales"></li>
<li id="navlocation"></li>
<li id="navcontact"></li>
</ul>
</div>
</div>
CSS:
#headerbg
{
background-color: #ffffff;
width:100%;
height:50px;
z-index: 1000;
position: fixed;
top: 0;
left:0;
}
#header
{
width: 800px;
height: 100px;
margin: auto;
}
#logo
{
width:200px;
height:100px;
background:url(images/logo_small.jpg);
display:inline-block;
z-index: 2000;
}
/* NAVIGATION */
#navleft
{
position:relative;
}
#navleft li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navleft li, #navleft a
{
height:50px;
display:block;
}
#navright
{
position:relative;
}
#navright li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navright li, #navright a
{
height:50px;
display:block;
}
I left out CSS for the hover images of the sprite to shorten my post. I appreciate any help I can get. Thanks!
You already know the width of the header and the logo. You then knnow that each ul should have a width: 300px; and just set them all to float:left; or display:inline;
#header ul {
width:300px;
}
#header {
display:inline-block;
*display:inline; /* IE hack */
}
EDIT
You could also apply specific CSS styles for psuedo element e.g.:
#header ul:first-child {
width:300px;
position:relative;
top:0;
left:0;
}
#header ul:last-child {
width:300px;
position:relative;
right:0;
left:0;
}
I have retyped your code to fit your needds (well what I assume is your needs)
see fiddle here http://jsfiddle.net/aLQYS/
And for the future, I will recommend you to use classes instead of Id's. Not only you save the ID tag for something more important such as javascript, but you also have the possibility of reusing your css styles by adding multiple classes to one object e.g.
CSS
.shadow {
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.box {
width:200px;
height:200px;
}
HTML
<div class="shadow box"></div>
So, I'm having an issue with CSS Positioning / Height
So, I'm trying to do a sliding navigation UI from the left side of the screen (like a lot of mobile apps). The main content slides over, displaying the navigation menu beneath.
I believe to do with positioning, I can't get height to work properly. I ultimately would like for 100% height to mean 100% of the entire page. Currently, only items that have more content will expand and the shorter ones stop at the screen edge (so they are 100% of screen vs. entire page).
Anyway here is my fiddle: http://jsfiddle.net/2vP67/6/
And here is the code within the post:
HTML
<div id='wrapper'>
<div id='navWide'> </div>
<div id='containerWide'> </div>
<div id='containerTall'>
<div id='container'>
<div id='nav'>
<div id='navNavigate'> Open Menu </div>
<div id='navNavigateHide'> Close Menu </div>
</div>
</div>
</div>
<div id='sideContainerTall'>
<div id='sideContainer'>
<div id='sideNav'>Side Navigation </div>
</div>
</div>
</div>
CSS
#wrapper {
width:100%;
min-width:1000px;
height:100%;
min-height:100%;
position:relative;
top:0;
left:0;
z-index:0;
}
#navWide {
color: #ffffff;
background:#222222;
width:100%;
min-width:1000px;
height:45px;
position:fixed;
top:0;
left:0;
z-index:100;
}
#containerWide {
width:100%;
min-width:1000px;
min-height:100%;
position:absolute;
top:45px;
z-index:100;
}
#containerTall {
color: #000000;
background:#dadada;
width:960px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:1000;
}
/***** main container *****/
#container {
width:960px;
min-height:585px;
}
#nav {
color: #ffffff;
background:#222222;
width:960px;
height:45px;
position:fixed;
top:0;
z-index:10000;
}
#navNavigate {
background:yellow;
font-size:10px;
color:#888888;
width:32px;
height:32px;
padding:7px 6px 6px 6px;
float:left;
cursor:pointer;
}
#navNavigateHide {
background:yellow;
font-size:10px;
color:#888888;
width:32px;
height:32px;
padding:7px 6px 6px 6px;
float:left;
cursor:pointer;
display:none;
}
#sideContainerTall {
background:#888888;
width:264px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:500;
}
#sideContainer {
width:264px;
min-height:585px;
display:none;
}
#sideContainerTall {
background:#888888;
width:264px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:500;
}
#sideContainer {
width:264px;
min-height:585px;
display:none;
}
#sideNav {
width:264px;
height:648px;
float:left;
}
Javascript
$(document).ready(function() {
$('div#navNavigate').click(function() {
$('div#navNavigate').hide();
$('div#navNavigateHide').show();
$('div#sideContainer').show();
$('div#containerTall').animate({
'left': '+=264px'
});
});
$('div#navNavigateHide').click(function() {
$('div#navNavigate').show();
$('div#navNavigateHide').hide();
$('div#containerTall').animate({
'left': '-=264px'
}, function() {
$('div#sideContainer').hide();
});
});
});
Setting the height to 100% or any percent value relative to the browser window, for that matter, is illegal. This is because height cannot be set as a function of percent, because theoretically the browser window could go on forever with a scrollbar. Kind of a weird quirk. The only way you can achieve this is through javascript.
height = window.innerHeight;
getElementById('wrapper').style.height = height;
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>
I want text2 to appear overlaying but shifted 1 pixel to the right of text1 (shadow effect, sort of).
I've put each in a nested div with position:relative; I've set z-index 1 and 2
However, the two texts still appear one below the other. The workaround is to make the top in text2 minus 28, but what am I missing about the concepts relative and z-index?
HTML:
<body>
<div id='titles'>
<div id='text1'>Text For Testing This</div> <div id='text2'>Text For Testing This</div>
</div>
</body>
CSS:
body {
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
background-color:#666666;
}
#titles {
color:#FFFFFF;
width:800px;
font-size:2rem;
margin-left:auto;
margin-right:auto;
}
#text1 {
position:relative;
width:98%;
top:8px;
left:8px;
z-index:1;
}
#text2 {
position:relative;
width:98%;
top:8px;
left:9px;
color:#000000;
z-index:2;
}
You will want the positions to be absolute instead of relative. Because relative puts it relative to the previous element while absolute puts it absolute to its parent. See an example here.
#titles {
position:relative;
color:#FFFFFF;
width:800px;
font-size:2rem;
margin-left:auto;
margin-right:auto;
}
#text1 {
position:absolute;
width:98%;
top:8px;
left:8px;
z-index:2;
}
#text2 {
position:absolute;
width:98%;
top:10px;
left:10px;
color:#000000;
z-index:1;
}
#text1 {
position:absolute; // it's relative in your css
width:98%;
top:8px;
left:8px;
z-index:1;
}
#text2 {
position:absolute; // it's relative in your css
width:98%;
top:8px;
left:9px;
color:#000000;
z-index:2;
}
DEMO.
You need to set the text1, text2 position to absolute and the titles position to relative, then the text divs will be positioned relative to titles.
#titles {
position:relative;
color:#FFFFFF;
width:800px;
font-size:2rem;
margin-left:auto;
margin-right:auto;
}
#text1 {
position:absolute;
width:98%;
top:8px;
left:8px;
z-index:1;
}
#text2 {
position:absolute;
width:98%;
top:8px;
left:9px;
color:#000000;
z-index:2;
}