I have an oval that is positioned slightly lower on the right (Safari) than the left (Chrome) if you look carefully. Although this is quite minor, I would still like to know can this be fixed.
<body>
<div class="player">
<input type="button" id="specific" value="<?php echo $id; ?>"
onclick='window.open("<?php echo $specific; ?>")'>
//other stuff
.player
{
position: relative;
width: 600px;
padding: 30px 10px 10px 10px;
border-style: solid;
border-radius: 20px;
margin: auto;
text-align: center;
font-family: "Arial";
}
#specific
{
display: inline-block;
position: absolute;
top: -2px;
left: 50%;
transform:translate(-50%, -50%);
padding: 5px 15px;
cursor: pointer;
border: none;
border-radius: 20px;
text-align: center;
color: #fff;
font-size: 15;
}
Related
Problem:
Position absolute with parent align center is not working in IE, but working in Chrome/Safari.
Expected:
Should behave the same with IE 11 browser.
IE 11 screenshot
.selectContainer {
position: relative;
display: flex;
align-items: center;
}
.selectContainer .select {
border: 1px solid #8e99ab;
border-radius: 4px;
font-size: 1rem;
width: 100%;
background-color: #fff;
height: 50px;
padding: 12px 42px 12px 12px;
}
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
padding: 0 16px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="selectContainer">
<select name="" id="" class="select"></select>
<i class="fa fa-sort"></i>
</div>
You can use top:50%;transform:translateY(-50%); for .selectContainer i I tested it.
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
padding: 0 16px;
top: 50%;
transform: translateY(-50%);
}
You could add the CSS bottom: 16px; property to the .selectContainer i, like this:
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
bottom: 16px;
padding: 0 16px;
}
The sample output in IE11 browser:
I have a "small" issue on my website with Firefox. On Google Chrome and Safari it is working just fine.
What it should be (Chrome and Safari):
Issue on Firefox:
.headline {
line-height: 1.5em;
position: relative;
}
.headline:after {
content: ' ';
position: absolute;
display: block;
width: 230px;
margin: 5px 2%;
border: 2px solid #64c800;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
<h2><span class="headline">Contact</span></h2>
The expected result is that the green line should be below the header (in this case below "Contact".
Reproducible code:
Important forgotten note; I use Bootstrap 4 too.
<style>
#wrapper {
position: relative;
margin: 25px auto 5px auto;
max-width: 820px;
min-height: 600px;
padding: 1px 0px 30px 0px;
background-color: #ffffff;
color: #603813;
text-align: center;
}
.headline {
line-height: 1.5em;
position: relative;
}
.headline:after {
content: ' ';
position: absolute;
display: block;
width: 230px;
margin: 5px 2%;
border: 2px solid #64c800;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-12">
<h2><span class="headline">Contact</span></h2>
</div>
</div>
</div>
</div>
I think the problem is that you don't define a vertical position (top or bottom) for your line, so the browser kinda just does anything.
Try adding
.headline:after {
top: 100%;
}
JSFiddle: https://jsfiddle.net/0p7948Lx/2/
I can't reproduce your issue in Firefox 60.8 on Debian. However, here is a somewhat simplified approach that works without position, transform and border. I find it a little more elegant.
Maybe it fixes the issue as well?
h2 {
width: 230px;
text-align: center;
}
.headline {
line-height: 1.5em;
}
.headline:after {
content: '';
display: block;
width: 100%;
height: 8px;
margin-top: 1em;
background: #64c800;
border-radius: 4px;
}
<h2><span class="headline">Contact</span></h2>
I want to make a circle <div>, like this image:
I have tried this code.
.discussion:after {
content: '\2807';
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 100px;
color:white;
}
<div class="discussion"></div>
How can I do this correctly?
You could just use :after pseudo-element with content: '•••' and transform: rotate. Note that this is the bullet HTML special character •, or \u2022.
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '•••';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 15px;
letter-spacing: 4px;
margin-top: 2px;
}
<div></div>
Improving on Nenad Vracar's answer, here's one that doesn't use text (so it's font-independent) and everything is centered nicely:
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 2px;
margin-left: -1px;
margin-top: -1px;
background-color: white;
border-radius: 50%;
box-shadow: 0 0 0 2px white, 0 11px 0 2px white, 0 -11px 0 2px white;
}
<div></div>
Yet another answer, same as others except:
it uses the vertical ellipsis character (U+22EE)
text-align and line-height to center the content
does not use any pixel value
.discussion:after {
content: "\22EE";
/* box model */
display: inline-block;
width: 1em;
height: 1em;
/* decoration */
color: #FFFFFF;
background-color: #000000;
border-radius: 50%;
/* center align */
line-height: 1;
text-align: center;
}
<div class="discussion"></div>
<div class="discussion" style="font-size: 2em;"></div>
<div class="discussion" style="font-size: 3em;"></div>
<div class="discussion" style="font-size: 4em;"></div>
Note that U+2807 is actually a Braille pattern and the dots are not supposed to be centered.
Use this code.
.discussion {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
background: #2d3446;
}
.discussion:after {
content: '\22EE';
font-size: 1em;
font-weight: 800;
color: white;
position: absolute;
left: 7px;
top: 1px;
}
<div class="discussion"></div>
Hope this helps!
I hope this is what you wanted! Otherwise feel free to ask.
.discussion{
display: block; /* needed to make width and height work */
background: #2d3446;
width: 25px;
height: 25px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.discussion:after {
content: '\2807';
font-size: 1em;
color: white;
margin-left: 15%;
}
<div class="discussion"></div>
Using text dots
.discussion{
width:50px;
height:50px;
text-align:center;
background-color:black;
border: 2px solid red;
border-radius: 100%;
}
.discussion text{
writing-mode: tb-rl;
margin-top:0.4em;
margin-left:0.45em;
font-weight:bold;
font-size:2em;
color:white;
}
<div class="discussion"><text>...</text></div>
.discussion:after {
content: '\2807';
font-size: 1em;
display: inline-block;
text-align: center;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 50%;
color: white;
padding:3px;
}
<div class="discussion"></div>
I have deleted (i found how to do it) all my post, the following code works for 3 vertical dot into a black circle
.discussion:after{
display:inline-block;
content:'\22EE';
line-height:100%;
border-radius: 50%;
margin-left:10px;
/********/
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
color:white;
}
<div class="discussion"></div>
I basically want something like this:
The oval is a button called specific, its size depends on the text. The border belongs to a div called player. The button should always align to the center of the top border no matter what the sizes they are. Thanks.
#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
}
.player
{
width: 560px;
padding: 20px;
border-style: solid;
<?php echo $border.$border_color[0] ?>;
border-radius: 20px;
margin: 0;
text-align: center;
}
HTML code, if it is relevant:
<input type="button" id="specific" value="<?php echo $id; ?>" onclick='window.open("<?php echo $specific; ?>")'>
<div class="player">
<script type="text/javascript" src="<?php echo $url;?>"></script>
</div>
Put #specific inside the player div and position it absolutely.
Then it can be managed into place using position values and a transform.
body {
text-align: center;
}
#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
position: absolute;
top: 0;
left: 50%;
transform:translate(-50%, -50%);
background: lightblue;
border:inherit;
}
.player
{
width: 560px;
padding: 20px;
display: inline-block;
margin: 2em;
border-style: solid;
border-color:blue;
border-radius: 20px;
text-align: center;
position: relative;
}
<div class="player">
<div id="specific">Specific</div>
</div>
I would recommend to add position: relative to .player, and wrap your button with a div (let's call it .buttonWrap), which has the following css attached:
.buttonWrap {
position: absolute;
left: 0;
top: -20px; /* the number of pixels here should be calculated like (buttonHeight / 2) */
width: 100%;
text-align: center;
}
#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
}
.player
{
width: 560px;
padding: 20px;
margin: auto;
border-style: solid;
<?php echo $border.$border_color[0] ?>;
border-radius: 20px;
margin: 0;
text-align: center;
position: absolute;
}
.button{
width: 560px;
margin: auto;
text-align: center;
position: relative;
margin-bottom: -1em;
z-index: 10;
}
<div class="button">
<input type="button" id="specific" value="Play" onclick='window.open("<?php echo $specific; ?>")'>
</div>
<div class="player">
<script type="text/javascript" src="<?php echo $url;?>"></script>
</div>
here is the Demo
.container-lg {
border: 4px solid rgba(50, 150, 255, 1);
border-radius: 50px;
width: 400px;
height: 400px;
margin-top: 50px;
}
button.container-sm {
background-color: rgba(100, 175, 255, 1);
border: 2px solid rgba(50, 150, 255, 1);
border-radius: 40px;
width: 150px;
height: 40px;
display: block;
margin: auto;
margin-top: -22px;
}
<div class="container-lg">
<button class="container-sm"></button>
</div>
Hopefully an easy question.
I have a <p> which has some styling on it to make it look like a UK registration plate.
I want to overlay an input field so the user can type in a reg.
Here's my fiddle
I'm struggling to get the overlay even when changing elements to absolute.
HTML:
<div>
<p class="reg">007 ABC</p>
<input id="vehicleReg" type="text" placeholder="Enter Vehicle Registration" />
</div>
CSS:
.reg {
background-color: #ec0;
background: -webkit-linear-gradient(#ec0, #ca0);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.75);
font-family: number_plate;
display: inline-block;
/*padding: 0 50px 0 100px;*/
width: 220px;
position: relative;
font-size: 28px;
font-weight: bold;
line-height: 50px;
/*margin: 100px;*/
color: black;
/* text-indent: 10px;*/
}
.reg::after {
background-color: rgba(255,255,255,.25);
color: #ec0;
content: "\25CC";
font-family: sans-serif;
font-size: 32px;
left: 0;
height: 50%;
line-height: 70px;
width: 100%;
padding-left: 14px;
position: absolute;
}
.vehicleReg {
position: absolute;
right: 13%;
bottom: 17px;
width: 64%;
height: 31px;
background-color: transparent;
text-align:center;
}
Thanks
A bit slow but the following will keep your little euro image and put the input above your top fade:
html
<div class="reg"><input id="vehicleReg" type="text" placeholder="Reg No" /></div>
css
.reg {
background-color: #ec0;
background: -webkit-linear-gradient(#ec0, #ca0);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.75);
display: inline-block;
/*padding: 0 50px 0 100px;*/
width: 220px;
position: relative;
/*margin: 100px;*/
color: black;
/* text-indent: 10px;*/
text-align:center
}
.reg::after {
text-align:left;
background-color: rgba(255,255,255,.25);
color: #ec0;
content: "\25CC";
font-family: sans-serif;
font-size: 32px;
top:0;
left: 0;
height: 50%;
line-height: 70px;
width: 100%;
padding-left: 14px;
position: absolute;
}
#vehicleReg {
width: 70%;
margin:auto;
background-color: transparent;
border:0;
font-family: number_plate;
font-weight: bold;
line-height: 50px;
font-size: 28px;
text-transform:uppercase;
position:relative; z-index:2;
}
Example
Additionally, you could style the placeholder text.
placeholder {
font-family: number_plate;
font-weight: bold;
font-size: 28px;
text-transform:uppercase;
color:black;
text-align:center;
}
JSFiddle
If you are positioning the input absolutely, you'll need to make it relative to a container div, in this case.
For example:
<div class="container">
<p class="reg">007 ABC</p>
<input id="vehicleReg" type="text" placeholder="Enter Vehicle Registration" />
</div>
.container {
position: relative;
}
See this:
DEMO
Do you mean something like this?
http://jsfiddle.net/zZUDN/8/
<div class="reg">
<input id="vehicleReg" type="text" placeholder="Enter Vehicle Registration" />
</div>
.reg {
border:none;
background-color: #ec0;
background: -webkit-linear-gradient(#ec0, #ca0);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.75);
font-family: number_plate;
display: inline-block;
/*padding: 0 50px 0 100px;*/
width: 220px;
position: relative;
font-size: 28px;
font-weight: bold;
line-height: 50px;
/*margin: 100px;*/
color: black;
/* text-indent: 10px;*/
}
.reg::after {
background-color: rgba(255,255,255,.25);
color: #ec0;
content: "\25CC";
font-family: sans-serif;
font-size: 32px;
left: 0;
height: 50%;
line-height: 70px;
width: 100%;
padding-left: 14px;
position: absolute;
}
#vehicleReg {
width:100%;
line-height:45px;
font-size:28px;
border:none;
background-color: transparent;
text-align:center;
}
Slightly unrelated but if you are after the user to type in a registration plate number look into using the input attribute pattern and give it a max length of 8 characters.
<input type="text" pattern="[A-Za-z0-9]{2}[0-9]{2}[ ][A-Za-z]{3}" maxlength="8" />
That enforces the pattern that a registration requires 4 alphanumeric characters a space and 3 characters.
(Part of HTML5 only works in latest browsers. IE are slow to catch up)
Change
.vehicleReg {
position: absolute;
right: 13%;
bottom: 17px;
width: 64%;
height: 31px;
background-color: transparent;
text-align:center;
}
to
#vehicleReg {
position: absolute;
right: 13%;
bottom: 17px;
width: 64%;
height: 31px;
background-color: transparent;
text-align:center;
}
vehicleReg is the id of the input field, not the class.