<![CDATA[dreamworker.de - Statisches X/HTML & CSS]]> http://dreamworker.de/ Fragen und Diskussionen über X/HTML, XML, CSS, Layoutprobleme, Browserkompatiblität, Optimierung, etc. de Wed, 19 Jun 2013 10:22:18 GMT vBulletin 60 http://dreamworker.de/images/misc/rss.png <![CDATA[dreamworker.de - Statisches X/HTML & CSS]]> http://dreamworker.de/ Ausblenden einer Spalte (einer Tabelle) auf Mobile Geräte mittels CSS? http://dreamworker.de/showthread.php?31743-Ausblenden-einer-Spalte-(einer-Tabelle)-auf-Mobile-Geräte-mittels-CSS&goto=newpost Sat, 15 Jun 2013 17:26:25 GMT
Hallo Zusammen

Ich habe eine Tabelle (wird über PHP und DB erstellt), wo ich einer Spalte eine Klasse angebe. Mittels CSS möchte ich machen, wenn ich mit einem Mobilen Gerät die Seite anschaue, dass es mir "nur" das Bild mit dem Link (erste Spalte der Tabelle) anzeigt. Geht das überhaupt, wenn ja, wie müsste ich dies machen?

Ausschnitt meiner HTML:

HTML Code:
<table id="feature-table">
<tr>
<td><a href="http://www.discoverydivers.com/" target="_blank"><img src="images/divecenters/dc_logo.jpg" alt="Discovery Dive Centre"></a></td>
<td class="info">Discovery Divers - Discover a new world. PADI Scuba Diving Trips and Scuba Dive Courses in Koh Samui, Thailand!</td>
</tr>
</table>
HTML-Code:

HTML Code:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta name="robots" content="INDEX,FOLLOW"/>
  <meta name="keywords" content=""/>
  <meta name="description" content=""/>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  <!-- html5 + CSS 3 Template created by miss monorom  http://intensivstation.ch 2013 -->
  <link rel="stylesheet" href="style.css" type="text/css" />
  <!-- by monorom -->

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="mein_menu.js" type="text/javascript"></script>
  <script src="prefixfree.min.js" type="text/javascript"></script>
 
   
</head>

<body>
<div id="container">
  <div id="top">
    <header>
      <header>
      <div class="menubutton"><a href="#"><img src="images/menu.png" alt="Menu"></a></div>
      <a href="http://www.samuidiving.travel" class="maxi"><img src="images/logo_small.png" alt="samuidiving.travel" /></a><a href="http://www.samuidiving.travel" class="mini"><img src="images/logo_mini.png" alt="samuidiving.travel" /></a>
    </header>

    <nav id="mainnav">
      <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="http://blog.samuidiving.travel" target="_blank">Blog</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><a href="gallery.php">Gallery</a></li>
      </ul>
    </nav>
  </div><!-- end top -->

  <section id="content">
    <article>
      <header>
        <h1>Dive Centers on Koh Samui</h1>
      </header>
  <table id="feature-table">
<tr>
<td><a href="http://www.discoverydivers.com/" target="_blank"><img src="images/divecenters/dc_logo.jpg" alt="Discovery Dive Centre"></a></td>
<td class="info">Discovery Divers - Discover a new world. PADI Scuba Diving Trips and Scuba Dive Courses in Koh Samui, Thailand!</td>
</tr>
<tr>
<td><a href="http://www.easydivers-samui.net/" target="_blank"><img src="images/divecenters/easy_logo.jpg" alt="Easy Divers Koh Samui"></a></td>
<td class="info">Time to get Certified! with
Easy Divers Koh Samui.
PADI Diving Courses & Daytrips. </td>
</tr>
<tr>
<td><a href="http://www.silentdivers.com" target="_blank"><img src="images/divecenters/sd_logo.jpg" alt="Silent Divers"></a></td>
<td class="info">Diving Koh Samui in Amazing Thailand
with Silent Divers!
PADI courses and daytrips!</td>
</tr>
<tr>
<td><a href="http://www.thediveacademysamui.com/" target="_blank"><img src="images/divecenters/da_logo.jpg" alt="The Dive Academy"></a></td>
<td class="info">The Dive Academy is an English owned and managed PADI 5 Star Dive Centre offering a full range of PADI Scuba Diving Courses.</td>
</tr>
</table>
    </article>
   
  </section>

  <aside>
    <div class="r24searchbox">
