I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
<div id="header">
<img id="image" src="spring.jpeg">
<p id="text">Welcome to My Homepage</p>
</div>
<div id="under">
<div id="upper">
<div id="leftbar">
<div class="list">
<ul>
<li>Home</li>
<li>Past</li>
<li>Future</li>
<li>Comments
</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="title">Habibe Naby</div>
<p>this is my name and
I<spanclass="special">Danny</span>.Ihave a .. </p>
</div>
</div>
<div id="footer">copyrights©</div>
</div>
My CSS:
body
{
height: 750px;
margin: 2px;
padding: 2px;
width: 1000px;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height:100%;
border:1px solid #8D8D8D;
}
#header
{
height: 150px;
width: 100%;
position: relative;
}
#image
{
height: 150px;
width: 1000px;
}
#text
{
z-index: 100;
position: absolute;
color: darkolivegreen;
font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px;
top: 25px;
}
#leftbar
{
float: left;
width: 200px;
height: 560px;
margin: 0px;
padding: 0px;
background-color: azure;
}
.list
{
margin-top: 40px;
margin-left: auto;
text-decoration: underline;
color:blueviolet;
font-size: 20px;
}
.list ul
{
list-style: none;
}
#rightbar
{
float: right;
width: 800px;
height: 560px;
margin: 0px;
padding: 0px;
background: mintcream;
}
#title
{
margin-left: 80px;
margin-top: 30px;
font-size: 28px;
font-weight: normal;
font-style: italic;
color: blueviolet;
}
#footer
{
clear: both;
height: 40px;
text-align: center;
background-color: oliveDrab;
margin 0px;
padding: 0px;
color: white;
}
.special
{
font-size: 20px;
font-weight: bold;
font-family: "New Century Schoolbook", Times, sans-serif;
color: dodgerblue;
}
p, pre
{
padding: 10px 20px;
margin-left: 50px;
margin-right: 50px;
color: darkslateblue;
}
Jsfiddle: http://jsfiddle.net/2gtsK/show/
Removed width from body, Added margin:0 auto to #box
margin:0 auto is same as:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.
body
{
height: 750px;
margin: 2px;
padding: 2px;
}
#box
{
width: 1000px;
margin: 0 auto;
height:100%;
border:1px solid #8D8D8D;
}
You can wrap it by another div and set that div's text-align:center;
Related
i'm making a website and i have encountered several errors in the code. any help would be appreciated, thanks in advance.
the errors are:
i want the body of the website to be in the centre of the screen, not at the top
i want to add two columns in the main box, but the columns aren't showing. i did add code to fix this table problem but i don't think it's working
here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAINWEB</title>
<meta name="keywords" content="Neocities, HTML, aesthetic, web 1.0, old web, 90's, 80's, early 2000's,personal website,">
<style>
#font-face {
font-family: hearts;
src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf') format('truetype');
}
#font-face {
src: url(https://dl.dropbox.com/s/7bidj4o8lc71b8u/Hantam.ttf);
font-family: hantam;
}
html {
font-size: 17px;
line-height: 14px;
font-family: "hearts";
padding: 5px;
cursor: url("/images/cursors/torocursor.png"), auto;
scrollbar-color: #f48ee6 #fad1e8;
}
body {
margin-left: auto;
margin-right: auto;
background-image: url("https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590");
}
a {
text-decoration: none;
color: #ef8a85;
}
a:hover {
cursor: url("/images/cursors/torocursorpoint.png"), auto;
color: #00b2c5;
}
hr {
border-top: solid 1px;
border-color: #b6a898;
}
p {
margin: 10px;
}
h1 {
font-family: hantam;
font-size: 30px;
color: #F9A1CC;
line-height: 18px;
margin: 0px;
font-weight: normal;
text-align: center;
}
.table1 {
margin-left: auto;
margin-right: auto;
display: block;
border-spacing: 0px;
border-collapse: collapse;
width: 812px;
}
.table1 td {
vertical-align: top;
border: none;
padding: 0px;
position: relative;
}
.table1 tr {
vertical-align: top;
border: none;
padding: 0px;
position: relative;
}
.headbox {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border-radius: 4px;
height: 80px;
width: 800px;
position: relative;
padding: 10px;
}
.footbox {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 900px;
padding: 0px;
height: 100px;
text-align: center;
}
.titleimg {
margin-left: auto;
margin-right: auto;
display: block;
position: absolute;
bottom: -20px;
left: -15px;
z-index: 10;
}
.bar1 {
background-color: #FFFFFF;
border: 3px double #B1B1B1;
border-radius: 4px;
padding: 5px;
padding-bottom:50px;
width: 170px;
min-height: 100px;
margin-top: 7px;
position: relative;
}
.mainbox {
background-color: #FFFFFF;
border: 3px double #B1B1B1;
border-radius: 4px;
padding: 20px;
width: 570px;
height: 400px;
margin-left: 4px;
margin-top: 7px;
position: relative;
.column {
float: left;
width: 37%;
padding: 10px;
.row:after {
content: "";
display: table;
clear: both;
}
}
li {
list-style: none;
margin-bottom: 5px;
}
.hder {
margin-left: -5px;
border-top: 1px solid #b6a898;
padding: 2px;
list-style: none;
width: 176px;
font-family: "MS UI Gothic", Tahoma;
font-weight: bold;
margin-bottom: 5px;
color: white;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td>
<div class="bar1">
<li>about
</li>
<li>reading diary
</li>
<li>music
</li>
</li>
</ul>
</div>
</td>
<td>
<div class="mainbox">
<div class="row">
<div class="column">
</div>
<img src="https://barbara.crd.co/assets/images/gallery34/c3f48eed_original.gif?v=078d66a6">
<div class="column">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</td>
</tr>
</table>
<div class="footbox">
</div>
</body>
</html>
Try this for 1:
Add this to your body style:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Remove margin (optional)
(ignore the fact that items in the header are in different language) Hyperlink of header's items doesn't work. I don't know how to fix it. When I put a cursor on a div my cursor doesn't change to a hand. It looks like website doesn't see my div? Or something like that? I've no idea. I send HTML/CSS code.
body {
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
background-color: #DEDEDE;
padding: 0;
margin: 0;
}
#container {
margin-left: auto;
margin-right: auto;
height: 1700px;
}
#header {
width: 800px;
padding-top: 20px;
margin-left: 550px;
margin-right: auto;
float: left;
}
#photo {
height: 980px;
width: 1864px;
background-color: white;
float: left;
background-image: url(domek.jpg);
background-size: cover;
box-shadow: 10px 5px 15px 0px grey;
}
#oferta {
font-size: 25px;
width: 150px;
float: left;
}
#rezerwacja {
font-size: 25px;
width: 150px;
float: left;
}
#atrakcje {
padding-left: 40px;
font-size: 25px;
width: 150px;
float: left;
}
#kontakt {
font-size: 25px;
width: 150px;
float: left;
}
#galeria {
font-size: 25px;
width: 150px;
float: left;
}
<div id="photo" style="position:relative;"></div>
<div id="header" style="position:absolute;">
<div style="clear: both;"></div>
<div id="oferta" style="color: white;">Oferta</div>
<div id="kontakt">Kontakt</div>
<div id="rezerwacja">Rezerwacja</div>
<div id="atrakcje">Atrakcje</div>
<div id="galeria">Galeria</div>
</div>
When my website is on 100% zoom it looks alright but...
when I zoom in it all goes right
when I zoom out it all goes left
How do I make it so my website zooms in and out without effecting the layout of the website from the center?
e.g. Like this website http://www.johnlewis.com
I am a beginner at coding.
HTML and CSS is shown below.
HTML
<html>
<head>
<meta charset="utf-8"/>
<title> Josh Taylor</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"
type='text/css'>
<link rel="shortcut icon" href="Icon.png"/>
</head>
<body>
<div id="nav-div">
<ul>
<h1>JOSH TAYLOR</h1>
<li>Contact</li>
<li>CV</li>
<li>Portfolio</li>
<li>Home</li>
</ul>
</div>
<div id="main-left">
<h2> A BIT ABOUT ME </h2>
<p> this crap is only here to show what it would look like mate I don't
want it sounding boring like my CV and needs some life so give it some josh
</p>
<h3> INTERESTS</h3>
</div>
<div id="main-right">
<img src="CopenhagenJosh.png">
</div>
<div id="main-social">
</div>
<div id="interests">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
</div>
<div id="intereststitles">
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
</div>
<div id="portfolio-left">
<h2> PORTFOLIO</h2>
</div>
<div id="portfolio-right">
<p> This is my creative work ayoooo below...</p>
</div>
<div id="portfolio-1">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
</div>
<div id="CV">
<div id="CV-left">
<h2> CV </h2>
</div>
<div id="CV-right">
</div>
<div id="CV-img">
<img src="CopenhagenJosh.png">
</div>
<div id="contact">
<div id="contact-left">
<h2> CONTACT </h2>
</div>
<div id="contact-right">
</div>
</div>
</body>
</html>
CSS
body {
font-family: 'Lato', sans-serif;
font-style:italic
}
html{
padding: 0px;
margin: 0px;
background: url(sky.jpg);
background-size:contain;
background-repeat:no-repeat;
display: inline-block;
}
/* FOOTER NAVIGATION */
#nav-div {
opacity: 1;
font-size: 15px;
}
#nav-div h1{
color: lightskyblue;
cursor: pointer;
width: px;
float: left;
margin-left: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
font-size: 25px;
}
#nav-div h1:hover{
color: white;
transition:all 0.40s;
}
#nav-div ul{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background: ;
line-height: 80px;
float:right;
border-bottom: px solid black;
margin-right: 300px;
}
#nav-div ul a{
text-decoration: none;
color: lightskyblue;
padding: 25px;
}
#nav-div ul a:hover{
color:white;
transition:all 0.40s;
font-style:italic;
}
#nav-div ul li {
list-style-type: none;
display: inline-block;
float: right;
font-style:normal;
font-size: 15px;
}
#main-left{
float: left;
display: inline-block;
width: 40%;
height: 250px;
margin-top: 100px;
}
#main-right{
float: left;
padding: px;
display: inline-block;
width: 22%;
height: 175px;
margin-top: 100px;
}
#main-right img{
float: left;
margin-left ;
width: 150px;
height: 150px;
padding: 10px;
display: inline-block;
}
#main-social{
float: left;
display: inline-block;
margin-left: 7%;
width: 10%;
height: 250px;
margin-top: 100px;
}
#main-left h2{
width: 300px;
height: 50px;
font-size: 35px;
color: white;
display: inline-block;
margin-left: 300px;
margin-right: %;
margin-top: 0;
margin-bottom:0;
float: left;
}
#main-left p{
width: 250px;
height: 100px;
margin-top: px;
margin-left: 300px;
margin-right: 5%;
font-size: 17px;
color: darkgrey;
display: inline-block;
position: relative;
}
#main-left h3{
margin-top: px;
width: 150px;
height: 30px;
margin-left: 300px;
font-size: 20px;
color: white;
display: inline-block;
float: left;
}
#interests {
width: 100%;
height:125px;
margin-top:px;
margin-left: 300px;
display: inline-block;
}
#interests img{
padding: 14px;
Height: 100px;
Width: 100px;
margin-bottom: 0px;
}
#intereststitles{
width: 100%;
height:100px;
margin-top:0px;
margin-left: 300px;
display: inline-block;
color: white;
}
#intereststitles p{
padding: 14px;
margin-top:0px;
Height: 10px;
Width: 100px;
font-style: normal;
display: inline-block;
text-align: center
}
#portfolio {
width: 100%;
height: 100%;
background-color: gray;
opacity: 1;
}
#portfolio-left{
background-color: gray;
float: left;
width: 25%;
height: 100px;
}
#portfolio-left h2{
width: 200px;
height: 50px;
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#portfolio-right{
background-color: gray;
float: right;
width: 75%;
height: 100px;
margin-top: 0px;
}
#portfolio-right p{
font-size: 20px;
color: white;
display: inline-block;
margin-left: 0%;
margin-right: %;
margin-top: 36px;
margin-bottom:0;
padding: 0px;
float: left;
}
#portfolio-1{
margin-left: 0%;
width: 100%;
display: inline-block;
text-align: center;
padding:0%;
margin:0;
background-color: gray;
}
#portfolio-1 img{
display: inline-block;
padding: 0px;
width:33%;
}
#CV {
width: 100%;
height: 900px;
background-color: skyblue;
opacity: 1;
}
#CV-left{
float: left;
width: 430px;
height: 100px;
}
#CV-left h2{
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#CV-right{
float: right;
width: 75%;
height: 100px;
margin-top: 0px;
}
#CV-right p{
font-size: 20px;
color: white;
display: inline-block;
margin-left: 0%;
margin-right: %;
margin-top: 40px;
margin-bottom:0;
padding: 0px;
float: left;
}
#contact {
width: 100%;
height: 500px;
background-color: mediumpurple;
opacity: 1;
}
#contact-left{
float: left;
width: 50%;
height: 900px;
}
#contact-left h2{
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#contact-right{
float: right;
width: 50%;
height: 900px;
}
You need a div as a wrapper for your webpage, and set a fixed width or max-width if you want the content to be able to become smaller on smaller screens with margin set as auto for margin-left and margin-right to keep the page centered.
Which is precisely what the webpage you mentioned does -
You can center center content horizontally in CSS by putting it inside a block-level element (like a div), with left and right margins set to "auto". Take a look at Centering in CSS: A Complete Guide > Horizontally > Block level element. In your case, you would probably want to add a div around all the content you currently have in the body, give it a set width, and add margin: 0 auto. Note that you probably want to use max-width instead of just width to support smaller browsers (see CSS Layout - width and max-width).
In the example site you mentioned, there's a div with an id of "wrapper" that contains all the centered content.
I want the site to have three different formats depending on the width of the browser window. Two of my media queries display correctly. The third one however, does not. For some reason, the images inside the divs increase in height a lot and push all of the text out of the div. The only thing that should change about the images is the width. It's weird because the width and margins of the divs display fine so I know the media query is doing something. It's just that the content inside the divs isn't displaying correctly. This all happens when the browser is above 1000px in width.
<!DOCTYPE>
<html>
<link rel="stylesheet" href="index.css">
<head>
<title>Resi</title>
</head>
<body>
<div id="nav">
<ul>
<strong><li style="font-size:26">RESI</li></strong>
<li>Rent</li>
<li>List Apartment</li>
<li>Contact</li>
<li>Help</li>
<li>Account</li>
<div id="logindiv">
<li id="signup">Sign In</li>
</div>
</ul>
</div>
<img src="http://www.ojc.edu/futurestudents/housingandfood/images/D13_Wunsch01.jpg" alt="college dorm" width = 960px height=470px>
<div id="search">
<h6 style="color:white" id="searchheader">Resi. Your alternative to dorming.</h6>
<input class="search-bar" type="text" name="search" placeholder="Search For Your School, Neighborhood, or City..."> <input type="button" value="Search">
</div>
<div class="reasons_1">
<img class="pics" src="http://scottsdalefurnishedapartment.com/wp-content/uploads/2013/10/specialedition.jpg">
<h3>Get more out of your dorm</h3>
<p>fdsg zfdga gzszv bzsgfA fdzsbgf zgszza gazff</p>
<p class="learn">Learn more ▶</p>
</div>
<div class="reasons_1">
<img class="pics" src="https://g.foolcdn.com/editorial/images/130138/college_large.jpg" >
<h3>Save money</h3>
<p>szhg sfzv hsgfhazf ghfghx fghx dxhfd fgsz gxsg zsfgsz</p>
<p class="learn">Learn more ▶</p>
</div>
<div class= "reasons_1">
<img class="pics" src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2012/7/16/1/CI-Dormify_dorm-room-teens-talking-on-sofa_s4x3.jpg.rend.hgtvcom.231.174.jpeg">
<h3>Freedom without the worry</h3>
<p>szfgzgzdf fg sdfgd gfgfgz g fzsg gfg zgfg zz df hj hj </p>
<p class="learn">Learn more ▶</p>
</div>
<div id="footer">
<h2>Terms and conditions</h2>
</div>
</body>
So that's the html and here's the css
body {
width:100%;
margin: 0 auto;
background-color:#f7f7f7;
min-width: 636px;
}
div{
margin: 5px auto;
}
h1{
margin: 0px;
line-height: 70px;
}
#nav{
background-color: #00AAA0;
margin: 0 auto;
width: 100%;
height: 40;
}
li{
float: left;
font-family: sans-serif;
font-size: 16px;
padding: 0px 15px;
display: inline;
line-height: 40px;
height: 40px;
color: white;
}
ul{
margin: 0px;
margin-left: -50px
}
#signup{
float:right;
color: black;
height: 30px;
line-height: 30px;
}
#logindiv,#logindiv:hover{
float:right;
background-color:white;
margin: 5px 15px;
height: 30px;
width: 80px;
cursor: pointer;
}
img{
margin: 0px;
width: 100%;
height:
}
#search{
margin: 0 auto;
width: 600px;
height: 80px;
position: relative;
left: 0px;
bottom: 130px;
margin-bottom: -85px;
}
#search input[type=text]{
border:1px solid #d0d0d0;
background-color:#fcfcfc;
margin-left: 5px;
}
input[type=button], input[type=button]:hover {
position:relative;
left:-6px;
bottom: 1px;
background-color:#FF7A5A;
color:white;
cursor: pointer;
height: 30px;
border: hidden;
width: 90px;
font-size: 16px;
margin-top: 5px;
}
.search-bar{
margin: 5px auto;
width: 500px;
height: 30px;
font-size: 16px;
}
#searchheader{
font-size: 30px;
}
h2,h6{
margin: 5px auto;
width:500px;
text-align: center;
font-family: sans-serif;
}
.reasons_1{
float: left;
background-color:white;
margin: 15px;
width: 31%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
#media only screen and (max-width: 1500px) and (min-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 2%;
width: 29%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
#media only screen and (max-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-left: 5%;
width: 40%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
#media only screen and (max-width: 700px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 14%;
margin-right: 14%;
width: 70%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
.pics{
height:190px;
width:100%;
}
h3{
font-family: sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}
p{
font-size: 16px;
line-height: 1.5;
font-family: Circular, Helvetica, Arial, sans-serif;
font-weight: 300;
margin-left: 10px;
margin-right: 10px;
}
#footer{
height: 250px;
background-color: #00AAA0;
color: white;
clear: both;
width: 100%
}
.learn{
position: absolute;
left: 165px;
top: 300px;
}
a{
color: #FF7A5A;
}
Also, this is my first site so any advice on how to make it look better would be appreciated.
This might be because of width you are giving to class reasons_1
Your doctype at the top can't just say doctype
Use
under
you need to close the html
Look here for the DOCTYPE and ending HTML code
use these sites these sites to validate you code
edit: I can't post html code. :(
yesterday I posted a question asking how can I center a div inside a div... Now I have another problem, I want to center a div on the screen. I want it to be in the middle and to take up 50% of the screen;
Here is a pic of the problem:
As you can see there isn't anything in the middle of the screen, that is my problem. Here is my HTML code:
* {
font-size: 100%;
font-family: Serif;
}
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
}
.items {
background-color: rgba(0,0,0,.5);
width: 100%;
text-align: center;
margin: 0;
}
#basicInfo{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: rgba(255,150,0,1);
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: rgba(255,150,0,1);
}
.navbar {
background-color: rgba(0,0,0,0.1);
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
min-height: 5%;
}
.button{
background-color: rgba(0,0,0,.5);
font-size: 2em;
color: white;
width: 33%;
margin: 0 .16%;
height: 100%;
float: left;
}
.button:hover{
background-color: rgba(0,0,0,.7);
}
.button a{
text-decoration: none;
display: block;
color: white;
text-align: center;
vertical-align: middle;
}
#textSpace {
background-color: rgba(0,0,0, .5);
width: 100%;
height: 50%;
display: block;
top: auto;
bottom: auto;
}
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<div class="navbar">
<div class="button">
<b>Mateo</b>
</div>
<div class="button">
<b>Home</b>
</div>
<div class="button">
<b>Josh</b>
</div>
</div>
Any help is apriciated! Thanks in advance!
To horizontally centre a div in the middle of the screen use:
margin-left:auto;
margin-right:auto;