Copy link to clipboard
Copied
Could someone please look at this and tell me how to get the calendar div to follow the background and stay aligned when it's in full screen. view.
Thanks in advance
d.
fiveflightsup wrote
As a designer, I strive to find solutions even if they'll not all 100%
You may find the code below useful. Its not responsive but will work if that is not a concern to you. Your original coding did not look as though you were taking responsive into consideration - as others have said the concept would be difficult to achieve without some rethinking to make it responsive.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Calender</title>
<style>
* {
box-sizing: border-box;
}
...Copy link to clipboard
Copied
Here are some examples Perfect Full Page Background Image | CSS-Tricks
Copy link to clipboard
Copied
Sorry, I don't see that this works for this specific problem. Can you give it another look?
Copy link to clipboard
Copied
You''re trying to nail jelly to the wall. It won't work.
Copy link to clipboard
Copied
Most things are possible and I will continue to believe, but thanks.
Copy link to clipboard
Copied
Faith is a wonderful thing. But misguided faith is futile. Your table is not responsive yet viewport sizes vary drastically. You could write all the CSS media queries in the world and this will never line up exactly where you want it on every device. You've painted yourself into a corner with a design concept that's too precise for the web. Although it might work well as an image.
Copy link to clipboard
Copied
As a designer, I strive to find solutions even if they'll not all 100%
Copy link to clipboard
Copied
fiveflightsup wrote
As a designer, I strive to find solutions even if they'll not all 100%
You may find the code below useful. Its not responsive but will work if that is not a concern to you. Your original coding did not look as though you were taking responsive into consideration - as others have said the concept would be difficult to achieve without some rethinking to make it responsive.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Calender</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background-color: #C83740;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
min-width: 1100px;
}
.calendar_wrapper {
display: flex;
justify-content: center;
background-image: url(calendar.png);
background-repeat: no-repeat;
height: 770px;
width: 1025px;
border: 1px solid #000;
}
.calendar_dates {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 115px;
position: relative;
width: 795px;
height: 600px;
}
.day {
display: flex;
align-items: center;
justify-content: flex-end;
width: 14%;
padding: 0 15px;
background-color: rgba(255, 255, 255, 0.7);
color: #F00;
margin-bottom: 2px;
font-size: xx-large;
font-weight: 600;
}
.date {
display: flex;
align-items: center;
justify-content: flex-end;
width: 14%;
padding: 0 15px;
background-color: rgba(0, 0, 61, 0.4);
color: #fff;
margin-bottom: 2px;
font-size: 24px;
font-style: normal;
font-weight: bold;
}
</style>
</head>
<body>
<div class="calendar_wrapper">
<div class="calendar_dates">
<div class="day">S</div>
<div class="day">M</div>
<div class="day">T</div>
<div class="day">W</div>
<div class="day">T</div>
<div class="day">F</div>
<div class="day">S</div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"><span>1</span></div>
<div class="date"><span>2</span></div>
<div class="date">3</div>
<div class="date">4</div>
<div class="date">5</div>
<div class="date">6</div>
<div class="date">7</div>
<div class="date">8</div>
<div class="date">9</div>
<div class="date">10</div>
<div class="date">11</div>
<div class="date">12</div>
<div class="date">13</div>
<div class="date">14</div>
<div class="date">15</div>
<div class="date">16</div>
<div class="date">17</div>
<div class="date">18</div>
<div class="date">19</div>
<div class="date">20</div>
<div class="date">21</div>
<div class="date">22</div>
<div class="date">23</div>
<div class="date">24</div>
<div class="date">25</div>
<div class="date">26</div>
<div class="date">27</div>
<div class="date">28</div>
<div class="date">29</div>
<div class="date">30</div>
<div class="date">31</div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
</div>
<!-- end calendar_dates -->
</div>
<!-- end calendar -->
</body>
</html>
Copy link to clipboard
Copied
Just posting this, that way if code is removed it is by a moderator.
Copy link to clipboard
Copied
pziecina wrote
Just posting this, that way if code is removed it is by a moderator.
Thanks, my job is done for today. I'm out.
Copy link to clipboard
Copied
Thank you.
Sent from my iPhone
Copy link to clipboard
Copied
If you're not bothered about the page being responsive you can try the code below.
Oh NO F••K - sorry you're out of luck because Adobe decided to moderate the code in this post. I tried to help you but Adobe has shafted you.
Copy link to clipboard
Copied
osgood_ wrote
If you're not bothered about the page being responsive you can try the code below.
Adobe decided to moderate the code in this post.
Sorry Os. I didn't do it .
We must have a new moderator in our midst. Experienced mods no better than to do that.
Copy link to clipboard
Copied
https://forums.adobe.com/people/Nancy+OShea wrote
osgood_ wrote
If you're not bothered about the page being responsive you can try the code below.
Adobe decided to moderate the code in this post.
Sorry Os. I didn't do it .
We must have a new moderator in our midst. Experienced mods no better than to do that.
I only try 3 times. If it doesn't get through on the 3 attempt I delete the code and the only person that loses out is the OP - well done Adobe, another failure to add to the long list of abject failures.
Copy link to clipboard
Copied
I approved your post and code 5-6 times, before it came through to the forum.
Now i have logged back in the code has been deleted, so all i can assume is that someone was rejecting the post at the same time i approved it, then decided to delete the code in the forum itself.
Or maybe it's another forum glitch!!!
Copy link to clipboard
Copied
pziecina wrote
I approved your post and code 5-6 times, before it came through to the forum.
Now i have logged back in the code has been deleted, so all i can assume is that someone was rejecting the post at the same time i approved it, then decided to delete the code in the forum itself.
Or maybe it's another forum glitch!!!
I deleted the actual code that may have been helpful to the OP but left the couple of paragraphs of lead text as they, without the code was getting through, but a couple of dumb paragraphs without the actual code is not helpful to anyone. I tried at least 6 if not maybe more times then called it quits - the only person to lose out in all this is the OP, not hugley helpful really if they come back, which I don't actually think they will.
Copy link to clipboard
Copied
I posted in the Back Room about it. Maybe someone will fess up to it, maybe not.
Copy link to clipboard
Copied
https://forums.adobe.com/people/Nancy+OShea wrote
I posted in the Back Room about it. Maybe someone will fess up to it, maybe not.
I doubt it, and I know from acp discussions that a few people, (inc. some moderators) do not think the Dw forum should discuss code, or help with code/development problems.
(and one of those is in Dw CAB)
Copy link to clipboard
Copied
You could do it, but there is at the moment a very,very, big BUT.
It would only work for about 70% of your users, and even though flexbox fallback is possible it would require a complete re-think of how your page would look on mobile devices, (and would probably require that anyway in order to remain usable).
The answer would be to use css grid layouts, which even at the moment is not very well understood by many experienced web developers.
If you do however feel up-to the challenge, you should become proficient in css grid layouts, and in particular the use of content alignment and media-queries, for css grid layout tutorials see -
and the resorces section, in particular the old IE specs, and the new spec should be well understood, see -