By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,175 Members | 1,689 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,175 IT Pros & Developers. It's quick & easy.

navbar won't go up next to everything else; insists on being underneath

P: 2
Hi--
I am very new at this and trying to teach myself, and I have run into a roadblock that I can't figure out no matter how many times I Google it......my navbar is a vertical column of images, and I want it to go up next to the rest of the page (which consists of a banner image, a h1 image, and some text). It insists on beginning itself below the text on the page. Here is what I've got (I'm sorry if it's confusing---it is probably a frankenthing at this point)--thanks for any ideas!


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Utica Adult Learning Center</title>

<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\ksmith\Desktop\refugees.css" />

</head>

<body>
body {
font-family: tahoma, verdana, arial, sans-serif;
color: #000;
font-size: .9em;
text-align: left;
padding-left: 5%;
letter-spacing: .2em;
background-color: #fff
}
<div id="container">

#container {
position: relative;
width: 75%;
margin-right: 10em;
background: #fff;
}
<div class="img">
<img src="largebanner.jpg" alt="Main" />
div.img {
height: auto;
width: auto;
float: left;
border: none
}
<h1><img src="subtitle.jpg" /></h1>
h1 {
padding-top: 5%;
padding-left: 3%
}

<p>Text is here</p>
p {
padding-left: 5%;
padding-right: 100px
}
<div id="navbar">
#navbar {
width: 10em;
float: right;
position: absolute;
text-decoration: none;
vertical-align: top;
background-color: #fff;
}
<ul>
a:link {
text-decoration: none;
color: #800000;
}
img {
border: none
}

a:hover {
text-decoration: underline;
color: #696969
}

#navbar ul {
float: right;
text-decoration: none;
}

#navbar li {
float: right;
list-style-type: none;
padding-left: 785px;
margin-top: 0px;
text-decoration: none;
align: top
}
<li><a href="Here are all the images in the navbar, in a list" /></li>
</ul>

</div>

</div>

</body>

</html>
Jul 25 '07 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Not really. You just didn't have it marked up right. Is the above markup how you really have it? This is how you should write it up:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Utica Adult Learning Center</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
body {
font-family: tahoma, verdana, arial, sans-serif;
color: #000;
font-size: .9em;
text-align: left;
padding-left: 5%;
letter-spacing: .2em;
background-color: #fff
}
#container {
position: relative;
width: 75%;
margin-right: 10em;
background: #fff;
}
div.img {
height: auto;
width: auto;
float: left;
border: none
}
h1 {
padding-top: 5%;
padding-left: 3%
}
p {
padding-left: 5%;
padding-right: 100px
}
#navbar {outline:1px solid red;
width: 10em;
float: right;
position: absolute;
text-decoration: none;
vertical-align: top;
background-color: #fff;
}
a:link {
text-decoration: none;
color: #800000;
}
img {
border: none
}

a:hover {
text-decoration: underline;
color: #696969
}

#navbar ul {
float: right;
text-decoration: none;
}

#navbar li {
float: right;
list-style-type: none;
padding-left: 785px;
margin-top: 0px;
text-decoration: none;
align: top
}
</style>
</head>
<body>

<div id="container">

<div class="img">
<img src="largebanner.jpg" alt="Main" />
<h1><img src="subtitle.jpg" /></h1>
<p>Text is here</p>
</div>

<div id="navbar">
<ul>
<li><a href="Here are all the images in the navbar, in a list" /></li>
</ul>
</div>
</div>

</body>

</html>[/HTML]

There is no such thing as align:top though in CSS.
Jul 25 '07 #2

P: 2
Thank you--- however, when I change it to this, the entire thing shows up blank. I even tried copying and pasting to make sure I wasn't missing anything.... what am I doing wrong?
Thanks
Jul 26 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
Don't know. It works for me.
Jul 26 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.