Problem With Absolute Positioning 2 Divs on Relative Image

Question

Using Bootstrap 4, I have a responsive image initially set at 2000px X 500px and I want to position 2 uls of text (it will be dynamic text) on it in exact left and right areas and the text to remain in the same place when the browser resizes.

Using relative image div and absolute on the text divs I can position the text correctly initially, but when the browser is resized the LH block of text behaves itself perfectly but the right hand block of text creeps up (3rem) and to the left (7rem) b/t 1900 and 1400px. It is as if the RH block is not obeying the CSS transform:translate rules, CSS shows the -webkit-transform:translate(10%, 12%); as present. Could anybody give me some pointers here please?

.heroimg {
    position: relative;
}

.heroimg img {
    height: 100%;
    width: 100%;
}

.noticeboard {
    list-style-type: none;
}

.newstext {
    position: absolute;
    top: 60%;
    left: 15.8%;
    transform: translate(-60%, -15.8%);
    -moz-transform: translate(-60%, -15.8%);
    -webkit-transform: translate(-60%, -15.8%);
}

.nbtext span {
    color: black;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    letter-spacing: -1px;
    font-family: "Comic Sans MS";
    padding: 10px;
    display: inline-block;
}

.eventstext {
    position: absolute;
    bottom: 10%;
    right: 12%;
    transform: translate(10%, 12%);
    -moz-transform: translate(10%, 12%);
    -webkit-transform: translate(10%, 12%);
}

<div class="container-fluid">
    <div class="heroimg">
        <picture>
            <source
                srcset="img/posts2000x500.jpg"
                media="(min-width: 1400px)"
            />
            <source
                srcset="http://placehold.it/1400x500"
                media="(min-width: 1000px)"
            />
            <source srcset="http://placehold.it/1000x500" media="(min-width: 769px)" />
            <source srcset="http://placehold.it/800x500" media="(min-width: 577px)" />
            <img
                class=" img-fluid w-100 d-inline"
                srcset="http://placehold.it/600x500"
                alt=""
            />
        </picture>

        <div class="newstext nbtext">
            <span>
                <ul class="noticeboard">
                    <li>Hot News</li>
                    <li>Interesting Topical News</li>
                    <li>Amazing News</li>
                    <li>Fantastic News</li>
                    <li>Boring News</li>
                </ul></span
            >
        </div>
        <!--/newstext-->

        <div class="eventstext nbtext">
            <span>
                <ul class="noticeboard">
                    <li>Hot Events</li>
                    <li>Interesting Topical Event</li>
                    <li>Amazing Event</li>
                    <li>Fantastic Event</li>
                    <li>Boring Event</li>
                </ul></span
            >
        </div>
        <!--/eventstext-->
    </div>
    <!--/heroimg-->
</div>
<!--/container-fluid-->

Note that the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, Nov 25 '19 at 13:50

score 0 · Answer 1 · answered Nov 25 '19 at 13:50

0

This all seems over-complicated unless I am missing something?

Use the mighty Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

With just two CSS properties you can have your ul list on opposite sides. Then use a Media Query to balance it out when you hit mobile.

*{
  margin:0;
  padding:0;
}

.pic{
  display:flex;
  justify-content:space-between;
  background:orange;
  padding:20px;
}
@media(max-width:769px){
  .pic{
    display:block;
  }
  .one{
    margin-bottom:50px;
  }
}

<div class="pic">
  <ul class="one">
    <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
  </ul>
    <ul class="two">
    <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
     <li>Some item</li>
  </ul>
</div>

answered Nov 25 '19 at 13:50

David

801
8
19

In the large image are 2 empty notice boards, one on the left of image and one on the right; I want the text to lie within the outline of the notice board. Do you know how I can do this? – Nick Nov 25 '19 at 15:04
Just apply the outline styles to either of the `ul`s – David Nov 25 '19 at 15:28
I haven't explained this one very well I think; the main image is like a cartoon with a building in the centre and cartoon noticeboards either side; I cannot see how I could style the top, bottom sides of the noticeboards when they are part of a 'cartoonized' image. When the br – Nick Nov 26 '19 at 10:36
When browser is resized (but still with XL image) the text inside the confines of the RH board moves up and to the left; the text in LH board remains perfectly centralised in the board. So my problem is: the second absolute positioned Div does not seem to be obeying the absolute position rule. I am sorry if I am being a bit slow on this one. – Nick Nov 26 '19 at 10:46

Problem With Absolute Positioning 2 Divs on Relative Image

1 Answers1