Hello james_taylor,
To place those two elements side by side, you need to float one or both.
Look at it like this -
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lucia Pupilli - Home</title>
<style type="text/css">
.background { background: #000 url(lucia2.jpg) no-repeat; }
body {
padding: 0;
color: white;
border-color: white;
background-color: white;
}
#header {
width: 100%;
overflow: auto; /*this clears floated h1*/
}
h1 {
width: 325px;
margin: 50px;
float: left;
color: #C80000;
font-family: Zapf Chancery, cursive;
font-size: 50px;
text-align: center;
}
ul#luciaPages {
margin: 75px 0 0 325px;
list-style-type: none;
}
li {
display: inLine;
float: left;
}
li a {
color: #C80000;
padding-left: 25px;
padding-right: 25px;
text-decoration: none;
line-height: 1px;
font-family: Zapf Chancery, cursive;
}
li a:hover { color: white }
</style>
</head>
<body class="background">
<div id="header">
<h1>Lucia Pupilli</h1>
<ul id="luciaPages">
<li><a href="home.html">Home</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="listen to me.html">Listen to me</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!--end header--></div>
</body>
</html>
See a
float tutorial here.
When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.