Member Avatar for jackbauer24

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.

  • 3 Contributors
  • 10 Replies
  • 116 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by jackbauer24

Recommended Answers

All 10 Replies

Member Avatar for JorgeM

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.

Member Avatar for jackbauer24

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

Member Avatar for |-|x

try abs positioning the hr

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

Member Avatar for jackbauer24

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

Member Avatar for jackbauer24 
.hrStyle {
    position: absolute;
    top:100px;
}

the hr disappears!

Member Avatar for |-|x

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

Member Avatar for jackbauer24 
.hrStyle {
    position: absolute;
    top:150px;
    width:1px;
}

still hidden!

Member Avatar for |-|x

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

Member Avatar for jackbauer24

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

Member Avatar for jackbauer24

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.