I've been having trouble getting my buttons to center in CSS. I know the correct code to do so but all I have tried so far hasn't worked. I think that something is interfering with the code to center it but after an hour of looking I haven't been able to figure out the issue.
Here's my HTML:
#font-face {
font-family: BebasNeue;
src: url('BebasNeue Regular.otf');
}
body {
font-family: helvetica;
background-color: #F6F6F6;
margin: 0 auto;
width: 1400px;
}
.button {
background-color: #DE1B1B;
/* Red */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
ul {
margin: 0 auto;
list-style-type: none;
background-color: #2B2B2B;
font-size: 25px;
font-family: BebasNeue, sans-serif;
}
h1 {
float: left;
margin: 0px 0 20px 0;
padding: 5px 0 0 0;
width: 100%;
font-size: 50px;
font-family: BebasNeue, sans-serif;
color: #E9E581;
background-image: url('classroomb.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#heading {
margin-top:
}
li {
display: inline;
}
a {
padding: 6px;
text-decoration: none;
color: #DE1B1B;
position: center;
}
p {
font-size: 22px;
padding: 40px;
margin: 0 auto;
width: 1000px;
}
<!DOCTYPE html>
<html>
<head>
<title>Ms. Houck's Math Class</title>
<link rel="stylesheet" href="HouckStyle1.css">
</head>
<body>
<header>
<div>
<ul>
<li> Home </li>
<li> Homework </li>
<li> HW Solutions </li>
<li> Documents </li>
<li> Calendar </li>
</ul>
</div>
</header>
<center>
<h1>
<div id="heading">Ms. Houck's Math Classes<br><br><br><br></h1>
</div>
</center>
<p>
Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and schedule by clicking the links below. <br>
<br>Homework
Homework Answers
</p>
</body>
</html>
The best and the easiest way is to use flexbox and use justify-content:center which aligns the items in the center of the main axis. You can learn more about flexbox here.
You could just wrap the two buttons in a new <div> which you then tell to have its content centered:
Add to css:
.center {
text-align: center;
}
HTML:
<div class="center">
Homework
Homework Answers
</div>
JSFiddle
Please consider using <div class="center"> instead of deprecated <center> tag.
You can just use flexbox and justify-content: center; on the navigation ul (took out div)
Use margin on the li a to modify spacing.
#font-face {
font-family: BebasNeue;
src: url('BebasNeue Regular.otf');
}
body {
font-family: helvetica;
background-color: #F6F6F6;
margin: 0 auto;
width: 1400px;
}
.button {
background-color: #DE1B1B;
/* Red */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
ul {
margin: 0 auto;
list-style-type: none;
background-color: #2B2B2B;
font-size: 25px;
font-family: BebasNeue, sans-serif;
}
h1 {
float: left;
margin: 0px 0 20px 0;
padding: 5px 0 0 0;
width: 100%;
font-size: 50px;
font-family: BebasNeue, sans-serif;
color: #E9E581;
background-image: url('classroomb.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#heading {
margin-top:
}
header ul {
display: flex;
justify-content: center;
}
li {
display: inline;
}
a {
padding: 6px;
text-decoration: none;
color: #DE1B1B;
position: center;
}
p {
font-size: 22px;
padding: 40px;
margin: 0 auto;
width: 1000px;
}
<!DOCTYPE html>
<html>
<head>
<title>Ms. Houck's Math Class</title>
<link rel="stylesheet" href="HouckStyle1.css">
</head>
<body>
<header>
<ul>
<li> Home </li>
<li> Homework </li>
<li> HW Solutions </li>
<li> Documents </li>
<li> Calendar </li>
</ul>
</header>
<center>
<h1>
<div id="heading">Ms. Houck's Math Classes<br><br><br><br></h1>
</div>
</center>
<p>
Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and schedule by clicking the links below. <br>
<br>Homework
Homework Answers
</p>
</body>
</html>
#font-face {
font-family: BebasNeue;
src: url('BebasNeue Regular.otf');
}
body {
font-family: helvetica;
background-color: #F6F6F6;
margin: 0 auto;
width: 1400px;
}
.button {
background-color: #DE1B1B;
/* Red */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
ul {
margin: 0 auto;
list-style-type: none;
background-color: #2B2B2B;
font-size: 25px;
font-family: BebasNeue, sans-serif;
}
h1 {
float: left;
margin: 0px 0 20px 0;
padding: 5px 0 0 0;
width: 100%;
font-size: 50px;
font-family: BebasNeue, sans-serif;
color: #E9E581;
background-image: url('classroomb.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
li {
display: inline;
}
a {
padding: 6px;
text-decoration: none;
color: #DE1B1B;
position: center;
}
p {
font-size: 22px;
padding: 40px;
margin: 0 auto;
width: 1000px;
}
.center{
text-align:center;
}
<header>
<div>
<ul>
<li> Home </li>
<li> Homework </li>
<li> HW Solutions </li>
<li> Documents </li>
<li> Calendar </li>
</ul>
</div>
</header>
<br/>
<div class="center"><h1>Ms. Houck's Math Classes</h1></div><br/><br/><br/><br/><br/>
<p>
Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and
schedule by clicking the links below.
</p>
<br><br>
<div class="center">
Homework
Homework Answers</div>
Your buttons are not centered. They are in <p> code.
If you want to center them - make other block with align tag
<center> tag is deprecated, should not use this
Related
My question is how do I put the menu in the middle of the header block because I can't figure it out.
I am trying to make a website for my dad's business by using some templates that I find on the internet, this is one of them and I really like but I can't figure out how to center the navbar. I am not the best when it comes to CSS.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: black;
height: 70px;
width: 100%;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
}
#menu {
float: right;
color: white;
text-align: center;
}
<html>
<link rel="stylesheet" href="index.css" type="text/css">
<head>
<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
I rewrote most parts of your code to fix the invalid markup and to include the correct semantic tags for screenreaders. Also, I changed a bit the structure to be semantically correct. Simplified your CSS.
For the invalid Markup, read my comment below your question.
Use the <header>-tag for your header. It is a semantic tag.
The image is part of the header but not part of the navigation, semantically speaking. AS such place it inside the header but not inside the navigation
Use the <nav>-tag for your navigation bar as it is also a semantic tag.
Learn about Flexbox and use it! float is a property to float an element within a text block (like in a newspaper). It is not for aligning purposes. Since 2013 we have Flexbox which is well supported since 2015!
Side Note:
I know this sounds hard but it must be said. If the coding is done for a business Homepage then no unexperienced or beginner without proper skill/knowledge-base should attempt to do it. At least not without the supervision of an experienced coder. A Business Homepage is one of the most important marketing aspects. If you screw this up, then the business will be hurt from it and your dad would lose money!
Then even for experienced coders, it is a NO-GO to just copy code from the internet and include it without correction or knowing what they include. The coder is responsible for the code and can not just state that he didn't write those code pieces originally. It is a coder's job to correct errors such as invalid markups.
body {
margin: 0;
padding: 0;
}
/* ~~ Top Navigation Bar ~~ */
header {
display: flex;
width: auto;
align-items: center; /* vertically center the links */
}
nav {
margin: 0 auto; /* horizontally center the links */
}
nav > ul {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<header>
<img src="https://via.placeholder.com/50.jpg">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
</body>
</html>
#navigation-container set max-width instread of width.
margin:0 auto will push from left and right side to #navigation-container so it will be center.
I have replace you css with better approach by using display:flex and setting justify-content:center sets it center to horizontally.
Ans it's good practice to use <header></header> tag for header and include it inside of <body> rather than in <head>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
max-width: 1200px;
/*you just need to set this*/
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.navigation-bar {
background-color: black;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: flex;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
line-height: 70px;
}
<body>
<header>
<div class="navigation-bar">
<div id="navigation-container">
<img src="images/logo.png">
<ul>
<li>Home</li>
<li>Services</li>
<li>Rent a Boat</li>
<li>Gallery</li>
<li>Contact</li>
<li>Location</li>
</ul>
</div>
</div>
</header>
</body>
I suppose you are trying to center the navbar at the top of the page. To the (.navigation-bar li) class, add the following property: display: inline-block;
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: black;
height: 70px;
width: 100%;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
display: inline-block;
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
color: white;
text-align: center;
}
.navigation-bar li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
text-align: center;
}
#menu {
float: right;
color: white;
text-align: center;
}
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
Question
I've looked over the code very carefully and can't see a reason at all whatsoever why the header nav float isn't working in the stylesheet. I'm including all the html code and css code down below. I want to move my
header nav to the right in my css code so that my links appear on the top right corner of my home page horizontally.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
You have two problems that become quite obvious if you look at the page in the browser inspector:
The first is that you have floated the branding div, and floating an element removes it from the regular flow and it isn't full width anymore, so the navigation that is inside is put below the heading.
You have mixed the opening and closing tags of <h1> and <span class="highlight"> and this caused that the block <h1> is being inside of the inline <span>, at least in Firefox.
Compare this screenshot of your example in the Firefox inspector:
With this other one of the adjusted code:
Remember, browser inspector is your friend.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
/*float: left;*/
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><h1><span class="highlight">James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I added class="nav" to the navigation unordered list and set position to absolute using a .nav selector.
.nav {
position:absolute;
top: 20px;
right:0px;
}
You can change the position by adjusting top and right values.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.nav {
position:absolute;
top: 20px;
right:0px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
}
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</h1></span>
<nav>
<ul class="nav">
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I think your #branding div being floated left is breaking it--and doesn't seem necessary since you want that left aligned anyway.
It works for me with:
#branding {
float: none
}
Also - in your html you need to move your floated .nav div before the .highlight span
/*==================this is the part that is causing me headaches, I can't get the Header to stay flush with the top without losing the layout*/
header {
background-image: url("images/song.png");
background-color: #00020e;
height: 210px;
width: 1050px;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
So basically, I can't seem to get the header flush with the top of the page. I can see the background image at the top behind the header, I don't want that. I am clearly new to all of this and this is my first attempt at coding a website.
Here is a screenshot
The reason there is a small gap here is because the standard element styling in many browsers includes automatic value for things like padding and margin. It's a good idea to initialize these CSS values for all elements when starting new projects.
Learn more about CSS resets here.
Adding padding:0 and margin:0 to your body solves the issue. I changed the styling of your header to better illustrate that it is indeed flush with the top of the page now. There is still a small gap between your logo and the top of the page however because of the padding on your logo.
/*==================this is the part that is causing me headaches, I can't get the Header tostay flush with the top without losing the layout it self*/
header {
background-image: url("images/song.png");
background-color: white;
border:1px solid red;
height: 210px;
width: 1050px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
padding:0;
margin:0;
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
write following on the top of your CSS file (before any other code)
*
{
margin:0;
padding:0;
}
Every browser has some default padding and margin. By writing the above lines on the top your css file you are saying that every element (denoted by *) should have margin and padding as 0 when the page loads. I hope this helps
I am recently new to CSS and HTML and I have a problem while allocating my block under the header:
I have tried several solutions but I have not succeed. I would appreciate if you could give me a hint with it. Thanks
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title goes here</title>
<meta name="description" content="Description of your site goes here">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page">
<div class="header" >
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
<div class="topmenu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
And my CSS CODE:
body {
font-family: sans-serif,Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
float: left;
padding: 42px 0px 0px 0px;
position: center;
}
.header {
position:absolute;
top:42px;
margin-left:-500px;
left:50%;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1{
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px; /* Here is the trick... line-height = image height */
}
.topmenu {
position:absolute;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Thanks
I have made several changes to your html/css:
body {
font-family: sans-serif, Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
margin: 0 auto;
}
.header {
position: relative;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px;
/* Here is the trick... line-height = image height */
}
.topmenu {
position:relative;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
padding-right: 8px;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
<body>
<div class="page">
<div class="topmenu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>What's New
</li>
<li>Services
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Links
</li>
</ul>
</div>
<div class="header">
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
</body>
You need to understand three things to improve your html & css skills:
Always follow natural stacking order (first element in html will
display before second element...),
Don't use position: absolute
except if you know what you are doing as #Billy said,
Use html5 tags if you don't need to support IE8 and below. If you do, then use HTML5
Shiv to make them compatible.
Now here is a valid code that is also responsive (it will resize to your browser's viewport size). I have added a lot of comments in the code so that you can easily understand.
Good luck with your project!
.page {
width: 100%; /* Makes the page responsive */
max-width: 1000px; /* all the content inside this div will be 1000 px width */
margin: 0 auto; /* To center your page div in the page */
}
.topmenu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.topmenu ul li a {
display: block;
float: left;
width: 14.2857142%; /* 100 / 7 (number of menu items) */
background-color: #000;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
padding: 10px 0;
text-align: center;
}
.topmenu ul li a:hover {
/* As a general rule, never use images for hovers */
background-color: #fff;
color: #000;
}
.topmenu:after { /* This is a clearfix to clear your floated elements */
content: "";
display: table;
clear: both;
}
header img {
display: inline-block;
width: 250px;
height: 190px;
}
header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 25px;
color: black;
vertical-align: top; /* if you want the text to start at the top of the picture. Otherwise try middle or bottom */
}
<div class="page">
<!-- always start with the first element on your page: here it's your navigation -->
<nav class="topmenu"> <!-- use html5 tags. If you need to support IE8 or below you can use HTML5 Shiv -->
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</nav>
<header> <!-- same, use html5 tags -->
<!-- As a general rule, css is for styling not html so don't put any width, height or style in img tag -->
<img src="http://placehold.it/250x190" alt="your picture description"/> <!-- always use alt text in images for accessibility purposes -->
<h1>SOME TEXT HERE</h1>
</header>
</div> <!-- don't forget this div that closes your .page -->
Remove all of your absolute positioning (and add in the missing </div> tag to finish the .page div - I'm assuming this is wrapping all of your content inside).
To center your content, replace your .page CSS rule with this:
.page{
width: 1000px; // I would reccommend using 960px instead as it is more standard
margin: 0 auto;
//add your padding in if you need it
}
Don't use absolute positioning until you understand it and why/how/when you should use it
I think you should rearrange your HTML markup.It doesn't seem like you are using the proper nested rule.I suggest you try to remove the img tag outside the h1 tag.Your div with class = "page" doesn't have a ending tag.