How to make the left part marked in black circle stick out when it has a container marked with red ?

16 Replies

Jochem•3mo ago

something something share your code

possibly with a pseudo element. As Jochem says, code would help

<div class="bg-video">
    <div class="announcement-container">
        <div class="container">
                    <div class="announcements">
        <p id="announcements">Announcements</p>
         <div class="announcement">
            <img src="./assets/Rectangle 12.png" alt="">
            <p>International Topical meeting on Classical and Quantum Optics</p>
         </div>
         <div class="announcement">
            <img src="./assets/Rectangle 12.png" alt="">
            <p>IOnline application invited for Data Processing Assistant, Placement Officer and Engineer (HPC) on co</p>
         </div>
                  <div class="announcement">
            <img src="./assets/Rectangle 12.png" alt="">
            <p>IOnline application invited for Data Processing Assistant, Placement Officer and Engineer (HPC) on co</p>
         </div>
    </div>
        </div>
    </div>
    
    <img src="./assets/bg.png" alt="bg">
</div>

<div class="bg-video">
    <div class="announcement-container">
        <div class="container">
                    <div class="announcements">
        <p id="announcements">Announcements</p>
         <div class="announcement">
            <img src="./assets/Rectangle 12.png" alt="">
            <p>International Topical meeting on Classical and Quantum Optics</p>
         </div>
         <div class="announcement">
            <img src="./assets/Rectangle 12.png" alt="">
            <p>IOnline application invited for Data Processing Assistant, Placement Officer and Engineer (HPC) on co</p>
         </div>
                  <div class="announcement">
            <img src="./assets/Rectangle 12.png" alt="">
            <p>IOnline application invited for Data Processing Assistant, Placement Officer and Engineer (HPC) on co</p>
         </div>
    </div>
        </div>
    </div>
    
    <img src="./assets/bg.png" alt="bg">
</div>

.bg-video{
    position: relative;
}
.announcement-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: rgba(255, 255, 255, .6);
}
.announcements{
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    gap: 32px;
}
#announcements{
    background-color: #E83838;
    font-family: "Lato", sans-serif;
    min-width: min(100%, 524px);
    padding-block: 15px;
    font-size: 25px;
    line-height: 22px;
    clip-path: polygon(93% 0, 100% 50%, 92% 100%, 0% 100%, 0 51%, 0% 0%);
    padding-right: 75px;
    text-align: right;
    color: #fff;
}
.announcement{
    display: flex;
    align-items: center;
}
.announcement img{
    width: 16px !important;
    height: 16px;

}
.bg-video img{
    width: 100%;
}

.bg-video{
    position: relative;
}
.announcement-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: rgba(255, 255, 255, .6);
}
.announcements{
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    gap: 32px;
}
#announcements{
    background-color: #E83838;
    font-family: "Lato", sans-serif;
    min-width: min(100%, 524px);
    padding-block: 15px;
    font-size: 25px;
    line-height: 22px;
    clip-path: polygon(93% 0, 100% 50%, 92% 100%, 0% 100%, 0 51%, 0% 0%);
    padding-right: 75px;
    text-align: right;
    color: #fff;
}
.announcement{
    display: flex;
    align-items: center;
}
.announcement img{
    width: 16px !important;
    height: 16px;

}
.bg-video img{
    width: 100%;
}

i_lost_to_loba_kreygasmOP•3mo ago

here it is what it looks so far

Chris Bolson•3mo ago

This is what I was referring to with a pseudo element. The way I have had to set the height is not ideal (ie hard coded)but it is due to the way the rest of the elements are styled. Also, as you are using clip-path on the actual "announcments" element, I added the pseudo element to the parent container. This solutions is based on making no other changes to your code as you provided it. I would probably have created things differently but we each have our methods and reasoning 😆

.announcements{
  position: relative; /* add this to be able to make the pseudo element relevant to this rather than to the absolute positined parent container */
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    gap: 32px;
}
/* red block before the "announcements" element */
.announcements::before{
    content: '';
    position: absolute;
    top:50%; /* move down 50% of parent height */
    right:100%; 
    left: -1000px; /* big negative value to allow it to bleed off the left-hand side of the viewport */
    height:52px; /* magic number based on the current height of the "announcments" bar - NOT IDEAL */
    translate:0 -50%; /* move it back up 50% of it's own height to vertically center*/
    background: #E83838;
}

.announcements{
  position: relative; /* add this to be able to make the pseudo element relevant to this rather than to the absolute positined parent container */
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    gap: 32px;
}
/* red block before the "announcements" element */
.announcements::before{
    content: '';
    position: absolute;
    top:50%; /* move down 50% of parent height */
    right:100%; 
    left: -1000px; /* big negative value to allow it to bleed off the left-hand side of the viewport */
    height:52px; /* magic number based on the current height of the "announcments" bar - NOT IDEAL */
    translate:0 -50%; /* move it back up 50% of it's own height to vertically center*/
    background: #E83838;
}

i_lost_to_loba_kreygasmOP•3mo ago

hi the container is interfering :(,

i_lost_to_loba_kreygasmOP•3mo ago

is there any alternative way ?

Chris Bolson•3mo ago

What container are you referring to?

i_lost_to_loba_kreygasmOP•3mo ago

i will get back to it later

i_lost_to_loba_kreygasmOP•3mo ago

any ideas on how to do this ? its the same thing I think

i_lost_to_loba_kreygasmOP•3mo ago

the red lines are the container lines

Mannix•3mo ago

kevin has videos on this take a look 😉

i_lost_to_loba_kreygasmOP•3mo ago

like what ? 🤔

i_lost_to_loba_kreygasmOP•3mo ago

https://codepen.io/sougataghar47/pen/WbvKQvo?editors=1100

Sougata Ghar

CodePen

Untitled

...

i_lost_to_loba_kreygasmOP•3mo ago

i took some help from AI but even AI can't help my misery this only works if there is no overflow:hidden declared on the container I need overflow : hidden for the marquee

Mannix•3mo ago

https://www.youtube.com/watch?v=Ivk8Blw2VTI

Kevin Powell

YouTube

How to escape the container on only one side

🎓 If you’ve been writing CSS for awhile now but you’re having trouble making that next step up with is, you might be interested in my course CSS Demystified: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=full-width-one-side Having something be full-width on a website isn't hard, and there are even some...

Gaming

Programming

How to make the left part marked in black circle stick out when it has a container marked with red ?

Did you find this page helpful?