/* Last update 14/6/18 Neil Hawes Problems tackled and solved: I wanted non-opaque text and/or images on top of an opaque background, but without using HTML5, because this is not supported in many older browsers. The only way I could find to do this was to have two divs, the first containing the opaque background and the second containing the text or image, and they must be on precisely on top of each other. The second div must not be a child of the first, otherwise it inherits its opacity. So you have to have a wrapper div (position relative) containing both these two divs separately (position absolute). The problem then is that the size of the opaque background is not defined, so it has to be set to be the correct size by duplicating the text and/or image(s) in the first div, which works nicely, but means that maintenance can be a little tricky because both have to be updated at once, and also a search on the webpage finds two lots of everything! A further issue was then that we wanted two floating divs to be the same length as each other (the red sidebar and the main text box). The best way of doing this I could find was a wrapper div round both (see details under "special"). However, this meant that the correct length had to be calculated in the top-level div, which meant having a third version of the text! So now we have three lots of text in each page, all of which have to be aligned. The first lot is to give the correct length of colmain to special, the second is to give correct length to whitebg, and the third lot is the non-opaque text on top. Search will find three lots of everything! One solution to this is to put the lower two levels of text in a special class which has "visibility: hidden;", but this would mean the three lots were not identical, so making updates much more difficult. What I did in the end was to use either p or dl round the whole lot and in doing this I discovered that the name "pcolmain" was no good because it contains the "col" which has a class assignment, which meant it was picking up the attributes given to col* [class*="col"] - means anything with "col" in the name (but the attributes don't always seem to apply to "ul"). In the end, I got rid of this class statement altogether. In mobile view, below a width of about 400px, the menu table goes over the right margin, so I put an extra table row in for less than 500px width - another solution would be to have a full Responsive Navigation solution! On a small phone, the margins were not correctly being calculated (something wrong with the "box model" or the "box-sizing: border-box;" statement below probably), so had to get rid of the multiple layers for that size of display. Sometimes the lower layers are still being seen... There was a problem with Safari on Apple that the padding columns colpad1/2/3 were being colapsed so no space was being seen on the far left or between the red sidebar and the main text box. I think this has been fixed by putting a non-breaking space in these divs, but only on larger screens. When the domain name was set to frame redirect, so that "kingstonmadrigals.org.uk" was always displayed in the address bar, IE had a problem because vw font sizes were being calculated wrongly and the text inside the doric arch boxes was being displayed about 100 times too large! Resolved this by putting code in the "home" and "about us" screens to load a different css style file for IE so that vw font sizes were not used. */ body { /* Actual image to be displayed is specified in body statement of html */ background-size: cover; /* Make image fill the window without changing aspect (only one "cover" needed) */ /* background-size is a css3 feature, which is supposed to be supported by IE9 and above, but this only works if you have at the top of the html! */ background-repeat: no-repeat; background-position: right top; /* puts image at top right */ background-attachment: fixed; /* no scroll */ font-family: Arial, sans-serif; font-size: 100%; /* to satisfy older browsers */ } * { /* This specifies that padding and border are included in the total width and height of all elements */ box-sizing: border-box; } /* This seems to be required to raise the top of the first row to the top of the window, I'm not sure why */ .row { position: relative; top: -10px; } /* Most of the next few items are based on Responsive Web Design (RWD) at http://www.w3schools.com/css/css_rwd_mediaqueries.asp */ .row:after { /* This is the container div for rows */ content: ""; /* Insert this null content after each row */ clear: both; /* Clear all floating elements, left and right */ display: block; /* Forces a new line */ } /* The following two were originally done in a "class*" statement from the Responsive Web Design template, but this caused unexpected side-effects which took ages to track down - see comments at top */ .colpad1, .colside, .colpad2, .colmenu, .colmain, .colpad3 { float: left; } .colpad1, .colpad2, .colpad3 { xpadding: 1px; /* Have to have something otherwise divs containing nothing disappear - can't have even just a space in a null div otherwise it takes vertical space in mobile view */ /* This may not be necessary now with the insertion of a non-breaking space below */ } /* This is an attempt to fix a problem in Safari where null divs collapse to zero width */ @media only screen and (min-width: 900px) { /* Only on larger screens - was originally 750px */ .colpad1:after, .colpad2:after, .colpad3:after { content: "\00a0"; /* This is the hex code for a non-breaking space */ } } /* Start with definition for mobile phones: side panel and main text all 100%, so will go below each other */ .colside, .colmenu, .colmain { width: 100%; } /* This gives slight opacity to red sidebar. If this is only wanted on a small device, could use "@media only screen and (max-width: 749px)" with brackets */ .colside { -moz-opacity:0.90; -khtml-opacity: 0.90; opacity: 0.90; filter:alpha(opacity=90); } /* Need to define font sizes for fitting inside Doric Arch - these must change according to the window size - vw is Viewport Width - i.e. the width of the browser screen */ div.doricseason1, div.doricseason2, div.doricbox1 { font-size: 1em; /* Just in case vw units are not supported (IE8 and before) */ /* IE9 only works with a reload, not automatically on resize */ font-size: 2.3vw; /* Font size related to Viewport width - needs to be bigger on small screens - see below */ } div.doricbox2 { font-size: 2.3em; /* Just in case vw units are not supported (IE8 and before) */ font-size: 2.6vw; /* Font size related to Viewport width - needs to be bigger on small screens - see below */ } /* This is an adaption of Responsive Web Design (RWD) at http://www.w3schools.com/css/css_rwd_mediaqueries.asp */ /* The widths are chosen to make a reasonably smooth transition when narrowing down from the largest width having a decent space between the red sidebar and the text box. The breakpoints are not chosen based on any particular device type */ /* The red side bar is given a specific width so that the text and images don't overlap the edges */ @media only screen and (min-width: 750px) { /* This is the break point below which all the content boxes will become 100% wide */ /* For desktop: */ .colpad1 {width: 5%;} .colside {width: 260px;} /* This is about 25% of a 1024 width, or 20% of larger 1280 */ .colpad2 {width: 10%;} /* This is the gap between the red sidebar and the main text box */ .colmenu {width: 55%;} /* These two must be the same, this is menu at top */ .colmain {width: 55%;} /* These two must be the same, this is main below the menu */ /* They can't be combined because different padding is applied later */ .colpad3 {width: 3%;} div.doricseason1, div.doricseason2, div.doricbox1 { font-size: 1em; /* Just in case vw units are not supported (IE8 and before) */ font-size: 1.5vw; /* Font size related to Viewport width - smaller than on bigger screens */ } div.doricbox2 { font-size: 1.1em; /* Just in case vw units are not supported (IE8 and before) */ font-size: 1.5vw; /* Font size related to Viewport width - smaller than on bigger screens */ /* !!!! was 1.7 before 29/8/16 */ } } div.menu { /* This puts space above the menu table and also below in the mobile view */ padding-top: 15px; padding-bottom: 10px; /* Changed from 15 to prevent gap appearing in red sidebar after non-breaking spaces put in padding divs */ } table.menu { width: 100%; padding: 2px; /* Any more padding or spacing means that the menu will not fit in the space */ border-spacing: 4px; } @media only screen and (min-width: 1000px) { table.menu { border-spacing: 10px 4px; /* Horiontal and vertical spacing - make the menu items narrower on large screens */ } } @media only screen and (min-width: 1200px) { table.menu { border-spacing: 20px 4px; /* ... and even more narrow */ } } th.menu { background-color: #891818; } th.selm { /* Selected menu item */ background-color: gray; color: white; } /* The following are for links in the menu table */ a.menu:link, a.menu:visited { color: white; } a.menu:hover, a.menu:active { /* mouse over link */ color: white; background-color: gray; } a.menu:link, a.menu:visited { color: white; } /* The following are for links in the sidebar */ a.olink:hover, a.olink:active { color: white; background-color: gray; } a.olink:link, a.olink:visited { color: white; } div.sidebar { Xbackground-color: #891818; background: rgba(137,24,24,0.9); /* This is new 2018 */ text-align: center; border-top-style: solid; border-color: white; border-width: 2px; color: white; } /* The following are for text in the sidebar */ h1.sideb, h2.sideb, p.sideb, p.sidebc, p.sidebcs, p.sidebs { padding-right: 20px; padding-left: 20px; } h1.sideb { /* This is the Kingston Madrigal Society header */ font-size: 1.75em; } h2.sideb { /* This is the page title in the sidebar */ font-size: 1.5em; } p.sideb, p.sidebc { /* This is for ordinary text in the sidebar, "c" suffix is the centred one */ font-size: 1.2em; } p.sidebcs, p.sidebs { /* "s" for smaller text in the sidebar */ font-size: 1.0em; } p.sideb, p.sidebs { text-align: left; } p.sidebc, p.sidebcs { text-align: center; } /* Now stuff for the Doric Arch on the Home and "about us" pages */ img.doricgif { /* This is for the transparent gif of the Doric Arch */ width: 100%; /* This means it will take up all the space available and shrink when necessary */ } /* These are the four boxes to hold text within the Doric Arch */ div.doricseason1, div.doricseason2, div.doricbox1, div.doricbox2 { position: absolute; font-weight: bold; color: black; } div.doricseason1, div.doricseason2 { top: 17.2%; } div.doricseason1 { left: 15%; } div.doricseason2 { left: 74%; } div.doricbox1 { left: 27.5%; top: 24%; width: 44%; height: 3%; text-align: center; } div.doricbox2 { top: 32%; left: 19%; width: 62%; font-weight: normal; text-align: center; } /* This is the main div for the right-hand large text box on all pages that don't have the Doric Arch */ div.colmain { padding-top: 10px; /* This has to match with padding on whitebg */ padding-left: 26px; /* This padding to make the text in colmain match up with that in text_container */ padding-right: 26px; /* text_container has padding of 6px, and the ones within it 20px */ position: relative; /* This has to be here to make text_container be able to start in top left */ } /* This is the container in colmain to hold whitebg and textonwhite/doricwhite */ div.text_container { position: absolute; top: 0px; left: 6px; /* These two are to match the width of the white box to the menu above */ right: 6px; } /* Don't specify height - will be worked out by length of text, but that means identical text has to be in both divs */ div.whitebg, div.textonwhite, div.doricwhite { position: absolute; top: 0px; left: 0px; padding-top: 10px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; } div.whitebg { /* The four different opacity specifiers are recommended for different browsers apparently */ -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.9; filter:alpha(opacity=80); Xbackground: white; background: rgba(255,255,255,0.8); /* This is new 2018 - 0.8 here seems to be more opaque than .8 above */ width: 100%; } div.textonwhite, div.doricwhite { width: 100%; /* This is only needed in phone display when textonwhite is the white background */ z-index: 2; /* Sets stack index of items on top of each other - these will be on top */ } /* Note that text in the main box has no size specification - it is 1em */ /* These two are a fix to make colside and colmain the same length as each other see http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height, but this only applies to larger screens */ @media only screen and (min-width: 750px) { #container { overflow: hidden; width: 100%; } .special { padding-bottom: 500em; margin-bottom: -500em; } } /* These two are to make the menu display in a narrower format on small width screens (i.e. phones) */ @media only screen and (min-width: 500px) { .mobl { display: none; } } @media only screen and (max-width: 500px) { .desk { display: none; } } /* This is to make the text box have no margins on smaller devices */ @media only screen and (max-width: 750px) { div.text_container { left: 0px; right: 0px; } div.colmain { /* These need to be adjusted otherwise the text will get out of sync */ padding-left: 20px; padding-right: 20px; } /* These need further testing because em is relative to current size..? */ div.doricseason1, div.doricseason2, div.doricbox1 { xfont-size: 0.5em; /* Set small fonts for browser on phone that doesn't support vw */ xfont-size: 2.3vw; } div.doricbox2 { xfont-size: 0.55em; xfont-size: 2.6vw; } } /* This does not display the two lower levels of text (but the space is still reserved) - these are paragraphs used for main text on the non-Doric screens, and solves the problem of multiple search hits, and also the possibility of small-screen browsers not getting margins right */ .pclmain, .pwhitebg { /* So ptextonwhite is the only div that displays the text, but the space is still taken */ visibility: hidden; }