0

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.

4
Contributors
19
Replies
21
Views
6 Years
Discussion Span
Last Post by JorgeM
Featured Replies
  • 2

    So, I went ahead and took your original code and just added in a few items to the CSS file. Also added ".navigBarLinks li" to the end of the CSS file (this is new for your code, not an update). The pictures should line up. I tested it with background … Read More

0

Try this modification. Disregard the background-colors that I used to test it, just to make sure the navbar lined up.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 <title>hey</title>

 <style type="text/css">
   ul.navigBarLinks {
   list-style: none;
   position:absolute;
   top:202px;}

   ul.navigBarLinks li {
   float: left;
   margin: 0px;
   padding:0px; 
   }

   ul.navigBarLinks a.navigLinkDecorForHome {
   text-decoration: none;
   display: block;
   float: left;
   background-color:purple;
   width:85px;
   height:64px;
   padding:0px;
   margin:0px;
   }

   ul.navigBarLinks a.navigLinkDecorForAuthors {
   text-decoration: none;
   display: block;
   float: left;
   background-color:green;
   width:170px;
   height:48px;
   padding:0px;
   margin:0px; 
   }

   ul.navigBarLinks a:hover {
   text-decoration: none;
   background-color:yellow;
   }
 </style>

</head>

<body>
  <ul class="navigBarLinks">
    <li><a class="navigLinkDecorForHome" id="youarehereForHome" href="#"></a></li>
    <li><a class="navigLinkDecorForAuthors" href="#"></a></li>
  </ul>
</body>

</html>
0

so you appended the float:left? so the next element will have to adjust according to the previous element which has a float:left and so on! Brilliant idea! I'll try it on my second laptop(home laptop) once I get home.

0

Use font-size:0; in ul and display:inline-block; font-size:12px; in li.

Edited by brainfo

0

Basically added the text-decoration:none;float:left; css to your anchor elements. You should be able to remove the backgound-color styles and replace it with your background images.

0

It is still on a new line. Here is my code(CSS):-

a.navigLinkDecorForHome {
    text-decoration:none;
 float:left;
  margin:0px;
float:left;
 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 {
 text-decoration:none;
 float:left;
float:left;
 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;
}

please tell me what to add/subtract from my code, no need to rewrite code. rewriting code makes it difficult to make out the differences between original code and code.

0

its going to be confusion to tell you which to add/remove. The best approach is to compare the two if you are interested in seeing the difference.

the only thing i really changed was that i targetted your unordered lists in CSS, added the text-decoration and floats, and changed the background from an image to color so that I can make sure it was working.

Your code is still good. If you are still having trouble, I dont mind helping you fix your original code, but at the moment, I am tied up, but can help you later.

Edited by JorgeM

0

uhhh JorgeM, no offense, but I suggest, in your work projects ( I know this is a daniweb reply so they are fine ) css, jquery, javascript whatever it maybe (other than html) should be stored in an external file. no offense again.

0

Yes of course. My replies and code presented in this format is for the simplicity in understanding the code. If I provide various files, they would be difficult to understand.

2

So, I went ahead and took your original code and just added in a few items to the CSS file. Also added ".navigBarLinks li" to the end of the CSS file (this is new for your code, not an update). The pictures should line up. I tested it with background colors, but removed them prior to zipping the file.

Votes + Comments
1st rep point
0

JorgeM, your code works, but 2nd image is a little above 1st. Rest works fine. I have a query for you. You know, I don't really straight away use up your code. In this thread, continued, can you teach me how the line up happened, why it wasn't happening with me etc etc? Please? You know, I really want to learn it instead of just copying it.

0

The 2 reputation points I talked about, I've given one. Second one when you will teach me how to do it and why it didn't happen for me (make me learn) and how the 2nd image can come down a bit.

0

Huh? Listen, people on the forum appreciate the feedback, reputation, etc. Feel free to give postive or negative reputation depending on the advice given by community members.

Personally, I do not need to barter with regard to helping out. As time permits, I would be more than happy to give help.

0

If you want to learn CSS, I would recommend that you first go through the tutorials at W3Schools. They are very good at helping you with the foundation knowledge. http://w3schools.com/css/default.asp

There are also quite a bit of books you can buy, if you want to learn about advanced CSS techniques.

If you are still having problems lining up the images, I would suggest that rather than using images, start with setting the background color. If that lines up, the images should line up the same.

It would not be easy to teach someone through the use of a forum. When it comes to HTML and CSS, I am sure that you will be able to become proficient just with the online tutorials. I have some guides and tutorials on my site as well that you are free to use.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.