I have two divs that overlap horizontally. My issue is that one of the divs contain text and a href link which is not working.
You can see the code I have here
https://jsfiddle.net/jayreis/w7regdcr/
.postwrapper
{
margin:auto;
width:80%;
display:block;
padding-bottom:15px;
}
.imageDiv
{
margin-left: 100px;
background: #fff;
display: block;
width: 445px;
height: 220px;
padding: 10px;
border-radius: 2px 2px 2px 2px;
}
.imageDiv img
{
width:600px;
height:400px;
}
.textboxDiv
{
position:relative;
bottom:145px;
left:470px;
zoom: 1; /*to fix the has layout bug in IE older version*/
filter: alpha(opacity=50);
opacity: 0.9;
background-color:#ffffff;
text-align:center;
}
.textboxDiv:after
{
content:'';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border: #dddddd 2px solid
}
.readarticle
{
text-decoration:none;
border-top: 1px solid #a61531;
float:left;
color:#000000;
z-index: 99999;
}
<div class="postwrapper">
<div class="imageDiv">
<img src="http://www.ccc.com/media/post/image/6/0/600x400.png" />
</div>
<div class="imageDiv textboxDiv">
<p style="color:#000000; margin-auto; width:35%; margin-left:-10px; padding-bottom:10px">date here
</p>
<h4>the title</h4>
<p style="color:#000000">desc here</p>
<br />
<p><a href="http://www.ccc.com" title="test" class='readarticle'>READ ARTICLE</a></p>
</div>
</div>
So if you look at the css if I change the position: absolute; to be position: relative; in the class style .textboxDiv:after the link then works but I loose the border style I need around the box.
Any suggestions how I can keep the style yet make the links work in the textboxDiv ??
.readarticle is not positioned, so the z-index won't work. Simply add position: relative; and it'll work.
.readarticle
{
text-decoration:none;
border-top: 1px solid #a61531;
float:left;
color:#000000;
z-index: 99999;
+ position: relative;
}
MDN Documentation: Z-Index
Related
I'm coding In order to finally achieve this result(https://pasteboard.co/H2BwMM7.jpg).
The HTML code is this:
<body>
<div>
<div class="box">
<span class="imgBox"><img src="Chrysanthemum.jpg" class="img-rounded" width="150px" height="150px"/></span>
<div class="text">
<h1>mamad</h1>
<h4>author</h4>
</div>
</div>
<div class="well wellBox" role="alert">
<div class="text-body">
<h4>Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
</div>
</body>
and the css is this:
<style>
div.box {
float:right;
top:25px;
position: relative;
z-index:3;
right:0;
display:inline-block;
margin: 50px;
text-align: center;
line-height: 100px;
font-size:30px;
color:#fff;
}
h1{
margin-top:0px
}
div.box:after,div.wellBox:after {
position: absolute;
content: "";
width: 2px;
height: 50px;
background: black;
top: -20px;
}
div.box:after{
right: -10px;
}
div.wellBox:after{
left: -10px;
}
div.box:before,div.wellBox:before {
position: absolute;
content: "";
height: 2px;
width: 50px;
background: black;
top: -10px;
}
div.box:before{
right: -20px;
}
div.wellBox:before{
left: -20px;
}
.wellBox{
box-shadow: -10px 10px 8px #888888;
}
.imgBox{
box-shadow: -10px 10px 8px #888888; z-index:1; display: inline-block;
float: right;
}
img{float:right; z-index:2;}
.wellBox{
width:80%;
margin:0 auto;
position: relative;
top:146px;
text-align:right
}
.text{
float:right;
display:inline;
text-align:right;
margin-right:30px
}
h1,h4{
color:black}
</style>
The result that I finally got is this url(https://pasteboard.co/H2ByVvW.jpg).
In order to obtain the desired result, I need to:
1.put text of div to class "well" in Where is marked with a green line
2.box-shadow of image put below div to class "well".
3.in mobile size div to class "text" dont have Far away of div to class "text-body".
I tried a lot, but I did not get a good result that really pleases me... Any idea?
I think you can achieve this if you use the correct colors and a transparentized box-shadow instead of a solid color.
Check out this JSFiddle
Specifically see lines 55 & 61
i have a problem like this.
#relative{
position:relative;
width:100%;
height:100%;
text-align:center;
}
button{
margin:10px auto;
width:200px;
height:auto;
border:1px solid;
border-radius:5px;
}
#absolute{
position: absolute;
top: 0;
left:0;
height: 250px;
width: 100%;
border: solid 1px #000000;
color: blue;
font-weight: bold;
padding-top: 60px;
/*opacity:0;*/
}
button:hover{
background-color:#eed5a4;
}
<div id="relative">
<button>
Hover me if you can.
</button>
<div id="absolute">
Absolute its me dude!!<br>
If me >> opacity:0<br>
Button still cant be hover.
</div>
</div>
Any solution for this, and i dont know to use the good english language
Note : button keep like this, do not change the position absolute too.
- my english so bad :(
Add position:relative; and a higher z-index than that of the #absolute div to the button itself, like so:
HTML
<button id="relative-button">Hover me if you can.</button>
CSS
#absolute { z-index:1 }
#relative-button { position:relative; z-index:2 }
replace button css like this
button {
border: 1px solid;
border-radius: 5px;
height: auto;
margin: 10px auto;
position: relative; /* newly added */
width: 200px;
z-index: 9; /* newly added */
}
Thanks #daniel lisik, you are awesome people. Extraordinary
#relative{
position:relative;
width:100%;
height:100%;
text-align:center;
}
button{
position:relative;
z-index:5;
margin:10px auto;
width:200px;
height:auto;
border:1px solid;
border-radius:5px;
}
#absolute{
position: absolute;
z-index:1;
top: 0;
left:0;
height: 250px;
width: 100%;
border: solid 1px #000000;
color: blue;
font-weight: bold;
padding-top: 60px;
/*opacity:0;*/
}
button:hover{
background-color:#eed5a4;
}
<div id="relative">
<button>
Hover me if you can.
</button>
<div id="absolute">
Absolute its me dude!!<br>
If me >> opacity:0<br>
Button still cant be hover.
</div>
</div>
I have an image I would like to display as a circle with (border-radius:50%) and on the same line I would like to have some text with a set width and background. I would not like to hard code any values. What is the best way of accomplishing this?
Here is a picture
fiddle
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
.i {
width: 80px;
height: 80px;
border-radius: 50%;
}
.headingText {
color: white;
background: black;
display: inline-block;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
You could try something like this:
.header
{
padding-top:26px;
padding-left:40px;
position:relative;
}
.i
{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
top:0;
left:0;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}
Using pseudo-classes and absolute positioning you can get the effect you want.
The below answer uses your existing HTML so you don't have to change any of that and just changes your CSS.
You can add some more padding to the text to make it a bit more spaced out if required and the background should sort itself out.
.header {
position: relative;
display: inline-block;
margin: 30px;
overflow: visible;
}
.header img.i {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
bottom: 16px;
left: -40px;
z-index: 1;
overflow: hidden;
border: 3px solid black;
}
.header p.headingText {
padding: 16px 32px 16px 80px;
color: black;
border: 3px solid black;
}
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
<p class="headingText">Hello</p>
</div>
Just add position: absolute in i class then control the margin of headingtext:
HTML:
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
CSS:
.i
{
width:80px;
height:80px;
border-radius:50%;
position: absolute;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin: 40px 0 0 37px;
}
FIDDLE
use a block element instead with a negative margin to the top (half circle size - half of the padding) and a margin to the left (half circle size). Just change:
.headingText {
/*display: inline-block;*/
display: block;
margin-top: -45px;
margin-left: 40px;
}
Example fiddle: https://jsfiddle.net/c67dchhv/
just simple make .header class position:relative; if you want to define any height and width you can, .i class position:absolute; give margin on .headingtext class https://jsfiddle.net/hamzanisar/aphzeyyt/ maybe it will helpful for you.
I need to make a textbox with the same designing as we have in silverlight like this:
Now, the problem is the little triangle at the top right corner of the textbox. I am unable to position it over the textbox. My textbox look something like this:
HTML:
<div id='wrap'>
<input type="text" id="validateInput"/>
<span>
<img src="http://snag.gy/C3CDl.jpg" class="triangleimg">
</span>
</div>
CSS:
#validateInput
{
background-color: #FFFFE0;
border: 1px solid red;
height:20px;
}
.triangleimg
{
vertical-align:top;
position:absolute;
}
Here is a working demo for the code that so far I have tried. Any help would be appreciated.
You can also use css for arrow if you can change the html structure
#validateInput {
background-color: #FFFFE0;
border: 1px solid red;
height: 20px;
}
#wrap span {
display: inline-block;
position: relative;
overflow: hidden;
}
#wrap span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0px 0px 0px 1px #FFFFE0;
}
<div id='wrap'>
<span><input type="text" id="validateInput" /></span>
</div>
Use display: inline-block; and position: relative; to parent div.
And position: absolute; to child span.
#validateInput
{
background-color: #FFFFE0;
border: 1px solid red;
height:20px;
}
.triangleimg
{
vertical-align:top;
}
div {
display: inline-block;
position: relative;
}
span {
position: absolute;
right: -3px;
top: -1px;
}
<div id='wrap'>
<input type="text" id="validateInput"/>
<span>
<img src="http://snag.gy/C3CDl.jpg" class="triangleimg">
</span>
</div>
Working Fiddle
Ty This
Demo
body{
background-color: #EEE;
}
#validateInput
{
background-color: #FFFFE0;
border: 1px solid red;
height:20px;
}
.item {
display: inline-block;
position: relative;
}
.item:after
{
content:'';
width: 10px;
height: 10px;
display:block;
background-image: url('http://i.snag.gy/C3CDl.jpg');
position: absolute;
right: -3px;
top: -1px;
}
<div id='wrap'>
<div class="item">
<input type="text" id="validateInput" />
</div>
</div>
Use position:absolute for your image and make the span as relative. After that use negative left position to make the desired result.
.triangleimg
{
vertical-align:top;
position:absolute;
left:-7px;
}
DEMO
How to create the pop up box as shown below in image with pure css
Here is what I have made with position:absolute which works fine but what I am trying to get is, is it possible to do only with one div by using :after or :before pseudo classes?
.pop{
background:#333;
display:inline-block;
width:250px;
height:120px;
border-radius:8px;
position:relative;
margin-top:25px
}
span{
position:absolute;
left:0;
top:-20px;
color:white;
display:inline-block;
border-radius:8px 8px 0 0;
background:#333;
padding:6px;
width:100px
}
Fiddle
This one is not much flexible, but does thing without additional markup, using pseudo element ::before.
.pop {
background: #333;
width: 250px;
height: 120px;
border-radius: 8px;
display: inline-block;
}
.pop::before {
content: "Pop up head";
display: block;
width: 90px;
background: #333;
border-radius: 8px;
padding: 3px;
margin-top: -14px;
text-align: center;
color: white;
}
<div class="pop"></div>
If I understood your question correctly this is what you need http://jsfiddle.net/slash197/Cup5Y/15/
HTML
<div class="holder">
<div class="header">Header</div>
<div class="pop">asd asd asd </div>
</div>
CSS
.holder {
position: relative;
width: 250px;
height: 140px;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background:#333;
color: #ffffff;
border-top-left-radius:8px;
border-top-right-radius:8px;
padding: 0px 10px;
}
.pop{
position: absolute;
top: 20px;
left: 0px;
background:#333;
color: #ffffff;
display:inline-block;
width:250px;
height:120px;
padding: 10px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
First you need 2 divs, one for the "header" and one for the "content"
see my example http://jsfiddle.net/Cup5Y/13/
<div class="pop">
<div class="head">
Title
</div>
<div class="content">
</div>
</div>