I'm new to HTML and CSS and trying to build my first portfolio website.
I'm having a few difficulties and was wondering if someone could lead me in the right direction. I want my navigation bar to stay fixed so that as you scroll down the page, it doesn't move. BUT all body items aren't aligning properly. I can't seem to get my image, the table, and the objective to align properly.
What I would like to happen:
The image is to the far left of the page, centered, and below the navigation bar
The table aligns right below the image (wherever image is, so is the table)
p.s. the table is just links to my social media accounts
The objective is to the right of the page, next to the image but lots of space between them
The title is above the objective (wherever objective is, so is the title)
In conclusion: to the right of the page should be objective and title, and to the left of the page should be image and table
Problems I'm having:
Title is hidden behind navigation bar
Table, image, and objective won't align properly
Any help would be greatly appreciated, thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>FULL NAME</title>
</head>
<body>
<div id="center">
<h1>NAME</h1>
<img src="#"/a>
<table>
<tr>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
</tr>
</table>
<h4>Objective<h4>
</div>
<div id="navigation">
<ul>
<li>MENU ITEM</li>
<li>MENU ITEM</li>
<li>MENU ITEM</li>
<li>MENU ITEM</li>
<li>MENU ITEM</li>
</ul>
</div>
<div id="footer">
<div id="bottom">
<p> © All Rights Reserved by FULL NAME<span class="em"></span></p></div>
</div>
</body>
</html>
CSS
body {
padding: 0;
margin: 0;
max-width: 960px;
font-family: Verdana, Geneva, Sans-serif;
}
#navigation {
position: fixed;
top: 0;
color: #FFFFFF;
height: 50px;
text-align: center;
width: 100%;
margin: 0;
}
#navigation li {
font-size: 30px;
padding-left: -20px;
padding-right: -20px;
color: white;
text-decoration: none;
font-family: Georgia, Serif, Times;
display: inline;
float: left;
}
#navigation ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation ul li {
width: 20%;
float: left;
color: #00131C;
}
#navigation a:link, a:visited {
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:6px;
text-decoration:none;
display: block;
}
#navigation a:hover, a:active {
background-color:#FFFFFF;
color: #000000;
}
#circle{
border-radius: 100% 100% 100% 100%;
width: 300px;
height: 300px;
position: center;
}
.center {
font-family: Verdana, Geneva, Sans-serif;
text-align: center;
top: 100px;
float: center;
margin-left: auto;
margin-right: auto;
}
.center img {
float: center;
margin-right: auto;
margin-left: auto;
}
.center p {
text-align: left;
position: relative;
float: right;
font-family: Verdana, Geneva, Sans-serif;
font-size: 30px;
top: -100px;
}
.center p{
width: 50%;
background: #FFFFFF;
border: 5px solid #FFFFFF;
border-radius: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin: 0 auto;
padding: 15px 10px 15px 10px;
background: #FFFFFF;
position: top;
}
.center table {
background-color: #FFFFFF;
margin-left: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
position: center;
}
table img {
height: 40px;
width: 40px;
float: center;
position: center:
}
#footer{
clear: both;
position: relative;
bottom: 0;
height: 3 px;
background-color: #FFFFFF;
padding: 0;
}
#bottom p {
color: black;
font-size: 15px;
padding-left: -20px;
padding-right: -20px;
padding-top: 17px;
padding-bottom: 17px;
text-decoration: none;
font-family: Georgia, Serif, Times;
float: center;
position: center;
}
The following are are somethings that are wrong with your code:
Your are using <div id="center"> in your html, however your CSS is referencing the class center
float: center; and position: center; is invalid css to center objects. For more info on how to center objects see http://www.w3.org/Style/Examples/007/center.en.html
I think that you want to something like this http://jsfiddle.net/vAuFA/
Related
I'm new to programming and I'm trying to make a website but I have a big problem. I want a navigation bar next to my logo and sticking to the top when i scroll, but I can't get it to work. The text is on top of each other and I don't know how to make it work.
<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color: black}
img.logo{ margin-left: 20px;
margin-top: 10px;}
li{ display: inline}
a{ position: fixed;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px
margin: 0px;
padding: px;}
</style>
</head>
<body>
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<li>Projecten</li>
<li>over</li>
</header>
</body>
</html>
Welcome to the world of web development!
The first order of business is to fix your CSS so it is valid. We'll also tidy it up a little.
Add a semicolon after letter-spacing: 0.5px
You don't have any value assigned to padding: px; so just remove that line
It's not necessarily invalid, but I would remove the declarations for margin-left and margin-top on the a element because you are overriding them with margin: 0px; later on.
With that done, the CSS should look like this:
body {
background-color: black;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
display: inline;
}
a {
position: fixed;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
Now, lets make the HTML valid and tidy it up, as well.
You can't have <li> elements directly under <header>. They only go inside <ol> or <ul> elements. <ul> (unordered list) makes the most sense here, so let's use that.
It's a good idea to place a value in the href attribute of your <a> element. If you're just prototyping and don't have a URL to use, yet, people typically use #.
The HTML now looks like this:
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
Now, one issue is that you are applying a fixed position to each of your <a> elements separately. What you actually want to do is apply a fixed position to the whole navbar (the whole <ul>). So change your CSS like so:
ul {
position: fixed;
}
a {
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
This is just an excerpt. But notice that I moved position: fixed; from a to ul. Really, that is all that's needed. If you want to fine tune where the navbar appears, go ahead and use top and left like so:
ul {
position: fixed;
top: 5px;
left: 10px;
}
The whole page now looks like this:
body {
background-color: black;
color: white;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
display: inline;
}
ul {
position: fixed;
top: 5px;
left: 10px;
}
a {
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
<li> elements should be in a <ul> or <ol>
In the example below, I used flexboxes for the layout. Please have a look here to learn about flexboxes.
body {
background-color: black
}
header {
display: flex;
align-items: center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
margin-left: 1em;
}
a {
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px margin: 0px;
}
<header>
<img class="logo" src="http://placehold.it/300x100">
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
Change the position to relative and add "vertical-align:top" to the anchor.
body{ background-color: black}
img.logo{ margin-left: 20px;
margin-top: 10px;}
li{ display: inline}
a{ position: relative;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
vertical-align:top;
margin: 0px;
padding: px;}
<img class="logo" src="http://lorempixel.com/300/100" style="height: auto; width: 300px" >
<li>Projecten</li>
<li>over</li>
I think having <li> tags for horizontal links is a bit to complicated for nothing. You could simply use <a> tags without the <li>. Here is an exemple of how I think would be the best.
Codepen demo
If you want the content to be scrollable with the navbar on top (without it being fixed), you need to wrap it into a <div> too. This also has the very nice effect of allowing you a simple footer, should you eventually want one.
Since you didn't specify any browser support, I took the liberty of using flex to do so.
Put your li in a ul, display li inline-block, then float both the logo and the ul left, or float the ul right and put a margin-right on it if that is what you would prefer.
Make your header fixed and the logo and nav remain at the top while scrolling.
<style>
body{ background-color: black}
header#header {
position: fixed;
width: 100%;
}
div.logo {
margin-left: 20px;
margin-top: 10px;
float: left;
}
ul#nav {
float: left;
}
ul#nav li {
display: inline-block;
}
ul#nav li a {
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
</style>
<header id="header">
<div class="logo">
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
</div>
<nav id="main_nav">
<ul id="nav">
<li>Projecten</li>
<li>over</li>
</ul>
</nav>
</header>
I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">
This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 6 years ago.
I'm trying to style the central big part called "jumpotron" which contains "letters" and "h1". When I try to push "letters" or "h1" lower in the central area vertically it moves the whole "jumpotron" together with the background image. Why does that happen? Why it doesn't respect the fact that "letters" is a child of "jumpotron" so it has to move it's margins inside of "jumpotron"? Also is there a better way to create a big image background for the "jumpotron" from the one I used?
Here's the code:
<body>
<header>
<div class="container">
<h2>Trunk Club</h2>
<nav>
<ul>
<li>How it Works</li>
<li>What to Expect</li>
<li>Stylists</li>
<li>Log In</li>
<li><a id="getstarted" href="#">Get Started</a></li>
</ul>
</nav>
</div>
</header>
<div id="jumpotron">
<div id="letters">
<h1>Premium Clothing,<br>
Great Advice,<br>
Zero Work</h1>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Source Sans Pro', sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
min-width: 800px;
height: 60px;
background-color: #151e28;
text-transform: uppercase;
}
header h2 {
color: #FFFFFF;
float: left;
margin-top: 15px;
}
nav {
float: right;
margin-top: 5px
}
nav li {
float: left;
list-style: none;
color: #878b85;
margin-left: 20px;
font-size: 12px;
font-weight: bold;
}
nav ul li:nth-child(4) {
border-left: 1px solid #878b85;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: -5px;
}
nav ul li:nth-child(5) {
border: 1px solid #878b85;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 7px;
margin-top: -5px;
}
#getstarted {
text-decoration: none;
color: #878b85;
}
#getstarted:visited {
color: #878b85;
}
#jumpotron {
width: 100%;
min-height: 670px;
background-image: url(images/Stylist_Product_Exp30-v3.jpg);
background-position: center;
background-size: 100% auto;
}
#letters {
margin-top: 500px;
}
#jumpotron h1 {
color: #FFFFFF;
text-align: center;
font-size: 55px;
}
You have to set the padding on #letters to 500, not the margin
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.
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.