We Keep Coding

Open and Close a div by click on link and close by X button

I created and it works perfectly ok But it only runs for one time, Means by clicking on a "Subscribe to Trade Alert" link a div box opens and says subscribe and have an x mark to close that div, but after closing If I again open a div by clicking a same link it is not working for the second time. I want it to run infinite.
heres the code:
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
.subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
.trade-alert-focus-anchor:focus .subscription-trade-alert-box
{
display: block;
}
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
<script>
var closebtns = document.getElementsByClassName("close");
var i;
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
</script>
</a>
How to make this infinite open and close.

I fixed it that it opens multiple times without changing to much:
1st I changed the Box subscription-trade-alert-box to an ID instead of a class.
2nd I fixed the change from Class to ID in CSS
3rd I added an onclick event for the subscription link
4th added a JS line that the subrcription box style dispaly: block is set when clicked.
var closebtns = document.getElementsByClassName("close");
var i;
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
function showBox() {
document.getElementById("subscription-trade-alert-box").style.display = "block";
}
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
#subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
.trade-alert-focus-anchor:focus #subscription-trade-alert-box
{
display: block;
}
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips" onclick="showBox()">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div id="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
</a>

Use onclick event in javascript instead of :focus in css.
<div class="trade-alert">
<div class="scc-trade-alert-tips" onclick="document.getElementById('subscription-trade-popup').style = 'display: block;'">
<i class="tips-icon-mail"></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box" id="subscription-trade-popup">
<span class="close">×</span>
Subscribe
</div>

By setting .style = 'none' at the element level, it overrules the css level rule. Instead, you can remove the css rule and simply add another event listener to toggle the style between block and none.
Also, I'd reccomend using document.querySelector() and document.querySelectorAll(), as they are the modern standard for selecting elements.
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
.subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
/* remove this
.trade-alert-focus-anchor:focus .subscription-trade-alert-box
{
display: block;
}
*/
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
</a>
<script>
document.querySelectorAll('.close').forEach(function(close) {
close.addEventListener('click', function(e) {
e.stopPropagation(); //otherwise the click will bubble and reopen itself
this.parentElement.style.display = 'none';
});
});
document.querySelector('.trade-alert-focus-anchor')
.addEventListener('click', function() {
document.querySelector('.subscription-trade-alert-box')
.style.display = 'block';
});
</script>

JavaScript adds styles as inline css. So if you add a style with JS then also remove it with JS. This line is adding the display: none; as an inline style,
this.parentElement.style.display = 'none';
I made a codepen where I used JS to open and close the popup/modal, by assigning display: block to show and display:none; to hide.
Codepen Link

How to make pop-up element fit to mobile devices?

