I have used the following How to create a box when mouse over text in pure CSS?
and switch the position of the cursor and the placement
span{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 150px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
top: -10px;
left:60px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
top:40px;
right: 135px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
margin-left:-10px;
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
}
p:hover span{
display:block;
}
<p>Hover here<span>some text here ?</span></p>
Here is the [fiddle] (http://jsfiddle.net/beerbuddha/4kjnb4e5/)
I need a split 25%(header) with different background color and the rest (75%) to be a different color and to hold text and an image.
I tried the approach and what happens is that the display:none doesnt work anymore at all and the hover box it self break.
Im slightly lost.
Very simple. You change html:
<div class="div-hover">Hover here
<div class="div-tooltip">
<div class="tooltip-header">some text here ?</div>
<div class="tooltip-body">some text body some text body</div>
</div>
</div>
Full code is here
Related
I use the following HTML/CSS code to make a chat bubble:
body {background-color: red}
.message-sent {
position:relative;
padding:10px 20px;
color:white;
background:#0B93F6;
border-radius:25px;
float: right;
margin-bottom: 5px;
margin-right: 30px;
}
.message-sent-last::before {
content:"";
position:absolute;
z-index:-1;
bottom:-2px;
right:-7px;
height:20px;
border-right:20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-56px;
width:26px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: red;
}
<div class="message-sent message-sent-last">
Hey there! What's up?
</div>
But the problem is in the last line of the CSS in which I am forced to repeat the background color, otherwise, the bubble will break. Please, check this out:
body {background-color: red}
.message-sent {
position:relative;
padding:10px 20px;
color:white;
background:#0B93F6;
border-radius:25px;
float: right;
margin-bottom: 5px;
margin-right: 30px;
}
.message-sent-last::before {
content:"";
position:absolute;
z-index:-1;
bottom:-2px;
right:-7px;
height:20px;
border-right:20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-56px;
width:26px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: transparent;
}
<div class="message-sent message-sent-last">
Hey there! What's up?
</div>
I would like to not repeat the background color of the page since the snippet will be used in several places with different background colors. I've tried with transparent and inherit but none worked out.
This is how the second snipped looks like:
I've tested in Chrome and FF under Ubuntu.
What do you think?
In your case, since it is fundamental for the creation of the bubble to assign the same color of the background to the div I would suggest to use a variable, so when the color of the body changes even the color of the div::after will change:
add at the top of your css file:
:root {
--main-bg-color: red;
}
in your body element:
body {background-color: var(--main-bg-color);}
and div:
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-40px;
width:10px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: var(--main-bg-color);
}
This allows you to change it on root and making the change effective on both elements.
Please note that it will not work on IE though.
I am now learning HTML and I have put a relative div in my code.
There are 2 more divs before that one but they don't collide, sadly the first two still take space above the relative one and I want it to be on top of the page.
My code :
.foo {
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
left:540px;
border:5px solid #fff;
top:-50px;
}
.lastpage {
position:relative;
text-align:left;
width:20%;
}
.index {
position:relative;
text-align:left;
width:20%;
}
body {
background-color:lightgray;
text-align:center;
align-content:center;
color: #990099;
font-family: 'Tahoma';
font-size: 15px;
}
<div class="foo">
<br><br>F O O - B A R
</div>
<div class="lastpage">
<form method=get action="http://www.boomy.web44.net/CURRY.html/">
<button type="submit">Last Page</button>(2/2)
</form>
</div>
<div class="index">
<form method=get action="http://www.boomy.web44.net//">
<button type="submit">Index</button>
</form>
</div>
I want the "Foo bar" div to go up and be on the same level as the two buttons
I changed your CSS code :
.foo
{
float:right;
margin-right: 540px;
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
border:5px solid #fff;
top:-50px;
}
.lastpage
{
position:relative;
text-align:left;
width:20%;
float:left;
}
.index
{
float:left;
position:relative;
text-align:left;
width:20%;
}
I added float:right and margin-right to your foo class and float:left to your lastpage and index class.
I think it should work for you !
Try adding the display: inline-block rule to make the divs appear on the same line, or float. By default, a div is block display and two divs won't come on the same line.
Another way of doing this is using the float: left property on the lastpage div to make it stay to the left and align it and the other div on the same line.
Does this solve your problem?
Here is what is happening:
CSS:
.speech-box {
height:76px;
width:220px;
padding:6px 10px;
background-image: linear-gradient(#4f4f4f,#000);
}
.speech-box:before {
content:'';
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right:5px solid #4f4f4f;
position:relative;
left:-15px;
top:-3px;
}
And my HTML:
<div class="speech-box">
<span class="speech"></span>
</div>
And here is a fiddle: http://jsfiddle.net/xqy4dLbc/
I'm guessing the problem is with my HTML?
You need to add
display:block;
or
display:inline-block;
to .speech-box:before :
DEMO
The default display property of pseudo-element is inline (see MDN) and you can't set height on inline elements. Therefore the height:0; you set doesn't apply.
Hi guys i would like the border to surround my whole <div id=wedding> but it wont wrap around the image and the text within the <div>. Please help my code is below:
HTML:
<div id="Weddings">
<img src="images/gallery/weddinggh.jpg">
<br>
<a href="gweddings">Click here to check out pictures of
<br> our past wedding cakes<a>
</div>
CSS:
#Weddings {
padding: 2px;
border: 1px solid;
}
#Weddings a:link {
text-decoration:none;
color:black;
font-size:16px;
font-family: "footer";
}
#Weddings img {
width:200px;
height:300px;
}
#Weddings {
padding: 2px;
border: 1px solid;
width:200px;
}
you just need to set a width to your div :)
Here's an example : http://jsfiddle.net/f4t2Z/
You need to define a border color
#Weddings {
padding: 2px;
border: 1px solid red;
}
or whatever.
Have you tried
#Weddings img {
width:200px;
height:300px;
display:block;
}
I have created a rounded rectangle in html5. Here is the code-
<div style="position:absolute; width:148px; height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;"> </div>
Now I want to change the background color on mouseover. Any help??
<div style="position:absolute; width:148px; height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;"> </div>
Change this code. Not a good practice to use inline style.
<div class="myDiv"> </div>
Create CSS class instead for inline styles.
.myDiv{position:absolute;width:148px;height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;}
.myDiv:hover{background-color:#FF0000; /* put your color here */ }
Check this Demo
<div class="divClass"> </div>
.divClass:hover{ background: red; }