<div class="head">Find Hotel</div><br>

<div style="padding:5px; width:180px">
<form name="findhotelform" id="findhotelform" method="post" style="margin:0;" action="search.php?p=turtlesdive.com&amp;cur=THB" onSubmit="return checkdates(this)">
<span class="fieldname">Destinations :</span><br>
<select id="destination" name="pv" style="width:190px">
<option value="">- select city or region -</option>
<optgroup label="Popular regions" style="background-color:#DDFFFF">
<option value="73" style="background-color:#DDFFFF">Phuket</option>
<option value="64" style="background-color:#DDFFFF">Krabi</option>
<option value="63a" style="background-color:#DDFFFF">Koh Samui</option>
<option value="14a" style="background-color:#DDFFFF">Pattaya</option>
<option value="59a" style="background-color:#DDFFFF">Hua Hin</option>
</optgroup>
<optgroup label="Metropolitan area" style="background-color: #FFDDFF">
<option value="01"  > Bangkok </option>
</optgroup>
<optgroup label="Central regions" style="background-color: #FFFFDD">
<option value="08"  style="color:#c0c0c0;" > Angthong </option>
<option value="10"  > Ayutthaya </option>
<option value="58a"  > Cha Am </option>
<option value="13"  style="color:#c0c0c0;" > Chachoengsao </option>
<option value="54"  style="color:#c0c0c0;" > Chainat </option>
<option value="16"  > Chantaburi </option>
<option value="14"  > Chonburi </option>
<option value="59a"  > Hua Hin </option>
<option value="55"  > Kanchanaburi </option>
<option value="17a"  > Koh Chang </option>
<option value="19"  > Lopburi </option>
<option value="12"  > Nakhon Nayok </option>
<option value="06"  > Nakhon Pathom </option>
<option value="03"  > Nonthaburi </option>
<option value="09"  > Pathumthani </option>
<option value="14a"  > Pattaya </option>
<option value="58"  > Phetchaburi </option>
<option value="18"  > Prachinburi </option>
<option value="59"  > Prachuap Khiri Khan </option>
<option value="59b"  > Pranburi </option>
<option value="57"  > Ratchaburi </option>
<option value="15"  > Rayong,Koh Samet </option>
<option value="18a"  > Sa Kaeo </option>
<option value="02"  > Samut Prakan </option>
<option value="04"  style="color:#c0c0c0;" > Samut Sakhon </option>
<option value="05"  > Samut Songkhram </option>
<option value="11"  > Saraburi </option>
<option value="07"  style="color:#c0c0c0;" > Singburi </option>
<option value="56"  > Suphanburi </option>
<option value="17"  > Trat </option>
</optgroup>
<optgroup label="North of Thailand" style="background-color: #DDFFDD">
<option value="44"  > Chiang Mai </option>
<option value="42"  > Chiang Rai </option>
<option value="49"  > Kamphaeng Phet </option>
<option value="43"  > Lampang </option>
<option value="46"  > Lamphun </option>
<option value="45"  > Mae Hong Son </option>
<option value="51"  > Nakhon Sawan </option>
<option value="39"  > Nan </option>
<option value="52"  > Petchabun </option>
<option value="41"  > Phayao </option>
<option value="50"  style="color:#c0c0c0;" > Phichit </option>
<option value="37"  > Phitsanulok </option>
<option value="40"  > Phrae </option>
<option value="48"  > Sukhothai </option>
<option value="47"  > Tak </option>
<option value="53"  > Uthai Thani </option>
<option value="38"  > Uttaradit </option>
</optgroup>
<optgroup label="North-East (Isan)" style="background-color: #FFDDDD">
<option value="24a"  style="color:#c0c0c0;" > Amnat Charoen </option>
<option value="34a"  style="color:#c0c0c0;" > Bung Kan </option>
<option value="21"  > Buriram </option>
<option value="29"  style="color:#c0c0c0;" > Chaiyaphum </option>
<option value="31"  > Kalasin </option>
<option value="28"  > Khonkaen </option>
<option value="36"  > Loei </option>
<option value="27"  style="color:#c0c0c0;" > Mahasarakham </option>
<option value="32"  > Mukdahan </option>
<option value="30"  > Nakhon Phanom </option>
<option value="20"  > Nakhon Ratchasima </option>
<option value="35a"  style="color:#c0c0c0;" > Nong Bua Lamphu </option>
<option value="34"  > Nongkhai </option>
<option value="26"  > Roi Et </option>
<option value="33"  style="color:#c0c0c0;" > Sakhon Nakhon </option>
<option value="23"  style="color:#c0c0c0;" > Sisaket </option>
<option value="22"  > Surin </option>
<option value="24"  > Ubon Ratchathani </option>
<option value="35"  > Udonthani </option>
<option value="25"  > Yasothon </option>
</optgroup>
<optgroup label="South of Thailand" style="background-color: #DDFFFF">
<option value="60"  > Chumphon </option>
<option value="69a"  > Hadyai </option>
<option value="62a"  > Khao Lak </option>
<option value="64b"  > Koh Lanta </option>
<option value="63b"  > Koh Phangan </option>
<option value="64a"  > Koh Phi Phi </option>
<option value="63a"  > Koh Samui </option>
<option value="63c"  > Koh Tao </option>
<option value="62b"  > Koh Yao </option>
<option value="64"  > Krabi </option>
<option value="65"  > Nakhon Si Thammarat </option>
<option value="72"  > Narathiwat </option>
<option value="70"  style="color:#c0c0c0;" > Pattani </option>
<option value="62"  > Phang Nga </option>
<option value="67"  style="color:#c0c0c0;" > Phatthalung </option>
<option value="73"  > Phuket </option>
<option value="61"  > Ranong </option>
<option value="68"  > Satun </option>
<option value="69"  > Songkhla </option>
<option value="63"  > Suratthani </option>
<option value="66"  > Trang </option>
<option value="71"  style="color:#c0c0c0;" > Yala </option>
</optgroup>
 