The website I am designing displays a pop-up for age verification upon entering. This pop up looks great on a desktop browser but is not responsive on a mobile device. Currently on a phone it shows very large, probably the size it would normally display on a desktop. How do I make this proportionate to mobile devices? Phones and tablets too. Any help would be great!
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
font-family: helvetica;
font-size: 100%;
margin: 0;
padding: 0;
font-weight: 400;
font-family: Raleway;
line-height: 1.4;
}
body {
font-size: 100%;
#media (min-width: 32em) {
font-size: 110%
}
#media (min-width: 54em) {
font-size: 111%
}
#media (min-width: 74em) {
font-size: 115%
}
#media (min-width: 96em) {
font-size: 135%
}
}
a.btn{
background-color: #74AA50;
color: #fff;
text-decoration: none;
display:inline-block;
letter-spacing: 0.1em;
padding: 0.5em 0em;
&.btn-beta{
background-color: #dba952;
}
}
.decor-line {
position: relative;
top: 0.7em;
border-top: 1px solid #ccc;
text-align:center;
max-width: 40%;
margin: 0.5em auto;
display: block;
padding: 0.1em 1em;
color: #ccc;
span{
background: transparent;
color: #ccc;
position: relative;
top: -.7em;
padding: 0.5em;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 900;
}
}
.overlay-verify{
background: rgba(0,0,0,0.75);
position:fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
}
.box{
background:url(https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efa11cff7a1d03adb8ac000/1593446880079/44-IMG_6788+copy.jpg) 50% 50%;
background-size: cover;
color: #fff;
img{
position: relative;
z-index: 999;
width: 12em;
}
position: fixed;
left: 0;
right: 0;
top: 20%;
bottom: 0;
margin: 0 auto;
z-index: 999;
width: 1000px;
height: 525px;
display:table;
.box-left, .box-right{
width: 100%;
height: 525px;
position: relative;
text-align: center;
padding: 5%;
#media (min-width: 54em){
display:table-cell;
vertical-align:middle;
width: 50%;
}
p{
//padding: 5%;
position: relative;
z-index: 99;
}
}
.box-left{
&:after{
content: '';
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
}
}
.box-right{
text-align: center;
h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.07em;
border-bottom: 1px solid #eee;
padding-bottom: 1em;
margin: 0 auto;
}
p{
color: #fff;
}
small{
color: #fff;
}
.btn{
font-weight: 600;
letter-spacing: 0.2em;
padding: 0.9em 1em 0.7em;
margin: 1em auto;
display: block;
}
}
}
#agePopUp a {
background-color: black;
color: white;
padding: 10px 20px;
margin-top: 10px;
display: inline-block;
}
.box,.overlay-verify{display:none}
Header JQuery Script
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script> jQuery(document).ready(function($){
if (sessionStorage.getItem('advertOnce') !== 'true') {
//Show Box on Start-Up
$('.box').show();
$('.overlay-verify').show();
}else{
$('.box').hide();
$('.overlay-verify').hide();
}
//Enter Button
$('#refresh-page').on('click',function(){
$('.box').hide();
$('.overlay-verify').hide();
sessionStorage.setItem('advertOnce','true');
});
//Exit Button
$('#reset-session').on('click',function(){
$('.box').show();
sessionStorage.setItem('advertOnce','');
});
});
</script>
<link href='https://fonts.googleapis.com/css?family=Raleway:600,900,400' rel='stylesheet' type='text/css'>
<main>
<article class="box">
<div class="box-left">
<img src="https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efc646a19c9962072e60679/1593599082426/SBR_centered+copy+-+white.png">
</div>
<div class="box-right">
<h3>Welcome</h3>
<p>By clicking enter, I certify that I am over the age of 18.</p>
ENTER
<span>OR</span>
EXIT
<small>Always enjoy responsibily.</small>
</div>
</div>
</article>
<div class="overlay-verify"></div>
</main>

You need to set the viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
The width property controls the size of the viewport, the initial-scale property controls the zoom level when the page is first loaded and user-scalable properties control how users are allowed to zoom the page in or out.
You might want to read more about the Viewport meta tag here.

Fixed CSS element moves page down when input focused in iOS

I am having a little UI issue and cannot work it out.
On an iOS device, when I click in the input QTY value on the fixed buy element at bottom, it shifts the whole page to the bottom.
CSS:
.product-bottom-sticky {
position: fixed;
bottom: 0;
background: #000000;
width: 100%;
padding: 0 14px 2px 0;
color: #ffffff;
display: none;
z-index: 1;
ul {
margin: 0;
li a span {
display: block;
font-size: 0.4em;
text-align: center;
margin-top: -6px;
margin-bottom: 5px;
}
}
.zopim-call-chat {
float: left;
font-size: 2em;
color: #ffffff;
}
.sticky-add-to-cart {
float: right;
margin: 6px 0 0 0;
padding: 3px 22px 9px 22px;
text-decoration: none;
}
.sticky-add-to-cart i {
font-size: 1.4em;
top: 2px;
left: -3px;
}
}
.sticky-qty div.form-control {
margin-bottom: 0px;
margin-top: 6px;
}
#media #{$mobile-breakpoint} {
.product-bottom-sticky {
display: block;
}
.sticky-chat {
float: left;
border-right: 1px solid #333333;
padding-right: 15px;
padding-top: 7px;
padding-left: 14px;
background: #555555;
}
.sticky-qty {
float: right;
width: 31%;
padding-top: 7px;
}
.sticky-qty label {
float: left;
color: #ffffff;
margin-top: 10px;
display: none;
}
.sticky-qty .quantity-input {
width: 31%;
float: right;
padding-top: 7px;
}
.sticky-add .button-add-to-cart {
background: #f14fa1;
border-color: #f14fa1;
}
.sticky-add,
.sticky-out {
float: right;
width: 52%;
padding-top: 7px;
}
}
Update
I found a partial solution here:
https://www.igorkromin.net/index.php/2016/05/20/mobile-safari-scrolling-problem-with-an-input-field-inside-a-fixed-div/
CSS:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
This fixed the issue but created another issue: when I click the tabs it scrolls to the top.
Update 2
This is my JS which seems to be conflicting - maybe as it's using body, html. Is there a way to sort it since the input fix I added? It just seems to jump to the top of the tab on changing the tabs.
JS:
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}

