I'm working on a Site for myself, but I have no clue how I get the Navigationbar centered in the site.
I thought that maybe someone else has an idea :) the whole navigation bar is slightly to the left & I don't know how to fix it.. Hope you guys out there can do this :) I'm a beginner # coding & I have so much more to learn ..
screenshot of the page
logo
thank you for your help :)
Html:
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li class="logo">SueZ Logo</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>Copyright © 2020 SueZ</footer>
</body>
</html>
CSS:
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
height: 150px;
padding: 20px;
text-align: center;
}
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
text
}
header .logo a {
background-image: url(Fotos/SueZ_Logo_Red_BG_Transparent.PNG);
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 190px;
position: relative;
text-indent: -9999999px;
top: -40px;
width: 200px;;
margin-left: 20%;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
Here I made a snippet for the solution of your issue. check it. Hope it helps.
Updated CSS marked with /*----------*/
...............................................................................
A TIP for you
Don't use height.
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
/*------------------------*/
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
/*height: 150px;*/
padding: 40px;
text-align: center;
position:relative;
}
.logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}
.logo img{width:100%;}
/*------------------------*/
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
/*------------------------*/
nav li:last-child{margin-right:0}
nav li:nth-child(2){margin-right:120px}
/*------------------------*/
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://i.stack.imgur.com/yfW19.png" alt="logo">
</div>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>
Copyright © 2020 SueZ
</footer>
Related
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
I am studying CSS and creating a responsive web page. I have started working in a media query. When I maximize the screen, all works as expected, but when I reduce its size, the content that does not fit in the viewport is hidden, and a white space stays in its place. That space can be seen scrolling the screen to side. Why is that space appearing instead the rest of the content? I also don't understand why my content doesn't fit in the screen, because I am using percentage values to elements' width. My code is below:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 99.13vw;
}
body{
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
header img{
width: 45px;
}
header h1{
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
margin-left: 55px;
}
nav a{
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover{
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img{
display: none;
width: 30px;
height: 35px;
}
#firstsection{
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div{
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1{
margin-bottom: 45px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes{
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div{
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type{
width: 55px;
}
#middlesection h2{
text-align: center;
width: 100%;
}
#lastsection{
text-align: center;
}
#lastsection img{
width: 30%;
margin: 100px auto 0px;
}
#lastsection div{
position: relative;
bottom: 450px;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img{
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div{
text-align: center;
}
#media screen and (max-width: 800px){
#textboxes div{
width: 100%;
}
#lastsection img{
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png"> <a href="index.html">
<h1>Finances</h1></a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>
the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
Actually it's not hidden. The links in the header just happen to have a color that's close enough to white that the contrast is really low. They're overflowing the right side of the header when the header's content is wider than the viewport.
The simplest solution would be to give flex-wrap:wrap to header, but I recommend using a media query to override the display:flex instead (for better backwards compatibility).
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html,
body,
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 99.13vw;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2,
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
a {
text-decoration: none;
transition: 0.2s linear;
}
header {
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
#media all and (max-width:56em) {
header {
display: block;
}
header>a,
header>nav {
display: inline-block;
}
}
header img {
width: 45px;
}
header h1 {
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li a {
margin-left: 55px;
}
nav a {
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover {
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img {
display: none;
width: 30px;
height: 35px;
}
#firstsection {
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div {
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1 {
margin-bottom: 45px;
}
#firstsection div a {
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover {
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes {
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div {
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type {
width: 55px;
}
#middlesection h2 {
text-align: center;
width: 100%;
}
#lastsection {
text-align: center;
}
#lastsection img {
width: 30%;
margin: 100px auto 0px;
}
#lastsection div {
position: relative;
bottom: 450px;
}
#lastsection div a:visited {
color: blue;
}
footer {
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div {
text-align: center;
}
#media screen and (max-width: 800px) {
#textboxes div {
width: 100%;
}
#lastsection img {
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<a href="index.html">
<h1>Finances</h1>
</a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br> the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
I have designed a web page for a friend but when I try to change the H2 Logo for a png image. It does not seem to want to load.
The strange thing is however, that the .PNG file works in the Brackets Application. But not live on the server.
The webpage is here: http://www.donjaswell-beingforkids.co.uk/
It is supposed to look like this: (Brackets Preview)
This is from the Index.HTML code, which I will write below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="img/Kids-Well-Being-Health.jpg" alt="Kids Health">
</div>
<br/>
<div class="welcomeBar">
<h2>Welcome To</h2>
<h2><q>Donja's Well-Being For Kids</q></h2>
<p><q>......Helping children to become calm, confident and resilient, by understanding and regulating their emotions, through Relax Kids™ and Emotional Literacy classes and workshops.</q></p>
</div>
<div id="wrapper">
<section>
<ul id="collections">
<li>
<a href="emotionalLiteracy1-1Support">
<img src="img/Emotional-Literacy-1-1-Support.jpeg" alt="Emotional Literacy 1 on 1 Support">
<p>Emotional Literacy 1-1 Support</p>
</a>
</li>
<li>
<a href="relaxKids">
<img src="img/Relax-Kids-Online.jpg" alt="Relax Kids">
<p>Relax Kids™</p>
</a>
</li>
<li>
<a href="tipsToHelpYourChild">
<img src="img/Tips-To-Help-Your-Child.jpeg" alt="Tips to Help Your Child">
<p>Tips To Help Your Child</p>
</a>
</li>
<li>
<a href="helpWithParenting">
<img src="img/Help-With-Parenting.jpeg" alt="Help With Parenting">
<p>Help With Parenting</p>
</a>
</li>
<li>
<a href="classesAndWorkshops">
<img src="img/Classes-And-Workshops.jpeg" alt="Classes and Workshops">
<p>Classes and Workshops</p>
</a>
</li>
<li>
<a href="testimonials.html">
<img src="img/Testimonials.jpg" alt="Testimonials">
<p>Testimonials</p>
</a>
</li>
</ul>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
And the CSS is here:
/*******************************************
GENERAL
********************************************/
body {
font-family: 'Indie Flower', sans-serif;
/* background-image: img/shining-blue-water-background.jpg;*/
margin: 0;
padding: 0;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.centerText {
text-align: center;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*******************************************
HEADING
********************************************/
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
display: block;
width: 40%;
margin: 5px auto;
}
/*******************************************
NAVIGATION
********************************************/
nav {
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 15px 10px;
transition: .5s ease-out;
}
/*******************************************
BANNER
********************************************/
.banner {
display: block;
margin: -30px 0 0px 0;
}
.banner {
width: 100%;
display: block;
}
.banner img {
position: relative;
width: 100%;
display: block;
}
/*******************************************
WELCOME BAR
********************************************/
.welcomeBar {
float: left;
width: 100%;
text-align: center;
display: block;
margin: 0 0 15px;
}
.welcomeBar h2 {
margin: 0;
}
/*******************************************
TOP BOX
********************************************/
.topBox {
text-align: center;
position: fixed;
right: 0;
bottom: 50px;
background-color: #659EB8;
height: 35px;
width: 35px;
border-radius: 50%;
}
.topBox i {
position: relative;
height: 100%;
width: 100%;
top: 6px;
}
/*******************************************
FOOTER
********************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
width: 100%;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*******************************************
PAGE: HOME: COLLECTIONS
********************************************/
#collections {
margin: 0;
padding: 0;
list-style: none;
}
#collections li {
float: left;
width: 95%;
margin: 2.5%;
}
#collections li a img{
border: 5px solid;
border-color: #f5f5f5;
}
#collections li {
position: relative;
max-width: 100%;
}
#collections li a p {
font-size: 100%;
padding: 3px;
white-space: nowrap;
position: absolute;
float: left;
top: 40%;
left: 52%;
transform: translate(-50%, -50%);
transition: .5s ease-out;
font-weight: bold;
}
#collections li a:hover p {
transition: 0.5s;
font-size: 105%;
}
/*******************************************
PAGE: ABOUT
********************************************/
.profile-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*******************************************
PAGE: CONTACT
********************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.fax {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: left 3px bottom 5px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
word-wrap: break-word;
}
.contact-info li.fax {
background-image: url('../img/printer.png');
}
.contact-info li.facebook a {
background-image: url('../img/facebook.png');
}
/*******************************************
PAGE: EMOTIONAL LITERACY
********************************************/
.emotionalLiteracy {
text-align: center;
padding: 15px;
border-radius: 10px;
}
/*******************************************
PAGE: RELAX KIDS
********************************************/
.relaxKids {
padding: 15px;
border-radius: 10px;
}
.relaxKids li {
margin: 0 17px;
}
.chill-skills-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 2%;
}
/*******************************************
PAGE: TIPS TO HELP YOUR CHILD
********************************************/
.tips {
padding: 15px;
border-radius: 10px;
}
.tips li {
margin: 0 17px;
}
/*******************************************
PAGE: HELP WITH PARENTING
********************************************/
.parenting {
padding: 15px;
border-radius: 10px;
}
.parenting-banner {
display: block;
margin: 0 0 30px;
width: 100%;
border-radius: 10px;
}
/*******************************************
PAGE: CLASSES AND WORKSHOPS
********************************************/
.workshops {
text-align: center;
padding: 15px;
border-radius: 10px;
}
iframe {
border: none;
overflow:hidden;
}
/*******************************************
PAGE: TESTIMONIALS
********************************************/
.testimonials-lydia {
padding: 1px;
border-radius: 10px;
}
.testimonials-lydia p {
margin: 5px 17px 0;
}
.testimonials-benjamin {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-benjamin p {
margin: 5px 17px 0;
}
.testimonials-gabby {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-gabby p {
margin: 5px 17px 0;
}
.testimonials-amy {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-amy p {
margin: 5px 17px 0;
}
.testimonials-isabelle {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-isabelle p {
margin: 5px 17px 0;
}
.testimonials-johnny {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-johnny p {
margin: 5px 17px 0;
}
/*******************************************
COLORS
********************************************/
/* site body */
body {
background-color: #fff;
color: #000;
}
/* grey header */
header{
background: #fff;
border-color: #000;
}
/* nav background on mobile */
nav {
background: #D4BDD7;
}
/* links */
a {
color: #000;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #000;
transition: .5s;
}
p.littleStars {
color: blue;
}
.welcomeBar {
background-color: #659EB8;
}
#collections li a p {
color: black;
background: rgba(235, 229, 235, .3);
}
#collections li a:hover p {
background: rgba(235, 229, 235, .9);
}
.emotionalLiteracy {
background-color: #F15369;
color: white;
}
.relaxKids {
background-color: #8B5D8D;
color: white;
}
.tips {
background-color: #ECE272;
color: black;
}
.parenting {
background-color: #F4B97B;
color: black;
}
.workshops {
background-color: #71A87B;
color: white;
}
/* testimonial boxes */
.testimonials-lydia {
background-color: #F15369;
color: white;
}
.testimonials-benjamin {
background-color: #F4B97B;
color: white;
}
.testimonials-gabby {
background-color: #ECE272;
color: white;
}
.testimonials-amy {
background-color: #71AB7B;
color: white;
}
.testimonials-isabelle {
background-color: #2e619f;
color: white;
}
.testimonials-johnny {
background-color: #8B5D8D;
color: white;
}
The CyberDuck Server files are organised like this:
Please help, I cannot seem to get the logo to appear how I would like. I have tried renaming it, uploading CSS and Index files from scratch so they exactly math Brackets. But still get nothing. Don't really understand what I am doing wrong.
Many Thanks,
Luke
I do not understand why the logo is showing smaller on the contact.html page:
Do you know why this might be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html" id="logo">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<!------------ PRODUCTS -------------------------------------
<li>Products</li>
------------------------------------------------------------->
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>For more details please contact me.</p>
<p>I have a current DBS Certificate and also Public Liability Insurance.</p>
</section>
<section id="secondary">
<h3>Contact Information</h3>
<ul class="contact-info">
<li class="phone">Phone: 07916 337 916 </li>
<li class="mail">Email: Donja#donjaswell-beingforkids.co.uk</li>
<li class="facebook">CLick to Message me on Facebook!</li>
</ul>
<!--
<h3>Hours of Operation</h3>
<p>Monday - Friday 8:00am - 5:30pm</p>
<h3>Address</h3>
-->
<p></p>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
The site is working. If its not working for you clear you cache or do a force refresh / hard refresh.
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>
Working on a page for my website and I'm trying to set up a series of profiles side-by-side.
The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side.
I'm fairly uncertain of how to do this, ass I thought fixing the padding and adding inline to the blocks themselves would stack them side by side. Help?
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img.center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.Gar{
padding-left: 300px;
}
.gar-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.gar-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
/*MAYU PROFILE*/
.Mayu{
padding-left: 750px;
display: in-line;
}
.mayu-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
display: in-line;
}
.mayu-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
display: in-line;
}
<!doctype html>
<html>
<!--HEAD INFORMATION-->
<head>
<link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<!--END: HEAD INFORMATION-->
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
<p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="gar-block1"><h3>"Gar"</h3></div>
<div class="gar-block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</p>
<!--CHARACTER PROFILE: MAYU-->
<div class="Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="mayu-block1"><h3>Mayumi Mori</h3></div>
<div class="mayu-block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</aside>
</p>
</body>
</html>
I'm not sure if i can understand you well here but did you mean that you want the profile to be centered?
If this is the case, i already made it for you.
Please also check your html code, there are lots of missing </> close tag
I also edit some of your codes, please check the codes below both HTML and CSS.
Since .Gar and .Mayu are same layout, i made the css layout of it in one class profile display both container inline-block
Hope it helps.
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img .center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.profile {
margin-left: 300px;
display: inline-block;
margin-bottom: 100px;
}
.block1 {
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.block2 {
background-color: #d9d9d9;
color: black;
font-family: "Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact</li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
</p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="profile Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="block1">
<h3>"Gar"</h3>
</div>
<div class="block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</div>
</p>
</div>
<!--CHARACTER PROFILE: MAYU-->
<div class="profile Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="block1">
<h3>Mayumi Mori</h3>
</div>
<div class="block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</div>
</aside>
</p>
</div>
Use float:left; in your css style sheets.
#a{
float:left;
}
#b{
float:left;
}
this two divs whith id : a , b will be side by side but you need to use clear:both; in next div;Remember about closing tags .I hope it helps