Tabel responsive & weergave probleem

Status
Niet open voor verdere reacties.
R

riraradio

Nieuwe gebruiker
Lid geworden
24 mrt 2022
Berichten
4
Hallo helpers

Mijn https://www.riraradio.nl/gezocht.php pagina toont een weergave probleem in responsive.

De tabel is niet even mooi breed, en zeker al op mobiel geen responsive.
Ik heb al geprobeerd waardes width toe te voegen maar het lijkt niets te veranderen.

Enige idee hoe ik hem mooi in het midden krijg de tabel en de inhoudt netjes even breed maak & responsive in b.v. mobiele versies?

Met vriendelijke groet

Billy

Code: 
* {
    margin: 0;
    padding: 0;
}


body {
    background-color: midnightblue;
    color: darkslategrey;
    font-family: "trebuchet ms",helvetica,sans-serif;
    font-size: 1em;
}


p {
color: #7092be;	
font-family: "Segoe Print";
font-size: 1.2em;
margin-top: 2em;
}


h1 {
    color: Darkblue;
    font-size: 1.6em;
    font-weight: bold;
	text-align: center;
	margin-top: 1em;
}


h2 {
    color: #7092be;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 2em;
}


h3 {
    color: White;
    font-size: 1.4em;
    font-weight: bold;
	text-align: center;
	margin-top: 1em;
}


#websitevak {
    background-color: #FFFFEF;
    margin: 0.8em auto;
    width: 95%;
}


@media screen and (max-width: 800px) {
#websitevak {
    width: 95%;
}
}


@media screen and (min-width: 1440px) {
#websitevak {
    width: 65%;
}
}


#balkboven {
    background-color: #FFFFEF;
    background-image: url(../afbeeldingen/logo.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 200px;
	margin-top: 2em;
    width: 95%;
}




@media screen and (max-width: 800px) {
#balkboven {
    margin: 0 auto;
	background-size: 155px;
    width: 95%;
}
}


#balkboven {
    font-variant: small-caps;
    padding: 3em 0 3em 2%;
    text-align: left;
    width: 95%;
}


@media screen and (min-width: 600px) and (max-width: 1000px) {
#balkboven {
    padding: 1.8em 0 1.8em 25%;
}
}


@media screen and (max-width: 800px) {
#balkboven {
    padding: 1.8em 0;
}
}


#balkboven a {
    color: midnightblue;
    font-size: 2em;
    text-decoration: none;
}


@media screen and (max-width: 800px) {
#balkboven a {
    font-size: 1.4em;
}
}


.ondertitel {
    color: mediumvioletred;
    font-size: 1.2em;
}


@media screen and (max-width: 800px) {
.ondertitel {
    font-size: 1em;
}
}


#middenstuk {
    width: 100%;
}


@media screen and (max-width: 800px) {
#middenstuk {
    margin: 0 auto;
    width: 95%;
}
}


#menu {
    background-color: midnightblue;
    width: 100%;
}


#menuknop {
    color: white;
    display: none;
    height: 20px;
    font-size: 1.1em;
    font-variant: small-caps;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 9px 0 9px 1.4em;
    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: white;
    border: .5px solid white;
    height: 2px;
    margin-top: 3px;
    width: 100%;
    display: block;
}


#menu ul {
    list-style-type: none;
}


#hoofdmenu {
    display: none;
    margin-left: 2%;
}


@media screen and (min-width: 801px) {
#hoofdmenu {
    display: block !important;
}
}


@media screen and (max-width: 800px) {
#hoofdmenu {
    margin-left: 0;
}
}


#hoofdmenu:after {
    clear: both;
    content: " ";
    display: table;
}


#hoofdmenu > li {
    float: left;
    position: relative;
}


@media screen and (max-width: 800px) {
#hoofdmenu > li {
    background-color: darkblue;
    float: none;
}
}


#hoofdmenu > li > a {
    border-left: 1px solid midnightblue;
    border-right: 1px solid midnightblue;
    color: white;
    display: block;
    font-size: 1em;
    font-variant: small-caps;
    padding: 0.5em 1.6em;
    text-align: left;
    text-decoration: none;
}


