When adding a :before selector, in this scenario I am trying to insert a Phone Icon to appear above the .front-page-contact div. Ideally, so it would be centered above the text in the .front-page-contact div.
How could I go about positioning this selector to achieve the result mentioned above?
.front-page-contact .widget:nth-of-type(1) {
text-align: center;
}
.front-page-contact {
background-color: #00AFBE;
padding: 20px 0;
}
.front-page-contact h2 {
font-size: 26px;
color: #fff;
margin: 0;
position: relative;
}
.front-page-contact h2:before {
font-family: Ionicons;
content: "\f4b8";
font-size: 40px;
background-color: tomato;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 20px;
display: block;
position: relative;
line-height: 1em;
margin: 0 auto;
}
Screenshot:
Give h2 position: relative then the pseudo element will position itself absolutely to the h2 not to the page. Its hard to say more without seeing the markup.
EDIT:
Change it to:
.front-page-contact h2:before {
font-family: Ionicons;
content: "\f4b8";
font-size: 40px;
background-color: tomato;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 20px;
display: block;
position: absolute;
line-height: 1em;
left: calc(50% - 40px);
top: -60px;
}
Adjust left / top as necessary
Related
how to change the position of "h" which in "hello" and change its width using css and without modifying the div element,
I have tried the pseudo element first-letter, but it didn't work for me
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div>hello, this my code.</div>
The first-letter is working fine. There is also another method to place the first in the span tag and styling it.
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
text-align: center;
}
div span {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div><span>h</span>ello, this my code.</div>
Use float for this task:
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
float: left;
margin-left: 20px;
margin-right: -20px;
}
<div>hello, this my code.</div>
Hey unfortunately CSS cant select first letter by itself. You can use another div for example;
<h1><span>H</span>ello</h1>
h1 { font-size: 1.3rem;}
h1 span {font-size:1.5rem;}
of course you can address direct name or you can access to that span element in different ways. But dont forget span by itself doesn't change the document placing etc that's why we prefer using this element for actions like that.
I am working on a new font icon library, and trying to get a desired result that looks like below using only CSS. I can get the single color backgrounds working with css without any issues, but trying to find the best way to do the angled second background layer in a way that will keep ratio based on the font-size used.
Here is my current wip css.
.aw-#{$app_name}:before {
content: $app_code;
}
.aw-#{$app_name}-app:before {
content: $app_code;
position: relative;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
border-bottom-right-radius: 1.25rem;
position: relative;
}
.bg-app-black {
position: relative !important;
}
.bg-app-black:before {
position: absolute;
content: "";
display:block;
width: 5rem;
height: 5rem;
border-radius: 1.25rem;
background-color: #222;
display:inline-block;
background: -0.1rem -0.1rem 0 1.5rem #000;
transform: rotate(-20deg);
}
Here is the html:
<div class="bg-app-black"><i class="aw-actions-app bg-development-app"></i></div>
Here is the results I am getting, and it doesn't scale as the font size changes.
To do it, you need to know that em unit is equal to the computed value of the font-size property of the element on which it is used. And, by default, descendants inherit font-size.
b {
position: relative;
display:inline-block;
font-size: 3rem;
}
b:before {
content: 'N';
position: relative; z-index:1;
display: inline-flex;
font-size: .8em;
width: 1.25em;
height: 1.25em;
border-radius: .3125em .3125em .3125em 0;
margin: .33em 0 0 .33em;
color: #fff;
background: #db2828;
justify-content: center;
align-items: center;
}
b:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 1em;
height: 1em;
border-radius: .25em;
background: #222;
transform: rotateZ(-20deg);
transform-origin: 0 100%;
}
<b></b>
<b style="font-size:5em"></b>
<b style="font-size:24px"></b>
I am currently trying to center favicons in this circular background so it can change color on hover. I am struggling a little bit to center it, though. I tried text-align: center but that was no use. Not very up to speed with CSS. What should I be doing instead?
https://codepen.io/teecp/pen/gOYRwbO
One way to solve this problem is to set fixed height and width on the parent element. Then set the icon's dimensions the same with a line height that measures its height.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #7b68ee;
transition: 0.5s;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar a {
position: relative;
left: 20%;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
width: 20%;
color: #ffffff;
display: block;
margin-bottom: 10px;
/* Added the properties below */
height: 50px;
width: 50px;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
.sidebar .fas:hover {
background: #ffffff1a;
border-radius: 90px;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 4rem;
}
/* Added the block below */
.fa, .far, .fas {
font-family: "Font Awesome 5 Pro";
line-height: 50px!important;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<i class="fas fa-home"></i>
<i class="fas fa-chess-queen"></i>
<div id="main">
hello
</div>
Remove padding, add width, height and line-height.
.sidebar a {
position: relative;
left: 20%;
height: 50px;
width: 50px;
line-height: 55px;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
color: #ffffff;
display: block;
margin-bottom: 10px;
}
I want a heading, a logo and a button to all be in line where the heading is centered, the logo is offset to it's right and the button is small on the right hand side.
I can hack this together if I fix the margins but this is not scalable and therefore don't want it as a final solution. What's a better way to do this?
My code is below and I also have it posted here as well: http://codepen.io/blueduckyy/pen/RpKoMJ .
HTML:
<div class="top-bar username-heading">
<img src="http://www.wonko.info/ipt/xfiles/interfaces/target.bmp" alt="Missing">
<h1>blueduckyy</h1>
<a class="button user-edit-button" href="/users/edit">Edit</a>
</div>
CSS:
.username-heading img {
float: right;
width: 100px;
height: 100px;
margin-left:-250px;
margin-right:150px;
}
.username-heading h1 {
position: relative;
top: 18px;
left: 10px;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
float: right;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
You can place the items with 'position: absolute' inside the container:
.username-heading {
vertical-align: top;
position: static;
}
.username-heading img {
position: absolute;
right: 0;
width: 100px;
height: 100px;
}
.username-heading h1 {
position: absolute;
top: 18px;
margin: 0 auto;
width: 100%;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
display: inline-block;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
position: absolute;
right: 0;
top: 120px;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
}
Keep in mind that the '.username-heading' position must be other than 'static'.
Just use positioning,
position: relative;
top: 25px;
This is the only css youll need.... Here is the pen
.top-bar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: orangered;
}
img{
height: 40px;
border-radius: 50%;
}
I'm starting with HTML and CSS and i have written my first page for my friend. Problem is that my code seems to be pretty bad, cause when i try to change few things, whole page almost crashes.
map of my page:
http://i.stack.imgur.com/0U1lO.png
So here's the thing:
Logo + navigation menu
here's code:
#logo {
margin-left: 15%; }
nav {
float: left;
margin-left: 10%;
margin-top: 1%;
font-weight: bold;
vertical-align: central; }
a {
text-decoration: none; }
nav ul {
list-style-type: none; }
nav li {
float: left;
margin-right: 10px;
}
Slider is only thing made well i think, cause i made it margin-left and right on: auto;
Here starts the fun:
code of news:
.newsy {
font-weight: 900;
font-size: xx-large;
margin-left: 15%;
color: black; }
.image-box {
position: relative;
margin-left: 15%;
width: 640px;
height: 300px; }
.image-box span {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0, .5);
color: white;
padding: 15px;
}
.community-box {
margin-right: 15% ;
float: right;
}
.baner-box {
float: right;
width: 270px;
height: 500px;
margin-right: 15%; }
.baner-box baner {
margin: 40px;
}
.autor {
border: solid 0px white;
background-color: white;
margin-left: 15%;
padding: 10px;
padding-left: 20px;
width: 610px;
background-color: white;
position: relative;
font-weight: bolder;
font-size: 13px;
font-kerning: normal; }
.readmore {
position:absolute;
bottom: 0;
right: 0;
width: 90px;
padding: 10px;
padding-left: 20px;
background-color: rgba(0,0,0, .9);
color: white;
}
When i try to move them from center to a bit of left whole page is crashing.
Also my community boxes (facebook, YT and twitter) aren't too properly set.
Can anybody help me and say what mistakes I have made ? It's really important.
Greets.
P.S. tell me if you need whole code i can upload package of it.
this may be happen because the width and height's pixel is may be greater than your display's pixel so i suggest you to give it in %
like
.baner-box {
float: right;
width: 40%;
height: 50%;
margin-right: 15%; }
may be work for you