I want this line to be placed in the middle under the title, but it doesn't work when I try text-align.
body {
background-color: #000;
color: #FFF;
font-family: 'Noto Sans KR', sans-serif;
}
.title{
position: relative;
top: 70px;
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
}
.title::after {
display: block;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
}
enter image description here
I'm sorry in advance because it's not the time for me to click on the recommendation yet. Thank you for all your answers.
Will this do?
body {
background-color: #000;
}
section {
position:relative;
}
.title{
color: #fff;
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
border-bottom-width: 50%;
}
.title::after {
position:absolute;
display: block;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
left: 25%;
}
<body>
<section>
<div class="title">What I Play</title>
</section>
</body>
text-align: center aligns the inline content of that element, not the element itself.
you probably want to use margin: 0 auto; for .title::after.
I found a solution to your issue. you have to change small changes in your CSS and also you have to add some css in .title-box class.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background-color: #000;
color: #FFF;
font-family: 'Noto Sans KR', sans-serif;
}
.title-box{
text-align:center;
}
.title{
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
display: inline-flex;
flex-direction: column;
}
.title::after {
display: flex;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 title-box">
<h1 class="title">What I Play</h1>
</div>
</div>
</div>
</body>
</html>
Related
I want to add a border in the button before the icon
what I m using is that
my code is this
.button {
background-color: #4CAF50;
border: none;
color: white;
Width: 660px;
Height:55px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background: #333333;
position: absolute;
left: 16.76%;
right: 16.68%;
top: 27.29%;
bottom: 30.89%;
font-family: DIN Pro;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: #F6F6F6;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
Contact<span style="border:solid 1px white"><i class="fa fa-home;"></span></i>
</body>
</html>
but it is not setting up like that. I want to set it up like the same is in the picture
Here is the code you need for the button. To answer your question about the border on the icon, I added a pseudo element (:after) to the button which contains the arrow icon. Then it was just a matter of applying border-left to it.
/* button styles */
.button {
background-color: slategray;
font-family: sans-serif;
border: none;
outline: none;
min-height: 42px;
min-width: 180px;
max-width: 100%;
font-weight: bold;
text-decoration: none;
cursor: pointer;
font-size: 18px;
text-align: center;
text-transform: uppercase;
color: #F6F6F6;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 8px 52px 8px 10px;
position: relative;
}
.button:after {
content: "\f061";
display: flex;
position: absolute;
font-family: "Font Awesome 5 Free", sans-serif;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
width: 42px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-left: 1px solid #8192a2;
}
.button:hover {
background-color: #8192a2;
}
.button:hover:after {
border-left-color: #95a7b8;
}
/* example styles */
body,
html {
padding: 0;
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: coral;
}
* {
box-sizing: border-box;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
Contact
I have a site and it has 2 sections. the left section is a navigation bar with menus below.
The section next to it is the main section or where the website content must be placed. My problem is the right section is positioned a few pixels from the header. How can i fix this? I provided some image to let you see how the website should look like.
/*WRITTEN USING SASS*/
#side-menu{
margin-top: 25px;
.side-menu-bg {
width: max-content;
h3 {
position: absolute;
color: white;
padding: 0px 18px;
font-size: 27px;
}
img {
display: -webkit-box;
}
}
.side-nav-bar {
width: 210px;
position: unset;
margin-top: -3px;
display: inline-flex;
z-index: 1;
flex-direction: column;
overflow-x: hidden;
background-color: #ffffff;
a {
display: inherit;
color: #707070;
text-decoration: none;
font-size: 15px;
padding: 10px 18px;
position: relative;
border-bottom: 1px solid #e8e8e8;
}
.active-link{
color: #a40022;
border-bottom: 2px solid #8a001c;
}
}
.right-contents {
float: right;
.title h3 {
font-size: 38px;
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
}
}
<div class="wrapper"> <!--to make contents center-->
<div id="side-menu">
<div class="side-menu-bg">
<h3>KU 스타트업</h3>
<img src="images/bg/bg_03.png">
</div>
<div class="side-nav-bar">
인사말
창업 비전
창업 프로세스
창업부서소개
찾아오시는 길
</div>
<div class="right-contents">
<div class="title">
<h3>인사말</h3>
<div class="body-content">
sample text
</div>
</div>
</div>
</div>
</div>
Add margin: 0 to your h3 tag.. h3 has margin-to and margin-bottom by default. thanks
.right-contents {
float: right;
.title h3 {
font-size: 38px;
margin: 0; /*add this*/
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
<style>
/*WRITTEN USING SASS*/
#side-menu{
margin-top: 25px;
.side-menu-bg {
width: max-content;
h3 {
position: absolute;
color: white;
padding: 0px 18px;
font-size: 27px;
}
img {
display: -webkit-box;
}
}
.side-nav-bar {
width: 210px;
position: unset;
margin-top: -3px;
display: inline-flex;
z-index: 1;
flex-direction: column;
overflow-x: hidden;
background-color: #ffffff;
}
a {
display: inherit;
color: #707070;
text-decoration: none;
font-size: 15px;
padding: 10px 18px;
position: relative;
border-bottom: 1px solid #e8e8e8;
}
.active-link{
color: #a40022;
border-bottom: 2px solid #8a001c;
}
}
.right-contents {
width: 65%;
margin-top: -3px;
display: inline-flex;
.title h3 {
font-size: 38px;
}
.body-content {
background-color: #d3d3d3;
height: 1094px;
width: 738px;
}
</style>
I'm trying to position a circular instagram icon so it is always centered towards the bottom of a landing page. All my efforts so far such as using position:fixed; have resulted in the icon not remaining underneath the rest of my content when the screen size changes.
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS is like this:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
Any help would be greatly appreciated, thanks :)
Modified two places of your code.
1. .foot
left: 50% plus margin-left: - { width } / 2 can make footer align center no matter how the window changes.
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2. .fa
In your code, the Instagram icon is not aligning center inside the black circle, so I make some changes for it.
As the Instagram icon is square, you should not set the width 40px when it's font-size is 55px.
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
If you have more questions about my answer, feel free to contact me :)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
set the parent as
.intro {
width:100%;
height:100vh;
position:relative;
}
and the icon element as
.footer {
position:absolute;
bottom:0;
left:50%;
width:40px;
margin-left:-20px;
}
as an alternative:
.footer {
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
.footer > div {
display:inline-block;
}
this will do better as you can add other elements if you end up wanting to add other links
I want the div with class name user to be at the top of the page, rather than underneath the card div where it currently is.
I changed the display: to absolute and inline-block and that did not work either.
.card {
opacity: 0.8;
}
.card:hover{
opacity: 1;
}
.card {
height: 450px;
width: 320px;
box-shadow: 1px 1px 20px grey;
word-wrap: break-word;
background-color: #564f4c;
border-radius: 10px;
margin: 12px;
text-align: center;
display: inline-block;
}
img {
width: 100%;
height: 270px;
border-radius: 10px;
}
.info .name {
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
margin-top: 9px;
font-size: 35px;
color: white;
}
.answer, .reject {
text-align: center;
width: 47%;
height: 40px;
color: white;
line-height: 40px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
border-style: none;
}
.answer:hover, .reject:hover, .profile:hover {
box-shadow: 1px 2px 3px grey;
cursor: pointer;
}
.answer {
background-color: #3add0d;
display: inline-block;
}
.reject {
display: inline-block;
background-color: #ff2b2b;
}
.phone {
text-align: center;
width: 100%;
margin-top: 15px;
height: 40px;
display: inline-block;
}
.profile {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #dd520d;
color: white;
/*position: relative;*/
margin-top: 10px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
}
.user {
height: 100px;
width: 100px;
background-color: blueviolet;
display: inline-block;
}
<!DOCTYPE html>
<head>
<title>Card</title>
</head>
<body>
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
<div class="user">it should be at the top not here</div>
</body>
</html>
After setting up your code in jsFiddle now I see what you want.
Add float: left to .card and .user
Add a wrapper around the entire bit you have and add this class to it:
.clearfix::after {
content: "";
clear: both;
display: table;
}
So with those floats added to your CSS classes your HTML should look like this
<div class="clearfix">
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
<div class="user">it should be at the top not here</div>
</div>
<div>
<p>
I'm a new div
</p>
</div>
Anything inside the clearfix div will float, anything outside of it will work as a normal div.
See Fiddle: https://jsfiddle.net/323x9oxm/
Firstly move the <div class="user"> above the <div class="card"> in the HTML, and then remove the display: inline-block; from the .card CSS.
See updated code below:
.card {
opacity: 0.8;
}
.card:hover {
opacity: 1;
}
.card {
height: 450px;
width: 320px;
box-shadow: 1px 1px 20px grey;
word-wrap: break-word;
background-color: #564f4c;
border-radius: 10px;
margin: 12px;
text-align: center;
}
img {
width: 100%;
height: 270px;
border-radius: 10px;
}
.info .name {
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
margin-top: 9px;
font-size: 35px;
color: white;
}
.answer,
.reject {
text-align: center;
width: 47%;
height: 40px;
color: white;
line-height: 40px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
border-style: none;
}
.answer:hover,
.reject:hover,
.profile:hover {
box-shadow: 1px 2px 3px grey;
cursor: pointer;
}
.answer {
background-color: #3add0d;
display: inline-block;
}
.reject {
display: inline-block;
background-color: #ff2b2b;
}
.phone {
text-align: center;
width: 100%;
margin-top: 15px;
height: 40px;
display: inline-block;
}
.profile {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #dd520d;
color: white;
/* position: relative;*/
margin-top: 10px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
}
.user {
height: 100px;
width: 100px;
background-color: blueviolet;
display: inline-block;
}
<body>
<div class="user">Look, I'm at the top now.</div>
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
</body>
Let me know if you need any other help.
So I am styling this horizonal line with the idea of image and text in the middle and got stuck. How could I align the image on the left side of "TEXT" and not under it? Here's the link to demonstrate the current state:
http://codepen.io/anon/pen/MJWJad
Appreciate all the help.
.horizontal__rule--modified {
line-height: 1em;
position: relative;
border: 0;
color: #666666;
text-align: center;
height: 1.5em;
opacity: 0.7;
letter-spacing: 1px;
font-size: 16px;
&:before {
content: url(http://www.metalguitarist.org/forum/images/mgtwitter.png);
background: red;
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
}
&:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: red;
background-color: #fcfcfa;
}
}
<hr class="horizontal__rule--modified" data-content="TEXT">
Actually you don't need a <hr /> at all here. You can just use pseudo elements and make it possible:
* {
font-family: 'Segoe UI';
font-weight: normal;
}
h1 {
text-align: center;
}
h1 span {
background-color: #fff;
padding: 15px;
}
h1::after {
display: block;
content: "";
border: 1px solid #ccc;
margin-top: -0.5em;
}
<h1><span>Hello</span></h1>
If an image is needed for this like having a twitter icon, you can use: Source:
* {
font-family: 'Segoe UI';
font-weight: normal;
vertical-align: middle;
}
h1 {
text-align: center;
font-size: 14pt;
}
h1 span {
background-color: #fff;
padding: 15px;
}
h1::after {
display: block;
content: "";
border: 1px solid #ccc;
margin-top: -0.5em;
}
<h1>
<span>
<img src="http://www.metalguitarist.org/forum/images/mgtwitter.png" alt="" />
Hello
</span>
</h1>
Preview
Another solution apart from Praveen's is to use flex-box.
HTML
<div class="wrapper">
<div class="line"></div>
<div class="text">
Test
</div>
<div class="line"></div>
</div>
CSS
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.line {
height: 10px;
background: black;
width: 100%;
}
.text {
padding: 0 10px;
}
fiddle: https://jsfiddle.net/jdgqmmv5/