I have an A4 page for print:
.page
{
width: 21cm;
min-height: 29.7cm;
padding: 1.2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
Inside this page I'm trying to put in the bottom a table:
<table id="t_obs">
<tr>
<td>TEXT</td>
</tr>
</table>
With the css:
#t_obs
{
position: absolute;
bottom:0px;
}
But only with bottom: -100px it's going to the bottom, why?
Thanks.
use position:relative to .page
.page
{
width: 21cm;
min-height: 29.7cm;
padding: 1.2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position:relative;
}
DEMO
Works when you add position:relative to .page.
See http://jsfiddle.net/8EZv6/1/
You just need to add position: relative to .page like so:
http://jsfiddle.net/qX2Kb/
When you use position: absolute the element you position is only positioned with regards to the closest parent with position specified. If you don't specify position for any parent it will be positioned relative the body.
If you want your table to be positioned relative the containing .page element ,then you should add position: relative to the CSS for .page
.page {
position: relative;
...
}
Hopefully this will help show what I mean: http://jsfiddle.net/2nx8Z/4/
You can read more about positioning here: http://developer.mozilla.org/en-US/docs/Web/CSS/position
Related
I have one problem with internet explorer about css div positioning.
I have created this DEMO from codepen.io .
If you check this demo with chrome or firefox then you can see the .test div positioning vorking correctly but when you open the demo with internet explorer then you can see the .test div shifted to the left side. How can i fixed this problem to work all browser anyone can help me in this regard ?
.test {
display: block;
position: absolute;
height: auto;
top: 0;
left: 0;
right: 0;
max-width: 580px;
min-width: 300px;
margin-top: 64px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
background-color: #f7f7f7;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 840px;
}
.header {
height: 12rem;
background: #009688;
}
<div class="test"></div>
position : absolute
The element is positioned relative to its first positioned (not static) ancestor element.
So you need to specify position (position:relative | fixed | absolute i.e. any position apart form static) to the parent (this case body or html)
It works fine without position: absolute;
https://jsfiddle.net/agnmx7s6/1/
To center align the DIV below code enough.
body{text-align:center}
Remove the below code in .text class
position: absolute;
You can achieve this without absolute positioning.
Please check the fiddle - https://jsfiddle.net/afelixj/agnmx7s6/4/
Also added negative margin-top to the center div.
I am trying to create a box shadow but as soon as another box hits it the box shadow is invisible. I'd like to have the box-shadow go over the other box.
Here an example of what is going wrong. As you can see there is a shadow where there is not box.
Fiddle
HTML
<header>
</header>
<div id="content">
</div>
CSS
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
}
#content {
width: 350px;
height: 300px;
margin: 0 auto;
background: #CCCCCC;
}
HTML elements are positioned statically by default in document normal flow.
You have to position the header as relative and add a higher z-index (if needed) to bring that element at the top of the others without changing layout, as follows:
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
position: relative;
z-index: 10; /* optional */
}
WORKING DEMO.
try position:absolute or relative for the header
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
position:absolute;
width:100%;
}
#content {
width: 350px;
height: 300px;
margin: 0 auto;
background: #CCCCCC;
}
JSfiddle
The breadcrumbs part of the page is shifted to the right (in Firefox) with no apparent reason.
HTML:
<div class="region region-header">
<section id="block-easy-breadcrumb-easy-breadcrumb" class="block block-easy-breadcrumb">
<section class="content">
<div id="breadcrumbs-one">
</section>
</section>
</div>
CSS:
#breadcrumbs-one
{
border-width: 1px;
border-style: solid;
border-color: #FFFFFF #FFFFFF #E7E7E7;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 100%;
}
Here is the link to site:
http://www.vegus.lv/kursi
It's not in english.
Hope you can help.
try this please add clear:left on this below class
.region-header {
clear: left;
left: -19px;
position: relative;
top: -1px;
width: 953px;
}
OR
add float:left on this below class
.region-header {
float: left;
left: -19px;
position: relative;
top: -1px;
width: 953px;
}
I assume the issue is in #main. when you change your margin to -7px auto 40px; The things work.
Also, if you do not want to make changes to #main, you need to change the padding of #header, #footer CSS with 10px 10px 8px; values respectively.
There are 1px issues that have a conflicting inheritance or structural differences that tend to change the layout styles of some elements if not calculated properly.
Hope this helps.
Just add in CSS float :left.
#breadcrumbs-one {
border-width: 1px;
border-style: solid;
border-color: #FFFFFF #FFFFFF #E7E7E7;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 100%;
float: left;
}
I have two sections, results on the left and main on the right which reside in html > wrapper > container.
Now, the heights of both of these are not fixes and would want them to stretch to 100% depending on their contents. On some occasions, results are longer than main and vice versa. I've used 100% height, but it just doesn't seem to work. Please help!
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
width: 100%;
}
#container {
width: 1007px;
padding: 130px 0 0 0;
display: block;
}
.results {
width: 383px;
float: left;
background:
#fff;
display: block;
-webkit-box-shadow: -2px 0px 8px -6px #000;
-moz-box-shadow: -2px 0px 8px -6px #000;
box-shadow: -2px 0px 8px -6px #000;
padding-bottom: 60px;
}
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: relative;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
<html lang="en>
<head></head>
<body>
<div id="wrapper">
<div id="container" class="clear fix">
<section class="results">
</section>
<section class="main">
</section>
</div>
</div>
</body>
</html>
Try to use "absolute" in instead of "relative" in position attribute.
I did here and worked.
For example:
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
Hugs,
Vinicius.
In many cases the problem arises when one states the height should be 100% but you need to ask the question, "100% of what?". That answer is the parent of that element so the next question is, "What is the parent's height set to?". If you don't have a height set to the parent, then 100% of nothing is nothing.
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>