I am doing a comment page, but right now I am having the issue that the aligment of the bubble speech gets misaligned.
Example
I suppose this ca be fixed with CSS, but not quite sure.
I have my demo here http://jsfiddle.net/bSaJc/
Thanks in advance
This is my css
.bubble-panel {
display: inline-block;
//border: 1px dotted #CCCCCC;
height: 250px;
position: relative;
margin: 20px;
}
.bubble
{
position: relative;
width: 535px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
}
.bubble p
{
margin: 10px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 14px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -14px;
bottom: -31px;
left: 20%;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 39px 22px 0;
border-color: #46A5E4 transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -22px;
bottom: -48px;
left: 20%;
}
.caption {
//border: 1px solid red;
width: 20em;
font-size: 14px;
line-height: 1.5;
position: absolute;
bottom: 15px;
right: 50px;
}
.caption h1, .caption h2, .caption h3 {
font-size: 1.00em;
text-align: left;
margin: 0;
}
See this DEMO
I added vertical-align: middle;
.bubble {
position: relative;
width: 535px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
vertical-align: middle; /* ADD THIS LINE */
}
Is this what you you want?
http://jsfiddle.net/cfknoop/bSaJc/1/
vertical-align:top;
Add float:left to .bubble-panel
.bubble-panel {
display: inline-block;
float: left;
height: 250px;
position: relative;
margin: 20px;
}
DEMO
Related
I tried to change the color of my website. For example I changed "background-color: #3695F6;" to "background-color: #fff;". but my website background doesn't change. I tried to find a missing
semicolon but I didn't find any. I also tried to delete parts of the Css/Html code which I didn't fully understand but that changed nothing. After all that failed I tried to change a margin on the website from 40px to 100px and nothing changed. I think my Css isn't properly connected. can someone please help.
#charset "utf-8";
body {
font: 0.9em Tahoma, Verdana, Arial;
line-height:172%;
background-color: #fff;
margin: 0px;
}
.center {
display: block;
margin-left: 0px;
margin-right: 0px;
}
#containercontainer {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}
/* bovenste kopje ========================================*/
h1.titel {
color: black;
font: Gill Sans, sans-serif;
font-size: 20px;
margin-bottom: -2px;
margin-top: 0px;
}
#titel {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
border-bottom: solid black 1px;
width: 5.5%;
left: 45%;
margin-top: -5px;
position: relative;
margin-bottom: 20px;
}
/* De Slideshow ========================================*/
.fling-minislide {
width:100%;
height:100%;
padding-bottom: 0%;
overflow:hidden;
position:relative;
}
.fling-minislide img{
position:absolute;
animation:fling-minislide 15s infinite;
opacity: 0;
size: 100% 100%;
}
#keyframes fling-minislide {33%{opacity:1;} 60%{opacity:0;}}
.fling-minislide img:nth-child(3){animation-delay:0s;}
.fling-minislide img:nth-child(2){animation-delay:5s;}
.fling-minislide img:nth-child(1){animation-delay:10s;}
#slideshow {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
float: center;
border: solid black 2px;
width: 55%;
margin-bottom: 20px;
height: 300px;
position: relative;
left: 21%;
}
/* Het nieuws blokje ========================================*/
img.nieuws {
margin-top: -20px;
height: 300px;
width: 400px;
position: relative;
border: solid black 2px;
margin-bottom: 20px;
}
p.nieuws {
float: right;
margin-top: -10px;
position: relative;
margin-bottom: 20px;
}
#nieuws {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
width: 78%;
height: 50px;
left: 10%;
position: relative;
margin-bottom: 20px;
}
/* Het vragen blokje ========================================*/
#vragen {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
width: 80%;
height: 1000px;
left: 10%;
position: relative;
margin-bottom: 20px;
top: 300px;
}
p.A{
margin-top: 10px;
font-size: 22px;
width: 250px;
margin-left: 20px;
font-weight: bold;
}
#pointer {
width: 20px;
height: 20px;
position: relative;
background: black;
margin-left: 30px;
}
#pointer:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid white;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid black;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
p.vragentop1 {
margin-left: 80px;
margin-top: -25px;
text-decoration: underline;
width: 600px;
}
p.vragentext1 {
margin-left: 80px;
margin-top: -10px;
position: relative;
margin-bottom: 50px;
width: 600px;
}
/* hoveren over plaatje in directie//////////////////////////////////////////////////////////////////////*/
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 30%;
margin-bottom: 16px;
margin-left: 10px;
margin-top: 20px;
padding: 0 8px;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.columnL {
float: left;
width: 30%;
margin-left: 30px;
margin-bottom: 16px;
padding: 0 8px;
margin-top: 20px;
}
.card {
box-shadow: 6px 7px 6px 3px rgba(0,0,0,0.75);
border: solid black 2px;
padding-left: 10px;
}
/*//////////////////////////////////////////////////////////////////////////////////*/
#cbrlogo {
background: #fff;
width: 50px;
}
#container {
width: relative;
padding: relative;
background: #fff;
min-height: 500px;
}
#containercontainer2 {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}
.afbeelding_container {
position: relative;
float: left;
margin-left: 0px;
}
.afbeelding_container .tekst_container {
position: relative;
top: 25px;
left: 50px;
color: #00f;
font-size: 36px;
}
.schoon {
clear: both;
}
#overzicht {
margin-left: 25px;
}
.links {
float: left;
width: 320px;
}
#rechts {
float: right;
}
#onder {
clear: both;
}
.breder {
width: 4000px;
}
ul {
padding-left: 35px;
padding-right: 35px;
list-style: none;
background: #00f;
}
hr {
margin: 0px 0;
height: 1px;
border: 1px solid #fff;
border-top: 10px solid #00f;
background-color: #fff;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: none;
}
a:active {
color: blue;
text-decoration: none;
}
.menu {
display: block;
margin: 0px;
padding:0px;
position: absolute;
width: 100%;
background-color: #3695F6;
}
ul.menu {
list-style-type: none;
}
img.menu{
border: solid black 2px;
}
.menu li {
float:left;
position:relative;
width: 200px;
text-align:center;
text-decoration: none;
margin: 0px;
padding: 0;
}
.menu li a {
display: block;
padding-bottom: 20px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
text-decoration: none;
position: relative;
z-index: 100;
}
.menu li a span{
display: block;
padding-top: 10px;
font-weight: 700;
font-size: 20px;
color: black;
font-size: 18px;
}
.menu li:hover span{
color: #FFFFFF;
}
th {
padding: 10px 30px 10px 30px;
}
td {
padding: 0 30px 0 30px;
}
td.muteren {
padding: 0 0 0 10px;
}
tbody:before {
line-height:1em;
display:block;
}
thead {
text-align: left;
}
Body
this problem could be the caching problem try clearing your cache if that doesn't work check how you are linking your css to your HTML file if it's correct you can do the last thing which is add !important to the end of the background color like the example below:
background-color:#fff !important;
I'm trying to get this layout.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/kCjW9"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
Here's the code I have. I can't seem to get z-index to work so that I could bring black border on top of the background.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/6a7Ev"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
.btn {
border-radius: 0px!important;
font-family: $font-roboto!important;
font-size: 1.125rem!important;
text-shadow: none!important;
box-shadow: none!important;
&.fountain-blue {
background-color: $color-fountain-blue;
color: #fff;
margin-left:5px;
margin-top: 5px;
margin-right: -10px;
}
}
.btn-border {
border: 2px solid #000;
display: inline-block;
height: 40px;
z-index: 9999!important;
}
<div class="btn-border mt-4">
learn more about us
</div>
There are a lot of ways to do this but simple method is to use pseudo-elements. check out the snippet.
CODEPEN (SASS version)
#import url("https://fonts.googleapis.com/css?family=Roboto");
.btn {
border-radius: 0px;
font-size: 1.125rem;
text-shadow: none;
box-shadow: none;
display: block;
width: calc(100% - 25px);
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.btn.fountain-blue {
background-color: #65becf;
color: #fff;
margin-left: 5px;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.btn-border {
display: inline-block;
height: 40px;
z-index: 9999;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn-border:after {
content: '';
border: 2px solid #000;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="btn-border mt-4">
READ MORE
</div>
You should do it something like this, but than with your own colors and sizes.
.btn {
display: inline-block;
border: 1px solid black;
position: relative;
padding: 10px 20px;
margin: 20px;
color: #fff;
}
.btn:before {
background-color: blue;
border-color: green;
border-style: solid;
border-width: 10px 5px 5px 10px;
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
top: -5px;
left: -5px;
content: "";
}
<a class="btn">Read more</a>
As a possible solution.
* {
box-sizing: border-box;
}
body {
margin: 2em;
}
.btn {
background-color: darkblue;
color: white;
border: .2em solid white;
height: 2.5em;
width: 7em;
position: relative;
cursor: pointer;
}
.btn:before {
content: " ";
width: 9em;
height: 4em;
background-color: lightblue;
position: absolute;
top: -1em;
left: -1em;
z-index: -1;
}
.btn:after {
content: " ";
position: absolute;
background-color: transparent;
border: thin solid black;
height: 2em;
width: 6.5em;
top: -.5em;
left: -.5em;
}
<button class="btn">Click me</button>
This question already has answers here:
How do I center an anchor element in CSS?
(14 answers)
Closed 5 years ago.
For some reason, this <a> tag won't align to the horizontal center. What needs to be done in order to fix this?
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Wrap it in a DIV tag that has text-align: center;:
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
.x {
text-align: center;
}
<div class="x">demo</div>
Used margin: 0 auto; for centering and changed a tag to display: block; Also added a width to it.
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
width: 50px;
display: block;
margin: 0 auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
You have to make a tag a block element.So rather than inline-block use display:block.And to center use margin:0 auto;
.button {
display: block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.myButton {
width: 150px;
margin: 10px auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
demo
The "a"-Element is contained in another Element. In the case of your example it is in the Body-Element. This Element need to have its elements centered, so you would need to set a rule like this:
body {
text-align: center;
}
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
text-align: center;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
body {
text-align: center;
}
demo
.button {
display: inline-block;
position: absolute;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: calc(50% - 88px);
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Just change yours .button class CSS to this one:
.button {
display: inline-block;
position: absolute;
width: 20px;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
It will surely work. Thanks.
Use transform to do the trick.
.button {
left: 50%;
transform: translateX(-50%);
}
.button {
left: 50%;
transform: translateX(-50%);
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none !important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
I am trying to emulate this nutrition label format in CSS, but I can't get the shapes right at all. The best I can come up with is fiddling with border-radius, but that gives me more of a pill shape, and still not way to get the black cut-out shape at the bottom. Has anyone replicated such a nutrition label in CSS? Would anyone be willing to try? Any help would be greatly appreciated.
Here is a link to what I have so far: jsfiddle.net/f5jczunf/
#block {
border-radius:50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color:#FFF;
text-align:center;
}
.number {
font-weight:bold;
font-size:18pt;
text-align:center;
}
<div id="block">
<span class="number">150</span>
<br/>Calories
</div>
Maybe this small example can help.
.label {
position: relative;
width: 100px;
height: 140px;
text-align: center;
border: 1px solid #000;
border-radius: 100px/50px;
overflow: hidden;
}
.title {
display: inline-block;
margin-top: 30px;
}
.bottom {
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 50px;
color: #fff;
line-height: 40px;
border-top: 1px solid #000;
border-radius: 100px/50px;
background-color: #000;
}
<div class="label">
<span class="title">Title</span>
<span class="bottom">Bottom</span>
</div>
https://jsfiddle.net/9xs2wcbL/1/
Here's my take on it. It does require some advanced, bleeding edge CSS, however.
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
body {
padding: 3em;
font-size: 16px;
font-family: 'Open Sans Condensed', sans-serif;
}
.label-list {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.label-list .label-item {
text-align: center;
border: 1px solid;
position: relative;
border-radius: 2em / 0.65em;
padding: 0.2em 0.25em 1.5em;
min-width: 3.5em;
overflow: hidden;
margin: 0.1em;
z-index: 1;
background: white;
color: black;
}
.label-list .label-item h1 {
font-size: 3em;
line-height: 1em;
font-weight: 900;
margin: 0;
}
.label-list .label-item h1.smaller {
font-size: 1.75em;
margin-top: 0.5em;
}
.label-list .label-item h1 small {
font-size: 0.4em;
text-transform: none;
}
.label-list .label-item small {
font-size: 1em;
line-height: 1em;
font-weight: 900;
text-transform: uppercase;
}
.label-list .label-item span {
position: absolute;
bottom: 0.5em;
left: 0;
right: 0;
color: white;
font-size: 0.8em;
line-height: 1em;
}
.label-list .label-item span:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: black;
z-index: -1;
border-radius: 40%;
transform-origin: center;
width: 100%;
height: 0;
padding-top: 100%;
margin: auto;
transform: rotate(45deg) translate(20%, 20%);
}
<div class="label-list">
<div class="label-item">
<h1>140</h1>
<small>Calories</small>
</div>
<div class="label-item">
<h1 class="smaller">1<small>g</small></h1>
<small>Sat Fat</small>
<span>5% DV</span>
</div>
</div>
I believe the only way to have this sort of shape in pure CSS is with a few overlapping shapes, something similar to the code below:
.wrapper {
position: relative;
height: 112px;
width: 80px;
overflow: hidden;
}
.rectangle,
.circle {
position: absolute;
box-sizing: border-box;
}
.rectangle {
height: 96px;
width: 80px;
top: 8px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.circle {
width: 200px;
height: 200px;
left: -60px;
border-radius: 200px;
border: 1px solid black;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class="wrapper">
<div class="circle top"></div>
<div class="rectangle"></div>
<div class="circle bottom"></div>
</div>
https://jsfiddle.net/dylanstark/01hck5dv/
here my approach for that. I'm using before and after pseudo-elements.
before contains black bg with border-radius and it is overflowing the main #block which has overflow: hidden;.
aftercontains text that is coming from data-text attribute of #block
#block {
border-radius: 50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color: #FFF;
text-align: center;
position: relative;
overflow: hidden;
}
#block:before {
display: block;
content: " ";
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 50px;
border-radius: 50%;
background: black;
z-index: 0;
}
#block:after {
display: block;
content: attr(data-label);
position: absolute;
bottom: 5px;
color: white;
text-align: center;
z-index: 1;
}
.number {
font-weight: bold;
font-size: 18pt;
text-align: center;
}
<div id="block" data-label="5% DY">
<span class="number">150</span>
<br/>Calories
</div>
I want to make a tool tip for drop down but am having problem in the arrow please can some one position it the way i want it thank you
Here is what i get
I want it to look like this
Here is my CSS code
<style>
#wrapper-err {
position: absolute;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
z-index: 2222;
width:210px;
height:90px;
margin-top:2em;
margin-left:2em;
}
.err-tip {
background-color: #D03B3E;
color:#fff;
padding:0.5em;
}
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 18px solid #D03B3E;
position: absolute;
top: -18px;
left: 50%;
margin-left: -4px;
display: block;
}
.err-tip div{
margin: 0px;
border: 0px none;
font: inherit;
vertical-align: baseline;
outline: medium none;
}
.err-close{
float: right;
position: absolute;
top: 1px;
right: 1px;
cursor: pointer;
border: 1px dotted;
margin: 0.2em;
}
.err-tip p{
margin-right: 0.4em;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
</style>
HTML
<div class="err-tip" id="wrapper-err">
<span class="err-close">X</span>
<p>hfdbmxvncbv jkjfvkbcjkjzcjxvbckjkjzckxvjbc.</p>
</div>
just change the arrow border like this:
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 18px solid #D03B3E; /* changed from top to bottom */
position: absolute;
top: -18px;
right: 25px; /* change the horizontal position */
margin-left: -4px;
display: block;
}
Here is a snippet:
#wrapper-err {
position: absolute;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
z-index: 2222;
width:210px;
height:90px;
margin-top:2em;
margin-left:2em;
}
.err-tip {
background-color: #D03B3E;
color:#fff;
padding:0.5em;
}
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 18px solid #D03B3E;
position: absolute;
top: -18px;
right: 25px;
margin-left: -4px;
display: block;
}
.err-tip div{
margin: 0px;
border: 0px none;
font: inherit;
vertical-align: baseline;
outline: medium none;
}
.err-close{
float: right;
position: absolute;
top: 1px;
right: 1px;
cursor: pointer;
border: 1px dotted;
margin: 0.2em;
}
.err-tip p{
margin-right: 0.4em;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
<div class="err-tip" id="wrapper-err">
<span class="err-close">X</span>
<p>the text.</p>
</div>