HTML:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>hey</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="functions.js"></script>
</head>
<body>
<img src="website_main-logo(main).png" class="mainLogo" height = "120" width="336"/>
<img src="authoropedia_logo.png" class="authorLogo" height="112" width="249"/>
<hr class="hrStyle"/>
<ul class="navigBarLinks">
<li>
<a class="navigLinkDecorForHome" id="youarehereForHome" href="#"></a></li>
<li> <a class="navigLinkDecorForAuthors" href="#"></a></li>
</ul>
</body>
</html>
CSS:-
a.navigLinkDecorForHome {
margin:0px;
padding:0px;
height:64px;
width:85px;
display:block;
background:transparent url('homeNav.png');
}
a.navigLinkDecorForHome:hover {
background-image: url('homeNavHover.png');
}
#youarehereForHome {
background-image: url('homeNavActive.png');
}
a.navigLinkDecorForAuthors {
margin:0px;
padding:0px;
height:48px;
width:170px;
display: block;
background:transparent url('authorNav.png');
}
a.navigLinkDecorForAuthors:hover {
background-image: url('authorNavHover.png');
}
#youarehereForAuthors{
background-image: url('authorNavActive.png');
}
.navigBarLinks {
list-style-type: none;
position: absolute;
top: 202px;
}
.mainLogo {
position: absolute;
top:5px;
left:5px;
}
.authorLogo {
position: absolute;
top: 100px;
left: 500px;
}
body {
background-image: url('back.jpg');
}
.homeLink {
text-decoration: none;
display: block;
background-image: url('home.jpg');
height: 69px;
width:205px;
}
.aboutAlert {
text-decoration: none;
display: block;
background-image: url('about.jpg');
height: 69px;
width:205px;
}
.linksPositionDiv {
position: absolute;
top: 300px;
left: 40px;
}
.hrStyle {
position: absolute;
top:200px;
width:1260px;
}
You see there in both the "navigLinkDecor"s(authors and home) there is a display:block;. If I remove that display:block;, the two images do not display. If I keep it, the second image shifts to a new line. Is there a way to make the second image( and more images which will be added later(3rd, 4th)) come on the same line as the first one? And there should be no gap(not even a little) between the two images. You see, all the images will form a navigation bar, so there should not be any space.
