Here I'm creating a button but for some odd reason the text is a little off and isn't centered even though I have used display: block; and text-align: center; inside my css file.
Line 30 is where my button starts here is my html and custom css code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<title>Proto X Media - Home</title>
</head>
<body>
<div class="bg1">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="lgsize" src="logo.gif" alt="Logo">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="pushdown">
<div class="col-md-6 col-md-offset-3">
<span class="text-center title">Proto X Media</span>
<p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
<div class="buttonpad">
<div class="button">
<span>Explore</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And here is my css on line 39 is where the code for my button is
.title {
font-family: 'Bree Serif', serif;
font-weight: 800;
font-size: 500%;
color: 373d44#;
display: block;
text-align: center;
}
.bg1 {
background-image: url("bg2.jpg");
background-size: cover;
}
.lgsize {
width: 120px;
height: 110px;
}
.pushdown {
padding-top: 100px;
padding-bottom: 250px;
}
.menu {
font-size: 100%
font-family: 'Bree Serif', serif;
}
a {
color:inherit;
text-decoration: none;
}
a:hover {
background-color: transparent;
text-decoration: none;
}
.subtext {
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 18px;
display: block;
}
.button {
width: 82.61px;
height: 37.65px;
box-sizing: border-box;
background-color: white;
font-weight: 700px;
box-shadow: 0px .2em 0px 0px #ebebeb;
display: block;
text-align: center;
background-position: center;
border: none;
margin: auto;
font-family: 'Bree Serif', serif;
}
.buttonpad {
padding-top: 10px;
}
Thank you very much ! Also if you haven't noticed I'm using Bootstrap for my grid.
For centering horizontal, change your markup to this and you should be fine
<div class="button"><span>Explore</span></div>
When breaking line using an inline element, that line break cause a white space at the end pushing the text slightly to the left
For centering vertical, use line height, like this
.button {
width: 82.61px;
height: 37.65px;
line-height: 37.65px; /* added property */
box-sizing: border-box;
background-color: white;
font-weight: 700px;
box-shadow: 0px .2em 0px 0px #ebebeb;
display: block;
text-align: center;
background-position: center;
border: none;
margin: auto;
font-family: 'Bree Serif', serif;
}
Try to use padding like this;
padding: 6px 12px;
OR
.button{
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
One simple fix is to use line-height as the height of the containing div, as in this jsfiddle :
.button span
{
display: block;
line-height: 37px;
}
https://jsfiddle.net/az2vs6y3/1/
Or you could also use negative margin and absolute positionning, but it would be slightly less flexible.
Why are you using div as button, use html button for hyperlink and css looks fine
<input type="submit" value="Explore">
Related
with the following html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Home Page with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="about">
<h4><span>A work selection by </span><a class="sobre" href="">sfgndfyj</a></h4>
</div>
</header>
<main>
<article class="uno">
<h1>
<span id="ppal" class="title_part" style="display: block; font-size: 12vw";>stills & moving image</span>
<span id="sec" class="title_part" style="display: block; font-size: 11vw";>TECHNICAL PRODUCTION</span>
</h1>
</article>
<article class="dos">
</article>
</main>
</body>
</html>
and the following css:
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------------------- fonts */
#font-face {
font-family: 'Alternate Gothic';
src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}
#font-face {
font-family: 'Times Roman';
src: url('OPTITimes-Roman.otf') format('opentype');
}
.sobre {
color: black;
}
.sobre:hover {
transition: background-color .1s ease-out,color .1s ease-out;
position: relative;
overflow: hidden;
text-decoration: underline;
background-color: black;
color: white;
}
h1 {
font-family: 'Alternate Gothic';
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: clamp(.5rem, 10vw, 1rem);
}
h4 {
font-weight: lighter;
letter-spacing: .1rem;
}
#ppal {
word-spacing: 90%;
}
.title_part {
display: inline;
position: relative;
}
/* --------------------------------- spacing */
.about {
text-align: center;
margin: 0 5vw;
}
header {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 2.5rem;
}
.dos {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
margin: 0 2.5rem;
}
I have tried for hours to find out why the h1 goes beyond the limits of its parent.
I am trying to keep h1 in two lines of (responsive) text. When you grow the window it goes above the 1600px limit placed on the body.
No matter if I try max-width, overflow, etc that it keeps getting out the box.
Can anybody tell me what am I doing wrong? Im trying to figure out how to stop the h1 to go beyond the above limit.
Best
It is the white-space: nowrap; which prevents your span to break your lines when the content is filled in the parent. Remove that and your code will work fine
Working Fiddle
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1600px;
margin: 0 auto;
border: 1px solid red;
}
main {
}
#font-face {
font-family: "Alternate Gothic";
src: url("Alternate Gothic W01 No 3.ttf") format("truetype");
}
#font-face {
font-family: "Times Roman";
src: url("OPTITimes-Roman.otf") format("opentype");
}
.about {
text-align: center;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 5vw;
}
.fulltitle {
}
h1 {
font-family: "Alternate Gothic";
text-align: center;
border: 1px solid red;
display: inline-block;
}
.uno {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 4vw;
max-width: 1600px;
position: relative;
}
.title_part {
margin: 0 auto;
/* white-space: nowrap; */
}
<header>
<div class="about">
<h4><span>A work selection by </span>mfowmyoxsnk</h4>
</div>
</header>
<main>
<article class="uno">
<div class="fulltitle">
<h1>
<span class="title_part" style="display: block; font-size: 12vw" ;
>stills & moving image</span
>
<span class="title_part" style="display: block; font-size: 11vw" ;
>TECHNICAL PRODUCTION</span
>
</h1>
</div>
</article>
<article class="dos"></article>
</main>
If you want your title to return to the line you have to put wrap like this
white-space: wrap;
Like the others have said you need to remove the "white-space", this will cause the text to go in to two lines. If you want to prevent this behavior you will have to change the font-size to be smaller.
After that, remove the margin from ".uno". This will ensure that the h1 element remains in the div. The margin currently pushes it out the div no matter the size of the child, even if the text is responsive.
Another recommendation beyond what you're looking for, instead of wrapping two spans in a single "h1", remove the h1, and replace the two spans with 1 "h1" element and the other with a "h2" or whatever subheader element depending on the size you want. If you are trying to modify the positions of elements(center, left, right) instead of margins I recommend looking into flexbox.
.uno {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
max-width: 1600px;
position: relative;
}
.title_part {
margin: 0 auto;
}
<div class="fulltitle">
<h1 class="title_part" style="display: block; font-size: 5vw;";>stills & moving image</h1>
<h2 class="title_part" style="display: block; font-size: 3vw; text-align: center; ">TECHNICAL PRODUCTION</h2>
</div>
My bad for the formatting, I'm still learning how to post answers on stackoverflow.
I have found that:
(index.html)
font-size placed in span is making it grow endlessly because of the vw.
(style.css)
clamp will make it responsive the way I want to, with a max-limit to whatever I want in the final layout.
Posting what I get as soon as I have it ready
Below what I accept as a solution to the issue I was having with h1.
It does not jump to a new line once I changed the units applied on index.html / .uno / span you can see applied on the very first post, and some tweaking on the css that you can see hereunder.
I did not need white-space.
I welcome any feedback to fine tune it.
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Home Page with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="about">
<h4><span>A work selection by </span><a class="sobre" href="">sfgndfyj</a></h4>
</div>
</header>
<main>
<article class="uno">
<h1>
<span id="ppal" class="title_part" style="display: block;";>stills & moving image</span>
<span id="sec" class="title_part" style="display: block;";>TECHNICAL PRODUCTION</span>
</h1>
</article>
<article class="dos">
</article>
</main>
</body>
(style.css)
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------------------- fonts */
#font-face {
font-family: 'Alternate Gothic';
src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}
#font-face {
font-family: 'Times Roman';
src: url('OPTITimes-Roman.otf') format('opentype');
}
.sobre {
color: black;
}
.sobre:hover {
transition: background-color .1s ease-out,color .1s ease-out;
position: relative;
overflow: hidden;
text-decoration: underline;
background-color: black;
color: white;
}
h1 {
font-family: 'Alternate Gothic';
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: clamp(1rem, 11.3vw, 11rem);
margin: 2rem 0;
}
h4 {
font-weight: lighter;
letter-spacing: .1rem;
font-size: clamp(.1rem, 2.5vw, 1rem);
}
#ppal {
font-size: 50%;
font-weight: 400;
word-spacing: 100%;
}
#sec {
word-spacing: 30%;
}
.title_part {
display: inline;
position: relative;
}
/* --------------------------------- spacing */
.about {
text-align: center;
margin: 0 5vw;
}
header {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 1rem;
}
.dos {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
margin: 0 1rem;
padding: 1rem 0;
}
Best
So I've been trying to make myself a personal portfolio, however I've run into issues regarding that. Whenever I try to resize my image using the width thing in CSS3, my image does not respond. I've tried resizing it to 25%, 50%, 75%, and nothing works!
Here's my code:
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%;
}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://cdn.pixabay.com/photo/2020/09/16/20/30/lighthouse-5577451_1280.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</div>
</body>
</html>
My image called mika.png is in a class called profile-image-wrapper, and also does not respond to the text-align: center; thing.
I have tried in-line style coding, which works to an extent (however I prefer to not have to use in-line style so I can create a media query later), and I have used the !important attribute for CSS which only works for text-align and not the width.
To make your image responsive you should give it a max-width: 100% right now it follows the width of the container and it stays inside of it. So add this new piece of code.
.profile-image-wrapper img {
max-width: 100%;
}
now the image fills 50% of the width as you wanted to do. Now if you want your image to be in the middle with 50% width just add margin: 0 auto; to the image wrapper and you should be good to go.
.profile-image-wrapper {
text-align: center;
width: 50%;
margin: 0 auto;
}
if you want the image to be fill width you can remove the width 50% from the wrapper.
with 50% width applied to the wrapper
without the 50% width on the wrapper, it would look something like this.
Note that in both cases the image is responsive duo to the fact you added max-width:100% to the img tag.
That's not what you are looking for? please let me know and show me a screenshot of the desired output.
Try it:
.profile-image-wrapper img{
width:15%
}
Please set margin: 0 auto; for .profile-image-wrapper selector to make center horizontally.
Please set display: inline-block; CSS in .profile-image-wrapper img selector
Updated snippet :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<style>
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%; margin:0 auto;
}
.profile-image-wrapper img{ width:50%; display: inline-block;}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
</style>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://i.imgur.com/HPrl3u8.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</body>
</html>
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>
html/css newbie here.
I have done some courses on html/css and now I'm testing my knowledge by attempting to copy some websites I like. Right now I'm trying my best to make Khan Academy's front page (https://www.khanacademy.org), but I've been struggling with something.
I have an <ul> that represents the top navigation bar of the page, and now I'm trying to center their logo (<div id="ka"> that is inside the navbar as a list item) to the page but using text-align: center and margin-left: auto; & margin-right: auto doesn't seem to do anything.
Here's my code:
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
padding: 13px 38px 0px 4px;
margin-left: -8px;
}
#ka {
display: inline-block;
}
#ka-logo {
float: left;
width: 24px;
margin-left: auto;
margin-right: auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
#sign {
float: right;
margin-right: 44px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<ul class="navbar">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
<li id="sign" class="navbar-text">New user / Sign up</li>
</ul>
</body>
</html>
I have seem this question but what was suggested didn't work for me.
My question is: how do I center the logo div?
A side note: since I'm fairly new to html there could be a lot of bad practices in the code above. Tips on how to do the things I did more efficiently would be highly appreciated.
here a solution for your problem.
In CSS, flex is very usefull, take a look at:
Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My CSS
I have used flexbox for centered verically divs and set the right div.
For the logo, I used a first div with the height and width of the taskbar (non-clickable) and a second with the logo centered (clickable) with position absolute.
Enjoy
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
display: flex;
align-items:center;
position:absolute;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
/**padding: 0 38px 0px 4px;**/
}
.logo {
position:absolute;
height:100%;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}
.logo-container {
display:flex;
align-items:center;
pointer-events:all;
}
.logo-container .ka-logo {
width: 24px;
}
.left, .right {
display:flex;
align-items:center;
}
.left {
margin:0 10px;
}
.right {
justify-content:right;
margin:0 10px 0 auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="logo">
<div class="logo-container">
<img class="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</div>
<div class="right">
<li class="navbar-text">New user / Sign up</li>
</div>
</div>
<!--<ul class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="center">
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
</div>
<div class="right">
<li id="sign" class="navbar-text">New user / Sign up</li>
</div>
</ul>-->
</body>
</html>
I am trying to add a button to my simple web page. The button itself looks great, but I am not quite sure how to position it. I would like for it to be centered and positioned below the main text. It currently sits off to the left side. Any idea on how to do so?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
Learn More
</body>
</html>
Any help would be greatly appreciated. Thanks!
You don't necessarily need a container. Try the following:
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
width: 62px;
}
Auto margins don't apply to inline-block elements.
You can add a container to the buttons and align them to center . see example below
also when you are trying to create a style . try to make them reusable as they can be. One advantage of this is you can write lesser css.
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
.text-center {
text-align: center;
}
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
Learn More
</div>
Try putting the Button in a <div> and make text-align:center
<div class="btnContainer ">
Learn More
</div>
<style>
.btnContainer {
text-align:center;
}
</style>
Without extra markup adding the following rules to .button will do the trick
left: 50%;
position: absolute;
transform: translate(-50%, 0);
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
}
.button:hover {
background-color: #707488;
}
#button {
text-align: center;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class id="button">
Learn More
</div>
</body>
</html>
how do you think this way?