I need to add this image at the end of a line, in this way
Style:
h4 { border-bottom: 1px solid black; font-size: 1.6em;}
Code that I did:
<h4>Socializziamo <img src="flourish-decoration.png"
style="position:relative; display:inline-block; float:right;bottom:-7px;" />
</h4>
Is there a better way, because my solution sometimes does not works...
Riccardo
Here's an alternative to ggbhat's answer. The approach here is to apply relative positioning on the heading and absolute positioning on the nested image.
HTML
<h4>
Socializziamo <img src="http://i.stack.imgur.com/68LQd.png" />
</h4>
CSS
h4 {
border-bottom: 1px solid black;
font-size: 1.6em;
position: relative;
}
img {
position: absolute;
right: 0;
bottom: -1px;
}
Demo
http://jsfiddle.net/LqvTx/1/
Use :after psuedo element for adding background image .
h4
{
border-bottom:1px solid #000;
width:100px;
}
h4:after {
content:"";
background:url(http://i.stack.imgur.com/68LQd.png)no-repeat;
width: 30px;
height: 30px;
background-position:68% 25%;
position: absolute;
display: inline-block;
}
Demo:[http://jsfiddle.net/LqvTx/ ]
Related
I found this site for Bootstrap pretty scrollbars. I tried to apply it to my div but nothing happened :
<style>
#collapseVehicules {
height:250px !important;
}
</style>
<div class="collapse scrollbar-primary" id="collapseVehicules" style="padding-left: 15px;padding-right: 15px;overflow-y: scroll;">
<table id="list" class="table table-borderless table-striped table-sm" style="margin-bottom: 0px;width:100%;">
...
</table>
</div>
So what is wrong ?
You need to add the styles in your css. scrollbar-primary isn't a bootstrap css class style.
As shown on the page, they created the scrollbar-primary css class style.
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #fff;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
I want to have an image next to my header. But the thing is that I want this image fixed with position:relative.
Yet, when I fixed the image, it is making a big space between the image and my title.
<h1 id="htitre"><img src="title.png"/> title </h1>
CSS:
h1
{
color: rgb(114, 159, 207);
padding-bottom: 3px;
border-bottom: 5px solid rgb(114, 159, 207);
padding-left:0.3cm;
margin-left: 0.9cm;
}
#htitle img
{
position: relative;
top: 0.15cm;
right:1.5cm;
border: 1px
}
How could I prevent the image from moving my title ?
Do you want something like this? https://jsfiddle.net/o2mxesua/1/
If that's what you want, all you need to do is to replace your h1 by span because h1 takes the entire row width and then assign the font size and weight properties to your span class in whatever way you want.
Here is your updated code -
HTML
<div>
<img src="title.png"/>
<span id="htitle">
title
</span>
</div>
CSS
#htitle
{
color: rgb(114, 159, 207);
padding-bottom: 3px;
border-bottom: 5px solid rgb(114, 159, 207);
padding-left:0.3cm;
margin-left: 0.9cm;
font-size: 4em;
}
#htitle img
{
position: relative;
top: 0.15cm;
right:1.5cm;
border: 1px;
}
I want to create tooltip with vue's style binding. I am thinking to use attr() function from CSS which takes attribute value which is a reactive object dynamicColor. The code which I have now is:
<div class="test">
<span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.marker::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: attr(color) transparent transparent transparent;
}
</style>
But it does not work. I don't want to use bootstrap due to some reasons. I tried to look if I can find for pseudo selector in vue style binding but could not find much. Any ideas on how to achieve this? Thanks.
As suggested by #Stephan-v in comments, I added separate element for arrow. The final code looks like something below:
<div class="test">
<span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
<span class="marker" :style="{'background': dynamicColor}">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.markertip {
content: "";
position: absolute;
top: -45%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
}
</style>
Typically, to insert a Glyphicon inside a Bootstrap 3 app, it's as simple as:
<span class="glyphicon glyphicon-envelope"></span>
etc. In many apps, however, it is typical for Glyphicons to be "customized" so that they appear with numeric superscripts like so:
Above, this red/white "5" bubble might indicate that the user has 5 notifications. I'm wondering how this "numeric superscript" effect can be achieved in Bootstrap 3.
You mean something like this?
This is just some CSS basic styling, there is afaik no "standard" and certainly no special HTML tags nor "secret" bootstrap features that supports it. Below my suggestion - modify so it fit your expectations :
.rw-number-notification {
position: absolute;
top: -7px;
right: -6px;
padding: 3px 3px 2px 3px;
background-color: red;
color: white;
font-family: arial;
font-weight: bold;
font-size: 10px;
border-radius: 4px;
box-shadow: 1px 1px 1px silver;
}
markup :
<span class="glyphicon glyphicon-envelope">
<span class="rw-number-notification">7</span>
</span>
demo with some examples -> http://jsfiddle.net/rqfthhkx/
NB: Not completely related, but I do believe, though, that it is common practice to use the <i> tag when you are using glyphicons, fontawesome etc
<i class="glyphicon glyphicon-envelope"></i>
at least it renders as exactly the same -> http://jsfiddle.net/rqfthhkx/1/
Font Awesome
Example:
<i class="fa fa-envelope text-primary">
<span class="number-notification">7</span>
</i>
The .number-notification CSS is the same, except it seems impossible to adjust the position of the number container to fa-xx sizes and different font-sizes. The solution is to wrap the <i> element into <h> elements and specify the relative position in rem units :
.number-notification {
position: relative;
padding: 3px 3px 2px 3px;
background-color:red;
color:white;
font-family: arial;
font-weight:bold;
font-size: 10px;
border-radius: 4px;
box-shadow:1px 1px 1px silver;
}
.fa .number-notification {
top: -1rem;
right: 1rem;
}
h3 .fa .number-notification {
top: -1.2rem;
right: 1.2rem;
}
h2 .fa .number-notification {
top: -1.5rem;
right: 1.5rem;
}
h1 .fa .number-notification {
top: -2.2rem;
right: 1.8rem;
}
This should look more or less the same with different font sizes.
New fiddle -> http://jsfiddle.net/b86oj9gd/
Here is my code:
HTML:
<div class="main">
<img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>
CSS:
.main{
height:240px;
width: 240px;
background: #F00;
border: 1px solid #CCC;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.in {
width: 240px;
height: 240px;
}
Live example: Jsfiddle
As you see in the example, there is a little background color (red) around at the corners of the image.
How to remove these but keeping border-radius attribute?
Just remove the styles
background: #F00;
border: 1px solid #CCC;
from the class main.
http://jsfiddle.net/3Nzp3/3/
see this fiddle
Remove both line
background: #F00;
border: 0px solid #CCC;
just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output
like
.main{
height:240px;
width: 240px;
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
//you can use border: 0px;
}
just remove the code below from the main class
background: #F00;
border: 1px solid #CCC;
i think this will help you .