I am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.
Here is my problem, I have drawn a red box around it to indicate the problem -
See below
Here is the html code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
Here is the css -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
I Appreciate the help!
Try this one...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
width:70%;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg" style="width:70%">
<img src="img/specials.png" style="width:30%;float:right;">
<div class="fix"></div>
</div>
</div>
</body>
</html>
This is badly formatted, dunno if it is the fix to your problem, but needs to be changed.
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
should be at least this:
<nav>
<ul>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
</ul>
<h1>REGION</h1>
</nav>
Without linking to the site and seeing the size of the images, I think your problem is with the CSS that deals with the slider.
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
I would start with removing the width and margin settings as I expect that is causing the problem and remove the first child part. First focus on getting the slider working as per the maker of the sliders css, then add your own.
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
I am having some problems with floated nav. As can be seen in the first image below, I use position in my code and the result is that the nav is floated above the logo when I scaled the browser.
But I want the nav and the logo to be separated (like the second image) whenever I scale the browser. What should I do?
Are there any other ways to do that without using float?
This my my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav{
float: right;
position: absolute;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="images\logo.png" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
There are many ways to do that. Here's one:
Add this to your style:
nav {margin-left: 50px;}
Here is one version where nav floats right: jsfiddle
CSS:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
margin-left: 50px;
}
/* width is set to 80% and nav floats right, no pos absolute */
header nav{
float: right;
width: 80%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
This is other method using display:flex.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header {
display: flex !important;
justify-content: space-between;
}
.logo img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
#media screen and (max-width:1024px){
.logo {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/250x150/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
You might need to adjust the widths a little bit. You can add max-width and min-with to both your logo and nav too.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
/* add the width and margin to your logo class*/
header .logo{
float: left;
margin-right:2%;
width:26%;
}
/* make sure your image has a width */
header .logo img{
width:100%;
}
/* add the width to your nav class */
header nav{
float: right;
width:70%;
padding-top:5%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
This is one method using float:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav {
float: right;
position: relative;
margin-top: 35px;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#media screen and (max-width:1169px){
header .logo {
width: 19%;
}
}
#media screen and (max-width:767px){
header .logo {
width: 15%;
}
header a {
padding: 5px;
font-size: 14px;
}
header nav {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
I have page where I want to put navigation bar Menu on the left side of the page. I'm struggling to align text in a tag to the left side. I tried text align to all three elements a,ul and li but that still didn't fix the problem. Also I have the problem with my horizontal navigation bar. I would like to be aligned with h3 tag in my contentMain div. I'm not sure why my two div's are not next to each other as well. if someone can see where my code is off please let me know. Thanks.
div.container {
width: 100%;
height: 100%;
}
.navMenuLeft {
width: 180px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
float: left;
display: block;
background-color: white;
}
.navMenuLeft h3 {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0;
background-color: #000099;
color: white;
text-align: left;
padding-left: 5px;
}
.contentMain h3 {
margin-left: 10px;
margin-right: 10px;
background-color: #000099;
color: white;
text-align: left;
padding-left: 5px;
}
.hfNavLeft {
margin-left: 10px;
margin-right: 10px;
}
.hfNavLeft ul {
list-style: none;
text-align: left;
background-color: #d3d3d3;
}
.hfNavLeft li {
text-align: left;
}
.hfNavLeft a {
color: black;
text-decoration: none;
cursor: pointer;
}
.hfNavLeft a:hover {
color: #999999;
}
.contentMain {
margin-left: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: relative;
vertical-align: top;
float: left;
display: block;
background-color: white;
min-width: 800px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="navMenuLeft">
<h3>Menu</h3>
<nav class="hfNavLeft">
<ul>
<li>Reports</li>
</ul>
</nav>
</div>
<div class="contentMain">
<h3>Home</h3>
<nav class="hfNavTop">
Demographic
Adult
</nav>
</div>
</div>
</body>
</html>
It's hard to tell what you want... but I can explain the 'reports' alignment. It's in a ul tag - which has default padding and margins. text-align: left; is the default across the board for all elements already.
https://jsfiddle.net/sheriffderek/tLbbzqws/
<aside class='sidebar'>
<h2>Menu</h2>
<nav class='y-navigation'>
<ul class='item-list'>
<li class='item'>
<a href='#'>Reports</a>
</li>
</ul>
</nav>
</aside>
<section class='main-content'>
<h1>Content</h1>
<nav class='x-navigation'>
<ul class='item-list'>
<li class='item'>
<a class='link' href="#">Demographic</a>
</li>
<li class='item'>
<a class='link' href='#'>Adult</a>
</li>
</ul>
</nav>
</section>
...
ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar {
width: 100%;
max-width: 30%;
float: left;
background: lightgreen;
}
.main-content {
width: 100%;
max-width: 70%;
float: left;
background: lightblue;
}
I made several changes on your code. Is this what you want to achieve? .navMenuLeft and .contentMain next to each other?
body {
margin: 0;
}
div.container {
width: 100vw;
height: 100%;
display: flex;
align-items: center;
}
.navMenuLeft {
width: 180px;
}
.navMenuLeft h3 {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0;
background-color: #000099;
color: white;
padding-left: 5px;
}
.contentMain h3 {
background-color: #000099;
color: white;
margin: 0;
}
.hfNavLeft {
margin-left: 10px;
margin-right: 10px;
}
.hfNavLeft ul {
list-style: none;
background-color: #d3d3d3;
}
.hfNavLeft ul li {
margin: 0;
padding: 0;
}
.hfNavLeft a {
color: black;
text-decoration: none;
cursor: pointer;
}
.hfNavLeft a:hover {
color: #999999;
}
.contentMain {
flex-grow: 1;
padding: 0 1rem;
}
.contentMain .hfNavTop {
margin-top: 12px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="navMenuLeft">
<h3>Menu</h3>
<nav class="hfNavLeft">
<ul>
<li>Reports</li>
</ul>
</nav>
</div>
<div class="contentMain">
<h3>Home</h3>
<nav class="hfNavTop">
Demographic
Adult
</nav>
</div>
</div>
</body>
</html>
I'm not sure your require.
If you what align elements on the left side to left.
just add
ul{
padding: 0;
}
Here's the JsFiddle: https://jsfiddle.net/ztxmqyxg/
<!DOCTYPE html>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
<ul>
<img src="images/logo.png">
<li>iPhone</li>
<li>Mac</li>
<li>iPad</li>
<li>iPod</li>
</ul>
<div id="ad">
<h1>Think different</h1>
</div>
<div id="product-container">
<div id="product" class="product2">
</div>
<div id="product" class="product1">
</div>
</div>
<div id="product-container2">
</div>
Here is the CSS:
html,body {
padding:0;
margin:0;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
ul img {
margin-top: 7px;
margin-right:30px;
display: block;
float: left;
height: 40px;
}
li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: #EDEDED;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #EEEEEE;
color:#000000;
text-decoration:none;
}
#ad {
padding: 5px 20px;
background-color: #000000;
height: 200px;
}
h1 {
font-family: 'Dosis', sans-serif;
color: #EDEDED;
}
#product-container {
margin: 0px;
padding: 0px;
}
#product {
padding: 5px 20px;
height: 300px;
display: inline-block;
}
.product1 {
background-color: #DAE7EB;
float: right;
width: 50%;
}
.product2 {
background-color: ;
width: 50%;
}
#product-container2 {
height: 300px;
background-color: #E9E9E9;
}
Well, in the JSfiddle there's a gap between the nav bar and the 2 first divs, that doesn't happen when I run it on my computer so don't mind that.
The problem is the gap between the white and blue boxes and the gray one on the bottom, as you see there's a small gap, but I don't see why that could be.
Actually I tried setting margin to 0 (to see if that worked) but it didn't.
It is for display: inline-block in #product div that cause to unwanted 5px margin. remove it and change .productcontainer to display:flex
html,body {
padding:0;
margin:0;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
ul img {
margin-top: 7px;
margin-right:30px;
display: block;
float: left;
height: 40px;
}
li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: #EDEDED;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #EEEEEE;
color:#000000;
text-decoration:none;
}
#ad {
padding: 5px 20px;
background-color: #000000;
height: 200px;
}
h1 {
font-family: 'Dosis', sans-serif;
color: #EDEDED;
}
#product-container {
margin: 0px;
padding: 0px;
display: flex;
}
#product {
padding: 5px 20px;
height: 300px;
}
.product1 {
background-color: #DAE7EB;
float: right;
width: 50%;
}
.product2 {
background-color: ;
width: 50%;
}
#product-container2 {
height: 300px;
background-color: #E9E9E9;
}
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
</head>
<body>
<ul>
<img src="images/logo.png">
<li>iPhone</li>
<li>Mac</li>
<li>iPad</li>
<li>iPod</li>
</ul>
<div id="ad">
<h1>Think different</h1>
</div>
<div id="product-container">
<div id="product" class="product2">
</div>
<div id="product" class="product1">
</div>
</div>
<div id="product-container2">
</div>
</body>
</html>
See this fiddle
It was the line height causing the issue. Update your CSS for #product-container as follows
#product-container {
margin: 0px;
padding: 0px;
line-height: 0; //<--- Add this
}
I've begun making a basic porfolio page and I'm starting with a simple header that I want at the top center of the white space of the page, and it seems to be hidden or just not there at all. Can anybody see what I'm doing wrong? Link to site: http://me14ch.leedsnewmedia.net/portfolio/portfolio.html
Here is the HTML bit i'm focusing on:
<div class="header"><h1>Portfolio</h1></div>
and the entire CSS for the whole site is:
* {
margin:0;
border:0;
padding:0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.navigation li {
display: inline;
}
a {
color: grey;
text-decoration: inherit;
}
a:hover{
color: black;
}
.current {
font-weight:normal;
margin-bottom:5px;
border-bottom: 2px solid;
display: table;
}
.wrapper {
margin-left: 0 auto;
margin-right:0 auto;
margin-top: 15%;
margin-bottom: 10%;
text-align:center;
}
h1 {
font-family:"Kaushan Script";
font-size: 4em;
color:#FADBC8 ;
}
h2 {
font-size: 1em;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 0.2em;
text-decoration: none;
font-family: "Poiret One";
}
#header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
.photo img {
width: 12%;
height: 12%;
border-radius:50%;
border: 3px solid #FADBC8;
margin-top:30px;
}
#sidebar {
float: left;
margin-right: 5px;
font-family: "Poiret One";
text-transform: uppercase;
letter-spacing: 0.25em;
height: 100%;
width: 20%;
text-align: left;
position: fixed;
background: #F9DBC8;
}
#sidebar li {
list-style-type: none;
color: white;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 10px;
padding: 0;
}
/* drop down menu */
#sidebar ul {
list-style-type:none;
position: relative;
width: 50%;
z-index: 2;
margin-top: 70%;
}
#sidebar ul li ul {
margin: 0;
}
#sidebar ul ul {
display: none;
}
#sidebar ul li:hover > ul {
display: block;
}
.social-sidebar-buttons {
float: right;
width: 3%;
margin-top: 31%;
margin-right: 2%;
}
in your css you have 'header' as id and not a class, use the dot notation for a class
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
adding margin:auto; will center the div in the middle. It automatically gives even spacing either side.
Well.. your defining a class but styling a id selector.
1.) remove the below.
#header { ... }
2.) replace with.
.header { ... }
3.) You need to define a height, you can keep your existing style you had associated with misplaced #header but a few additional suggestions below:
.header {
height: 100px; // define height
margin: 0 auto; // center if you want
}
You have multiple closed head tags and you haven't defined a class for your header.
<!doctype html>
<html>
<head>
<style>
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
</style>
<meta charset="UTF-8">
<title>Chloe Hammond - Digital Portfolio</title>
<link href="stylesheet2.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Kaushan+Script|Poiret+One' rel='stylesheet' type='text/css'>
<!--METADATA-->
<meta name="description" content="A digital portfolio page showcasing Chloe Hammond's most recent projects from her New Media degree course at the University of Leeds. "/>
<meta name="keywords" content="chloe, hammond, portfolio, digital, new, media, experience, contact, work, university, student, leeds, intern, internship, freelance"/>
</head>
<body>
<div id="sidebar">
<h2><ul>
<li>Home</li>
<li class="current">Portfolio
<ul>
<li>Design</li>
<li><a href="photo.html">Photo</li>
<li><a href="motion.html">Motion</li>
<li><a href="web.html">Web</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul></h2>
</div>
<div class="header"><h1>Portfolio</h1></div>
<div class="social-sidebar-buttons">
<img src="facebook2.png" target="_blank" alt="Connect with Chloe on Facebook"/>
<img src="twitter2.png" target="_blank" alt="Connect with Chloe on Twitter" />
<img src="instagram2.png" target="_blank" alt="View Chloe's Instagram feed" />
<img src="mailto2.png" target="_blank" alt="Email Chloe" />
</div>
</div>
</body>
</html>