</select>


<div class="fieldname">Search by hotel / location :</div>
<input id="searchname" name="loc" type="text" style="width:175px">


<div class="fieldname">Check-in Date</div>
<select name="date11" id="date11" size="1" style="width:50px">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" selected>16</option>
<option value="17" >17</option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
<option value="28" >28</option>
<option value="29" >29</option>
<option value="30" >30</option>
<option value="31" >31</option>
                               
</select> <select name="date12" id="date12" size="1" style="width:100px">
<option value="2013,6" selected>Jun. 2013</option>
<option value="2013,7" >Jul. 2013</option>
<option value="2013,8" >Aug. 2013</option>
<option value="2013,9" >Sep. 2013</option>
<option value="2013,10" >Oct. 2013</option>
<option value="2013,11" >Nov. 2013</option>
<option value="2013,12" >Dec. 2013</option>
<option value="2014,1" disabled>=========</option>
<option value="2014,1" >Jan. 2014</option>
<option value="2014,2" >Feb. 2014</option>
<option value="2014,3" >Mar. 2014</option>
<option value="2014,4" >Apr. 2014</option>
<option value="2014,5" >May 2014</option>
                               
</select>

<div class="fieldname">Check-out Date</div>
<select name="date21" id="date21" size="1" style="width:50px">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" >16</option>
<option value="17" selected>17</option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
<option value="28" >28</option>
<option value="29" >29</option>
<option value="30" >30</option>
<option value="31" >31</option>
               
</select> <select name="date22" id="date22" size="1" style="width:100px">
<option value="2013,6" selected>Jun. 2013</option>
<option value="2013,7" >Jul. 2013</option>
<option value="2013,8" >Aug. 2013</option>
<option value="2013,9" >Sep. 2013</option>
<option value="2013,10" >Oct. 2013</option>
<option value="2013,11" >Nov. 2013</option>
<option value="2013,12" >Dec. 2013</option>
<option value="2014,1" disabled>=========</option>
<option value="2014,1" >Jan. 2014</option>
<option value="2014,2" >Feb. 2014</option>
<option value="2014,3" >Mar. 2014</option>
<option value="2014,4" >Apr. 2014</option>
<option value="2014,5" >May 2014</option>
</select><br>


<div style="float:left;">
<div class="fieldname">Stay : <span id="dayid"></span></div>
<input name="days" id="days" type="text" style="width:30px" value="1"> nights
</div>


