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;
}
Related
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 have an relative button
button {
width: 305.4px;
height: 60px;
background: #E43B40;
margin-top: 109.5px;
margin-left: auto;
margin-right: auto;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative
}
I am trying to center it in the middle of screen. But it is stuck on the same place , the margins does not affect it. Parent element of this button is div with styles as follows:
parent {
width: 100%;
height: 100%;
margin-top: 504px;
background-repeat: no-repeat;
background-color: #F8F8F8;
padding-bottom: 250px;
overflow: auto;
display: block;
}
What could possibly cause this? Demo is here
html,
body {
height: 100%;
}
body {
margin: 0;
}
.button {
width: 305.4px;
height: 60px;
background: #E43B40;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.parent{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-color: #F8F8F8;
text-align: center;
}
<div class="parent">
<button class="button" type="button">Button</button>
</div>
button {
width: 305.4px;
height: 60px;
background: #E43B40;
margin-top: 109.5px;
margin-left: auto;
margin-right: auto;
display: inline-block;
cursor: pointer;
border: 0px;
outline: none;
font-family: Roboto Bold;
font-size: 16px;
color: #FFFFFF;
position: relative;
display:inline-block;
float:none;
}
parent{
width: 100%;
height: 100%;
margin-top: 504px;
background-repeat: no-repeat;
background-color: #F8F8F8;
padding-bottom: 250px;
overflow: auto;
display: block;
text-align:center;
}
i have updated both classes. apply it in your css.
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
I am having the hardest time here...I have searched for a while now and can't quite figure out how to properly get my text to properly re-size in my parent container.
Here is the code:
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
font-size: 100%;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
.heart_button:hover,
.heart_button:active,
.heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 50px auto;
position: relative;
max-width: 90%;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
max-width: 90%;
word-wrap: break-word;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 3.7em;
font-family: Montserrat;
font-weight: 700;
line-height: 1.3;
text-align: left;
width: 100%;
word-wrap: break-word;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1em;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 1em;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
nav {
position: absolute;
left: 35px;
bottom: 28px;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
#media screen and (max-width: 649px) {
.box {
width: 450px;
height: 350px;
max-width: 90%;
}
h1 {
font-size: 2em;
word-wrap: break-word;
}
.text_container {
width: 280px;
height: 236.6px;
max-width: 90%;
}
}
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
<nav>
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-left_moebxn.png">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-right_oilpij.png">
</nav>
</div>
</body>
So again, my thought was that I could have the .box class be a parent container and then the .text_container that would be nested could 're-size the text in a responsive manner in smaller viewports. But it's not...and my hair is going grey.
Errggghhhh...
child with the position absolute can't change the size or its parent or vice versa. Alternatively you can use the float property and set it to "right". Also, you might want to use % instead of pixels if you're aiming for a responsive design.
I guess what you need is http://freqdec.github.io/slabText/
font-size cannot do resize accroding to the windows's width, unless you define different font-size accroding to the width with Media Queries
Bellow is my css i'm using. The div with the largebutton class on it works with the exception of the hover. I would like it to change it's background color, but am not sure why its not working. Any ideas?
edit - I'm working in FF at the moment. I'm not looking for support in IE6, possibly not IE7 either.
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .largebutton:hover
{
background-color: #9999FF;
}
edit - Full files
HTML
<html>
<head>
<link rel="StyleSheet" href="css/LCARS.css" type="text/css" media="screen">
</head>
<body>
<div class="top">
<div class="content">
</div>
<div class="leftbuttonbox">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
</div>
<div class="bottombar">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
<div class="label">
This is a label, it grows as large as it needs to
</div>
</div>
<div class="cap">
<div class="capinner">
</div>
</div>
</div>
</body>
</html>
CSS
#font-face {
font-family: "LCARS";
src: url('../FONT/lcars.ttf');
}
body
{
font-family: "LCARS";
position: relative;
background-color: black;
padding: 0px;
margin: 0px;
}
.top
{
position: relative;
height: 220px;
min-width: 100px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: #6666FF;
-moz-border-radius-bottomleft: 50px;
}
.top .content
{
position: absolute;
top: 0px;
right: 0px;
left: 100px;
bottom: 25px;
background-color: black;
-moz-border-radius-bottomleft: 25px;
}
.top .leftbuttonbox
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
bottom: 60px;
background-color: black;
overflow: hidden;
}
/*
* the button is 1/2 the size of the large button
* the button box can hold 4 buttons or 2 large
* buttons or any combination of equal size
*/
.top .leftbuttonbox .button
{
position: relative;
height: 35px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 53px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .button:hover
{
background-color: #9999FF;
}
.top .leftbuttonbox .largebutton
{
position: relative;
height: 75px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 133px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar
{
position: absolute;
bottom: 0px;
height: 25px;
left: 200px;
padding-right: 5px;
background-color: black;
overflow: hidden;
}
.top .bottombar .button
{
position: relative;
float: left;
height: 100%;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .button:hover
{
background-color: #9999FF;
}
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top:hover .bottombar:hover .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar .label
{
position: relative;
float: left;
height: 100%;
min-width: 50px;
font-size: 22px;
letter-spacing: 1px;
font-variant: small-caps;
padding-left: 5px;
padding-right: 5px;
background-color: #CC99CC;
margin-left: 5px;
cursor: default;
}
.top .cap
{
position: absolute;
height: 25px;
width: 20px;
right: 0px;
bottom: 0px;
padding-left: 5px;
padding-right: 5px;
background-color: black;
cursor: default;
}
.top .cap .capinner
{
position: relative;
height: 100%;
width: 100%;
background-color: #6666FF;
cursor: default;
-moz-border-radius-topright: 50%;
-moz-border-radius-bottomright: 50%;
}
div.top div.bottombar div.largebutton:hover
{
background-color: #9999FF;
}
I think it's a bug in Firefox. Sometimes, when you add CSS for nested classes without specifying what elements these are applied to, the browser goes crazy. Your code works OK in other browsers, so technically it's not your fault, but FF's ;)
I suggest this solution:
.top .largebutton:hover
{
background-color: #9999FF; /* make this whatever color it was before */
}
This worked for me when I tried it with your full code.
Hope it works for you :)
Amit
The key concept of styling a link stands toward following steps:
You have to declare styles of 4 different condition which are a:link , a:visited , a:hover , a:active .
You have to be careful about the order. Because it matters. link > visited > hover > active. (especially to have :hover and :visited work...)
Eventhough you don't need styling one or more of conditions, nevertheless, style them all.
If you pay attention to these, you may have perfectly styled links.
I hope it helps.