I have a style that includes both a background and text. I want to align the text in the exact middle of the background.
Currently there is more space below the text than above.
How would I do that?
Check out my jsfiddle: http://jsfiddle.net/vc256tgL/10/
Here's my code:
<p class="form-title white">
Download White Paper</p>
Here's my css:
.form-title {
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
.form-title {
vertical-align: middle;
height: 55px;
margin: 0 0 0 0;
background-image: url('http://www.hapadesign.com/assets/img/bkgd_form_top.png');
background-repeat: no-repeat;
}
.white { color: #ffffff !important;}
add these lines to form-title class please
line-height:40px;
text-align:center;
background-position:center;
Demo
UPDATE 1 :
Updated Demo
If you want a little bit more flexibility, you can emulate that style using just CSS:
CSS
.tooltip {
position: relative;
display: inline-block;
padding: 10px 25px;
color: #fff;
background: blue;
}
.tooltip:after {
content: '';
position: absolute;
top: 100%;
right: 0;
left: 0;
width: 0;
height: 0;
margin: 0 auto;
border-width: 10px;
border-style: solid;
border-color: blue transparent transparent;
}
HTML
<p class="tooltip">Here's Some Text</p>
The tooltip arrow is created using a border on an element with no height or width, so it makes the angle you're looking for.
Example: http://codepen.io/a_double/pen/XJjKRg
Related
I'm trying to use CSS and HTML to create a text underline that's curved. The curve in particular has been referred to as a "swoosh" in the design brief I was given, it needs to fall short of the first and last letter (i.e. to underline "help you", it would start at "e" and end at "o" - this part I figure is easy, applying the style to a span tag without the first and last letter), and has to have rounded ends. The swoosh is also not even.
Here's an example:
I'm not super crash hot with CSS, but I know I'm constrained to CSS and HTML in this case - no HTML5 or using javascript to get it done.
So far, I've only managed to come up with this:
.swoosh1 {
width: 500px;
height: 100px;
border: solid 5px #cb1829;
border-color: #cb1829 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
Which looks like this (don't worry about the font): :(
Does anyone have any pointers? Done it before?
You can use :after pseudo-element to hold your underline:
.underlined {
position: relative;
margin-right: 1rem;
}
.underlined:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
height: 7px;
width: 100%;
border: solid 2px #cb1829;
border-color: #cb1829 transparent transparent transparent;
border-radius: 50%;
}
.small {
font-size: 60%;
}
.big {
font-size: 200%;
}
<span class="underlined">Test</span>
<span class="underlined small">Test</span>
<span class="underlined big">Test</span>
Use :after and then use border and radius and position it
Learn about pseudo:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
.text:after{
content: "";
position: absolute;
height: 15px;
width: 70px;
left: 5px;
top: 37px;
border-top: 2px solid red;
border-radius: 50%;
}
.text{
font-family: "Comic Sans MS", cursive, sans-serif;
color:red;
}
<p class="text">Your local</p>
make sure to use : display: inline-block !important; on underlined class to be responsive.
Without : display: inline-block !important; on underlined class, it will as below on device.
.underlined {
position: relative;
display: inline-block !important;
}
.underlined::before {
content: "";
position: absolute;
bottom: -12px;
left: 0;
height: 7px;
width: 100% !important;
border: solid 8px yellow;
border-color: yellow transparent transparent transparent;
border-radius: 50%;
}
.big {
font-size: 50px;
}
<h1 class="big "> You're connected. Now, <span class="underlined "> automate!</span> </h1>
I'm trying to create a responsive horizontal line with arrows on either end and text in the middle. I found ways to create the line with the text in the middle using before and after, but I'm stumped as to how to incorporate the arrows on either end. Ideally I would like to use a font icon, but am willing to use a generic html arrow if necessary.
This way you can achieve it:
Have the image as background.
Center align the text.
Give the text some background colour, matching the parent background colour.
Snippet
h1 {
font-size: 15pt;
font-weight: normal;
text-align: center;
background: url("http://www.signsbypost.com/sites/default/files/irun/uc_product/images/SELF-ADHESIVE-VINYL-STICK-ON-ARROW-DOUBLE-HEAD-5271.jpg") center center no-repeat;
background-size: contain;
}
h1 span {
display: inline-block;
padding: 5px;
background-color: #fff;
}
<h1><span>Hello</span></h1>
Preview
Only using CSS without images.
.line {
margin-top:8px;
width:10%;
background:blue;
height:3px;
float:left;
position:relative;
}
.arrowed .text{
padding: 0 10px 0 10px;
}
.arrowed span{
float:left;
display:block;
}
.line.first:before {
content: '';
position: absolute;
right: 100%;
top: -3px;
display:inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid blue;
}
.line.second:after{
content: '';
position: absolute;
left: 100%;
top: -3px;
display:inline-block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid blue;
}
<p class="arrowed">
<span class="line first"></span>
<span class="text">Continuous Improvement</span>
<span class="line second"></span>
</p>
I'm trying to align a button so that it stays in the center of my menu bar. The jsfiddle will show you what I mean.
this does not seem to work:
vertical-align: middle;
Here is the code: jsfiddle!
Unfortunately, vertical aligning is one of the tougher things to do in HTML/CSS, depending on the situation.
However, if you not want to use absolute heights and must have it vertically centered, you can always changed the display to table, instead of block: display: table;
I edited your original jsfiddle for a working example.
I added /* Comments */ where I either added or changed CSS.
save yourself some time and try to use bootstrap.
here is the css you can use :
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
but you can find a complete detailed solutions if you take a little time and go to this link :
https://css-tricks.com/centering-css-complete-guide/
Add below to your handle class
https://jsfiddle.net/420qk42v/2/
text-align:center;
.handle {
width: 100%;
background-color: #ffe2e2;
font-family: "century gothic";
opacity: 0.9;
box-sizing: border-box;
padding: 10px 5px;
cursor: pointer;
display: block;
text-align: center; /* this is the change */
}
Is that what you meant?
I did a test with the vertical align and it works if you remove the absolute positioning on the menu button.
I also made a new div around the text "menu" and then set that to position absolute while setting the handle to align the text to the right - the button will only move the right.
HTML
</br>
</br>
</br>
<nav>
<div>
<div class="handle">
<!--<div class="heading">MENU</div>-->
<!-- Menu button if on mobile device -->
<a class="menu">
<span class="line"></span>
</a>
</div>
</div>
</nav>
CSS
.handle {
width: 100%;
background-color: #ffe2e2;
font-family: "century gothic";
opacity: 0.9;
box-sizing: border-box;
padding: 10px 10px;
cursor: pointer;
display: block;
text-align: right;
}
/*added class for the menu - the heading text*/
.heading {
/*This is commented out in the markup but is to keep the menu heading on the right*/
position: absolute;
}
.menu {
border-radius: 3px;
border: 1px solid #ccc;
color: #5f5f5f;
font-weight: bold;
display: inline-block;
width: 1.9em;
vertical-align: middle;
height: 1.75em;
padding: 2px 0 0 0;
box-sizing: border-box;
}
.menu:hover {
/* background-image: linear-gradient(#e63d44,#c11a22);*/
/*box-shadow: 0 1px 3px 0 rgba(0,0,0,0.22);*/
}
.menu .line {
background: rgb(184,184,184);
border-radius: 2px;
box-shadow: 0 5px 0 0 rgb(184, 184, 184), 0 -5px 0 0 rgb(184, 184, 184);
display: block;
margin: 10px auto 0 auto;
height: 3px;
width: 16px;
content: " ";
overflow: visible;
}
.menu:hover .line {
background: rgb(255,255,255);
box-shadow: 0 5px 0 0 rgb(255,255,255), 0 -5px 0 0 rgb(255,255,255);
}
Js fiddle to test - https://jsfiddle.net/ToreanJoel/b7mgaasj/
I have following html block
<div class=""header>
<i class="icon-star"></i>
<h1>some text goes here</h1>
</div>
and these css styles
h1 {
display: inline-block;
}
i {
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent red;
}
and also i am using fontawesome icon fonts. What i am trying to achieve is this
This is what i have tried jsfiddle . i completely failed to do this. Could someone please help me?
you have used h1 in your html and h2 in your css!
this may help
h1 {
margin: -130px 0 0 200px;
}
i {
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent red;
}
fiddle
This JFiddle might get you a little closer. Please note that this requires your triangle to have a fixed height, so I could use a line-height:
#text {
float: right;
line-height: 200px;
vertical-align: middle;
margin-right: 150px;
font-weight: bold;
font-size: 20px;
Do you want to create the star in the triangle using CSS as well?
LIke this
give line-height or position:absolute;
DEMO
CSS
h1 {
display: inline-block;
position:absolute;
line-height:150px;
}
What do you guys think of this solution? http://jsfiddle.net/XrAaP/
Here's the HTML. (Proper HTML. Unlike using the italic tag for other things...)
<header>
<div class="triangle"></div>
<div class="foreground">
<h1>Some text goes here</h1>
<p>*</p>
</div>
</header>
And here's the CSS.
.triangle{
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent black;
display: inline-block;
vertical-align: top;
}
.foreground{
display: inline-block;
vertical-align: top;
}
h1{
margin-left: -128px;
}
p{
color: #fff;
font-size: 8em;
margin: 0 0 0 -178px;
}
EDIT:
I was able to achieve this with css Pseudo-elements
From MDN
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
.header {
position: relative;
}
h1 {
margin: -130px 0 0 200px;
}
i {
color: red;
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent black;
}
i:before {
font-family: 'FontAwesome';
content: "\F005";
font-size: 64px;
position: absolute;
top: 100px;
left: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="" header>
<i></i>
<h1>some text goes here</h1>
</div>
jsfiddle
Example: http://jsfiddle.net/nDWRm/4/
I want to make a plus and minus button using css or text or svg.
I tried this with the css and using textual + and - signs, but found those never line up. The problem is I can get it to look reasonably good on 100% zoom but when the zoom changes the left and top values also need to change to get the divs to center again. I haven't tried svg yet. I was just wondering why this doesn't seem possible.
css
#container{
height: 1.5em;
width: 1.5em;
border-radius: 5px;
border: 0.1em solid black;
cursor: pointer;
}
.vert{
top: 0.25em;
left: 0.65em;
position:absolute;
width: 0.3em;
height: 1.1em;
background-color: #424A49;
display: block;
}
.horz{
top: 0.65em;
left: 0.25em;
position:absolute;
width: 1.1em;
height: 0.3em;
background-color: #424A49;
display: block;
}
html
<div id="container">
<div class="vert"></div>
<div class="horz"></div>
</div>
Using a monotype font I made this fiddle:
http://jsfiddle.net/nDWRm/17/
if you change the font-size of #container2 to for example 5em you'll see it not render correctly. And on a aesthetic note the + sign has rounded corners and the - doesn't, which is not very pleasing :P.
this fiddle shows the problem with a font very clearly: http://jsfiddle.net/nDWRm/25/
You can't just use random EM values. You have to calculate them on order to be translated to a round pixel value by the browser:
http://jsfiddle.net/meo/p7WMW/
(of course you can to it without scss, just by using http://pxtoem.com/ for example)
On js fiddle the base font size is 16px. So you need that in order to calculate your EM values.
scss
$base-font-size: 16px;
#function px2em($px, $contextPXSize : $base-font-size ){
#return ( $px / $contextPXSize ) * 1em;
}
a {
position: relative;
display: block;
margin: 2em;
width: px2em(40px); height: px2em(40px);
background: rgba(0,0,0,.1);
outline: 1px solid #000;
&:after, &:before {
content: "";
position: absolute;
background: black;
left: 50%; top: 50%;
}
&:after {
height: px2em(30px); width: px2em(4px);
margin: px2em(-15px) 0 0 px2em(-2px);
}
&:before {
height: px2em(4px); width: px2em(30px);
margin: px2em(-2px) 0 0 px2em(-15px);
}
&:hover:after {
display: none;
}
}
what would result in:
css
a{
position:relative;
display:block;
margin:2em;
width:2.5em; height:2.5em;
background:rgba(0, 0, 0, .1);
outline:1px solid #000
}
a:after,a:before{
content:"";
position:absolute;
background:#000;
left:50%; top:50%
}
a:after{
height:1.875em;
width:.25em;
margin:-.938em 0 0 -.125em
}
a:before{
height:.25em;
width:1.875em;
margin:-.125em 0 0 -.938em
}
a:hover:after{
display:none
}
You can use a Monotype font like Courier and a display switch in jQuery to get the effect you're after. Also using line height and text-align: center; on the text to get this to work in mulitple zooms. The inner divs use 100% height and width so will always fill the container. No positions are needed, and you can increase the font size to make the symbols bigger :)
CSS:
#container{
height: 1.5em;
width: 1.5em;
border-radius: 5px;
border: 0.1em solid black;
cursor: pointer;
font-family: Courier;
}
.vert,
.horz{
margin: 0 auto;
width: 100%;
height: 100%;
color: #424A49;
text-align: center;
line-height: 1.5em;
}
.vert
{
display: none;
}
http://jsfiddle.net/Kyle_Sevenoaks/nDWRm/13/