@media screen and (max-width: 900px) {
#hoofdmenu > li > a {
    border-left: 0 none transparent;
    border-right: 0 none transparent;
    padding: 0.5em 1em 0.5em 0.8em;
}
}


@media screen and (max-width: 800px) {
#hoofdmenu > li > a {
    border-bottom: 1px solid lightgrey;
    padding: 0.5em 1em 0.5em 1.6em;
}
}


@media screen and (max-width: 800px) {
#hoofdmenu > li:last-child a {
    border-bottom: 3px solid midnightblue;
}
}


#hoofdmenu > li > a:hover {
    background-color: #7092be;
	color: #FFFFCC;
    border-left: 1px solid white;
    border-right: 1px solid white;
}


@media screen and (max-width: 800px) {
#hoofdmenu > li > a:hover {
    background-color: #7092BE;
    border-left: 0 none transparent;
    border-right: 0 none transparent;
    color: #FFFFCC;
}
}


#hoofdmenu > li:hover ul {
    display: block;
    position: absolute;
    z-index: 2;
}


@media screen and (max-width: 800px) {
#hoofdmenu > li:hover ul {
    left: 8em;
    top: 0;
}
}


.submenu > ul {
    display: none;
}


.submenu > ul > li > a {
    background-color: midnightblue;
    border-left: 1px solid white;
    border-top: 1px solid white;
    color: white;
    display: block;
    font-size: 0.8em;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    padding: 0.5em 0 0.5em 1.6em;
    text-decoration: none;
    width: 25em;
}


@media screen and (max-width: 800px) {
.submenu > ul > li > a {
    background-color: darkblue;
    border-bottom: 1px solid slategrey;
    border-top: 0 none transparent;
    color: white;
    padding: 0.5em 1em 0.5em 0.5em;
    width: auto;
}
}


.submenu > ul > li > a:hover {
    background-color: #7092be;
    color: #FFFFCC;
}


@media screen and (max-width: 800px) {
.submenu > ul > li > a:hover {
    background-color: #7092BE;
    color: #FFFFCC;
}
}


#hoofdvak {
    float: left;
    width: 80%;
}


@media screen and (max-width: 800px) {
#hoofdvak {
    float: none;
    width: 100%;
}
}


#tekstvak {
    float: right;
    width: 75%;
}


@media screen and (max-width: 800px) {
#tekstvak {
    float: none;
    width: 100%;
}
}


#inhoudtekstvak {
    padding: 1.5em;
    min-height: 80vh;
}


#tekstvak {
    font-size: 0.95em;
    line-height: 1.3em;
    margin-bottom: 1em;
}


#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 {
    color: mediumvioletred;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 0 0.8em;
}


#tekstvak {
    color: midnightblue;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 0.25em;
    padding-top: 0.25em;
}


#extravak {
    width: 25%;
}


@media screen and (max-width: 800px) {
#extravak {
    border: none;
    margin: 0 auto 1em;
    width: 90%;
}
}


#inhoudextravak {
    padding: 1.5em;
    text-align: center;
}


#inhoudextravak {
    color: midnightblue;
    font-size: 1em;
    font-variant: small-caps;
    padding-bottom: 1em;
}


#inhoudextravak {
    font-size: 0.9em;
    margin-bottom: 1em;
}


#inhoudextravak {
    display: block;
    height: auto;
    max-width: 100%;
    padding: 0.8em 0;
}


@media screen and (max-width: 800px) {
#inhoudextravak {
    display: inline;
    max-width: 50%;
}
}


#socialmediavak {
    float: left;
    width: 20%;
}


@media screen and (max-width: 800px) {
#socialmediavak {
    background-color: #FFFFEF;
    float: none;
    width: 100%;
}
}


#inhoudsocialmediavak {
    padding: 1.5em;
    text-align: center;
}


#inhoudsocialmediavak {
    color: midnightblue;
    font-size: 1em;
    font-variant: small-caps;
    padding-bottom: 0.5em;
}


#balkbeneden {
    background-color: white;
    border-top: 3px solid midnightblue;
    clear: both;
    color: midnightblue;
    width: 100%;
}


@media screen and (max-width: 800px) {
#balkbeneden {
    margin: 0 auto;
    width: 95%;
}
}