<div style="float:right">
<div class="fieldname">adult / child :</div>
<input name="person" id="person" type="text" style="width:30px" value="2">
<input name="person2" id="person2" type="text" style="width:30px" value="0">
</div>


<div style="clear:both"></div>
<div class="searchbutton">
<input id="searchhotel" name="checkav" type="Submit" value="Search" title="Search Hotel">
<input id="period" name="stay" type="hidden" value="">
</div>

</form>
</div>

</div>


<script type="text/javascript">
// period set to &stay=2011-02-22/2011-02-26
function checkdates(f) {
var jsCal = new Object();
jsCal.startDate = [0,0,0,null];
jsCal.endDate = [0,0,0,null];
var d = new Date();
var pp;
var d = f.date11.selectedIndex; jsCal.startDate[0] = +f.date11.options[d].value;
d = f.date12.selectedIndex; pp = f.date12.options[d].value.split(',');
jsCal.startDate[1] = +pp[1];
jsCal.startDate[2] = +pp[0];
d = f.date21.selectedIndex; jsCal.endDate[0] = +f.date21.options[d].value;
d = f.date22.selectedIndex; pp = f.date22.options[d].value.split(',');
jsCal.endDate[1] = +pp[1];
jsCal.endDate[2] = +pp[0];
var d1= new Date(jsCal.startDate[2], jsCal.startDate[1]-1, jsCal.startDate[0], 23, 00, 00);
var d2= new Date(jsCal.endDate[2], jsCal.endDate[1]-1, jsCal.endDate[0], 23, 00, 00);
var d0= new Date();

if ((d1.getMonth()+1 != jsCal.startDate[1])||(d1.getDate()!= jsCal.startDate[0])||(d1.getFullYear() != jsCal.startDate[2])) d = -1;
else if ((d2.getMonth()+1 != jsCal.endDate[1])||(d2.getDate()!= jsCal.endDate[0])||(d2.getFullYear() != jsCal.endDate[2])) d = -1;
else d = (d2 - d1) / 86400000;

var sd = 0;
if (d1 > d2) sd = 1;
if (d1 < d0) d = -1;
var p = document.getElementById('dayid');
if (d> 1) p.innerHTML = "<span style=\"color:#F60\">[" + d + " nights]</span>";
if (d==1) p.innerHTML = "<span style=\"color:#F60\">[" + d + " night.]</span>";
if (d< 0 && sd==0) p.innerHTML = "<span style=\"color:#F60\">[error date]</span>";
if (d1 < d0) p.innerHTML = "<span style=\"color:#F60\">[error date]</span>";
if (d<1 && sd==1) p.innerHTML = "<span style=\"color:#F60\">[error date]</span>"; // CHECK
var p = document.getElementById('days');
if (d>0 || d==0) { p.value = d; checkDate = true; }
else { checkDate = false; }
return checkDate;
}

</script>
</aside>

</div><!-- end container -->

<footer class="footer">
  <div class="inner">

    <div class="footer-segment">
      <h3>Diving - The Koh Samui Archipelago</h3>
      <ul>
        <li><a href="linksks.php" title="Dive Centers on Koh Samui">Dive Centers on Koh Samui</a></li>
        <li><a href="linkskt.php" title="Dive Centers on Koh Tao">Dive Centers on Koh Tao</a></li>
        <li><a href="linkspa.php" title="Dive Centers on Koh Phangan">Dive Centers on Koh Phangan</a></li>
      </ul>
    </div>

    <div class="footer-segment">
      <h3>Tours and Snorkeling</h3>
      <ul>
        <li><a href="http://www.samuispeedboat.com/" title="Petcherat Marina" target="_blank">Petcherat Marina</a></li>
        <li><a href="http://www.euroasia-tours.com/" title="Euro Asia Tours" target="_blank">Euro Asia Tours</a></li>
      </ul>
    </div>

    <div class="footer-segment">
      <h3>Divepartners (Equipment and more)</h3>
      <ul>
              <li><a href="http://www.samuidivesupply.com/" title="Samui Dive Supply" target="_blank">Samui Dive Supply</a></li>
        <li><a href="http://www.aquamaster.net/" title="Aqualung - Aquamaster" target="_blank">Aqualung - Aquamaster</a></li>
        <li><a href="http://www.easywatersports.com/" title="Easy Watersports" target="_blank">Easy Watersports</a></li>
      </ul>
    </div>

  </div><!-- end inner -->
