There is structure. ad is positioned relative. And the all other divs in div.ad positioned absolute.
top-left, bottom-left, top-right, bottom-right styles looking as it should. But "inside", "left", "right", "top", and "bottom" styles not working.
left, right dont have specific heights and top, bottom dont have specific widths and inside dont have both bec div.ad's height and width expandable.
Its working on IE 7,8,9 Opera 10.50+, Chrome and Firefox
Modern browser screenshot http://i56.tinypic.com/2ia8tj5.png
IE6 Screenshot http://i54.tinypic.com/2yozvar.png
<div class="ad">
<div class="bottom"></div>
<div class="top-left"></div>
<div class="left"></div>
<div class="bottom-left"></div>
<div class="top"></div>
<div class="inside"></div>
<div class="top-right"></div>
<div class="right"></div>
<div class="bottom-right"></div>
</div>
.ad {
color: #606060;
position: relative;
padding: 12px;
min-height: 55px;
min-width: 246px;
margin: 0 0 10px 0;
}
/*Side Start*/
.top {
top: 0;
left: 11px;
right: 10px;
position: absolute;
height: 11px;
}
.right {
top: 11px;
right: 0;
bottom: 9px;
position: absolute;
width: 10px;
}
.bottom {
bottom: 0;
left: 11px;
right: 10px;
position: absolute;
height: 9px;
}
.left {
left: 0;
top: 11px;
bottom: 9px;
position: absolute;
width: 11px;
}
/*Side End*/
.inside {
position: absolute;
background-color: #f7f6f6;
top: 11px;
right: 10px;
bottom: 9px;
left: 11px;
}
/*Corners Start*/
.top-left {
top: 0;
left: 0;
position: absolute;
background-image: url('/images/DiseaseAds/border-top-left.png');
background-repeat: no-repeat;
width: 11px;
height: 11px;
}
.top-right {
right: 0;
top: 0;
position: absolute;
width: 10px;
height: 11px;
}
.bottom-left {
bottom: 0;
left: 0;
position: absolute;
width: 11px;
height: 9px;
}
.bottom-right {
bottom: 0;
right: 0;
position: absolute;
width: 10px;
height: 9px;
}
/*Corners End*/
IE6 doesn't support both left and right on an element, or both top and bottom. You can achieve the same result using a CSS expression, but it is slow and requires scripting to be enabled:
left: 11px;
width: expression((this.parentNode.offsetWidth - 11 - 10) + 'px');
You can use a "sliding doors" technique to get an image-based top or bottom border without as many elements and without script; in short the left hand-corner and top are the background of the main div and the right-hand side is the background of a small absolutely positioned div.
Replace min-height and min-width properties with height and width. IE6 doesn't support min-* and max-* properties so .ad currently doesn't have any dimensions set. This will also give .ad an "layout" what means that you'll be able to position its children with right and bottom properties correctly.
Related
I'm trying to make a backdrop for a menu that will be used to detect if the user has clicked somewhere other than on the menu and close the menu.
For some reason despite setting
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
The backdrop won't stretch beyond one of the parent divs.
I've distilled the webpage to something simple and stuck it here http://codepen.io/ben_irule/pen/LZWwjL?editors=1100
<!DOCTYPE html>
<html>
<head>
<style>
.app-layout {
height: 100%;
}
.layout {
height: calc(100% - 35px);
display: block;
}
footer {
height: 35px;
background-color: green;
}
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="app-layout">
<div class="layout">
<div class="content">
<div class="menu-backdrop"></div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
I've noted one transform attribute that when disabled stops the parent div from being problematic. However when I disable the equivalent attribute in the full blown app it does not resolve the issue.
I'm interested in understanding what conditions will result in a fixed position element being bound by a parent div.
I've been searching the web all morning but haven't found anything resembling my current issue.
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
Margin left and margin right is what stopping you to stretch beyond what it is now. Try reducing it.
Here is a better way of doing it. See if this solves your problem. Since you have a specific numbered margin, add those to menu-backdrop.
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin-left: -320px;
margin-right: -280px;
margin-bottom: -32px;
background-color: blue;
}
This will pull the backdrop beyond the width of the containing div. A negative margin usually does the job:
.menu-backdrop {
position: fixed;
margin-left:-30px;
margin-right:-30px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
Perhaps changing your layout to this:
<body>
<div class="app-layout">
<div class="layout">
<div class="menu-backdrop"></div>
<div class="content">
Need to stretch more!!
</div>
</div>
<footer>Footer</footer>
</div>
</body>
and styling similar to:
.menu-backdrop {
position: fixed;
max-width:750px;
margin:auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
I'm trying to create a textarea that expands vertically to fill all empty space in a div except for a fixed height offset from above and a fix height offset from below. The following CSS does the trick for Chrome, but not Firefox. In Firefox the textarea gets what looks like a default height and just stays that large, leaving extra empty space below. Any suggestions to have the Chrome behavior in all browsers?
#add-comment-text
{
position: absolute;
left: 5px;
top: 50px;
bottom: 50px;
width: 99%;
}
https://jsfiddle.net/2to0upmz/1/
You can use css calc function:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#add-comment-pane
{
height: 100%;
}
#add-comment-header
{
position: absolute;
top: 10px;
left: 10px;
}
#add-comment-text
{
position: absolute;
left: 5px;
top: 50px;
bottom: 50px;
width: 99%;
height: calc(100% - 100px); <!-- HERE -->
}
#add-comment-button
{
position: absolute;
bottom: 10px;
right: 10px;
}
<div id="add-comment-pane">
<div class="unselectable" id="add-comment-header">
Comment on:
markdown.
</div>
<textarea id="add-comment-text"></textarea>
<button class="pure-button pure-button-primary" id="add-comment-button">Post Comment</button>
</div>
Add height to your textarea:
#add-comment-text {
position: absolute;
left: 5px;
top: 50px;
bottom: 50px;
width: 99%;
height:85%;
}
Im having a problem of getting a relative div to stack below an absolute div.
There is a video that scales its height based on the width of the browser, I then had to get a div to position itself directly below it, using an absolute position I was able to achieve this with .contain
I then however need to make it so that I can place other divs below that .contain. With the fiddle I am trying to get the green bar positioned relative (.para1) below the positioned absolute (.contain). I could use a negative margin to fix the issue quickly, but then when placing more divs below .para1 I would have to have the same margin below each of them.
Here is the fiddle for a full illustration: http://jsfiddle.net/L232uhpr/
The code in question:
HTML:
<div class="contain">
<div class="divider">
<div class="txt_wrap">
<p class="center_h1">WHAT I DO</p>
</div>
</div>
</div>
<div class="para1">
<div class="para_wind" data-parallax="scroll" data-image-src="images/bg1.png">
</div>
</div>
CSS:
/*divider*/
.contain .divider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 10px;
z-index: -1;
}
.divider{
width: 100%;
height: 100px;
background-color: #ccc;
}
.txt_wrap{
width: 160px;
margin-left: 45%;
}
/*Parallax 1 Styling*/
.para1{
width: 100%;
height: 100px;
position: relative;
background: green;
}
You can add there padding bottom in CSS so remove it:
.contain .divider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* padding-bottom: 10px; */
/* z-index: -1; */
}
I think It's having padding-bottom:10px by removing it you will get your desired output
.contain .divider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* padding-bottom: 10px; */
z-index: -1;
}
Please check http://jsfiddle.net/L232uhpr/2/
I have created this website. And now, I would like to center text on those two images in header. Relevent code is here
<div class="header">
<img src="css/title578145459.png" class="headerImage left"/>
<img src="css/title756941752.png" class="headerImage right"/>
<span class="headerText">Ubytovna Stavařov Přerov</span>
</div>
and CSS
.headerImage {
width: 50%;
height: 100%;
}
.header {
position: relative;
height: 190px;
text-align: center;
padding-top: 5px;
opacity: 0.8;
}
.headerText {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
color: yellow;
font: normal 3em sling;
font-style: oblique;
}
I tried to set different values to top and bottom attributes, also I've tried to set padding and margin but neither of these have worked. Thanks for any tips.
Your z-index on .headerText should be positive. Using Chrome dev tools I was able to see the text using this:
.headerText {
position: absolute;
top: 120px;
left: 0px;
right: 0;
z-index: 1;
}
Try this
.headerText {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
z-index: 1;
}
How do I place the adInfoBox1 at the bottom of the container?
Take a look at this: http://jsfiddle.net/snowman/hxXJh/
Please note that the container will not have a fixed height.
You can use position: absolute.
.container
{
height: 400px;
position: relative;
}
.adInfoBox1 {
padding: 5px 5px 5px 10px;
position: absolute;
bottom: 0px;
width: 457px;
background-color: green;
}
.adRegularList .categoryList {
bottom: 0;
height: 16px;
position: absolute;
}
See a working example here: http://jsfiddle.net/hxXJh/5/
I'd suggest:
.adInfoBox1 {
padding: 5px 5px 5px 10px;
position: absolute;
bottom: 0; /* attaches the element to the bottom */
left: 0; /* attaches the element to the left-side */
right: 0; /* attaches the element to the right-side */
background-color : green;
}
The above will give the .adInfoBox 100% width, implicitly. This can be adjusted by removing, or amending, the right or left declarations. I removed the float because using position: absolute; will take the element out of the document flow anyway.
JS Fiddle demo.
Simple tricky solution. Div2 will be at the bottom of containerDiv.
<div id="containerDiv">
<div id="div1" style="heigth:90%;"></div>
<div id="div2">Content here...</div>
</div>
change the css of adInfoBox1 to:
.adInfoBox1 {
float: left;
padding: 5px 5px 5px 10px;
position: absolute;
width: 457px;
background-color : green;
bottom: 0;
}