#inhoudbalkbeneden {
	background-color: #FFFFCC;
    padding: 0.5em 0;
    text-align: center;
    width: 100%;
}


#inhoudbalkbeneden span {
    display: inline-block;
    font-size: 0.95em;
    padding: 0.5em 2em;
    white-space: nowrap;
}


@media screen and (max-width: 800px) {
#inhoudbalkbeneden span {
    padding: 0.25em 0.5em;
}
}


#inhoudbalkbeneden > span > a {
    color: darkblue; /* text kleur linkjes onderin balk */
    text-decoration: none;
}


#inhoudbalkbeneden a:hover {
    color: #0099CC; /* text kleur bij hover linkjes onderin balk */
    text-decoration: none;
	font-weight: bold;
}


.clearfix:before, .clearfix:after {
    clear: both;
    content: " ";
    display: table;
}


.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;
}


.socialmedia {
    border: 0 none;
    padding: 0.5em 0.3em;
}


.display {
float: right;
margin-top: -10em;
margin-right: 1em;
height: 175px; 
width: 175px;
Border: 0;
}


.nulive {
display: block;
margin-left: 0.1em;
height: 175px; 
width: 175px;
Border: 0;
}


.nowplay {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 1em;
height: 52px; 
width: 80%;
Border: 0;
}


.overzicht {
background-color: #66CCCC;
background-position: right;
margin-top: 1em;
margin-left: 1.5em;
text-align: left;
border: none;
}


.contacten {
	background-color: #FFFFEF;
	margin-left: 2em;
}


.audio {
width: 100%;
height: 330px;
border: none;
}


.playicoon {
width:75px; 
}	


.name {
margin-left: 1.5em;
}


.teams {
margin-left: 2em;
width: 40%;
}


.overzicht TD {
padding-left: 2em;
}


tabel {
width: 100%;	
}


.tijd {
background-color: #66CCFF;
color: black;
font-size: 0.8em;	
}


.aanvang {
background-color: #0099CC;
color: #ffffff;	
}


.vrij {
background-color: #33FF00;
}


.gereserveerd {
background-color: #FFCC00;
}


.bezet {
background-color: #ff0000;
color: ffffff;
}