</footer>

</body>
</html>
CSS-Datei:

HTML Code:
/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */
/* html5 + CSS 3 Template created by miss monorom  http://intensivstation.ch 2013 */

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: padding-box;
  box-sizing: border-box;
}
/* render html5 elements as block
  rendert html5 elemente als block  */
header, footer, section, aside, nav, article { display: block;}

body {
  font-size: 1em;
  font-family: Arial, SunSans-Regular, Sans-Serif;
  color:#333;
  background: #fff url(images/back3.jpg) no-repeat  center center fixed;
  background-size: cover;
}

pre, code {
  font-size: 1.3em;
}

a {color: #999;}
a:visited {color:#999;}
a:hover {color: #f67;}
a:active { color:#000000;}

h1, h2 {
  font-size:1.8em;
  font-weight: normal;
  margin: 0 0 10px;
}
h3 {
  font-size:1.38em;
  font-weight: normal;
  margin: 0 0 10px;
}

img.download {vertical-align:middle;}
img{border:none;}

ul{
  list-style-type:none;
}

/* ----------container zentriert das layout-------------- */
#container, footer .inner {
  max-width: 1200px;
  min-width:320px;
  margin:0  auto;
}


/* ----------header for logo-------------- */
#top:after{
  height: 0;
  content: ".";
  display: block;
  clear: both;
  visibility:hidden;
}

#top header{
  padding:20px;
  float:left;
  width:50%;
}

header p{
  text-transform:uppercase;
  font-size:0.8434em;
}
header img{
  border:0;
  padding: 0 0 10px;
} 
.mini, .menubutton{
  display:none;
}

.menubutton a {
  cursor:pointer;
}
 
/* new nav ----------- */
nav{
  padding:0 20px 0 0;
  float:right;
  width:50%;
}
nav ul:after {
  height: 0;
  content: ".";
  display: block;
  clear: both;
  visibility:hidden;
}
nav ul {
  list-style-type: none;
  float:right;
} 
nav li {
  float: left;
  margin: 0 3px 0 0;
}
nav a, nav a:visited {
  background-color: #999999;
  color: #FFFFFF;
  display: block;
  padding: 5px 20px;
  text-decoration: none;
  transition: all 0.5s linear 0s;
  border-radius: 0 0 10px 10px;

  -moz-transition:all 0.5s linear;   
  -webkit-transition:all 0.5s linear; 
  box-shadow: 0 1px 3px rgba(255,255,255,0.3) ;
}
nav a:hover {
  color:#564b47;
  background-color: rgba(255,255,255,0.7) ;
  padding:80px 20px 0;
}
nav a:active { color:#000000;}
nav a.selected {
  color:#fff;
  background-color: rgba(255,102,119,0.7) ;
  padding:80px 20px 0;
}

/* ----------------- content--------------------- */
section:before {
  height: 0;
  content: ".";
  display: block;
  clear: both;
  visibility:hidden;
}

section#content {
  float: left;
  width: 74%;
  padding: 20px;
  background-color: #fff;
  min-height:100%;
  box-shadow: 1px 1px 3px #aaa;
  margin: 0 0 20px;
  border-radius:20px;
}
p, pre{
  padding:  0 0 20px;
  line-height:1.5em;
}
ul{
  list-style-type:none;
  line-height:1.5em;
}

#feature-table { width: 100%; margin: 0 auto;}
#feature-table td,
#feature-table th { width: 350px; padding: 8px 5px; text-align: center; border-left: 1px solid white; border-right: 1px solid white; }

.dc {
        width:500;
        border:0;
        cellspacing:30;
        cellpadding:10;
}

.dct {
        width:350;
        border:0;
        cellspacing:30;
        cellpadding:10;
}

.dct1 {
        width:200;
        border:0;
        cellspacing:30;
        cellpadding:10;
}

article header{
  background:#fff;
  padding:0;
  }
 
article footer{
  border-bottom: 1px solid #564B47;
  color:#564B47;
  padding:0 0 20px;
  margin:0 0 20px;
}

.r24hotellist1 {width:100%; margin:0 auto; font-family: "lucida sans", arial, sans-serif;}
.r24hotellist1 .hotellisting {height:350px; border:1px #C0C0C0 solid; overflow:scroll;} /* change to hidden to remove scrollbars */
.r24hotellist1 .hotelimg {border:1px #C0C0C0 solid; padding:3px; margin-right:10px; float:left;}
.r24hotellist1 ul {margin:0; padding:0; }
.r24hotellist1 li {list-style:none; margin:0 10px; padding:10px 0; width:360px; float:left; border-bottom:1px #C0C0C0 dotted;}
.r24hotellist1 .hotelname, .template1 .r24hotellist1 .hotelname:visited {color:blue; font-weight:bold; text-decoration:none; font-size:11px;}
.r24hotellist1 .hotelname:hover {color:red; text-decoration:underline;}
.r24hotellist1 a.linkdetail, .template1 .r24hotellist1 a.recommend {color:white; font-weight:bold; padding:3px 5px; text-decoration:none; font-size:11px;}
.r24hotellist1 a.linkdetail {background-color:#0099FF;}
.r24hotellist1 a.linkdetail:hover {background-color:gray;}
.r24hotellist1 .recommend {color:red; font-style:italic; font-size:13px;}

/* -------------- side infos ------------- */

aside {
  padding:5px;
  float:right;
  width: 25%;
  background:  rgba(255,255,255,0.8) ;
  border-radius:20px;
}

.r24searchbox {width:200px; height:320px; line-height:16px; margin:auto; padding:8px; font-family: Arial, SunSans-Regular, Sans-Serif; font-size:0.8em;}
.r24searchbox select {border:1px solid #CCC; font-size:11px;}
.r24searchbox .fieldname {color:#0066CC; padding-top:5px; font-weight:bold;}
.r24searchbox .head {color:black; font-size:2em; font-weight:bold; text-align:center;}
.r24searchbox .searchbutton {margin-top:5px; text-align:center;}

/* -----------footer---------------------- */
footer.footer {
  padding: 20px;
  clear:both;
  background-color:rgba(203,204,198,0.6) ;
}

footer a, footer a:visited {
  color: #000; text-decoration:none;
}

.footer-segment {
  display: inline-block;
  vertical-align: top;
  width: 33%;
}
.inner{ padding:20px;}




/* -------------------- Media Queries -------------------- */

@media only screen and (max-width: 860px) {
 #top header, nav {
    float:none;
    width:100%;
  }
  nav {
    padding:0;
  }
  nav ul {
    float:none;
  }
  nav li {
    float: left;
    margin: 0;
    width:25%;
  }
  nav a:hover, nav a.selected  {
    padding: 5px 20px;
  }
  nav a, nav a:visited, section#content, aside {
    border-radius: 0;
  }
 
  .inner{ padding:0; }

}


@media only screen and (max-width: 768px) {

  section#content {
    float: none;
    width: 100%;
    padding: 20px;
    margin: 0;
  }

  aside {
    padding:5px;
    float: none;
    width: 100%;
  }

  .footer-segment {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    padding: 0 0 20px;
  }
  .footer-segment:last-child {
    border-top:1px solid #999;
    display: block;
    width: 100%;
    padding:20px 0 0 ;
  }

}



@media only screen and (max-width: 480px) {
  body { background: #fff url(images/back3_mini.jpg) no-repeat  center center fixed; }

  nav li {
    float: none;
    margin: 0;
    width:100%;
    display:block;
  }
  nav a {
    font-size:1.2em;
    position:relative;
  }   
  nav a:not(.selected):after {
    content:'»';
    position:absolute;
    right:10px;
  }
 
  .menubutton {
    display:block;
    position:absolute;
    right:20px;
    top:20px;
    z-index: 400;
  }
 
  .mini {
    display:block;
    /* 20% space rechts fuer .menubutton: */
    width: 80%;
  } 
  .maxi {
    display:none;
  }

  footer.footer {
    padding: 0;
  }

  .footer-segment, .footer-segment:last-child {
    display: block;
    vertical-align: top;
    width: 100%;
    border-bottom:1px solid #999;
    padding:20px;
  }
 
  .info {
        visibility:hidden;
  }
]]> simonvetterli http://dreamworker.de/showthread.php?31743-Ausblenden-einer-Spalte-(einer-Tabelle)-auf-Mobile-Geräte-mittels-CSS