see this link...: Exemple
on this site i have this code
<body>
<div id="geral">
<div id="animacao">
<ul id="banners">
<li><img src="banners/banner_1.jpg" alt="Banner 1" /></li>
<li><img src="banners/banner_2.jpg" alt="Banner 2" /></li>
</ul>
</div>
<div id="menu">
</div>
</div>
</body>
#geral is positioned in the center of the screen -
#animacao has the same size of #geral, on this has animated images with fade effects..
#menu has 271px with and need to stay over and on center of #geral and #animacao, on this i will put the menu with PNG bakcground....
This is my CSS, and probably doesn't work ...
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background: url(../imagens/fundo.jpg) no-repeat;
}
#animacao{
position: relative;
width:990px;
height:530px;
}
#menu
{
position: absolute;
left: 50%;
width:271px;
height:530px;
margin-left:-135px;
background-color:yellow;
z-index: 10;
}
Where am I wrong?
Demo
Is this what you're trying to do? http://jsfiddle.net/brettdewoody/C4jSS/
Or did you want the #menu div positioned on top of #animacao?
html
<div id="geral">
<div id="animacao">
<div id="menu">
<div>
</div>
</div>
css
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background-color: black;
}
#animacao{
position: relative;
width:990px;
height:530px;
background-color: red;
}
#menu{
position: relative;
margin:0 auto;
width:271px;
height:530px;
background-color:yellow;
z-index: 10;
}
Remove the left: 50% and add margin: 0 auto; to the #menu div.
#menu{
position: relative;
margin: 0 auto;
width:271px;
height:530px;
background-color:#FFF;
z-index: 10;
}
http://jsfiddle.net/qmAN5/2/
http://jsfiddle.net/qmAN5/2/show
Don't exactly know what you are trying to ask but try this:
HTML:
<div id="geral">
<div id="animacao">fdgdf</div>
</div>
<div id="geral">
<div id="menu">dfgdf </div>
</div>
CSS
#charset "utf-8";
/* CSS Document */
#geral{
width:990px;
margin-left:auto;
margin-right:auto;
background: #99CCCC;
}
#animacao{
float:left;
width:100%;
height:530px;
background:#FFCCCC;
}
#menu{
margin-left:auto;
margin-right:auto;
width:271px;
height:530px;
background-color:#FFF;
z-index: 10;
border:#000000 1px solid;
display:table;
}
Try this one:
http://jsfiddle.net/qmAN5/3/
I've put the #menu inside #animacao since the position is relative to its parent.
and added margin-left to adjust the position.
Related
I can't sort out how to move the element, which is placed under .content-wrapper{ overflow:hidden; .content{position:absolute;} }, to the very top.
Consider a screenshot below:
An image element with man photo is placed under the .content element. But the part of his head on photo, which is highlighted with yellow (pointed with red arrow) is hidden due to the parent .content-wrapper has an overflow:hidden property. The main problem is that I can't change the hidden overflow to whatever else.
Is that actually real to solve such a problem without using a JavaScript?
==== Supplement 1 ====
To clarify the problem, I've made up a code snippet below:
.wrapper{
width:100%;
overflow:hidden;
position:initial;
padding:0 10px;
background-color:#EEEEEE;
box-sizing:border-box;
}
.content-wrapper{
position:relative;
overflow:hidden;
background-color:#DDDDDD;
margin:10px 0;
min-height:350px;
}
.content{
background-color:white;
position:absolute;
top:30px;
left:10px;
right:10px;
bottom:10px;
}
.content.grayed{
background-color:#CCCCCC;
}
.content.positioned{
top:50px;
left:180px;
bottom:-50px; //negative positioned parts supposed to be hidden
right:-50px; //as .content-wrapper has overflow:hidden;
}
.content.positioned img{
width:40%;
height:auto;
margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper
margin-left:10vw;
min-width:250px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Is there really no any solution?
I would consider adding the image outside and adjust the position to obtain this. Change the translation to adjust the position:
.wrapper {
width: 100%;
overflow: hidden;
position: relative; /*change this*/
padding: 0 10px;
background-color: #EEEEEE;
box-sizing: border-box;
}
.content-wrapper {
position: relative;
overflow: hidden;
background-color: #DDDDDD;
margin: 10px 0;
min-height: 350px;
}
.content {
background-color: white;
position: absolute;
top: 30px;
left: 10px;
right: 10px;
bottom: 10px;
}
.content.grayed {
background-color: #CCCCCC;
}
.content.positioned {
top: 50px;
left: 180px;
bottom: 0;
right: 0;
padding: 20px calc(40% - 0.4*148px) 0 20px; /* the space of the image*/
}
.content.positioned img {
position: absolute;
opacity: 0; /*Hide this one*/
}
.hack {
/*Don't use any top/bottom here !!*/
left: 190px;
right: 10px;
position: absolute;
z-index: 1;
}
.hack img {
width: 40%;
position: absolute;
right: 0;
bottom: 0;
transform: translateY(70%);
max-width:300px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="hack">
<img src="//i.imgur.com/DsOdy1V.png">
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br> ...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Add a <div> like content-wrapper-inner and move the height, position from content-wrapper into it.
.wrapper{
width:100%;
overflow:hidden;
position:initial;
padding:0 10px;
background-color:#EEEEEE;
box-sizing:border-box;
}
.content-wrapper{
overflow:hidden;
background-color:#DDDDDD;
margin:10px 0;
}
.content{
background-color:white;
position:absolute;
top:30px;
left:10px;
right:10px;
bottom:10px;
}
.content-wrapper-inner {
min-height:350px;
position:relative;
background-color: red;
}
.content.grayed{
background-color:#CCCCCC;
}
.content.positioned{
top:50px;
left:180px;
bottom:-50px; //negative positioned parts supposed to be hidden
right:-50px; //as .content-wrapper has overflow:hidden;
}
.content.positioned img{
width:40%;
height:auto;
margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper
margin-left:10vw;
min-width:250px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content-wrapper-inner">
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Try to make overflow:visibleof the outer div of the content.
You can't have content reach out of a parent with overflow: hidden and still find a way to show the head. The question is why you need overflow hidden on the parent.
Perhaps you could use a sibling element for the image container and limit overflow on the content container.
Something like:
HTML
<div class="parent">
<div class="child-content-wrapper">
Content goes here
</div>
<div class="child-image">
Image goes here
</div>
</div>
CSS:
.parent {
position: relative;
}
.child-content-wrapper {
overflow: hidden;
}
.child-image {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
}
That should work and you'll be able to get the cut off effect on the rotated content box and the whole head.
I suppose I really have two questions(viewing the website might offer a better explanation):
The iframe on my website is staying in front of everything else, despite changing the z-index and setting the wmode to "transparent". I can't really find anything else about what might be causing it?
<div class="videoWrapper">
<iframe position="absolute" width="100%" height="100%" src='http://www.pinkbike.com/v/embed/300624/?colors=ffae00' allowfullscreen wmode="transparent" frameborder='0'></iframe>
</div>
CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 40%;
margin-left:58%;
margin-top:2%;
}
The other problem is that my sub menus keep disappearing, while you're hovered over them. I've again tried playing with the z-index to no avail.
<div id="menu_container">
<div class="menu_item" id="item_one">
<a class="menu_item" href="#"><h3>Downhill</h3></a>
<div class="sub_menu_item" id="item_one_sub">
<h4>Gallery</h4>
<h4>Example</h4>
<h4>Example</h4>
</div>
</div>
</div>
CSS for the menu:
.menu_item {
color:white;
position:absoloute;
height:3%;
width:25%;
text-decoration:none;
text-align:center;
margin-top:-20px;
z-index:2;
}
.sub_menu_item {
background-color:black;
display:none;
position:absoloute;
text-align:center;
width:100%;
z-index:5;
}
#menu_container {
position:fixed;
width:79%;
min-width:500px;
height:30px;
background-color:orange;
margin-top:10px;
margin-left:auto;
margin-right:auto;
}
#item_one_sub {
height:auto;
margin-top:-20px;
text-align:center;
}
#item_one:hover #item_one_sub {
display:block;
z-index:100;
}
Any and all help is greatly appreciated!
I think the following solution may solve both of your problems.
I've redesigned the layout, creating a wrapper to wrap both header and content
.wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80%;
margin:0 auto;
position:relative;
overflow:hidden;
}
and then arranged navigation menu (of course, you can still use your current solution, if you like it!)
<div class="navitem">
<div class="title">Item one</div>
<div class="submenu">
<div class="submenuitem">Some link</div>
<div class="submenuitem">Some link</div>
<div class="submenuitem">Some link</div>
<div class="submenuitem">Some link</div>
</div>
</div>
I've also fixed some imprecisions about video wrapper
.videoWrapper {
width:100%;
display:block;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Fiddle
The navigation menu is now always on top, with a fixed position, and above video iframe.
I have the below HTML & CSS, I want take out the little black square to the front i.e. over & above the overlay, I should only see the black square.
This markup is just the stripped version of my code.
Black box on the top right need to get in front of all layers, including
overlay layer.
Plunk - http://plnkr.co/edit/FEo8AQBBrh1YMHrduZeM?p=preview
HTML:
<body>
<div class="div1">div1
<div class="div1-1">div1-1
<div class="div1-1-1">
div 1-1-1
<div class="div1-1-1-1">
1-1-1-1
</div>
</div>
</div>
</div>
<div class="overlay"></div>
</body>
CSS:
body{color:#fff;}
.overlay{position:fixed; top:0; left:0; right:0; bottom:0; background:#000;opacity:.5; z-index:1005;}
.div1{width:100%; height:600px; background:red; position:relative;}
.div1-1 {width:auto; height:600px; background:blue; position:absolute; z-index:2; left:40px;
top:0; bottom:0; right:0;
}
.div1-1-1 {width:100%; height:40px; background:green; position:absolute; z-index:15;
top:0;right:0; left:0;
}
.div1-1-1-1 {width:40px; height:40px; background:black; position:absolute; right:0; top:0;}
I have changed a lot of structure, for achieving the task, please check the Code here
CSS Code:
/* Styles go here */
body{color:#fff;}
.overlay {
background: none repeat scroll 0 0 #000000;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 20;
}
.div1{width:100%; height:600px; background:red; position:relative;}
.div1-1 {
background: none repeat scroll 0 0 #0000FF;
bottom: 0;
height: 600px;
left: 40px;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.div1-1-1 {
background: none repeat scroll 0 0 #008000;
height: 40px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.div1-1-1-1 {
background: none repeat scroll 0 0 #000000;
height: 40px;
position: absolute;
right: 0;
top: 0;
width: 40px;
z-index: 999;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="overlay"></div>
<div class="div1">div1
<div class="div1-1">div1-1
<div class="div1-1-1">
div 1-1-1
<div class="div1-1-1-1">
1-1-1-1
</div>
</div>
</div>
</div>
<!--<div class="overlay"></div>-->
</body>
</html>
Please add comments if you have any other issue.
Regards D.
It seems z-index is always inherited from parent, more details in this SO question.
One way is to remove the z-index of parent divs and add only to the required div. Plunk here
Another is to have it has a sibling instead of child. And update the z-index accordingly.
Plunk
<div class="div1">div1
<div class="div1-1">div1-1
<div class="div1-1-1">
div 1-1-1
</div>
</div>
</div>
<div class="div1-1-1-1">
1-1-1-1
</div>
<div class="overlay"></div>
CSS Change
.div1-1-1-1 {width:40px; height:40px; background:black; position:absolute; right:100px; top:0;z-index:1010;}
I am sending another solution, which only alters the structure, and that does not remove the z-indexes of any elements.
JS Fiddle Code
HTML Code:
<div class="overlay"></div>
<div class="div1">div1
<div class="div1-1">div1-1
<div class="div1-1-1">div 1-1-1
<!--<div class="div1-1-1-1">1-1-1-1</div>-->
</div>
</div>
<div class="div1-1-1-1">1-1-1-1</div>
</div>
CSS Code:
body {
color:#fff;
}
.overlay {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#000;
opacity:.5;
z-index:1005;
}
.div1 {
width:100%;
height:600px;
background:red;
position:relative;
}
.div1-1 {
width:auto;
height:600px;
background:blue;
position:absolute;
z-index:2;
left:40px;
top:0;
bottom:0;
right:0;
}
.div1-1-1 {
width:100%;
height:40px;
background:green;
position:absolute;
z-index:15;
top:0;
right:0;
left:0;
}
.div1-1-1-1 {
width:40px;
height:40px;
background:black;
position:absolute;
right:0;
top:0;
z-index: 9999;
}
Notable Points:
You have to add the division <div class="div1-1-1-1">1-1-1-1</div>
as a child of <div class="div1"> instead of <div
class="div1-1-1"></div>
Class .div1-1-1-1 should be given equal or higher z-index than .overlay class.
You can do this by simply changing the layout structure by HTML, or by jQuery.
If you have any other query then please add comment below.
Regards D.
I'm trying to extend a div to the width of a browser window and it's wrapped in a relative positioned div.
Here's the HTML markup:
<section class="slider-home">
<div class="overlay"> </div>
<div class="img-product">
<div class="strapbox-product">
<h1>
Farm & Estates
</h1>
</div>
<img src="/assets/img/products/farm-estates.jpg"></img>
</div>
</section>
Here's the code for the container:
.slider-home {
height: 360px;
overflow: hidden;
position: relative;
}
And the code for the division I wish to extend
.overlay {
position: absolute;
width: 100%;
height: 360px;
z-index: 2;
}
Or is it this CSS for this division I have to extend?
.img-product {
height: 360px;
overflow: hidden;
text-align: center;
position: relative;
}
The CSS code for an image (the cows) within the img-product division.
.img-product img {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}
And finally a screenshot of the webpage. The cows and the banner I'd like to extend to the full width of the webpage.
Look into this, may be it might help you.
HTML:
<section class="slider-home">
<div class="overlay"> </div>
<div class="img-product">
<div class="strapbox-product">
<h1>
Farm & Estates
</h1>
</div>
<img src="http://2.bp.blogspot.com/-cr_BxrxmKrE/TfjZlcf8VBI/AAAAAAAAA5g/JPv6K6XhW0c/s1600/34066_457614643272_609613272_5962233_1924402_n.jpg"></img>
</div>
</section>
CSS:
.slider-home,.img-product,.strapbox-product{
width:100%;
position:relative;
}
.strapbox-product h1{
width:100%;
text-align:center;
position:absolute;
top:100px;
z-index:999999;
display:block;
}
.img-product img{
width:100%;
height:100%;
}
.overlay{
width:100%;
height:50px;
background:black;
opacity:0.4;
position:absolute;
top:100px;
z-index:999999;
}
Fiddle Demo
So I have this template design that is currently absolutely positioned, but I'm trying to make it centered in any widescreen browser. I've tried making the width auto on the left and right side in my container, but it is still aligned with the left side.
Css
.JosephSettin_png
{
position: absolute;
left:0px;
top:0px;
width:216px;
height:40px;
background: url("JosephSettin.png") no-repeat;
}
.home_png
{
position: absolute;
left:472px;
top:16px;
width:48px;
height:16px;
}
.discography_png
{
position: absolute;
left:528px;
top:16px;
width:80px;
height:24px;
}
.purchase_png
{
position: absolute;
left:608px;
top:16px;
width:88px;
height:24px;
}
.about_png
{
position: absolute;
left:696px;
top:16px;
width:48px;
height:24px;
}
.contact_png
{
position: absolute;
left:744px;
top:16px;
width:56px;
height:24px;
}
.main__pic_png
{
position: absolute;
left:0px;
top:56px;
width:264px;
height:264px;
background: url("main_pic.png") no-repeat;
}
.footer__lines_png
{
position: absolute;
left:0px;
top:512px;
width:800px;
height:24px;
background: url("footer_lines.png") no-repeat;
}
.info__heading_png
{
position: absolute;
left:32px;
top:360px;
width:216px;
height:32px;
background: url("info_heading.png") no-repeat;
}
.info__pic3_png
{
position: absolute;
left:265px;
top:360px;
width:159px;
height:112px;
background: url("info_pic3.png") no-repeat;
}
.info__pic2_png
{
position: absolute;
left:432px;
top:360px;
width:176px;
height:112px;
background: url("info_pic2.png") no-repeat;
}
.info__pic1_png
{
position: absolute;
left:616px;
top:360px;
width:177px;
height:112px;
background: url("info_pic1.png") no-repeat;
}
.info__pane_png
{
position: absolute;
left:0px;
top:345px;
width:800px;
height:144px;
background: url("info_pane.png") no-repeat;
}
body
{
text-align: center;
background-color:maroon;
}
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#a {
text-decoration: none;
color:white;
font-weight:bold;
}
.style1 {
font-weight: bold;
color: #FFFFFF;
}
html
<body>
<center>
<div id="wrapper">
<div class="JosephSettin_png"> </div>
<div class="home_png"> Home</div>
<div class="discography_png"> Discography</div>
<div class="purchase_png"><span class="style1">Store</span></div>
<div class="about_png">About</div>
<div class="contact_png"><span class="style1"></span>Contact</div>
<div class="ad_png"> </div>
<div class="main__pic_png"> </div>
<div class="welcome__header_png"> </div>
<div class="welcome__text_png"> </div>
<div class="footer__lines_png"> </div>
<div class="footer__text_png"> </div>
<div class="info__pane_png"></div>
<div class="info__heading_png"> </div>
<div class="info__text_png"> </div>
<div class="info__pic3_png"> </div>
<div class="info__pic2_png"> </div>
<div class="info__pic1_png"> </div>
<div class="info__pic3_png"> </div>
</div>
</center>
</body>
I know the container I create works if all my div classes aren't absolutely positioned. Do I have to change the position or did I make another error?
Add position: relative; to the .wrapper definition.
http://www.w3.org/TR/CSS2/visuren.html#choose-position
An absolutely positioned item must be inside of a relatively positioned item, or it will not display as you intended.
Your main problem is that your wrapper needs to be position:relative; and margin:0 auto; will center the wrapper. also you can get rid of you HTML element its not needed.
CSS:
#wrapper {
position:relative;
width: 800px;
margin:0 auto;
text-align: left;
}
Hope this helps.
I strongly suggest using a CSS framework like "Blueprint CSS". It'll save you a lot of time and helps not just with positioning of elements but comes with a lot of nice features like typography, css reset for multi-browser support, etc.