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
Related
There is a weird 1 pixel border between the flex container border and the borders around my flex items.
I have put in my own margin: 0, padding: 0, and box-sizing: border-box on *.
I have also tried it with a full CSS reset with no change.
I assume it is a browser issue.
How can I fix this?
Here is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid-container {
display: flex;
border: 2px solid red;
justify-content: end;
gap: 1rem;
margin: 0;
padding: 0;
}
div {
margin-top: 0;
margin: 0;
padding: 0;
display: block;
}
.logo {
margin-right: auto;
}
.grid-item {
border: 2px solid red;
}
a {
text-decoration: none;
}
<nav class="grid-container">
<div class="logo grid-item">
logo
</div>
<div class="about grid-item">
about
</div>
<div class="home grid-item">
home
</div>
<div class="contact grid-item">
contact
</div>
<div class="search grid-item">
search
</div>
</nav>
I added some HTML and CSS to your code and ran it in jsFiddle.net in Chrome on Windows 10 and saw the problem you described. However, in Firefox there was no weird border with the border widths you gave (or with the ones I used). The SO code snippet I created below seems to work in Chrome and Firefox.
This probably needs further investigation with more permutations of border widths for the grid-container and grid-item. What browser, etc., did you test your code with and what was the browser zoom when you tested this?
I also checked this in Edge on Windows 10 at 100% zoom and it is clearly visible.
This may have something to do with odd and even values of border thickness and odd and even zoom percentages.
Please check I need to remove a little space between my divided blocks to see if your question is connected.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid-container {
display: flex;
border: 2px solid red;
justify-content: end;
gap: 1rem;
margin: 0;
padding: 0;
background: yellow;
}
div {
margin-top: 0;
margin: 0;
padding: 0;
display: block;
}
.logo {
margin-right: auto;
}
.grid-item {
border: 2px solid red;
background: orange;
}
a {
text-decoration: none;
}
.gc1 {
border: 3px solid red;
}
.gc2 {
border: 4px solid red;
}
.gc1>.grid-item {
border: 3px solid green;
}
.gc2>.grid-item {
border: 4px solid blue;
}
<nav class="grid-container">
<div class="logo grid-item">
logo
</div>
<div class="about grid-item">
about
</div>
<div class="home grid-item">
home
</div>
<div class="contact grid-item">
contact
</div>
<div class="search grid-item">
search
</div>
</nav>
<br />
<nav class="grid-container gc1">
<div class="logo grid-item">
logo
</div>
<div class="about grid-item">
about
</div>
<div class="home grid-item">
home
</div>
<div class="contact grid-item">
contact
</div>
<div class="search grid-item">
search
</div>
</nav>
<br />
<nav class="grid-container gc2">
<div class="logo grid-item">
logo
</div>
<div class="about grid-item">
about
</div>
<div class="home grid-item">
home
</div>
<div class="contact grid-item">
contact
</div>
<div class="search grid-item">
search
</div>
</nav>
Below is an image of the code snippet running in jsFiddle.net on Chrome (and the weird 1 pixel border is clearly visible):
This issue is driving me nuts. I've tried to implement every answer I've found on Google and on SO. I just want the text under the images to wrap correctly in IE11 like every other browser does in this container. The content is a table with flexbox properties. I have set the container to a set width. When I allow fluid, it doesn't wrap anywhere. But I'm not worried about that. I've tried adding width:100% and max-width:100% to the children, parents and grandparents. I've also tried adding flex-basis:100% everywhere I can think. Any help on this would be much appreciated.
body {
box-sizing: border-box;
}
.container {
width: 500px;
z-index: 1000;
float: none;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.p-3 {
padding-right: 1rem !important;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 1 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<table>
<tr class="d-flex flex-row">
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Here is a JSBin of the example as well: https://jsbin.com/qewijuhoco/1/edit?html,css,output
JSFiddle does not support IE11 anymore so had to use JSBin
UPDATE: If it makes any difference, I tried swapping out all the <table>, <tr>, and <td> tags with <div> tags. This didn't seem to have any affect.
In HTML, there is no such thing as "a <table> with flexbox properties".
The CSS table-model as defined in CSS Level 2 specs has specific rules regarding what elements can be children of what elements and under which conditions.
In your example, you can't have display:flex elements as immediate children of display:table-row-group elements. Furthermore, if <tr> (display:table-row elements) are placed directly under a <table> element, you'll notice browsers automatically add a <tbody> (display:table-row-group) wrapper around them.
These rules are important for the table display model and how it generates column sizes. You should also note the table model is a very complex and slow model for rendering and you'll notice performance issues when dealing with more than 50 items, particularly if you're performing DOM manipulations on each cell, which is not the case of box model, flexbox model or grid layout model.
The fact that your code "works" in some browsers is irrelevant. Since your CSS rules are invalid, browsers are free to do what they consider optimal, and that differs from browser to browser, since there is no official recommendation for it.
There are several ways to fix your layout but you probably you want to remove d-flex from <tr>s and <td>s and wrap the <td> contents in a d-flex wrapper according to your needs (=> solution 1).
Also note using <table> elements for layout is generally regarded as a bad idea (=> solution 2).
Using <table>s:
body {
box-sizing: border-box;
}
.container {
width: 500px;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 1 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
td {
position: relative;
}
a {
text-decoration: none;
}
td > a > * {
flex-grow: 0;
}
td > a > .flex-fill {
flex-grow: 1;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
td {
width: 33.33%;
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<table>
<tr>
<td>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td>
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Using flexbox:
body {
box-sizing: border-box;
}
.container {
width: 500px;
z-index: 1000;
float: none;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.p-3 {
padding-right: 1rem !important;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 0 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
}
.row {
display: flex;
width: 100%;
}
.row > div {
flex: 0 1 33%;
padding: 0 .5rem .5rem;
box-sizing: border-box;
display: fLex;
flex-direction: column;
}
.row > div > a {
flex-grow: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<div class="row">
<div>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
<div>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
<div>
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Note I didn't clean them up. My advice: start from scratch and don't use !important.
I'm trying to place a calender inside a transparent div container, however I'm having some issues, i want each calender box to form a row that takes up 100% in width in the transparent box. So basically at the moment the page looks like this:
screenshot.
What you probably noticed is if you look at container with the "click on the images text" is that the box is wider than the rows under it.
This is the CSS code for the calender: Basically everything relating to .transbox has something to do with the transparent box. The calender days are the classes .weekdayssttart and weekdays. The remaining classes are the calender days with numbering. So since there is 7 days a week i just thought that I had to divide 100/7 which is 14.2857142857 and set each box type to that width in percentage. However this is the result i get: screenshot2. What I obviously notice is that the row is to small to contain the calender boxes, does anyone have an idea to fix this? Sorry for my bad english.
.transbox {
background: #fff;
padding: 2%;
width: 70%;
margin-left: 15%;
margin-bottom: 1%;
position: relative;
background-color:rgba(255,255,255,.9);
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.9);
overflow: auto;
}
.transbox p {
color: darkslategray;
margin-bottom: 2%;
font-size:13px;
}
.transbox img {
width:100%;
height: 100%;
}
.weekdaysstart {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.weekdays {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.hint {
width: 99%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
padding-top: 5px;
}
.one {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextrow {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
clear:left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextmonth {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.lastrow {
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
background-color: floralwhite;
margin-bottom:2%;
}
.pancakes {
width: 14%;
height: 100px;
float:left;
background: url(images/pancakes.jpeg);
background-size: cover;
border: 1px solid darkslategrey;
}
.meatballs {
width: 14%;
height: 100px;
float:left;
border: 1px solid darkslategrey;
background: url(images/kotbulls.jpg);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Tasty recipes</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ul>
<li>HOME</li>
<li>RECIPES</li>
<li>CALENDAR</li>
<li class="tastyrecipes">Tasty Recipes</li>
</ul>
<h1>Calendar</h1>
<h3>November 2017</h3>
<div class = "transbox">
<div class="hint">
<p>Click on the image of a dish to go to its recipe-page.</p>
</div>
<div class="weekdaysstart">
<p>Monday</p>
</div>
<div class="weekdays">
<p>Tuesday</p>
</div>
<div class="weekdays">
<p>Wednesday</p>
</div>
<div class="weekdays">
<p>Thursday</p>
</div>
<div class="weekdays">
<p>Friday</p>
</div>
<div class="weekdays">
<p>Saturday</p>
</div>
<div class="weekdays">
<p>Sunday</p>
</div>
<div class="nextrow">
<p>30</p>
</div>
<div class="one">
<p>31</p>
</div>
<div class="one">
<p>1</p>
</div>
<div class="one">
<p>2</p>
</div>
<div class="one">
<p>3</p>
</div>
<div class="one">
<p>4</p>
</div>
<div class="one">
<p>5</p>
</div>
<div class="nextrow">
<p>6</p>
</div>
<a href="meatballs.html">
<div class="meatballs">
<p>7</p>
</div>
</a>
<div class="one">
<p>8</p>
</div>
<div class="one">
<p>9</p>
</div>
<div class="one">
<p>10</p>
</div>
<div class="one">
<p>11</p>
</div>
<div class="one">
<p>12</p>
</div>
<div class="nextrow">
<p>13</p>
</div>
<div class="one">
<p>14</p>
</div>
<div class="one">
<p>15</p>
</div>
<div class="one">
<p>16</p>
</div>
<div class="one">
<p>17</p>
</div>
<div class="one">
<p>18</p>
</div>
<div class="one">
<p>19</p>
</div>
<div class="nextrow">
<p>20</p>
</div>
<div class="one">
<p>21</p>
</div>
<div class="one">
<p>22</p>
</div>
<div class="one">
<p>23</p>
</div>
<div class="one">
<p>24</p>
</div>
<a href="pancakes.html">
<div class="pancakes">
<p>25</p>
</div>
</a>
<div class="one">
<p>26</p>
</div>
<div class="nextrow">
<p>27</p>
</div>
<div class="lastrow">
<p>28</p>
</div>
<div class="lastrow">
<p>29</p>
</div>
<div class="lastrow">
<p>30</p>
</div>
<div class="nextmonth">
<p>1</p>
</div>
<div class="nextmonth">
<p>2</p>
</div>
<div class="nextmonth">
<p>3</p>
</div>
</div>
</body>
</html>
Like Matthew JohnSon said, you could do this using flexbox. I'm not totally sure, but I believe the calc() function will let it fit.
.transbox {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.weekdaysstart, .weekdays {
width: calc(100% / 7);
}
Edit
I changed the names of the classes to those of your html classes.
You should use a clearfix container per each row.
https://css-tricks.com/snippets/css/clear-fix, and try to use flex instead of float, set each .row display: flex, and then set flex-grow: 1; flex-shrink: 1; flex-basis: auto; to the elements inside the row.
I have a layout composed of divs displaying as table, 3 table rows, and up to 5 table cells per row. My problem is twlofold:
1) I can't figure out how to center the table cells within the rows if there are less than five cells in the table., and
2) I can't figure out how to keep the integrity of the shapes when there are less than 5 in a row.
The number of cells in a row will be variable (between 3 and 5), and I have to use divs -- I can't use real tables.
Here is a codepen: http://codepen.io/Jaemaz/full/aCboe
Here is the source:
HTML:
<div class="focus-container">
<div class="focus-row">
<div class="focus-element circle">
<span class="ng-scope">
Option A
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option B
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option C
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option D
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option E
</span>
</div>
</div>
<div class="focus-row">
<div class="focus-element circle" ng-class="{unknown: unknown, square: square, circle: circle, selected: selected, shouldHaveBeenSelected: shouldHaveBeenSelected, shouldNotHaveBeenSelected: shouldNotHaveBeenSelected}" ng-click="click()" ng-transclude="" focuschoice="" identifier="F" enabled="true">
<span class="ng-scope">
Option F
</span>
</div>
</div>
</div>
CSS:
.focus-container {
width: 560px;
height: auto;
display: table;
background-color: #000;
border-spacing: 15px;
table-layout: fixed;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.focus-row {
width: 100%;
height: 100%;
display: table-row;
}
.focus-element {
width: 90px;
height: 90px;
display: table-cell;
color: #fff;
background: #808080;
border: 2px solid #BFBFBF;
vertical-align: middle;
text-align: center;
font-family: "Ubuntu", Arial, Helvetica, sans-serif;
font-size: 14px;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
max-width: 94px;
}
.focus-element.circle {
-moz-border-radius: 94px;
-webkit-border-radius: 94px;
border-radius: 94px;
}
Screen Shot:
Tables won't do that, but tables in table will. 1) Use single-cell rows in outer table and a new table within each cell, and center the inner table within the row. 2) You might use fixed (or some relative) width and height on each cell within inner tables.
ADDED:
This will work for display:table as well as old-school table.
Outermost table should only have one cell in each row, and in that cell place the inner table.
Building on #Jojje 's suggestion, the answer lies in creating an extra "inner" level (display:table) within the div structure. Solution is on CodePen here: http://codepen.io/Jaemaz/pen/spbKf
In case Codepen goes away, here is sample HTML and CSS:
HTML
<div class="focus-container">
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>ahem</span>
</div>
</div>
</div>
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>hello</span>
</div>
<div class="focus-element circle">
<span>there</span>
</div>
</div>
</div>
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>what</span>
</div>
<div class="focus-element circle">
<span class="content">is</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
</div>
</div>
</div>
CSS
.focus-container {
width: 560px;
background-color: #000;
padding: 5px;
}
.focus-container .focus-row {
height: 110px;
background-color: #000
}
.focus-container .focus-row .inner {
display: table;
margin: 0 auto;
height: 110px;
}
.focus-container .focus-row .inner .focus-element {
float: left;
text-align: center;
margin: 0 auto;
width: 94px;
height: 94px;
background-color: #009900;
}
.focus-container .focus-row .inner .focus-element span {
margin-top: 40px;
display: block;
}
.focus-container .focus-row .inner .circle {
-moz-border-radius: 94px;
-webkit-border-radius: 94px;
border-radius: 94px;
margin: 8px;
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