trying to get this:
http://webdev.edulence.com/getchell/products-services/commercial-insurance/
to look like this:
http://getchellcompanies.com/products/commercial.html
for some reason, the shadow div at the bottom is showing up behind the wrapper, with a white background, despite the shadow appearing after the wrapper in the HTML
#shadow is different in your CSS than the working page.
#shadow {
margin: -50px 0pt 0pt -65px;
top: 44px;
}
added the following to footer.
#footer{ margin-top: 60px;}
and used the below styles for the shadow.
#shadow{
background-image: url("images/dropShadow.png");
height: 103px;
position: absolute;width: 1121px;
z-index: 1;
clear: both;background-position: -15px 5px;
background-color: transparent;
background-repeat: no-repeat;margin-left: -40px;
margin-top: -35px;
}
Related
I have a content div with a ragged border (using a border-image) and I place another div each below the content div left and right to hold an image. This image is supposed to have a link. While the image shows nicely through the border the link area gets hidden by it. Given that my ragged border is rather wide (almost 100px), this feels quite confusing. Therefore I would like to "float" the image below the border and the actual link area above so that the link is clickable as well were the image is under the border or visible through the border.
Despite not having the background-image uploaded the effect becomes visible since the border is wide black. The structure includes a minimal header, which is not vital to the problem but is part of the root structure.
Another problem is that the link area expands to more than the wrapped image in height, however this is a minor issue.
http://jsfiddle.net/hc3jrkku/
Basestructure:
<header>
<nav>
<a href='?p=faq#faq' id='faq'>
FAQ
</a>
</nav>
</header>
<div class='leftSide'>
<a href="#anchor" class="bgImage"><img src="img/some.png" style="
position: relative;
z-index: -1;
opacity: .99;
border: 1px solid red;
width: 150px;
height: 200px;
background-color: red,
"></a>
</div>
<div class='rightSide'>{$right}</div>
<main>
<div class='container'>
{$content}
</div>
</main>
</body>
CSS:
* {
box-sizing: border-box
}
body {
margin: 0;
}
.leftSide{
position: fixed;
z-index: 0;
top: 20px;
right: 50%;
transform: translateX(-50%);
width: 808px;
height: 100%;
display: flex;
justify-content: flex-end;
margin-right:-93px;
padding: 15px 93px 90px 0;
}
.rightSide{
position: fixed;
z-index: 0;
top: 20px;
left: 50%;
transform: translateX(50%);
width: 808px;
height: 100%;
margin-left:-93px;
padding: 15px 0 90px 93px;
}
a.bgImage {
z-index:900;
opacity:.99;
border:2px dashed blue
}
.rightSide .bgImage {
margin-left: -93px;
}
.leftSide .bgImage {
margin-right: -93px;
}
main {
width: 808px;
min-height: 400px;
margin: 20px auto 0;
position: relative;
z-index: 50;
border-style: solid;
border-width: 0px 93px 127px 93px;
border-image: url(img/paperedge.png) 0 93 127 93 fill round;
padding-top:10px;
}
header {
height: 20px;
background: #ffffff url(img/header_bg.png) repeat-x bottom;
border-bottom: 1px solid #000000;
position: fixed;
width: 100%;
top: 0;
z-index: 100
}
nav {
display: flex;
justify-content: center;
}
Having read http://philipwalton.com/articles/what-no-one-told-you-about-z-index/, I tried creating new context(s) as well, and stripping the divs containing left/right background image of the z-index, However my current code depends on the transform/position thus creating a new context for the parent element either way. Is the sandwich stacking (some children above other parts of the page/others below) possible anyways?
If you want the image to be behind the border (or your content div), you can add this to the CSS of your div in the front:
main {
pointer-events: none;
}
This will kill the events on your div and make the behind events visible in the front: DEMO
You can also search more and find these similar topics:
HTML "overlay" which allows clicks to fall through to elements behind it
HTML/CSS: Make a div "invisible" to clicks?
In my application I have a section header with a caption and a horizontal line. The horizontal line is a background image (which contains the line, the rest of the image is transparent) of the parent container. The caption is defined by a child element.
<div class="header">
<span>Identifier</span>
</div>
What I am trying to achieve - with CSS styling - is that the child element is displayed with the same background color as the parent, but the background image of the parent container should not be displayed underneath the caption.
.header {
background-image: url("bg_image.png");
background-color: #fff;
position: relative;
height: 25px;
}
.header > span {
position: absolute;
background-color: #fff;
padding: 0px 10px;
}
This works perfectly if I set the background color of the child element explicitly. But the background color can be configured by the user, so I don't want to set it explicitly.
So my the question is, is this possible at all using only CSS styling?
This fiddle shows the problem (I used a gradient to simulate the background image).
EDIT: An important requirement is that the solution must work across browsers (including IE8).
If you're okay with a centered headline, try the css that i used in one of my projects:
h1 {
position: relative;
white-space: nowrap;
text-align: center;
padding: .2em 0;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
You can see the result here: http://codepen.io/DerZyklop/pen/AouDn
It is pure CSS. It adds two lines by using the css-pseudo-elements :before and :after.
With some modifications it should also work well with a left-aligned headline like in your example.
And another important thing to note here is the white-space: nowrap;. So this will only work with one line, but not with multiple lines.
can you please checkout
http://jsfiddle.net/dYr29/3/
i have update your fiddle
<div class="header">
<span>Identifier</span>
</div>
css
.header {
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background-color: #fff;
position: relative;
width: 300px;
height: 1px;
top: 10px;
}
.header > span {
position: absolute;
padding: 0px 10px;
top: -10px;
left: 10px;
background:#fff;
}
I finally identified how to solve the problem.
.header > span {
position: absolute;
background-color: inherit;
padding: 0px 10px;
}
Using background-color: inherit will solve the problem.
I also updated the fiddle.
I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:
position: Absolute; top: 20px; right 0px;
That would work but if you adjust the browser the text moves with it.
I created a JFiddle that you can find here:
http://jsfiddle.net/rKWXQ/
This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.
Here is the header element and inside of that I have a right_header element.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Here is my Header CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
Can someone please tell me the proper way to accomplish this please?
Note the left side will have a logo there that will not load in JFiddle!
Thanks!
You can easily just float it to the right, no need for relative or absolute positioning.
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle - might need to add some padding/margins - like this.
Two more ways to do it:
Using margins on the element you want to position to the right of its parent.
.element {
margin-right: 0px;
margin-left: auto;
}
Using flexbox on the parent element:
.parent {
display: flex;
justify-content: right;
}
As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.
You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header
You can do this way also if you want to do with position, Try this please
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.
The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.
The '' should be absolutely position in order for this code to work.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
change it to...
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
<div><button>Continue</button></div>
to make button on the right of div
<style>
button {
display:block;
margin-left:auto;
}
</style>
I have an odd redline next to my logo, and I can't for the life of me work out why.
Take a look:
http://www.pdf-explode.com.au/index.php
Here's the red line I'm talking about:
http://www.bounceapp.com/66618
I've tried looking at all the borders, there's no red.
searched through backgrounds, no red.
inspector can't inspect it.
it's not in the image
Let me know if you can find it.
The background is repeated (the red line is a part of the letter D), so add: no-repeat to your css
It's the repeat of the background image on #menu a.logo (so it is the D of Document showing up again to the right). Remove the repeat.
your css:
#menu a.logo {
background: url("../images/logo1.png") repeat scroll 0 0 transparent;
height: 45px;
left: 0;
position: absolute;
text-indent: -10000px !important;
top: 5px;
width: 265px;
z-index: 10;
}
the correct css:
#menu a.logo {
background: url("../images/logo1.png") no-repeat scroll 0 0 transparent; //edited
height: 45px;
left: 0;
position: absolute;
text-indent: -10000px !important;
top: 5px;
width: 263px; //edited
z-index: 10;
}
your logo's width is 263px;
This is because your logo starts repeating itself. The line is coming from the red "D". add background-repeat: no-repeat; or shorten the logo width for about 2 pixels.
I have this page which has this this CSS
body {
background-image: url("images/BACKGROUND5.jpg");
background-repeat: no-repeat;
}
and two divs
#borderleft {
background: none repeat-y scroll 0 0 #93A87D;
clear: left;
float: left;
margin-left: -10px;
margin-top: 610px;
visibility: visible;
width: 70px;
z-index: 2;
}
#borderright {
background: none repeat-y scroll 0 0 #93A87D;
clear: right;
float: right;
margin-left: -10px;
margin-top: 610px;
position: relative;
visibility: visible;
width: 70px;
z-index: 2;
}
here is the HTML
<body>
<div id="borderleft"></div>
<div id="borderright"></div>
any ideas on how to make image in the center and the green background: none repeat-y scroll 0 0 #93A87D; on the outsides
One good way to do this kind of layout, when the width of both border columns is fixed, is this.
The elements are:
A container <div> with position: relative
The border <div>s with position: absolute, fixed widths, and left: 0/right:0 respectively
A "content" <div> with margin-left and margin-right equal to the width of the border <div>s.
In the example I linked above there's no container div (the <body> element plays that role), but you will need one if you want to be able to move this arrangement around on the page as a whole.
Part of solution is to have your body style like this:
body {
background-image: url("images/BACKGROUND5.jpg");
background-repeat: no-repeat;
background-position: center;
}
And, instead of having
margin-top: 610px;
in left and right divs, try replace that with
height: 610px;
Using the image as you posted, I'd suggest something like this.