HTML: 
<!DOCTYPE html>
<html lang="nl">
<head><meta charset="utf-8"><title>Titel voor de tab</title><meta name="keywords" content="keyword 1, keyword 2"><meta name="description" content="beschrijving"><link rel="stylesheet" href="overig/basis.css" type="text/css" media="screen"><meta name="viewport" content="initial-scale=1.0, width=device-width"><script src="overig/respond.min.js"></script><script src="overig/menuknop.js"></script><script src="https://mediacp.radiowebhost.nl:2020/dist/widgets.js" defer></script>
<script>  <!--  if (window.Event)     document.captureEvents(Event.MOUSEUP);    function nocontextmenu()    {   event.cancelBubble = true   event.returnValue = false;    return false;  }   function norightclick(e)   {   if (window.Event)    {    if (e.which == 2 || e.which == 3)     return false;   }   else    if (event.button == 2 || event.button == 3)    {     event.cancelBubble = true     event.returnValue = false;     return false;    }   }   document.oncontextmenu = nocontextmenu;   document.onmousedown = norightclick;   //-->   </script>	</head> <body>
<div id="websitevak">
<div id="balkboven"><iframe src="https://server13003.irserv4.com/djdisplay/" class="nulive"></iframe></div><!-- einde balkboven -->
<div id="menu"><a href="#" onclick=toggle(hoofdmenu); id="menuknop"><span id="menu-icoon"><span></span><span></span><span></span></span>Menu</a><ul id="hoofdmenu"><li><a href="index.php">Home</a></li>
<!--shows--><li><a href="javascript:void(0);" onclick="javascript:window.open('https://riraradio.inzetrooster.nl/diensten/openbaar', 'shows', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left='+(screen.width/2-480/2)+',top='+(screen.height/2-500/2)+'');">Shows</a></li>
<li class="submenu"><a onClick="return true">Kletsbox</a><ul><li><a href="https://www.riraradio.nl/chatbox.php" TARGET="blank">Via pc of laptop</a></li><li class="submenu"><a onClick="return true">Via mobiel (uitleg)<br><br><OL>1. Download androirc (via app store)<br>2. Klik op het + teken bovenaan en kies "anders"<br>3. irc.chattersnet.nl (server adres)<br>4. Typ nu: /j #riraradio<br>5. Gebruik de 3 puntjes rechts boven voor opties</LI></OL></a></li></ul>
<!--verzoekbox--><li><a href="javascript:void(0);" onclick="javascript:window.open('https://server13003.irserv4.com/request-it/','Verzoekbox','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left='+(screen.width/2-840/2)+',top='+(screen.height/2-600/2)+'');">Verzoekjes</a></li>
<!--teamleden--><li><a href="javascript:void(0);" onclick="javascript:window.open('djteam.php', 'contactformulier', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=480,height=500,left='+(screen.width/2-480/2)+',top='+(screen.height/2-300/2)+'');">Teamleden</a></li>
<!--gastenboek--><li><a href="javascript:void(0);" onclick="javascript:window.open('https://www.tboek.nl/gastenboek/riraradio','Gastenboek','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=850,height=800,left='+(screen.width/2-600/2)+',top='+(screen.height/2-800/2)+'');">Gastenboek</a></li>
<!--email--><li class="submenu"><a onClick="return true">Contact</a><ul><li><a href="javascript:void(0);" onclick="javascript:window.open('contact.php', 'contactformulier', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=480,height=500,left='+(screen.width/2-480/2)+',top='+(screen.height/2-300/2)+'');">Email</a></li>
<!--dj aanmeldingen--><li><a href="javascript:void(0);" onclick="javascript:window.open('contact.php', 'contactformulier', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=480,height=500,left='+(screen.width/2-480/2)+',top='+(screen.height/2-300/2)+'');">Dj aanmelding</a></li></ul></li></ul></div><!-- einde menu -->
<div id="middenstuk">
<div id="hoofdvak" class="clearfix">
<div id="tekstvak"><div id="inhoudtekstvak"><iframe class="audio" src="https://mediacp.radiowebhost.nl:2020/AudioPlayer/riraradio?"></iframe>
<br>
<h1>Zo dus jij wilt dj worden?</h1>
<p>RiRaRadio is altijd op zoek naar nieuwe dj tallent en je kan volgens onderstaande schema zien waar nog plek is om te zenden.</p><p>Neem voor vragen of aanmeldingen <a href="javascript:void(0);" onclick="javascript:window.open('contact.php', 'contactformulier', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=480,height=500,left='+(screen.width/2-480/2)+',top='+(screen.height/2-300/2)+'');">Contact</a> met ons op.</p> <br>
<TABLE class="tabel"><TR> <TH class="aanvang">Aanvang:</TH> <TH class="aanvang">Maandag</TH> <TH class="aanvang">Dinsdag</TH> <TH class="aanvang">Woensdag</TH> <TH class="aanvang">Donderdag</TH> <TH class="aanvang">Vrijdag</TH> <TH class="aanvang">Zaterdag</TH> <TH class="aanvang">Zondag</TH></TR>
<TR><TD class="tijd">00:00 - 01:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">01:00 - 02:00</TD><!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD> </TR> <TR><TD class="tijd">02:00 - 03:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">03:00 - 04:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">04:00 - 05:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">05:00 - 06:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">06:00 - 07:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">07:00 - 08:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">08:00 - 09:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">09:00 - 10:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">10:00 - 11:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">11:00 - 12:00</TD><!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">12:00 - 13:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">13:00 - 14:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">14:00 - 15:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">15:00 - 16:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="vrij">Vrij</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">16:00 - 17:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="bezet">Bezet</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">17:00 - 18:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="bezet">Bezet</TD><!-- vr --><TD class="bezet">Bezet</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">18:00 - 19:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="bezet">Bezet</TD><!-- vr --><TD class="bezet">Bezet</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">19:00 - 20:00</TD> <!-- ma --><TD class="vrij">Vrij</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="bezet">Bezet</TD><!-- vr --><TD class="bezet">Bezet</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">20:00 - 21:00</TD> <!-- ma --><TD class="gereserveerd">Gereserveerd</TD><!-- di --><TD class="vrij">Vrij</TD> <!-- wo --><TD class="gereserveerd">Gereserveerd</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="gereserveerd">Gereserveerd</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">21:00 - 22:00</TD> <!-- ma --><TD class="gereserveerd">Gereserveerd</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="gereserveerd">Gereserveerd</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="gereserveerd">Gereserveerd</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">22:00 - 23:00</TD> <!-- ma --><TD class="gereserveerd">Gereserveerd</TD><!-- di --><TD class="vrij">Vrij</TD><!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="gereserveerd">Gereserveerd</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR>
<TR><TD class="tijd">23:00 - 00:00</TD> <!-- ma --><TD class="gereserveerd">Gereserveerd</TD><!-- di --><TD class="vrij">Vrij</TD> <!-- wo --><TD class="vrij">Vrij</TD><!-- do --><TD class="vrij">Vrij</TD><!-- vr --><TD class="gereserveerd">Gereserveerd</TD><!-- za --><TD class="vrij">Vrij</TD><!-- zo --><TD class="vrij">Vrij</TD></TR></TABLE>
<p>Dit overzicht is het laatst aangepast op: 22 - 03 - 2022</p>
</div><!-- einde inhoudtekstvak --></div><!-- einde tekstvak -->
<div id="extravak">
<div id="inhoudextravak">
<iframe src="https://tunein.com/embed/player/s282366" style="width:100%; height:100px;" scrolling="no" frameborder="no"></iframe>
<h2>Laatst afgespeelt:</h2>
<div class="overzicht" data-widget="mcp-recently-played" data-name="riraradio" data-limit="5"></div>
<br>
<!-- einde inhoudextravak --></div>
</div><!-- einde extravak -->
</div><!-- einde hoofdvak -->
<div id="socialmediavak"><div id="inhoudsocialmediavak">
<h2>Stream status:<span data-widget="mcp-stream-status" data-name="riraradio" data-online-text="Online" data-offline-text="Offline"></span></h2>
<br>
<a href="https://mediacp.radiowebhost.nl:2020/tunein/riraradio/stream/pls"><img src="https://mediacp.radiowebhost.nl:2020/system/theme/Material/images/vlc.gif" alt="vlc" /></a><a href="https://mediacp.radiowebhost.nl:2020/tunein/riraradio/stream/asx"><img src="https://mediacp.radiowebhost.nl:2020/system/theme/Material/images/mplayer.gif" alt="media player" /></a><a href="https://mediacp.radiowebhost.nl:2020/tunein/riraradio/stream/pls"><img src="https://mediacp.radiowebhost.nl:2020/system/theme/Material/images/winamp.gif" alt="winamp" /></a><a href="http://mediacp.radiowebhost.nl:9009/listen.m3u"><img class="playicoon" src="https://mediacp.radiowebhost.nl:2020/system/theme/Material/images/iphone.gif" alt="iphone" /></a><br><br><span data-widget="mcp-custom-text" data-name="riraradio" data-format="%nowplaying%"></span><p><a href="https://www.facebook.com/groups/riraradio" TARGET="_blank"><img alt="facebook" src="afbeeldingen/facebook.png" class="socialmedia"></a></p></div><!-- einde inhoudsocialmediavak --></div><!-- einde socialmediavak -->

