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
  • 142 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by jackbauer24

Dani AI

Generated

Building on the points from and , here are a few practical, more robust ways to keep the divider visually below the author logo without brittle pixel hacks.

A recommended approach is to stop using absolute positioning for layout and group the two logos in a header container so the divider naturally flows below them. Example structure:

<header class="site-header">
  <div class="logos">
    <img class="main-logo" src="..." alt="site logo">
    <img class="author-logo" src="..." alt="author logo">
  </div>
  <hr class="header-divider">
</header>

Use a simple flex layout for .logos (two items side-by-side) and style the hr to be a visible bar (remove default borders, set height and background). This keeps the layout responsive and the divider always positioned after the logos.

If absolute positioning must be kept, wrap the logos inside a positioned container (set position: relative on the wrapper) and either:

  • give the wrapper an explicit height or bottom padding equal to the logos' height so the hr placed after the wrapper sits below them, or
  • absolutely position the hr inside that same wrapper (so it uses the wrapper as its containing block), and set explicit width and a visible thickness.

Additional tips: remove stray/mismatched tags in the markup, add meaningful alt attributes to images, and avoid fixed pixel widths for wide screens — prefer percentages with a sensible max-width. For reference on positioning and modern layout, see CSS position on MDN and the Flexbox guide.

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.