Hi, I am trying to get this header and navigation bar all lined up. I cant post a picture… but i want the diving club and bubble under to be lined up> I have tried everything, I am not seeing the answer.
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com
</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash!</p>
</div>
</div> <!-- end of header div -->
<!-- insert navigation page under here -->
<div id="mainnavigation">
<!-- <h3> Site Navigation</h3> -->
<ul>
<li> <a href="index.html"> Home </a> </li>
<li> <a href="about.html"> About </a> </li>
<li> <a href="contact.html"> Contact </a></li>
<li> <a href="gallery.html"> Image Gallery </a></li>
</ul>
</div>
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<p> <img src="http://3.bp.blogspot.com/-JetE-eWaJNQ/UBj8A7Ct_UI/AAAAAAAAXwU/YK0l1i3_FKQ/s1600/Darek%2BWilamowski%2BDIVE.jpg" class="feature" width="200" height="162" alt="A circle of divers practice their skills" /></p>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and
successfully found your way to the start point - or in
this case, our home page.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
CSS: /*
css style sheet
*/
body{
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #C9DDFF;
line-height: 125%;
padding: 0;
margin: 0;
}
li{
font-size:small;
list-style:none;
}
p {
font-size: large;
color: y;
}
em{
text-transform:uppercase;
}
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}
a:link{
color:white;
}
a:visited {
color: navy; ;
}
a:hover{
color:green;
}
a:active{
color:red;
}
h1, h2, h3{
font-family:"Trebuchet MS", Helvetica;
color:white;
}
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}
h2 {
color:navy;
font-size: 130%;
padding-top:15px;
}
.fun {
font-family: Helvetica, serif;
color: #339999;
letter-spacing: 0.15em;
}
blockquote.fun{
}
/*.highlight { */
/*border-width: 2px;*/
/*
border-top: dotted;
border-bottom:solid;
border-bottom-color: white;
border-right-style: double;
border-right-color: fuchsia;
border-left-style:double;
border-left-color: red;
border-left-width: 5px;
border: 5px solid blue /* this is short hand way of doing borders /*
}
*/
#header, #sitebranding, #tagline, #mainnavigation, #bodycontent {
padding: 1px;
margin-bottom:1px;
}
#mainnavigation, #bodycontent, #header {
position: absolute;
}
#mainnavigation, #bodycontent {
top: 107px;
}
#bodycontent {
left: 200px;
}
#header {
width: 100%;
}
#mainnavigation {
width:180px;
background-color: #7da5d8;
}
#header {
border-top: 3px solid #7da5d8;
}
.feature{
float:right;
margin:10px;
}
img{
border: 15px solid white;
}
.galleryphoto p{
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
.galleryphoto p span {
font-weight: normal;
color:gray;
}
.galleryphoto img {
border: 15px solid white;
}
.galleryphoto{
padding-bottom:20px;
border-bottom: 1px solid navy;
margin-bottom:10px;
}
/*!--#someclouds{
border: 1px solid black;
padding:10px;
background-color: #aebbdb;
background-image:url(clouds.jpg);
}
*/
#horizontalfade {
border: 1px solid black;
background-color: white;
background-image: url(hori-fade.gif);
background-repeat: repeat-x;
padding: 20px;
padding:19px;
}
#mainnavigation{
width: 180px;
height: 484px;
background: #7da5d8 url(background/nav-bg.jpg) no-repeat;
/* the above code says make a background with a picture located in background folder, on ur desktop
"/" means inside nav-bg no repeat means just one image will be shown. The main nav picture is 180X484 so in css
you can set the size there.
*/
}