</div><!-- einde middenstuk -->
<div id="balkbeneden">
<div id="inhoudbalkbeneden">
<!-- Begin JouwStats code--><script src="https://www.jouwstats.nl/count.js"></script><script>//<![CDATA[count(240822);//]]></script><!-- Einde JouwStats code-->
&copy; <script>now = new DatetheYear=now.getFullYear()document.write(theYear)</script> RiRaRadio<span>Buma/Stemra & Sena: Chavirius</span><span><a href="https://www.radiowebhost.nl">Radiowebhost</a></span><span><a href="djlogin/djlogin.php">Dj login</a></span><!-- einde inhoudbalkbeneden --></div>
</div><!-- einde balkbeneden -->
</div><!-- einde websitevak -->
</body>
</html>
 
riraradio zei:
tnx, het is idd een begin moet ik nou in css ook extra waardes toevoegen, want dit is enkel een html versie....:confused:
Klik om te vergroten...
Ik zie ook CSS hoor? Ik zou de in-line CSS in de HTML dan wel verhuizen naar een CSS-stylesheet.
 
Ik heb alleen naar de tabel gekeken, de rest is wel heel erg veel code :o

In de html horen <thead> en <tbody> erbij, sommige browsers doen dit zelf en andere weer niet.
Code: 
<table class="tabel">
  <thead>
    <tr>
      <th>......</th> <!-- th rij in de thead -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>......</td> <!-- alle td rijen in tbody -->
    </tr>
  </tbody>
