having problems positioning the nav bar

james_taylor · 12-18-2012, 04:26 PM

hi guys im doing code using html and css to make a website, but im having trouble at the moment positioning the nav bar to the right to align with my heading, ill show you the code for both the css and my html home page, and if anyone can see whats wrong please let me know, thanks.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Lucia Pupilli - Home</title>
<link rel="stylesheet" type="text/css" href="website.css">
</head>

<body class="background">

<h1>Lucia Pupilli</h1>

<div id="luciaPages">
<ul>
<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>
</div>

<div class="page">
<video width="340" height="320" controls>
<p>Click to see Lucia in action</p>
<source src="luciavid.mp4" type="video/mp4">


</source>
Your browser does not support the video tag.
</video>

</div>

</body>
</html>

CSS:

.background{
background-image: url(lucia2.jpg);
background-repeat:no-repeat;
background-color: black;
}

body {
padding:0;
color:white;
border-color:white;
background-color: white;
overflow:auto;

}

.page{

margin-top:-1%;
margin-bottom:80%;
margin-left:50%;
margin-right:10%;

color:none;
border-color:none;
background-color: none;

}

#bio{
color: #C80000;
}

h1 {
color: #C80000;
font-family: Zapf Chancery, cursive;
font-size: 50px;
margin: 50px;
}

#luciaPages
{
width:100%;
margin:0 0 2%;
}

ul {list-style-type: none; }

li {display:inLine; float:left;}

ul a {color:#C80000; padding-left:25px; padding-right:25px; text-decoration: none; line-height:1px; font-family: Zapf Chancery, cursive;}

ul a:hover {color:white}

.swapMe img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
.swap1, .swapMe:hover .swap2 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe:hover .swap1, .swap2 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }

</body>

Excavator · 12-18-2012, 04:53 PM

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.