I have two overlapping elements using relative positioning. A block of text overlaps an image behind the text block element. I can get the elements to overlap but the problem I run into is when i place text within the top element, the text characters wrap around the space of the underlying image instead of overlapping it.
What I'm trying to accomplish is getting the text characters to lay overtop the underlying image instead of wrapping around it. Is there a way to get the text characters to overlap on top of the underlying image instead of wrapping? Here's the site link to see what's happening:
https://mjedev.wpengine.com/capabilities/robotic-systems-integration/
its password protected so to view it use: UN: demo PW: cead2f68da79
here's the html code:
<div class="feature odd"><img src="
" />
<div class="featurecopy">
<p>text here</p></div></div>
the CSS code here:
.feature {
width:100%;
margin:30px 0 60px 0;
position:relative;
overflow:hidden;
}
.feature img {
position:relative;
width:45%;
top:0;
z-index:1;
}
.featurecopy {
width:60%;
padding:30px 30px 90px 30px;
background:rgba(228,227,224,.9);
position:relative;
top:60px;
clear:none;
z-index:10;
}
I have no idea what is causing a problem but one way you can fix this is putting exact text you want to overlap in span give it some class and then you can use position: relative; right: 5%; OR 100px; it should work but it is probably not the best practice.
This is how I will do it. I will add another class use the image as a background of the text so you dont have to rearrange a lot of stuff. Is this what you mean??
the CSS code here:
.feature {
width:100%;
margin:30px 0 60px 0;
position:relative;
overflow:hidden;
}
.feature img {
position:relative;
width:45%;
top:0;
z-index:1;
}
.featurecopy {
width:60%;
padding:30px 30px 90px 30px;
background:rgba(228,227,224,.9);
position:relative;
top:60px;
clear:none;
z-index:10;
}
.odd1 {background-image: url('https://media.istockphoto.com/photos/tiger-picture-id871661426?b=1&k=20&m=871661426&s=170667a&w=0&h=CFMdx-lBMJcwZShfwSgpcwStrgrEjp5wu6nWTr7bu_E=');
background-repeat:no-repeat;
}
.odd1 p {color:white;}
<div class="feature odd ">
<div class="featurecopy odd1">
<p >text heretext heretext heretext here</p>
</div>
</div>
Related
I'm trying to do something like this using css:
I need it to:
Only have background (with padding) around the text, and
Have a solid line occupying 100% page width thereafter
For example, I'd like to be able to do the following:
<div style="my-custom-style">T E X T</div>
Would appreciate some input
You can use the :after pseudo element to minimise markup.
The point is to position the pseudo element absolutly and keep the div's position to default static position. This way, setting the pseudo element to width:100%; will make it span the whole width of the divs parent (you will although need to set that parent to an other position than the default static position. In the following demo it is the body element) :
DEMO
CSS :
body{
position:relative;
}
div{
background-color:#FF7F27;
display:inline-block;
}
div:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
EDIT:
As stated in comments by #Paulie_D, you should be using a text node to display text like <span> <p> <li> <h1> <h2> ... Using this technique, <span> or a title tag should suit you depending on the content you need to display.
As Stated by #KheemaPandey using a manual space between the letters isn't the best considering HTML semantics , maintainability of your code and the "concept" of CSS styling.
You should be using letters-spacing to space your letters.
Considering both points, your code could look like this :
DEMO
HTML :
<span>TEXT</span>
CSS :
body{
position:relative;
}
span{
background-color:#FF7F27;
display:inline-block;
letter-spacing:0.5em;
}
span:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
Try following code
DEMO
<div style="my-custom-style"><span>T E X T</span></div>
div{
border-bottom: 3px solid orange;
}
span{
display: inline-block;
padding: 3px 5px;
background: orange
}
I want to center text vertically aligned without using the box property because It does not work in IE9 so I have read it. I have only IE 10 here...
http://jsfiddle.net/J8rL7/6/
I have also tried display:table-cell and vertical-align:middle but this destroyed the whole layout.
Are there any vertical align tricks for my scenario which support IE9+, Chrome/Firefox (latest).
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff99cc;height:25%;">1</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff33cc;height:50%;">2</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff66cc;height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:orange;height:50%;">Total</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:blue;height:50%;">Test</div>
</div>
</div>
</div>
Let's update this and go old ways, so older IEs should come in the run too:
Let's use specifitie of inline-boxes and use one inline-level empty element to secure vertical-align.
DEMO to test : http://jsfiddle.net/D9gnP/6/ - http://jsfiddle.net/D9gnP/6/show.
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
text-align:center;
/* text-indent:-0.5em; to swallow word spacing , should be right value */
}
div span {
display:inline-block;
height:100%;
vertical-align:middle;
width:0;/* no need to have a width, it's got be invisible */
margin:0 -5px;/* this will reduce effect of word spacing to none, it can be a little oversized */
}
If you want to use table-cell, you need to start from the main container drawing the column. and end up with table-cells to use the vertical-align rule.
I added an extra span to get to it :
http://jsfiddle.net/D9gnP/
.fluid-column,
.fix-column{
display:table-row;
width:100%;
}
.fluid-column > div,
.fix-column > div{
display:table;
height:100%;
width:100%;
}
.fluid-column > div > span,
.fix-column > div> span {
display:table-cell;
vertical-align:middle;
}
I just added "text-align: center;" in div tag.
It is done, check below link..
http://jsfiddle.net/J8rL7/15/
http://jsfiddle.net/J8rL7/24/
If you look at http://www.vanseodesign.com/css/vertical-centering/ and the heading: Absolute Positioning and Stretching
It requires adding a span around each text field, and a couple of classes
.vert {
position: relative;
}
.span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90%;
height: 30%;
margin: auto;
}
I've used this trick before for vertical alignment:
HTML:
<div id="container">
<div class="center">vertically centered content</div>
</div>
CSS:
#container { white-space:nowrap; height:200px; }
#container:before { content:""; display:inline-block; width:0; height:100%; vertical-align:middle; }
.center { display:inline-block; vertical-align:middle; white-space:normal; }
This creates a pseudo-element before the element with class="center" and uses inline-block so the vertical-align style takes effect.
Here's a jsfiddle so you can check if it works for you: http://jsfiddle.net/Etzpj/
I think that in your case you would need to wrap the text on each cell with another element for this trick to work.
Edit: here i used this trick in your fiddle http://jsfiddle.net/J8rL7/25/
I''m looking to move an image of a saw in between two borders so it is looks likes this.
I believe I have centered the image correctly but it appears I haven't and I am loathe to use padding if that is not right way, as I want this to be semantic as possible for a responsive design. I also need it to be placed within the two borders with one border stacked in front. Presumably I need use z-index to do that but I haven't got that far.
JsFiddle
Are you looking for something like this:
See Demo: http://jsfiddle.net/rathoreahsan/Fcn96/
Hi Played with positioning and tried to make the results as per your referred image requirement. I hope this will help you.
CSS
#logo-container .saw {
left: 50%;
margin: 0 auto;
position: relative;
top: 46px;
}
#tag-container {
border: 2px solid #00AC9D;
height: 150px;
margin-bottom: 5px;
position: relative;
width: 1140px;
}
see the demo:- http://jsfiddle.net/RJVXE/16/
You need to utilize both z-index and positioning.
.line
{
height:1px;
width:100%;
background:#000;
position:absolute;
left:0px;
}
.item1
{
top:5px;
z-index:5;
}
.item3
{
top:25px;
z-index:15;
}
<div style="width:100%; position:relative">
<div class="line item1"></div>
<div style="position:absolute; top:0px;left:50px;z-index:10">
<img src="saw.png" />
</div>
<div class="line item3"></div>
</div>
(example uses both inline & blocked CSS references only for brevity. Stay away from inline CSS).
You could tryo what AlphaMale suggestes here: How to center image in a div horizontally and vertically
Before your image include a 'span' tag. Then add this properties to 'saw' class:
#logo-container .saw {
text-align: center;
margin-bottom:-50px!important;
}
The !important is to override margin: 0 auto that actually has.
http://jsfiddle.net/2EKWS/1/
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
I have a div that has background that is partly transparent with a watermark. Inside of the div I'm calling an image but I want that image to appear behind the background of the div so I can have the watermarked transparent div background appear over the image. Is that possible? Here's the css that I have that isn't working...
.artist-container {
background:url(images/artist-back.png);
width:310px;
height:376px;
margin-left:-9px;
z-index:331;
position:relative;
}
.artist-container img {
width:300px;
height:300px;
margin-left:5px;
z-index:330;
position:relative;
}
By giving .artist-container a higher z-index, you are placing it higher in the stacking order than the child image, though children always have a higher z-index than their parents.
If you want to give the effect of a watermark, you can:
Make the image the background of the div and place an image watermark inside it.
Position another div within .artist-container absolutely, with the same dimensions as that of the image and with a higher z-index of the image, with the watermark as the background.
I whipped up a small sample using some spans, which won't add any semantic content to your document and will still maintain the semantic meaning of your image.
HTML:
<span class="cover_contain">
<img src="http://i.imgur.com/hla4q.jpg" alt="[image]" width="128" height="128" />
<span class="cover_image"></span>
</span>
CSS:
span.cover_contain {
display: inline-block;
position: relative;
}
span.cover_image {
display: block;
background: url('http://i.imgur.com/5BtFV.png') center center no-repeat;
width: 128px;
height: 128px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
jsFiddle Live Preview
make the image as the background-image of the div and the watermark as the img
it's not possible to put a background in front of an image of the image is in that element. You can simply use the main image as background, or:
what you could do
<div class="holder">
<img src=".." class="main_image">
<img src=".." class="watermark">
</div>
.holder {
width:100px;
height:100px;
position:relative;
display:block;
}
.main_image {
position:absolute;
top:0;
left:0;
z-index:0;
}
.watermark {
position:absolute;
top:0;
left:0;
z-index:9;
}
You can use the negative z-index, but in that case you must have the wrapper not to have any z-index. It's one of the features of stacking context.
Here is a demo fiddle: http://dabblet.com/gist/1731538
And the code for you would be something like this:
.artist-container {
background:url(images/artist-back.png);
width:310px;
height:376px;
margin-left:-9px;
position:relative;
}
.artist-container img {
width:300px;
height:300px;
margin-left:5px;
z-index:-1;
position:relative;
}