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"/>                                                                                                                                     </p>
    <hr/>

    <div class="linksPositionDiv">
        <a class="homeLink" href="authoropedia.html"></a>
        <a class="aboutAlert" href="javascript:about();"></a>
    </div>



</body>
</html>

CSS:-

.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;
}
.divClass {
    border-bottom: solid 1px #FBFF00;

    margin: 0px;
    padding: 0px;
}

Can you see the <hr> in HTML???Well, I want it to appear below the authorLogo image, but it is appearing at the top. Web browser-Chrome. I have attatched a screenshot of the webpage.

The problem is that both image elements have an absolute position. Absolute removes the element from the normal flow making the hr element move to the top.

I want it to have absolute positioning. Is there any other way to get <hr> at the bottom?

try abs positioning the hr

also, there is an extraneous </p> in there.

i know that theres a </p> in there. daniweb put one itself.

.hrStyle {
    position: absolute;
    top:100px;
}

the hr disappears!

you need to add a width property, else it defaults to zero.

.hrStyle {
    position: absolute;
    top:150px;
    width:1px;
}

still hidden!

you have told it to be 1 pixel wide... it needs to be something like width:100%

WAIT! now i see it! a tiny dot towards the left! as i increase width, length increases...

perfect at 1260px;

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.