Fixed Position Menu modification guidance

Found a simple stick nav that puts the small menu on the left side of the browser window. No problem so far but I am unsure how to turn that into a sliding menu that reduces to an icon like you would see on a website template theme color switcher. {edit - I have been searching google but am not using the correct terms I think. Appreciate any suggestions as to what I am looking for so as to solve this and learn.}
Something like this quick sketch in Photoshop.
The fiddle is: JSfiddle
and the code is:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#menu {
position: fixed;
left: 0;
top: 50%;
width: 8em;
margin: -2.5em 0 0 0;
z-index: 5;
background: white;
color: #4E4E4E;
font-weight: bold;
font-size: large;
text-align: left;
border: #4e4e4e;
border-left: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px black;
}
#menu li { margin: 0 }
#menu a { color: inherit }
</style>
</head>
<body>
<ul id=menu>
<li>Section 1
<li>Section 2
<li>Section 3
</ul>
</body>
</html>

Easiest way is to add to your menu a "square" with pseudoelement :after positioned where you want like this:
#menu:after {
content: '';
position: absolute;
top: 0;
right: -40px;
height: 40px;
width: 40px;
box-shadow: 0 1px 3px black;
display: block;
background-color: #fff;
}
#menu:before {
content: '';
position: absolute;
z-index:1;
top: 1px;
right: -1px;
height: 39px;
width: 4px;
display: block;
background-color: #fff;
}
The before is just a white box to cover the shadow of the afterso it will look joined to the menú,
Then position the menu outside the window just showing the after element and make an event on click to add a class to the menu to "show" or "hide".
$('#menu').on('click', function(){
$('#menu').toggleClass('visible');
});
#menu {
position: fixed;
left: -198px;
top: 50%;
width: 8em;
margin: -2.5em 0 0 0;
z-index: 5;
background: white;
color: #4E4E4E;
font-weight: bold;
font-size: large;
text-align: left;
border: #4e4e4e;
border-left: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px black;
transition: left 0.2s linear;
}
#menu li {
margin: 0
}
#menu a {
color: inherit
}
#menu:after {
content: '';
position: absolute;
top: 0;
right: -40px;
height: 40px;
width: 40px;
box-shadow: 0 1px 3px black;
display: block;
background-color: #fff;
}
#menu:before {
content: '';
position: absolute;
z-index:1;
top: 1px;
right: -1px;
height: 39px;
width: 4px;
display: block;
background-color: #fff;
}
.visible {
left:0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id=menu>
<li>Section 1
<li>Section 2
<li>Section 3
</ul>
JSFIDDLE

How do dynamically resize a image - CSS / HTML

I'm trying to dynamically resize a .png image to whatever text is put on the box. As you can see from the printscreen it doesn't resize dynamically to fit the text in the box. I have no idea how to make it work ... the link to that page is here. I've tried formatting the padding, margins and adding classes and divs to that, but it didn't work. A link to the website can be found here.
So the problem in the
<div id='page' class='container'>:
<div id="page-bg1">
<div id="page-bg2">
<div id="page-bg3">
<div id="page" class="container">
<div class="box-style2" id="content">
<h2 class="title">Services</h2>
<p>Our experience and business ethics have evolved over several decades of working in the cleaning industry. We understand the importance of supervision, training, communication, and customer satisfaction. The facility types we serve include commercial, healthcare, corporate, education, industrial, manufacturing, and auto dealerships
</p>
<h2>Building Maintenance Services:</h2>
<ul>
<li><b>Contract Custodial Cleaning:</b> Outsourcing of custodial cleaning is a way for corporate clients to reduce their direct costs while ensuring that quality control standards are met. We can work within your existing cleaning specifications or custom design a complete program for your nightly cleaning requirements, including all labor, cleaning equipment and complete supervision. Additional value-add features include consumable product inventory control, periodic project cleaning, and quality control site audits.
</li>
<li><b>Certified Cleanroom Attendant Services: </b>
Cleanroom cleaning is a highly-specialized function and critical part of our clients’ quality control standards. We can develop and implement a program that will conform to your protocols. Our Attendants are trained and certified in all areas of contamination control including waste removal, gowning procedures, cleaning techniques and equipment handling.
</li>
</ul>
</div>
<div id="sidebar">
<div id="box2" class="box-style2">
<h2 class="title">Specialized Cleaning Services</h2>
<ul class="style3">
<li>ESD and composition tile floor refinishing and maintenance</li>
<li>Carpet and area rug cleaning</li>
<li>Cubicle fabrics partition and upholstery cleaning</li>
<li>Kitchen and cafeteria cleaning</li>
<li>Window and glass cleaning</li>
<li>Wall and ceiling cleaning</li>
</ul>
</div>
<div id="box3" class="box-style2">
<h2 class="title">Additional Services</h2>
<ul>
<li>Post-construction cleanup</li>
<li>Temporary hourly-rate personnel</li>
<li>Matron/day porters</li>
<li>Pressure washing</li>
<li>Painting</li>
<li>Relamping</li>
<li>Mold and mildew treatments</li>
<li>Fabric and carpet soil protection</li>
<li>Carpet deodorizing</li>
<li>Floor mat purchase and rental programs</li>
<li>Flame retardant applications</li>
<li>Static control applications</li>
<li>Seasonal school dormitory cleaning</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The CSS is here:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: url(palette/png/Background/bg.png) repeat left top;
font: 14px/26px "Arvo", Georgia, "Times New Roman", Times, serif;
//color: #94856A;
color: #0020C2;
}
a
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-family: 'Arvo', serif;
}
p, ol, ul {
margin-top: 0px;
}
strong {
}
a {
color: #789329;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
.image-wrapper {
position : relative;
}
.scale-image {
display : block;
width : auto;
max-width : 75% ;
}
/** WRAPPER */
#wrapper {
background: url(palette/png/Background/bg.png) repeat left top;
}
#main-bg {
background: url(palette/png/Background/bg_combined.png) repeat center top;
}
.container {
width: 1000px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
}
/** LOGO */
#logo {
height: 183px;
background: url(images/fmn_200.jpg) no-repeat center top;
text-align: center;
text-transform: uppercase;
}
#logo h1, #logo p {
margin: 0px;
}
#logo h1 {
padding-top: 107px;
letter-spacing: 2px;
line-height: 25px;
font-size: 25px;
color: #FFFFFF;
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
#logo p {
padding-top: 15px;
letter-spacing: 1px;
line-height: 14px;
font-size: 14px;
color: #776D5C;
background: url(image/fmn_200.jpg);
}
/** MENU */
#menu {
height: 100px;
background: url(images/crop.png) repeat center top;
}
#menu ul {
height: 69px;
margin: 0px;
padding: 31px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline;
}
#menu a {
display: inline-block;
margin: 0 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
line-height: 68px;
font-size: 14px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/** PAGE */
#page-bg1 {
overflow: hidden;
background: url(palette/png/CBG/cbg_shadow.png) repeat-x left bottom;
}
#page-bg2 {
background: url(palette/png/CBG/cbg_shadow.png) repeat-y center top;
}
#page-bg3 {
background: url(palette/png/CBG/cbg_combined.png) repeat center bottom;
}
#page {
overflow: hidden;
padding: 50px 0px 50px 0px;
}
.homepage #page {
height: auto !important;
height: 380px;
min-height: 380px;
}
/** SLIDERTRON */
#slidertron {
position: relative;
width: 900px;
height: 300px;
margin: 0px auto;
}
#slidertron .viewer {
width: 900px;
height: 290px;
overflow: hidden;
}
#slidertron .reel {
}
#slidertron .slide {
float: left;
width: 640px;
height: 260px;
background: #FFFFFF;
}
#slidertron .slide img {
padding: 9px;
border: 1px solid #E4E2DE;
}
#slidertron .indicator {
position: absolute;
bottom: 0px;
width: 100%;
height: 16px;
cursor: default;
user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-o-user-select: none !important;
-webkit-user-select: none !important;
}
#slidertron .indicator ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#slidertron .indicator li {
display: inline;
}
#slidertron .indicator li.active {
}
#slidertron .indicator a {
display: inline-block;
width: 16px;
height: 16px;
margin: 0px 3px;
background: url(images/slidertron_01.png) no-repeat -16px -258px;
text-indent: -9999em;
}
#slidertron .indicator li.active a {
background-position: 0px -258px;
}
#slidertron .navigation a {
position: absolute;
top: 1px;
display: block;
width: 125px;
height: 258px;
background: url(images/slidertron_01.png) no-repeat;
text-indent: -9999em;
}
#slidertron .navigation a.previous {
left: -1px;
background-position: 0px 0px;
}
#slidertron .navigation a.next {
background-position: 100% 0px;
right: -1px;
}
/** CONTENT */
#content {
float: left;
width: 600px;
padding-left: 50px;
}
.two-column2 #content {
float: right;
padding-right: 50px;
padding-left: 0px;
}
#wide-content {
overflow: hidden;
padding: 0px 50px;
}
/** SIDEBAR */
#sidebar {
float: right;
width: 260px;
padding-right: 50px;
}
.two-column2 #sidebar {
float: left;
padding-left: 50px;
padding-right: 0px;
}
#sidebar .title {
font-size: 18px;
}
/** FOOTER BLOCK */
#footer-block-wrapper {
overflow: hidden;
padding-bottom: 40px;
}
#footer-block-bg {
overflow: hidden;
padding-bottom: 30px;
background: url(palette/png/Background/bg_bar.png) repeat-y center top;
}
#footer-block-bgtop {
background: url(palette/png/Background/bg_bar.png) no-repeat center top;
}
#footer-block {
overflow: hidden;
width: 860px;
height: auto !important;
padding: 70px 70px 0px 70px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6C5F48;
}
#footer-block h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
#footer-block #column1 {
float: left;
width: 240px;
margin-right: 70px;
}
#footer-block #column2 {
float: left;
width: 240px;
}
#footer-block #column3 {
float: right;
width: 240px;
}
/** FOOTER */
#footer {
padding: 50px 0px 70px 0px;
}
#footer p {
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #2F2518;
}
/** BOX 1 */
#box1 .title1, #box1 .title2 {
text-align: center;
}
/** BOX 2 */
#box2 {
margin-bottom: 30px;
}
/** BOX STYLE 1 */
.box-style1 {
}
.box-style1 .title1 {
padding: 0px 0px 5px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: bold;
font-size: 26px;
color: #3C3223;
}
.box-style1 .title2 {
padding: 0px 0px 15px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: normal;
font-size: 15px;
color: #8A7C60;
}
/** BOX STYLE 2 */
.box-style2 {
}
.box-style2 .title {
padding: 0px 0px 5px 0px;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
color: #3C3223;
}
.box-style2 .byline {
letter-spacing: 1px;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
color: #8B806F;
}
/** LINK STYLE 1 */
.link-style1 {
display: inline-block;
height: 48px;
margin: 9px 0px 0px 0px;
background: url(images/bio_2.png) repeat-x left top;
}
.link-style1 a {
display: inline-block;
height: 48px;
background: url(images/bio_1.png) no-repeat left top;
line-height: 48px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Arvo', serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.link-style1 span {
display: inline-block;
padding: 0px 30px 0px 30px;
background: url(images/bio_3.png) no-repeat right top;
color: #FFFFF;
}
/** LINK STYLE 2 */
.link-style2 {
display: inline-block;
background: url(images/homepage09.gif) no-repeat left 3px;
margin-top: 20px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LINK STYLE 3 */
.link-style3 {
background: url(images/homepage10.gif) no-repeat left 2px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LIST STYLE 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
}
ul.style1 a {
color: #6C5F48;
}
/** LIST STYLE 2 */
ul.style2 {
margin: 0px 0px 10px 0px;
padding: 10px 0px;
list-style: none;
}
ul.style2 li {
float: left;
margin-right: 9px;
}
/** LIST STYLE 3 */
ul.style3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
}
The images which needs to be resized are palette/png/CBG/cbg_combined.png and palette/png/CBG/cbg_shadow.png, presented in the divs #page-bg3, #page-bg2 and #page-bg1. That's the image that I wanted to resize according to the div text presented in that box.. I'm also adding a screenshot so you guys can have an idea of the problem.
What can I do to make it work? I only need this central banner to be able to dynamically resize.
I'm also adding a screenshot of how I wanted the page to look like:

Basically, I have cropped your background and used it in a differnt way. You can get the images from the following link:
#page-bg1
#page-bg2
#page-bg-3
And here's my code:
#page-bg1 {
overflow: hidden;
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined2.png) center;
}
#page-bg2 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined.png) repeat-y center top;
}
#page-bg3 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined1.png) no-repeat center bottom;
}
Little Explanation:
#page-bg1 is the background behind and outside the box.
#page-bg-2 is a vertically repeating background inside the box where you put your content.
#page-bg-3 is a backgroud with dashed border at the bottom of your content box which doesn't repeat but is always fixed at the bottom.