467,893 Members | 1,873 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,893 developers. It's quick & easy.

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

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
  • viewed: 1464
Share:
3 Replies
drhowarddrfine
Expert 4TB
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
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 4TB
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.

Similar topics

3 posts views Thread by David | last post: by
11 posts views Thread by A.Translator | last post: by
87 posts views Thread by John Rivers | last post: by
30 posts views Thread by MikeC | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.