Highlighted

Div working with background

Explorer ,
Nov 11, 2017

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.

Texans December 2017

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;

}

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>

TOPICS
Dreamweaver CC 2014, Learn Dreamweaver

Views

698

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Div working with background

Explorer ,
Nov 11, 2017

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.

Texans December 2017

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;

}

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>

TOPICS
Dreamweaver CC 2014, Learn Dreamweaver

Views

699

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 11, 2017 0
Adobe Community Professional ,
Nov 11, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 11, 2017 0
Explorer ,
Nov 12, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
Adobe Community Professional ,
Nov 12, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
Explorer ,
Nov 12, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
Adobe Community Professional ,
Nov 12, 2017

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
LEGEND ,
Nov 12, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
Adobe Community Professional ,
Nov 12, 2017

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. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
LEGEND ,
Nov 12, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
LEGEND ,
Nov 12, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
LEGEND ,
Nov 12, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
Adobe Community Professional ,
Nov 12, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
Explorer ,
Nov 12, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
LEGEND ,
Nov 12, 2017

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
LEGEND ,
Nov 12, 2017

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 1
LEGEND ,
Nov 12, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
Explorer ,
Nov 12, 2017

Copy link to clipboard

Copied

Thank you.

Sent from my iPhone

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
osgood_ LATEST
LEGEND ,
Nov 12, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0
LEGEND ,
Nov 12, 2017

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 -

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2017 0