0
Also versuche ich die Codierung zu bearbeiten, wo, wenn die @media Breite von weniger als 600 px ist, ich meine Navigationsleiste soll vertikal stapeln, wie diese 
Wie meine navbar stapeln vertikal
Also im Grunde möchte ich die Nav-Leiste, um vertikal zu stapeln und alles, was in einem anderen Abschnitt (aka der letzten Aktualisierungen) beginnt, um unter eine Spalte zu fallen. Der Code unten ist was ich bisher mit dem HTML und CSS getan habe.
body{background:#000;font:normal small "Trebuchet MS", Arial, Helvetica, sans-serif;margin:20px 0;padding:0;}
h1,h2,h3{color:#B13413;}
h2{font-size:1.6em;}
h3{font-size:1em;margin:0;}
p,ul,ol,blockquote{margin-top:0;}
a:link{border-bottom:1px dotted #CCC;text-decoration:none;color:#3284B5;}
#header{width:700px;height:200px;background:url(../img/img1.jpg) no-repeat;margin:0 auto;}
#header *{border:none;text-decoration:none;font-weight:400;color:#FFF;margin:0;}
#header h1{float:left;font-size:3em;padding:140px 0 0 20px;}
#menu{width:700px;height:41px;background:#37AEF2 url(../img/img2.gif);margin:0 auto;}
#menu ul{list-style:none;margin:0;padding:0;}
#menu li{display:inline;}
#menu a{display:block;float:left;height:32px;text-decoration:none;color:#FFF;padding:9px 20px 0;}
#menu a:hover,#menu .active a{background:url(../img/img3.gif);color:#FFF; }
#content{width:700px;background:url(../img/img4.gif);margin:0 auto;}
#colAd{float:left;width:120px;padding:10px;}
#colContent{float:left;width:360px;padding:20px 10px 0; }
#colSidebar{float:left;width:160px;padding:20px 10px 0;}
#footer{width:700px;background:url(../img/img6.gif) repeat-x;font-size:smaller;margin:0 auto;padding:10px 0;}
#footer *{color:#666;}
a:hover,img{border:none;}
table th, td{
\t border: 1px solid white;
}<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Sploosh - You can splash in sploosh!</title>
<link rel="stylesheet" href="cssmobile/main.css" >
<link rel="stylesheet" href="cssmobile/responsive.css">
</head>
<body>
<div id="header">
\t <h1><a href="index.html">Splöösh - Mobile</a></h1>
\t
</div>
<div id="menu">
\t <ul>
\t \t <li class="active"><a href="index.html" accesskey="1" title="">Homepage</a></li>
\t \t <li><a href="index.html" accesskey="2" title="">splöösh Desktop</a></li>
\t \t <li><a href="index.html" accesskey="3" title="">My Photos</a></li>
\t \t <li><a href="index.html" accesskey="4" title="">My Bookmarks</a></li>
\t \t <li><a href="index.html" accesskey="5" title="">Contact Me</a></li>
\t </ul>
</div>
<div style="clear: both;"></div>
<div id="content">
\t <div id="colAd"> <a href="#"><img src="img/ad_120x600.jpg" alt="" width="120" height="600" /></a> </div>
\t <div id="colContent">
\t \t <h2> Splöösh!</h2>
\t \t <p><em><strong>Splöösh</strong></em> onec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. </p>
\t \t <h2>Viewport dimensions:</h2>
\t \t <table style="width:100%">
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td> </td>
\t \t \t \t \t \t <td><b> Width </b></td>
\t \t \t \t \t \t <td> <b>Height</b> </td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td> <b>Page</b> </td>
\t \t \t \t \t \t <td> <script type = "text/javascript">
\t \t \t \t \t \t \t var width = document.documentElement.clientWidth;
\t \t \t \t \t \t \t document.write(width);
\t \t \t \t \t \t \t </script></td>
\t \t \t \t \t \t <td><script type = "text/javascript">
\t \t \t \t \t \t \t var height = document.documentElement.clientHeight;
\t \t \t \t \t \t \t document.write(height);
\t \t \t \t \t \t \t </script> </td>
\t \t \t \t \t
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td><b> Screen</b> </td>
\t \t \t \t \t \t <td> <script type = "text/javascript">
\t \t \t \t \t \t \t var width = window.screen.width;
\t \t \t \t \t \t \t document.write(width);
\t \t \t \t \t \t \t </script></td>
\t \t \t \t \t \t <td> <script type = "text/javascript">
\t \t \t \t \t \t \t var height = window.screen.height;
\t \t \t \t \t \t \t document.write(height);
\t \t \t \t \t \t \t </script></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td> <b>ViewPort</b> </td>
\t \t \t \t \t \t <td><script type = "text/javascript">
\t \t \t \t \t \t \t var width = window.innerWidth;
\t \t \t \t \t \t \t document.write(width);
\t \t \t \t \t \t \t </script></td>
\t \t
\t \t \t \t \t \t <td> <script type = "text/javascript">
\t \t \t \t \t \t \t var height = window.innerHeight;
\t \t \t \t \t \t \t document.write(height); </script></td>
\t \t \t \t \t </tr>
\t \t \t \t \t </table>
<p id="desc"></p>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
\t \t <ol>
\t \t \t <li><a href="#">Suspendisse quis gravida massa felis</a></li>
\t \t \t <li><a href="#">Vivamus sagittis bibendum erat</a></li>
\t \t \t <li><a href="#">Nullam et orci in erat viverra ornare</a></li>
\t \t \t <li><a href="#">Suspendisse quis gravida massa felis</a></li>
\t \t \t <li><a href="#">Curabitur malesuada turpis nec ante</a></li>
\t \t </ol>
\t \t <h3>Lorem Ipsum Dolore </h3>
\t \t <p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec.</p>
\t \t <p><a href="#">Pellentesque sed vestibulum blandit…</a></p>
\t </div>
\t
<div id="colSidebar">
\t \t <h2>Recent Updates</h2>
\t \t <h3>Etiam suscipit et</h3>
\t \t <p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="#">More…</a></p>
\t \t <h3>Nunc pellentesque</h3>
\t \t <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="#">More…</a></p>
\t \t <h3>Suspendis potenti</h3>
\t \t <p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. <a href="#">More…</a></p>
\t \t <p><a href="#"><img src="img/img5.jpg" alt="" width="160" height="120" /></a></p>
\t </div>
\t <div style="clear: both;"></div>
</div>
<div id="footer">
\t <p>Copyright splöösh.com Contact Legal Info Site Map Email</p>
</div>
</body>
</html>
Versuchen anwenden 'Breite: 100%;' und 'text-align: center;' auf 'Ihr li's –
Ich habe versucht, es zu, dass eine Änderung, aber einige ungerade Grund nichts Änderungen. – rich
Ihr Arbeitscode ist unten, Führen Sie das Snippet aus und gehen Sie in den Vollbildmodus, ziehen Sie Ihren Browser, um die Größe des '600px' zu ändern und stellen Sie sicher, dass Sie das suchen. – Illdapt