I'm working on a specific layout using Bootstrap 5 and attempt to render a tag outside his original container, taking the full page width.
I tried using absolute position on the img tag, however, doing this, footer is going over the tag which is not expected.
More than words, this is what I trying to do
The ideal DOM structure would be as follow :
<article>
<header>
<div>
<img />
<h3 />
</div>
<div class="meta" />
</header>
<div class="content" />
<footer />
</article>
img should get full x-width
img should stay in the overal y position (meaning nothing coming after it - should go over it, like a page footer or anything else)
h3 should be over the img tag
any idea would get a warm welcome, I'm trying to make that small thing working since over a week now :')
you're right
my current best attempt it this, so I split the overall structure in three distinct container box, which sounds like a bit hacky to me - and I have issues when it's rendered on mobile (ie: title is going outside down the box, instead staying stick to the bottom of the image)
<body class="position-relative">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
</div>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner d-flex position-relative">
<img style="object-fit: cover;position: absolute;height: 300px;left: 0;right: 0;/*! width: 200%; */" class="w-100" src="...">
<div class="container-fluid container-lg position-relative">
<div class="position-absolute bottom-0 start-0 right-0" style="background: rgba(0, 0, 0, 0.4);">
<h3 class="display-3 p-4">The War of the Worthies: the spectre of Cardan’s aggression</h3>
</div>
</div>
</div>
</header>
<div class="container-fluid container-lg"></div>
<footer class="container-fluid container-lg"></footer>
</article>
</section>
</main>
<div class="container-fluid container-lg">
<footer>
<div class="go-streaming-news d-none d-sm-block mb-4">
<div class="row">
<div class="col col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-between text-uppercase" style="background-color: var(--bs-primary); padding: .5rem 1rem;">
<span>Breaking News</span>
<span style="border-right: solid 2px rgb(50, 67, 100)"></span>
<span>21:03</span>
</div>
<div class="col col-sm-8 col-lg-9 col-xl-10 marquee-wrapper">
<div class="marquee"><div style="width: 100000px; animation: 9.64667s linear 0s infinite normal none running marqueeAnimation-39418180; transform: translateX(1084px);" class="js-marquee-wrapper"><div class="js-marquee" style="margin-right: 0px; float: left;">
<ul class="list-inline m-0 p-0">
<li class="list-inline-item">Some news</li>
<li class="list-inline-item">Another news</li>
<li class="list-inline-item">Yet Another news</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
However, the render is good https://imgur.com/a/9wBse0Q
My previous attempt was that one, and with that, the marquee box is going inside the article banner. This, and the title is going outside the image which is rendered using a after anchor.
<body class="position-relative customize-support">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner"></div>
<div class="d-flex">
<h3 class="display-3">Change of course for Eskari Industries</h3>
</div>
</header>
<div></div>
<footer></footer>
</article>
</section>
</main>
<footer>
<div class="go-streaming-news d-none d-sm-block mb-4">
<div class="row">
<div class="col col-sm-4 col-lg-3 col-xl-2 d-flex justify-content-between text-uppercase" style="background-color: var(--bs-primary); padding: .5rem 1rem;">
<span>Breaking News</span>
<span style="border-right: solid 2px rgb(50, 67, 100)"></span>
<span>21:03</span>
</div>
<div class="col col-sm-8 col-lg-9 col-xl-10 marquee-wrapper">
<div class="marquee">
<div style="width: 100000px; animation: 9.64667s linear 0s infinite normal none running marqueeAnimation-33044180; transform: translateX(1084px);" class="js-marquee-wrapper">
<div class="js-marquee" style="margin-right: 0px; float: left;">
<ul class="list-inline m-0 p-0">
<li class="list-inline-item">Some news</li>
<li class="list-inline-item">Another news</li>
<li class="list-inline-item">Yet Another news</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
/*
Theme Name: Galaxy One
Theme URI: https://galaxyone.news
Author: Loic Leuilliot
Author URI: https://github.com/warlof
Description: Galaxy One Gazette default template
Tags: newspaper, rising constellation, game, news
Version: 0.1
Requires at least: 5.0
Tested up to 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or Later
License URI: https://www.gnu.org/Licenses/gpl-2.0.html
Text Domain: galaxyone
*/
#font-face {
font-family: "Gtek Technology";
src: url("./assets/fonts/Gtek Technology.ttf") format('truetype');
font-weight: bold;
}
header h1 {
font-size: calc(1.375rem + 3vw);
font-family: "Gtek Technology", sans-serif;
margin-bottom: 0;
border-bottom: solid 4px var(--bs-primary);
}
.navbar-nav {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.navbar-nav > li {
flex-grow: 1;
}
.navbar-nav .nav-link {
text-align: center;
text-transform: uppercase;
padding: .7rem 1rem;
border-top: 1px solid var(--bs-primary);
border-bottom: 1px solid var(--bs-primary);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
color: var(--bs-primary);
}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link.active {
color: #fff;
background-color: var(--bs-primary);
}
.go-news .card-img-top {
height: 250px;
object-fit: cover;
object-position: 50% 0;
}
.go-news .stretched-link:hover::after {
background: #282c34dd url("./assets/img/plus-circle.svg") center no-repeat;
background-size: 50%;
transition: background-color 0.5s ease;
}
.go-category-link {
border-radius: 0;
border: none;
padding: 0.5rem;
text-transform: uppercase;
text-decoration: none;
}
.go-category-link.category-sport {
background-color: var(--bs-primary);
}
.go-category-link.category-politics {
background-color: var(--bs-danger);
}
.go-category-link.category-financial, .go-category-link.category-people {
background-color: var(--bs-warning);
}
.go-category-link.category-miscellaneous {
background-color: var(--bs-success);
}
.go-category-link.category-sciences {
background-color: var(--bs-secondary);
}
.page-item {
margin-right: 20px;
}
.page-item:last-child {
margin-right: 0;
}
.page-item:first-child .page-link {
border-radius: 0;
}
.page-item:last-child .page-link {
border-radius: 0;
}
.page-item.disabled .page-link {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.page-link {
background-color: transparent;
border-color: var(--bs-primary);
color: rgba(255,255,255,0.55);
}
.page-link:hover {
color: var(--bs-primary);
}
.page-link.dots:hover {
background-color: transparent;
border-color: var(--bs-primary);
color: rgba(255,255,255,0.55);
cursor: default;
}
.go-article-banner {
height: 300px;
}
.go-article-banner::after {
background: #333 url('...') no-repeat center;
background-size: cover;
content: "";
position: absolute;
height: 300px;
left: 0;
right: 0;
}
.go-streaming-news .marquee-wrapper {
background-color: #4472c455;
padding: 0.5rem;
}
.go-streaming-news .marquee {
overflow: hidden;
}
.go-streaming-news .marquee .list-inline-item {
border-right: solid 3px var(--bs-primary);
margin: 0;
padding: 0 0.5rem;
}
.go-streaming-news .marquee .list-inline-item:last-child {
border-right: none;
}
Well, I finally figure a way to do it properly (I think so at least).
Overall reference is this blog post https://css-tricks.com/full-width-containers-limited-width-parents/
I'm using the very last alternative as detailed by "No calc() needed" which is probably the more flexible solution.
First, here is the global DOM structure
<div class="container-fluid container-lg">
<header>
<nav></nav>
</header>
<article>
<header>
<div class="go-article-header">
<div class="go-article-banner" style="background-image: url('...');"></div>
<div class="go-article-title-wrapper">
<h3 class="display-3 m-0">Article title</h3>
</div>
</div>
</header>
<div class="go-article-content">
<p>...</p>
</div>
<footer></footer>
</article>
<footer></footer>
</div>
We have a unique container which is covering the overall page
Inside this container, there are a global header and footer with navigation inside the header
Between both, we have an article, container its own header and footer
The header is containing a few wrapper for extra styling (like background under title, and so on) - I also switched from img tag to a background in order to be able to use cover property. But here again, it's much more a design choice
Now, the styling :
.go-article-header {
height: 300px;
position: relative;
}
.go-article-banner {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
height: 100%;
margin-left: -50vw;
margin-right: -50vw;
background-image: url("assets/img/eskari.png");
background-color: #333;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.go-article-title-wrapper {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
}
Everything is happening with the .go-article-banner class which is first aligning the tag (using the left and right properties) and then make it start outside the box (using the margin properties). Last but not least, the width property using view width metric is ensuring the tag will use the full screen width.
Regarding title, we just need to fix it left/right/down using parent container. This is done with the .go-article-title-wrapper class.
Here is the final render
I'm having trouble aligning text when the window is resized, e.g. on mobile.
Here's the HTML:
.count-panel {
float: left;
width: 64px;
border: 1px #888 solid;
}
.count {
font: 15px/18px Roboto, sans-serif;
font-size: 42px;
}
.message {
font-size: 20px;
}
.row {
clear: both;
margin-bottom: 16px;
}
<div class='table'>
<div class='row'>
<div class='count-panel'>
<span class='count'>1</span>
</div>
<div class='message'>This is line one</div>
</div>
<div class='row'>
<div class='count-panel'>
<span class='count'>2</span>
</div>
<div class='message'>This is line two which is longer than the rest so it can test wrapping</div>
</div>
<div class='row'>
<div class='count-panel'>
<span class='count'>3</span>
</div>
<div class='message'>This is line three</div>
</div>
At larger sizes: Larger
At smaller sizes: Smaller
I need the text in the second line to align with the others and not wrap hard left as in the image. Thanks.
That behaviour on mobile is due to the float applied to the .count-panel element. You could instead use flexbox and clean a bit the css code, like so:
Codepen demo
.count-panel {
border: 1px #888 solid;
flex: 0 0 64px;
}
.count {
font: 15px/18px Roboto, sans-serif;
font-size: 42px;
}
.message {
font-size: 20px;
}
.row {
margin-bottom: 16px;
display: flex;
}
It's just your float: left that's taking the count-panel out of sync.
I have replaced your example with display: flex instead. I would suggest avoiding float when positioning your elements as it was never intended to be used for layout. Flex is a much cleaner solution and I think it gives you more flexibility of layout choices. :-)
I've also amended the HTML layout slightly to include the border on the number itself so that it doesn't stretch the full size of the text content on smaller devices.
.count {
font: 42px Roboto, sans-serif;
min-width: 64px;
border: 1px #888 solid;
text-align: center;
max-height: max-content;
}
.message {
font-size: 20px;
}
.row {
display: flex;
flex-direction: row;
margin: 0 10px 16px 0;
}
<div class='table'>
<div class="row">
<span class="count">1</span>
<div class="message">This is line one</div>
</div>
<div class="row">
<span class="count">2</span>
<div class="message">This is line two which is longer than the rest so it can test wrapping</div>
</div>
<div class="row">
<span class="count">3</span>
<div class="message">This is line three</div>
</div>
</div>
First look at the picture:
Like you see my center of page i mean this content with form on small resolution get over the navbar. This content is centered verticaly and horizontal by flex.
here is code and what i try:
html`
<nav>
<div class='row header-inner'>
<div class='col-md-10 col-lg-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-11 col-xs-12'>
<div class='row logo-inner'>
<img src="assets\static\Logo.png">
</div>
<div class='row menu-inner'>
<a class='menu-item' routerLink="/aboutUs" routerLinkActive="active">about us</a>
<a class='menu-item' routerLink="/skiCams" routerLinkActive="active">skicams</a>
<a class='menu-item' routerLink="/contactUs" routerLinkActive="active">contact</a>
</div>
</div>
</div>
</nav>
<div class='row content-inner'>
<div class='col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-10 col-xs-12'>
<router-outlet></router-outlet>
</div>
</div>
<footer>
<div class='row center-block'>
<div class='col-md-offset-5 col-lg-offset-5 col-md-2 col-lg-2 col-sm-offset-5 col-sm-2 col-xs-offset-3 col-xs-6 footer-content'>
Powered by PGS
</div>
</div>
</footer>`
and css
footer {
border-top: 1px solid #40637e;
background-color: #282828;
position: fixed;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
.footer-content{
color :#959595;
border-top :1px solid #959595;
text-align: center;
margin-top:30px;
padding: 20px;
font-size: 10px;
}
.logo-inner{
margin: 35px 0px 35px 0px;
}
.header-inner{
border-bottom:1px solid #dbdbdb;
padding-bottom: 13px;
margin: 0;
}
.menu-inner{
margin:0px;
}
.menu-item{
margin-right: 40px;
padding-bottom: 15px;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
color:#545454;
}
.active{
border-bottom:1px solid #ef6716;
color: #ef6716;
}
a:hover, a:focus {
color: #ef6716;
text-decoration: none;
}
.content-inner{
background-color:#f8f8f8;
margin: 0;
/*margin-bottom:200px;*/
}
#media(max-width : 768px){
.menu-item{
margin-right:30px;
padding-bottom: 14px;
font-size: 14px;
text-transform: uppercase;
}
.menu-inner{
margin:0px;
text-align: center;
}
.logo-inner{
margin: 35px 0px 35px 0px;
text-align: center;
}
}
could you help my do something like this when the height is smaller the page start scrolling ?
It looks like you're missing your flexbox code in your question. Without seeing it all, I'd suggest trying to remove flexbox in the smaller breakpoints and just using display: block; and making sure your <div class='row content-inner'> element is statically positioned (position: static;).
I'm having issues with my bootstrap code. When I re-size the screen the button is being pushed down outside of the row and container. It seems the container class isn't even being used. Where did I go wrong here? Thank you.
#cta-center {
line-height: 90px;
}
#cta-bg {
background: gray;
height: 90px;
}
.cta p {
text-align: center;
font-size: 35px;
font-weight: 600;
color: #fff;
}
.btn-primary {
width: 200px;
height: 50px;
background: yellow;
}
.btn-primary p {
color: #000;
line-height: 34px;
font-size: 25px;
font-weight: 600;
}
<div id="cta-center">
<div id="cta-bg">
<div class="container">
<div class="row">
<div class="cold-md-12">
<div class="col-md-8">
<div class="cta">
<p>Get a FREE Quote NOW</p>
</div>
</div>
<div class="col-md-4">
<a href="#" class="btn btn-primary">
<p>CLICK HERE</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Image:
My goal (and the question of how-to) is to have an opaque / white background with black fields over the opaque area to serve as content holders. Here is what I have now:
/* translucent background*/
.background
{
width:950px;
height:1024px;
margin: 9px auto 10px;
background-color:#ffffff;
opacity:0.35;
filter:alpha(opacity=35); /* For IE8 and earlier */
border-radius: 15px;
-moz-border-radius: 15px;
z-index:0;
}
/*content wrapper*/
.content
{
font-family: Arial;
font-size: 11px;
width:950px;
height:1024px;
margin: 9px auto 10px;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:1;
}
/*one of three content fields*/
.anounce_bar
{
font-family: Arial;
font-size: 16px;
width:940px;
height:225px;
float: left;
border: 5px 5px 5px 5px;
background-color: black;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:2;
}
<div class="background"></div>
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar">
</div>
<!--Left side nav bar-->
<div class="nav" style="height: 1024px; ">
</div>
<!--Right side content window-->
<div class="content_window">
</div>
</div>
Right now its showing the anounce_bar below the translucent background.. how do I get the bar (and subsequent nav & content_window) to go on top of .background?
Note: I have other content, including a top 'masthead' image and a background JPG that might be screwing with this.
Any help would be GREATLY appreciated.
Update:
This was an issue with opacity inheritance - the work around I used is described very well here
'background' class became #background without any opacity, and a new item was added:#background .transparency with absolute positioning and opacity.
<div id="background">
<div class='transparency'></div>
/*OTHER STUFF*/
</div>
Change the order
<div class="anounce_bar"></div>
<div class="background"></div>
That should work.
<div class="background">
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar" style="color: white">Anounce Bar</div>
<!--Left side nav bar-->
<div class="nav" style="height: 24px; width: 940px; background-color: green; float:left;">Nav</div>
<!--Right side content window-->
<div class="content_window" style="height: 24px; width: 940px; background-color: yellow; float:left;">Content Window</div>
</div>
</div>
Sample Code