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>
Related
How Do I set an image to be side by side with the text? This is what I have, not sure what I am doing wrong. Thank you!
.aboutme {
white-space: normal;
word-wrap: break-word;
font-family: proxima-nova, Times New Roman;
color: rgb(196, 191, 181);
font-weight: 400;
font-size: 18px;
font-style: normal;
text-align: left;
height: auto;
width: auto;
margin: 0;
line-height: 1.7em;
float: right;
}
.homepageimgdef {
max-width: 500px;
height: 500px;
border-radius: 50%;
display: block;
float: left;
}
<div>
<p class="aboutme">
"Paragraph text"
</p>
<img class="homepageimgdef" src="./HomePagePictureBlackWhite.jpg" alt="LeeBlackWhite">
</div>
As #m4n0 comment says, use a flexbox.
Your code should look like
.aboutme {
white-space: normal;
word-wrap: break-word;
font-family: proxima-nova, Times New Roman;
color: rgb(196, 191, 181);
font-weight: 400;
font-size: 18px;
font-style: normal;
text-align: left;
height: auto;
width: auto;
margin: 0;
line-height: 1.7em;
}
.homepageimgdef {
max-width: 500px;
height: 500px;
border-radius: 50%;
}
.my-flex-box {
display: flex;
align-items: center; /**remove this if you want to make the text start at the top**/
}
<div class="my-flex-box">
<p class="aboutme">
"Paragraph text"
</p>
<img class="homepageimgdef" src="https://i.stack.imgur.com/Nx6Dd.jpg?s=256&g=1" alt="LeeBlackWhite">
</div>
You'll need to remove the float from both selectors, remove text-align from the text, and in the div, useflexbox to align your HTML components they way that you want.
.img-and-text {
display: flex;
}
.aboutme {
white-space: normal;
word-wrap: break-word;
font-family: proxima-nova, Times New Roman;
color: rgb(196, 191, 181);
font-weight: 400;
font-size: 18px;
font-style: normal;
text-align: left;
height: auto;
width: auto;
margin: 0;
line-height: 1.7em;
}
.homepageimgdef {
max-width: 500px;
height: 500px;
border-radius: 50%;
display: block;
float: left;
}
<div class="img-and-text">
<img class="homepageimgdef" src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60" alt="LeeBlackWhite">
<p class="aboutme">
"Paragraph text"
</p>
</div>
I would suggest putting your content into divs so that you may have more control over your elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: flex;
vertical-align: middle;
margin: 0 auto;
justify-content: left;
align-items: center;
gap:10px;
}
</style>
</head>
<body>
<div class="container">
<div>
<img src="./HomePagePictureBlackWhite.jpg" alt="LeeBlackWhite">
</div>
<div>
<p>
"Paragraph text"
</p>
</div>
</div>
</body>
</html>
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 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'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>
I try to make the content div of my page expand according to the content that is loaded in it due to a script. I've tried everything I know and everything I have found on the internet, but nothing has the result I want.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
$('#nav a').click(function(e) {
$('#content').hide().load( $(this).attr('href') , function(){
$('#content').show()
})
return false
})
})
</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav">Home
The Band  
News  
Gallery Merchandise
Contact</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
text-align: center;
font-weight: bolder;
font-variant: normal;
}
div#content {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 12px;
position: absolute;
top: 200px;
bottom: 40px;
left: 200px;
right: 200px;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
.ttdesign {
font:"Arial Black", Gadget, sans-serif; color: #09F;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}
The demo link is: http://thodoris.esy.es/is/
Right now, the problem that occurs, is that the content that is loaded, does not make the #content expand, but it seems to load over it... Any ideas?
If you want your page to be responsive you may be better of using bootstrap as using there grid system will allow you to make all aspects of your page responsive depending on the content and screen size.
You can get it here
And here are some free templates to show you how it all fits together here