I'm trying to get my text elements centered like they would be in MS word.
I am currently using: text-align: center; to center the text but the result looks like it is flushed left in the center of the page rather than centered the way I want.
Here is the CSS and HTML:
#onp {
text-align: center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
padding-right: 40px;
font-family: gothambold;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>
I want to fix this issue before moving on and I've been trying for a while with no luck.
Cheers
EDIT: After running the snippet on this website, the text looks fine. On my machine with the font that I'm using, the text definitely looks flushed. What is causing this?
It's because your padding-right: 40px; I changed to 20px but also added padding-left: 20px; and a lime border so you can see whats going on.. hope that helps:
#onp {
text-align:center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
padding-right: 20px;
padding-left: 20px;
font-family: gothambold;
border: solid 1px lime;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>
Remove padding-right from #linklist p and add padding-left in #linklist p + p, it's added padding <p> elements that are placed immediately after <p>
#onp {
text-align:center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
font-family: gothambold;
}
#linklist p + p {
padding-left: 40px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>
Related
I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.
I have experimented with changing it to a div and improving specificity, but it's not working.
I'm not sure if it's being overwritten by the font settings I have put on top?
Would appreciate any guidance on this!
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
#importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
* {
font-family: system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
}
/*typography*/
h1 {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
font-size: (45px+1vw);
line-height: 55px;
text-align: center;
letter-spacing: 1px;
}
h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(30px+1vw);
line-height: calc(37px+1vw);
letter-spacing: 1px;
color: #FFFFFF;
}
h3 {}
ul {
list-style: inside disc;
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16px+1vw);
line-height: calc(22px+1vw);
color: #FFFFFF;
}
/* Header */
header {
width: 100%;
height: 122px;
background: #FFFFFF;
position: fixed;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
.logo {
width: 30%;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: center;
line-height: 122px;
}
nav a {
font-family: 'Ubuntu';
text-decoration: none;
letter-spacing: 4px;
font-size: calc(50px+1vw);
color: #616161;
padding: 36px 10px;
margin: 0 1 px;
}
nav a:hover {
background: #F3EA65;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <div class="box-area"> -->
<header>
<div class="wrapper">
<div class="logo">
<img src="asdf.png" alt="Logo" width="25%" ;>
</div>
<nav>
about
our team
who we help
get involved
Contact
Donate
</nav>
</div>
</header>
It is better to include the fonts link in header tag in HTML and then run.Also add space after #import in second link.
I'm trying to make an online shop. I need 3 items in a row. I tried to do it by function but I see the cards under each other. How can I make a row of cards by 3 elements?
When I use flex the card doesn't look with the same design as now.
I think that the problem is with .product-item
Help me, please.
MY CSS:
* {
box-sizing: border-box;
border: 1px #e2e2e2;
}
.product-item {
width: 300px;
height:205px;
text-align: center;
border: 1px #e2e2e2;
background: white;
font-family: "Roboto";
}
.product-item img {
display: inline-block;
width: 100%;
border: 1px #e2e2e2;
}
.product-list {
background: #fafafa;
padding: 15px 0;
}
.product-list h3 {
font-size: 20px;
font-family: "Roboto";
text-align: left;
margin: 25px;
font-weight: 400;
color: #333333;
}
.product-list h4 {
font-size: 15px;
font-family: "Roboto";
text-align: left;
margin: 25px;
font-weight: 400;
color: #666666;
}
.sell {
font-size: 20px;
font-family: "Roboto";
color: #333333;
margin: 65px;
}
.price {
font-size: 35px;
text-align: left;
font-family: "Roboto";
color: #333333;
margin: -65px;
}
.cart img
{margin-top:-60px;
margin-left:200px;
width: 15%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Card set</title> <!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="cardset.css">
<script src="script.js"></script>
</head>
<body>
<div class="product-item">
<img src="boots.png">
<div class="product-list">
<h3>Ботинки женские</h3>
<h4>Модные ботинки из натурального нубука. Согреют Ваши ноги во время зимних морозов.</h4>
<p><span class = 'price'>1999</span><span class = 'sell'>руб.</span><div class="cart"><img a href="" src="cart.png">
</div>
</div>
<div class="product-item">
<img src="boots.png">
<div class="product-list">
<h3>Ботинки женские</h3>
<h4>Модные ботинки из натурального нубука. Согреют Ваши ноги во время зимних морозов.</h4>
<p><span class = 'price'>1999</span><span class = 'sell'>руб.</span><div class="cart"><img a href="" src="cart.png">
</div>
</div>
</body>
</html>
Try adding this to product-item class:
Width:33%;
Display:inline-block;
There are a lot of typography errors in your code (look at the class you are defining, look at the extra spaces, unclosed code sections in your CSS etc.)
To align three items, you can simply use flexbox display. Like in the example below.
section {
display:flex;
}
.itemmm img {
width:100px;
height:100px;
margin:25px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Card set</title>
<!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="cardset.css">
<script src="script.js"></script>
</head>
<body>
<section class="items-container">
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
</section>
</body>
</html>
I'm relatively new to HTML/CSS, but like to think I have a rather good grasp on most aspects. However, this confuses me.
On my dummy website, no matter what new element I add, it's automatically being placed in a specific position near the top of the page. I've tried fiddling with the CSS but to no avail. In this example, the p element with value "Example element" is the last element in the code but appears just under the nav in the code snippet.
You may have to run the snippet fullscreen; I'm not sure as I haven't done any viewport stuff and it's been made to fit my abnormally-wide monitor.
Maybe I haven't been introduced to this particular concept yet.
#charset "UTF-8";
#font-face {
font-family: 'Gill Sans Std';
src: url(GillSansStd.otf) format("opentype");
}
#font-face {
font-family: 'SofiaPro';
src: url(SofiaPro.otf) format("opentype");
}
#logo {
margin: auto;
display: block;
opacity: 0.6;
}
header > h1 {
margin: 0 auto;
display: block;
border-style: none none solid none;
border-width: thin;
text-align: center;
font-family: "Bebas Neue", sans-serif;
font-size: 90px;
width: 380px;
}
nav {
margin-top: 55px;
margin-left: 650px;
margin-bottom: 20px;
}
nav > a {
margin-left: 85px;
margin-right: 85px;
font-family: "Raleway";
font-weight: bold;
padding: 10px;
}
nav > a:link {
color: black;
text-decoration: none;
}
nav > a:visited {
color: black;
text-decoration: none;
}
nav > a:hover {
background-color: black;
color: white;
}
#hero-content {
float: left;
margin-left: 90px;
margin-top: 150px;
}
#title {
font-size: 30px;
font-family: SofiaPro, sans-serif;
margin-bottom: 60px;
}
#subhead {
font-family: 'Gill Sans Std';
font-weight: 100;
font-size: 18px;
color: dimgrey;
border-style: none none solid none;
border-bottom-width: thin;
border-color: dimgrey;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 10px;
}
#hero {
float: right;
margin-top: 40px;
margin-right: 40px;
}
#heropara {
width: 600px;
margin-top: 60px;
font-family: 'Raleway';
font-size: 20px;
font-weight: 800;
}
<!doctype html>
<html lang="en-gb">
<head>
<title>Blah Group</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
</head>
<body>
<header>
<h1>Foo</h1>
</header>
<nav>
BLAH
BLAH
BLAH
BLAH
BLAH
</nav>
<div id="hero-content">
<h1 id="title">BLAH</h1>
<h2 id="subhead">BLAH</h2>
<p id="heropara">Lorem Ipsum blahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</div>
<img id="hero" src="https://www.littlethings.info/wp-content/uploads/2014/04/dummy-image-green-e1398449160839.jpg" height="200" width="200" />
<p>Example element</p>
</body>
</html>
I am currently making my study project page. I want it to be responsive as it is a part of it.
However, when the screen size is to small words in head, section and body are overlapping. I can't make the words go to another line if there is not enough space for all of them (for whole sentence). I've tried using word-break, but it didn't work. Does anyone have idea what can I do to change it?
<html lang="pl-PL">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="My hobby page.">
<meta name="keywords" content="books, hobby">
<meta name="author" content="Bogna Gondek">
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="js.js"></script>
<title>Książki Moje Hobby | Witamy</title>
</head>
<body>
<header>
<h1>Książki Moje Hobby</h1>
<nav>
<ul>
<li><a class="aktywny" href="strona_główna.html">Strona Główna</a></li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<div id="wnętrze">
<section>
<h2>„Bajki są więcej niż prawdą: nie dlatego, że mówią nam, że smoki istnieją, ale dlatego, że mówią, że smoki można pokonać.”</h2>
<h3>― Neil Gaiman, „Coraline"</h3>
</section>
</div>
<footer>
Książki Moje Hobby, Copywright © 2019
</footer>
</body>
</html>
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 2px;
padding:0;
margin: 0;
background-color: white;
}
header
{
width: 100%;
margin: auto;
overflow: hidden;
padding-top: 20px;
min-height: 70px;
background-color: #404040;
}
header h1
{
margin-left: 20px;
float:left;
color: #f2f2f2;
}
header nav
{
float:right;
margin-top:10px;
margin-right: 20px;
margin-bottom: 20px;
}
header li
{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header a
{
text-decoration: none;
color: #f2f2f2;
font-size: 22px;
}
header a:hover
{
font-weight: bold;
}
header .aktywny
{
color: #b3b3b3;
}
div#wnętrze
{
max-width:100%;
height: 100%;
margin: auto;
overflow: hidden;
background:url("obrazki/glownyobrazek.jpg") no-repeat 0;
color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section
{
background-color: red;
max-width: 80%;
word-wrap: break-all !important;
}
footer
{
padding: 20px;
margin-top: auto;
background-color: #404040;
text-align: center;
color: #f2f2f2;
}
The issue is the line-height you have set on the body.
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 1;
padding:0;
margin: 0;
background-color: white;
}
Screenshot of my page. I want to know how I can position the text 'Github' under 'John Doe'.
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
}
My HTML File:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
</div>
<div class="conatiner2">
<h3> Github </h3>
</div>
</body>
</html>
I describe my problem more in detail. The name John Doe is centred. And I want the text 'Github' directly under it. But how can I achieve that? When I try to do it, 'Github' is centred but on the end of the page. Can someone help me please? Btw I never used CSS before.
Is this something you wanted? I have put the the Github under Text 'John Doe'.
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
margin: 0;
line-height: 48px;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
margin: 0;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
<h3> Github </h3>
</div>
</body>
</html>
Or something like this?
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container2 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
</div>
<div class="container2">
<h3> Github </h3>
</div>
</body>
</html>
Use the same container class for Github as you did for John Doe (classes are not unique and can be shared among multiple elements)
<div class="container">
<h3> Github </h3>
</div>
Also remove height: 100%; from your CSS file under .container in order to get the text to appear closer together. Both will be centered on the page based on your current setup.
A couple of changes...
1) Move the 'Github' text into the same container as 'John Doe' so that they are formatted together.
2) Remove all of this:
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
3) Replace it with...
text-align center: // (centers the text)
margin: 0 auto; // (centers the content to the middle of the screen)
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
text-align: center;
margin: 0 auto;
}
My HTML File:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
<h3>Github</h3>
</div>
</body>
</html>