</table>

Als je de dingen van elkaar gescheiden houdt dan wordt alles overzichtelijk, ook als je later iets wilt wijzigen.
Hieronder eerst het algemene gedeelte voor alle tabellen, dan een stukje voor mobile, dan een stukje voor grotere schermen, en als laatste de vormgeving voor class="tabel".

Zet dit onderaan in plaats van jouw css die over de tabel gaat.
Code: 
/* table cross browser */

table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-spacing: 0;
    border-collapse: collapse;
}
table * {
    box-sizing: border-box;
}
th, td {
    vertical-align: top;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    hyphens: auto;
}
th {
    font-weight: bold;
}

/* small view */

@media (max-width: 767.98px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    th, td {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* medium & large view */

@media (min-width: 768px) {
    th, td {
        /* breek te lange woorden */
        word-break: break-all;
    }
}

/* vormgeving class="tabel" */

.tabel th, .tabel td {
    text-align: center;
    vertical-align: middle;
}
.tabel th {
    width: calc(100% / 8);
}
.tabel th.aanvang {
    background-color: #0099cc;
    color: #ffffff;
}
.tabel td {
    border: 1px solid #9f9;
}
.tabel .tijd {
    background-color: #66ccff;
    color: black;
    text-align: left;
}
.tabel .vrij {
    background-color: #33ff00;
}
.tabel .gereserveerd {
    background-color: #ffcc00;
}
.tabel .bezet {
    background-color: #ff0000;
    color: ffffff;
}

Je kan het lange woord "Gereserveerd" (te lang) vervangen door "In optie"
 
Laatst bewerkt:
bron zei:
Ik heb alleen naar de tabel gekeken, de rest is wel heel erg veel code :o
Klik om te vergroten...
Ja ik heb er aardig wat in gestopt he, maar moet ook bekenen ik op zich te vreden ben met het resultaat, het hoeft niet professioneel te worden.

bron zei:
Je kan het lange woord "Gereserveerd" (te lang) vervangen door "In optie"
Klik om te vergroten...
Ja of afkorten, of kleinere letter typen.

Aar jij ook bedankt ik heb er eens nagekeken en idd dat werkt, maar gezien ik dan compleet opnieuw alles erin moet zetten, kom ik er achter ik al snel op t zelfde probleem stuit.
Nu is deze van Bron wel mooi even breed, en ik zie in de css er een class voor tabel is genoemd. (.tabel)
Ik dacht dit echter zonder . (punt) moest + een element uit de tabel.
b.v. : tabel TD .vrij zou ik hiermee verwachten ik alles wat daar staat kan aanpassen met waardes als width ik opgaf, maar vergiste me in de opmaak.

Gelukkig werkt het nu wel goed, enige ik dan mee zit is hij op mobiel behoorlijk rechts uit beeld loopt... ik moet dan gaan scrollen naar rechts (moet men net maar weten)
Zou dit heel me pagina in een div moeten?

Alvast bedankt toppers!
 
Het is een zoekplaatje in de css. Ik heb alles van <div id="tekstva"> bij elkaar gezet, dan kan je alle "dubbels" en tegenstrijdigheden zien.
Alles tussen /* ... */ kan er dan uit.
Code: 
#tekstvak {
    float: right;
    width: 75%;
    /* margin-bottom: 1em; */
    /* margin: 0 0 0.8em; */
    /* margin-bottom: 0.25em; */
    margin: 0 0 0.25em;
    padding-top: 0.25em;
    /* font-size: 0.95em; */
    /* font-size: 1.3em; */
    font-size: 1em;
    line-height: 1.3em;
    /* font-weight: bold; */
    font-weight: bold;
    /* color: mediumvioletred; */
    color: midnightblue;
}
@media screen and (max-width: 800px) {
    #tekstvak {
        float: none;
        /* width: 100%; */
        width: 90%;
        margin: 0 auto 1em;
        border: none;
    }
}
 
