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;
}
Related
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; }
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'm trying to center my sections within the 'content' div but can't seem to find a way to do so.
I also like to know why the 'content' div has no height even though there are elements within them.
Basically I want the three column section boxes to be in the center.
Any help will be much appreciated, thanks.
http://jsfiddle.net/VE72c/
body {
margin:0px;
padding:0px;
}
#container {
background-color:Silver;
width:1024px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
min-height:100%;
position:absolute;
left:0;
right:0;
}
#content {
font-family:Arial, Helvetica, sans-serif;
color:#664E44;
background-color:red;
}
section {
color:#24292E;
width:300px;
height:500px;
float:left;
margin-right:10px;
margin-bottom:10px;
background-color:#A8B1B1;
padding:4px;
}
You can use display:inline-block on the sections so that they expand the parents height (#content) an use text-align:center; to center them horizontaly.
See this
FIDDLE
CSS :
body {
margin:0px;
padding:0px;
}
#container {
background-color:Silver;
width:1024px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
min-height:100%;
position:absolute;
left:0;
right:0;
}
#content {
font-family:Arial, Helvetica, sans-serif;
color:#664E44;
background-color:red;
text-align:center;
}
section {
color:#24292E;
width:300px;
height:500px;
margin-bottom:10px;
margin-right:10px;
background-color:#A8B1B1;
padding:4px;
display:inline-block;
}
Add these, and remove float: left from your section CSS.
#content {
overflow: auto;
text-align: center;
margin: 0 auto;
}
section {
display: inline-block;
}
JSFIDDLE DEMO
when i position this div to the center and added a margin-top of 15px i got this white strip above the white div block. How do i get rid of it so that the white div is separated away from the top margin?
CSS:
body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#middle {
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
}
#bigbg {
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
HTML:
<img src="images/backgroundmain.jpg" id="bigbg">
<div id='middle'>
`
add top: 0; to your id #bigbg.
DEMO
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.