Div working with background

Report · Nov 11, 2017

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.

Texans December 2017

Thanks in advance

d.

Report · Nov 11, 2017

Here are some examples Perfect Full Page Background Image | CSS-Tricks

Wappler, the only real Dreamweaver alternative.

Report · Nov 12, 2017

Sorry, I don't see that this works for this specific problem. Can you give it another look?

Report · Nov 12, 2017

You''re trying to nail jelly to the wall. It won't work.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 12, 2017

Most things are possible and I will continue to believe, but thanks.

Report · Nov 12, 2017

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.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 12, 2017

As a designer, I strive to find solutions even if they'll not all 100%

Report · Nov 12, 2017

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>

<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>

</div>

</body>

</html>

Report · Nov 12, 2017

Just posting this, that way if code is removed it is by a moderator.

Report · Nov 12, 2017

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.

Report · Nov 12, 2017

Thank you.

Sent from my iPhone

Report · Nov 12, 2017

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.

Report · Nov 12, 2017

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.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 12, 2017

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.

Report · Nov 12, 2017

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!!!

Report · Nov 12, 2017

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.

Report · Nov 12, 2017

I posted in the Back Room about it. Maybe someone will fess up to it, maybe not.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 12, 2017

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)

Report · Nov 12, 2017

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 -

https://gridbyexample.com

and the resorces section, in particular the old IE specs, and the new spec should be well understood, see -

https://caniuse.com/#feat=css-grid

Div working with background

1 Correct answer