Gelukkig werkt het nu wel goed, enige ik dan mee zit is hij op mobiel behoorlijk rechts uit beeld loopt
Klik om te vergroten...
Een brede tabel, ook een brede responsive tabel, loopt niet uit beeld. Je ziet slechts een deel van de tabel. Op een mobiel kan je van rechts naar links vegen :D
2 oplossingen:

Lettergrootte 2px dus onleesbaar

Alle cellen in beeld, dan zie je dit
Code: 
  g
  e
  r
  e
v s v
r e r
i r i
j v j
  e
  e
  r
  d
 
Laatst bewerkt:
Aha bron handig!

Dus css 3 zorgt ervoor dit de nieuwe manier van schrijven is, ik zie de verschillen idd en het eigenlijk het zelfde blijft doen.
Nu zal ik op meer plaatsen zo de codes is kunnen aanpassen, dat wordt veel minder schrijfwerk.....

En ja 2 px.... doen maar niet, wel zie ik je nog kan spelen met de waardes en gereserveerd afgekort werkt al top!

Super goed op weg geholpen tnx ervoor. :thumb: (Aar jij ook tnx & volgers)
 
Graag gedaan. Suc6 met je website :thumb:

Dus css 3 zorgt ervoor dit de nieuwe manier van schrijven is
Klik om te vergroten...
Responsive design
Belangrijkste tip: voor de indeling gebruik je in de breedte de % , niet de px of em.
Gebruik @media voor aanpassingen bij bredere of smallere browse vensters.
Probeer in de breedte geen marge te gebruiken, padding heeft de voorkeur.

css3 style
Dit heeft niets met responsive design te maken, css3 heeft gewoon meer mogelijkheden dan het oude css2.
Een voorbeeld van css3 in mijn code hierboven is width: calc(100% / 8)
calc berekent de kolombreedte door 100% van de tabelbreedte te delen door 8 (er zijn 8 kolommen).
Ik had ook een kolombreedte width: 12.5% kunnen opgeven, dat is hetzelfde :)
 
Laatst bewerkt:
Niet alle apparaten (zoals mobiel) kennen lettertype "Trebuchet MS". Daarom kan je beter een lettertype laden dat hier goed op lijkt zodat de letter van je website in Windows, Mac, Android en iOS (iPhone/iPad) er hetzelfde uitziet. Bijvoorbeeld lettertype "Fira Sans" is goed vergelijkbaar. Voorbeeld hier.

Zet dit in de <head> van de html om "Fira Sans" te laden
Code: 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

Verwijder dit uit je css
Code: 
body {
  background-color: midnightblue;
  color: darkslategrey;
  font-family: "trebuchet ms",helvetica,sans-serif;
  font-size: 1em;
}

Zet daarna dit bovenaan in de css (ik heb er wat info bijgezet)
Code: 
:root {
  --font-family-sans-serif: "Fira Sans", "Trebuchet MS", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
html {
  /* tekst grootte is 100% van lettertype op het apparaat */
  -webkit-text-size-adjust: 100%;
}
body {
  /* fix witte rand weghalen */
  margin: 0;
  /* als Fira Sans niet kan worden geladen dan wordt de volgende gebruikt als die er is */
  font-family: "Fira Sans", "Trebuchet MS", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* rem gebruikt lettergrootte van apparaat als referentie */
  font-size: 1rem;
  /* 400 is normale dikte */
  font-weight: 400;
  /* regelhoogte kan je hieronder zelf aanpassen */
  line-height: 1.5;
  background-color: midnightblue;
  color: darkslategrey;
}

Hetzelfde voor lettertype "Segoe Print" die alleen in Windows zit, kan je beter weghalen zodat het op mobiel hetzelfde uitziet als in Windows.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan