djeric
Gebruiker
- Lid geworden
- 22 nov 2006
- Berichten
- 955
Hallo allemaal.
Mijn tabel inhoudt blijft niet binnen in de tabel staan bij kleine beeld weergave. (zoals op mobiel)
zie voorbeeld: hier
Mijn tabel inhoudt blijft niet binnen in de tabel staan bij kleine beeld weergave. (zoals op mobiel)
zie voorbeeld: hier
HTML:
<h1>Programma overzicht:</h1>
<table>
<tr>
<td class="eric">Dj Eric</td>
<td class="jeroen">Dj Jeroen</td>
<td class="mastiek">Dj Mastiek</td>
<td class="rolando">Dj Rolando</td>
<td class="roel">Dj Blacklight</td>
</tr>
</table>
<div class="content">
<h1>▼ week week 27 (04-07-2016 tot 10-07-2016) ▼</h1>
<table>
<tr class="kop2">
<td>Van</td>
<td>Tot:</td>
<td>Ma</td>
<td>Di</td>
<td>Wo</td>
<td>Do</td>
<td>Vr</td>
<td>Za</td>
<td>Zo</td>
</tr>
<!-- live-stream -->
<tr>
<td class="start">00:00</td>
<td class="einde">12:00</td>
<!-- ma --><td ROWSPAN="9">Auto Dj</td>
<!-- di --><td ROWSPAN="8">Auto Dj</td>
<!-- wo --><td ROWSPAN="1">Auto Dj</td>
<!-- do --><td ROWSPAN="10">Auto Dj</td>
<!-- vr --><td ROWSPAN="9">Auto Dj</td>
<!-- za --><td ROWSPAN="3">Auto Dj</td>
<!-- zo --><td ROWSPAN="13">Auto dj</td>
</tr>
<tr>
<td class="start">12:00</td>
<td class="einde">13:00</td>
<!-- ma -->
<!-- di -->
<!-- wo --><td class="rolando" ROWSPAN="3">Woensdag middag met Dj Rolando</td>
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">13:00</td>
<td class="einde">14:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">14:00</td>
<td class="einde">15:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za --><td class="roel" ROWSPAN="3">Dj Blacklight saturday's favorite's</td>
<!-- zo -->
</tr>
<tr>
<td class="start">15:00</td>
<td class="einde">16:00</td>
<!-- ma -->
<!-- di -->
<!-- wo --><td ROWSPAN="9">Auto Dj</td>
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">16:00</td>
<td class="einde">17:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">17:00</td>
<td class="einde">18:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za --><td ROWSPAN="7">Auto dj</td>
<!-- zo -->
</tr>
<tr>
<td class="start">18:00</td>
<td class="einde">19:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">19:00</td>
<td class="einde">20:00</td>
<!-- ma -->
<!-- di --><td class="rolando" ROWSPAN="3">De dolle dinsdag</td>
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">20:00</td>
<td class="einde">21:00</td>
<!-- ma --><td class="mastiek" ROWSPAN="2">BPM after weekend show</td>
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr --><td class="mastiek" ROWSPAN="2">BPM weekend show</td>
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">21:00</td>
<td class="einde">22:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do --><td class="roel" ROWSPAN="2">EDM Avond</td>
<!-- vr -->
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">22:00</td>
<td class="einde">23:00</td>
<!-- ma --><td ROWSPAN="2">Auto Dj</td>
<!-- di --><td ROWSPAN="2">Auto Dj</td>
<!-- wo -->
<!-- do -->
<!-- vr --><td ROWSPAN="2">Auto dj</td>
<!-- za -->
<!-- zo -->
</tr>
<tr>
<td class="start">23:00</td>
<td class="einde">00:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do --><td ROWSPAN="1">Auto dj</td>
<!-- vr -->
<!-- za -->
<!-- zo -->
</tr>
</table>
Code:
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, "sans-serif";
color: black;
font-size: 1em;
background-image: url(../afbeeldingen/back.jpg);
background-size: cover;
}
h3
{
text-align : left;
color : #0099FF;
font-size: 0.8em;
}
h4 {
text-align:center;
color: #cd6600;
font-size: 1.0em;
letter-spacing: 0.1em;
margin: 0 0 0.8em;
padding: 0;
padding-top: 1em;
}
h5
{
text-align : center;
color : #0099FF;
font-size: 1.3em;
}
A:link { color: #ffff00; }
A:hover { color: #cccccc; }
A:visited { color: #cccccc; }
A:active { color: #ff0000; }
#websitevak {
width: 100%;
max-width: 1000px;
margin: 1em auto;
border-left: 3px ridge green;
border-right: 3px ridge green;
background-color: yellow;
background-image: -linear-gradient(top, darkblue, lightblue, yellow);
background-image: -webkit-linear-gradient(top, darkblue, lightblue, yellow);
background-image: -moz-linear-gradient(top, darkblue, lightblue, yellow);
background-image: -ms-linear-gradient(top, darkblue, lightblue, yellow);
background-image: -o-linear-gradient(top, darkblue, lightblue, yellow);
}
#balkboven p {
font-family: georgia,serif;
font-variant: small-caps;
padding: 1em;
text-align: center;
}
#balkboven p a {
color: linen;
font-size: 2.5em;
letter-spacing: 0.1em;
text-decoration: none;
text-shadow: 1px 1px 1px black;
}
@media screen and (max-width: 600px) {
#balkboven p a {
font-size: 1.4em;
}
}
#middenstuk {
width: 100%;
}
#menu {
background-color: #1e90ff;
background-image: -linear-gradient(left, #104e8be, #1e90ff);
background-image: -webkit-linear-gradient(left, #104e8b, #1e90ff);
background-image: -moz-linear-gradient(left, #104e8b, #1e90ff);
background-image: -ms-linear-gradient(left, #104e8b, #1e90ff);
background-image: -o-linear-gradient(left, #104e8b, #1e90ff);
font-family: georgia,serif;
font-variant: small-caps;
letter-spacing: 0.15em;
text-align: center;
width: 100%;
}
#menuknop {
color: linen;
display: none;
height: 20px;
font-size: 1.1em;
font-variant: small-caps;
font-weight: bold;
padding: 9px 0 9px 0;
text-align: center;
text-decoration: none;
}
@media screen and (max-width: 800px) {
#menuknop {
display: block;
}
}
#menu-icoon {
display: inline-block;
width: 22px;
padding: 0 0.5em 0 0;
position: relative;
}
#menu-icoon span {
background-color: linen;
border: .5px solid linen;
height: 2px;
margin-top: 2px;
width: 100%;
display: block;
}
#menu ul {
list-style-type: none;
}
#hoofdmenu {
display: none;
margin: 0 auto;
max-width: 900px;
width: 80%;
}
@media screen and (min-width: 801px) {
#hoofdmenu {
display: block !important;
}
}
@media screen and (max-width: 800px) {
#hoofdmenu {
width: 100%;
}
}
#hoofdmenu:after {
clear: both;
content: " ";
display: table;
}
#hoofdmenu > li {
display: inline-block;
position: relative;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li {
border-top: 1px solid linen;
display: block;
}
}
#hoofdmenu > li > a {
color: #ffffff;
display: block;
font-size: 1.2em;
padding: 1em 0 0.8em 1em;
text-align: left;
text-decoration: none;
}
#hoofdmenu > li > a:hover {
color: yellow;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li > a:hover {
background-color: yellow;
color: linen;
}
}
#hoofdmenu > li:hover ul {
display: block;
position: absolute;
z-index: 2;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li:hover ul {
left: 10em;
top: 0;
}
}
.submenu > ul {
border-bottom: 1px solid linen;
border-left: 1px solid linen;
border-right: 1px solid linen;
display: none;
}
@media screen and (max-width: 800px) {
.submenu > ul {
border: 0 none transparent;
}
}
.submenu > ul > li > a {
background-color: yellow;
border-top: 1px solid linen;
color: darkgreen;
display: block;
font-size: 1em;
font-variant: small-caps;
letter-spacing: 0.05em;
padding: 0.5em 0 0.5em 2em;
text-align: left;
text-decoration: none;
width: 7em;
}
.submenu > ul > li:first-child a {
border-top: 0 none transparent;
}
@media screen and (max-width: 800px) {
.submenu > ul > li > a {
background-color: yellow;
border-left: 4px solid darkolivegreen;
border-right: 1px solid linen;
letter-spacing: 0.1em;
padding: 1em 0 0.8em 0.5em;
}
}
.submenu > ul > li > a:hover {
background-color: orange;
}
@media screen and (max-width: 800px) {
.submenu > ul > li > a:hover {
background-color: orange;
border-left: 4px solid linen;
}
}
#hoofdvak {
margin: 1em auto 0;
max-width: 1000px;
width: 95%;
}
@media screen and (max-width: 800px) {
#hoofdvak {
width: 95%;
}
}
#inhoudtekstvak {
background-image: url(../afbeeldingen/achtergronden.png);
background-repeat: no-repeat;
background-size: cover;
padding: 1.5em;
min-height: 50vh;
}
#tekstvak p {
font-size: 0.95em;
line-height: 1.3em;
margin-bottom: 1em;
color: #FFD700;
}
#tekstvak ul, #tekstvak ol {
font-size: 0.95em;
line-height: 1.3em;
margin-bottom: 1em;
margin-left: 2em;
}
#tekstvak ul li, #tekstvak ol li {
padding-right: 2em;
position: relative;
left: 2em;
}
@media screen and (max-width: 800px) {
#tekstvak ul li, #tekstvak ol li {
padding-right: 0;
position: static;
left: 0;
}
}
#tekstvak h1 {
text-align:center;
color: #cd6600;
font-size: 1.3em;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0 0 0.8em;
padding: 0;
padding-top: 1em;
}
#tekstvak h2 {
color: olivedrab;
font-size: 1em;
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 0.25em;
padding-top: 0.25em;
}
#extravak {
background-color: #003333;
float: left;
margin: 1em 1% 1em 0;
width: 49%;
}
@media screen and (max-width: 800px) {
#extravak {
float: none;
margin: 1em 0;
width: 100%;
}
}
@media screen and (max-width: 800px) {
#extravak:after {
clear: both;
content: " ";
display: table;
}
}
#aanmelding > p {
font-size: 0.95em;
line-height: 1.3em;
margin-bottom: 1em;
color: #00ff00;
}
.benodigd{
color: #ffff00;
}
.jarig{
color: #00FF2B;
}
#aanmelding > li {
color: #ffff00;
}
#inhoudextravak {
padding: 1.5em;
}
#inhoudextravak > h3 {
color: cornflowerblue;
font-size: 1.1em;
font-variant: small-caps;
letter-spacing: 0.1em;
margin-bottom: 1em;
}
#inhoudextravak > p {
font-size: 0.95em;
line-height: 1.3em;
margin-bottom: 1em;
color: #00ff00;
}
#inhoudextravak img {
border: 1px solid linen;
display: block;
height: auto;
max-width: 50%;
}
#inhoudextravak > li {
color: #ffff00;
}
@media screen and (max-width: 800px) {
#inhoudextravak img {
display: inline;
max-width: 30%;
}
}
#socialmediavak {
background-color: #003333;
float: left;
margin: 1em 0 1em 1%;
width: 49%;
}
@media screen and (max-width: 800px) {
#socialmediavak {
float: none;
margin: 1em 0;
width: 100%;
}
}
#inhoudsocialmediavak {
padding: 1.5em;
}
#inhoudsocialmediavak > h3 {
color: cornflowerblue;
font-size: 1.1em;
font-variant: small-caps;
letter-spacing: 0.1em;
margin-bottom: 1em;
}
#balkbeneden {
background-color: blue;
clear: both;
margin: 0 0 1em;
width: 100%;
}
@media screen and (max-width: 800px) {
#balkbeneden {
margin: 0 auto;
width: 95%;
}
}
#inhoudbalkbeneden {
padding: 0.8em 0;
text-align: center;
width: 100%;
color: #ffffff;
}
#inhoudbalkbeneden span {
display: inline-block;
font-size: 1.0em;
padding: 0.5em 2em;
white-space: nowrap;
}
@media screen and (max-width: 800px) {
#inhoudbalkbeneden span {
padding: 0.25em 0.5em;
}
}
#inhoudbalkbeneden > span > a {
color: white;
text-decoration: none;
}
#nowplaying {
width: 99%;
}
#link p {
font-size: 0.95em;
line-height: 1.3em;
margin-bottom: 1em;
color: #ffffff;
}
#link ol {
color: blue;
font-size: 1em;
}
.team table {
width: 100%;
text-align : left;
border: none;
}
.team tr{
background: none;
}
.foto {
background-color : #000000;
width: 20%;
}
.vraag {
background-color : #3366FF;
color : #00FF7F;
text-align : left;
padding: 0.5em;
}
.antwoord {
background-color : #00FF7F;
color : #3366FF;
text-align : left;
padding: 0.5em;
}
.clearfix:before, .clearfix:after {
clear: both;
content: " ";
display: table;
}
.playersA {
float: left;
width : 20%;
margin: 0.2em 0.8em 0.6em 0;
}
.playersB {
float: right;
width : 20%;
margin: 0.2em 0.8em 0.6em 0;
}
.links {
float: left;
margin: 0.2em 0.8em 0.6em 0;
}
.rechts {
float: right;
margin: 0.2em 0 0.6em 0.8em;
}
.gecentreerd {
display: block;
margin: 0 auto 1em;
border: none;
}
.socialmedia {
border: 0 none;
margin: 0.5em 0.3em;
}
.buttons {
list-style : none;
text-align : center;
width : 100%;
}
table {
text-align : center;
border : black outset 5px;
table-layout: fixed;
font-weight : bolder;
font-size : 12px;
margin : 0 auto;
width : 100%;
}
tr#kop {
height : 30px;
font-size : 1.1em;
font-weight : bold;
color : #c0c0c0;
background : #c30;
}
tr#kop td {
width : 350px;
}
tr#kop2 {
height : 30px;
font-size : 1.1em;
font-weight : bold;
color : #c0c0c0;
background : #c30;
}
tr#kop2 td {
width : 210px;
}
.kop1 {
background : #CC3333;
}
.kop2 {
background : #CC3333;
color : #669999;
font-size : 1.2em;
}
.eric {
background-color : #FFFF33;
}
.mastiek {
background-color : #FFFFFF;
}
.roel {
background-color : #00ff00;
}
.rolando {
background-color : #00cc99;
}
.jeroen {
background-color : #ff0000;
}
.duo {
background-color : #990000;
}
.leerling {
background-color : #FF0000;
}
.start {
background-color : #CC3333;
color : #999966;
font-size : 1.2em;
}
.einde {
background-color : #CC3333;
color : #999966;
font-size : 1.2em;
}
.testen {
background-color : #ff9900;
}
tr {
height : 40px;
background : #996666;
color : #333333;
}
.klokje
{
text-align : left;
font-size : 1.0em;
margin-top: 4em;
}
.bestaan
{
text-align : right;
font-size : 1.2em;
margin-top: -1em;
color : #000000;
}
.regelement
{
text-align:left;
color: #cd6600;
background: green;
width: 19%;
font-size: 0.9em;
margin: 0 0 0.8em;
padding: 0;
float: right;
}
Laatst bewerkt: