want a display:block but no new line

Question

jackbauer24 0 Junior Poster

11 Years Ago

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.

web-design

4 Contributors
19 Replies
2K Views
6 Days Discussion Span
Latest Post 11 Years Ago Latest Post by JorgeM

All 19 Replies

JorgeM 958 Problem Solver

11 Years Ago

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>

|-|x 126 Junior Poster in Training

11 Years Ago

try using display:inline-block

JorgeM 958 Problem Solver

11 Years Ago

hmm...the code I posted doesnt line up the two items with no space between?

JorgeM 958 Problem Solver

11 Years Ago

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.

JorgeM 958 Problem Solver

11 Years Ago

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.

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

html_and_css.zip (1.05 KB)

jackbauer24 commented: 1st rep point +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jackbauer24 0 Junior Poster · Answer 1 · 2012-05-29T14:04:37+00:00

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.

jackbauer24 0 Junior Poster · Answer 2 · 2012-05-29T15:01:39+00:00

jackbauer24 0 Junior Poster

11 Years Ago

I added float:left; but still on a new line. :-(

brainfo -5 Junior Poster in Training · Answer 3 · 2012-05-30T06:16:18+00:00

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

jackbauer24 0 Junior Poster · Answer 4 · 2012-05-30T11:08:31+00:00

hey jorgeM, your code works! what addition did you make to my code?

jackbauer24 0 Junior Poster · Answer 5 · 2012-05-31T04:47:57+00:00

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.

jackbauer24 0 Junior Poster · Answer 6 · 2012-05-31T04:51:26+00:00

Hearth-inline-block doesn't work. Still on a new line.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 7 · 2012-05-31T14:27:23+00:00

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.

jackbauer24 0 Junior Poster · Answer 8 · 2012-05-31T14:34:21+00:00

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.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 9 · 2012-05-31T15:09:01+00:00

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.

jackbauer24 0 Junior Poster · Answer 10 · 2012-06-01T05:24:27+00:00

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.

jackbauer24 0 Junior Poster · Answer 11 · 2012-06-01T05:26:02+00:00

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.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 12 · 2012-06-01T13:00:07+00:00

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.

jackbauer24 0 Junior Poster · Answer 13 · 2012-06-01T13:46:06+00:00

jackbauer24 0 Junior Poster

11 Years Ago

OK, anyways can you teach me?

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 14 · 2012-06-04T16:31:14+00:00

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.

want a display:block but no new line

Recommended Answers Collapse Answers

All 19 Replies

Recommended Answers