html - Fixed sidebar but responsive layout -

-

this preview of website i'm working on: http://jsfiddle.net/x4yc8/

it has fixed (full height) sidebar scrolling main content section.

when width of window reduced (see screenshot below) main content overlaps sidebar. how ensure doesn't happen?

http://imgur.com/sgy5ken

ideally main content appear below sidebar when screen width e.g. when viewed on mobile-sized screen

thanks in advance!

my code is:

css

    /* css document */ @import url(http://fonts.googleapis.com/css?family=open+sans); html, body {     height:100%;     margin: 0px;     padding: 0px;     color: #fff;     background-color: #06c; }  #sidebar {     width: 250px;     height: 100%;     left: 0;     float:left;     background-color: #006;     padding-top: 25px;     position: fixed;     clear: right; }  section#settings {     width:auto;     float:left;     margin-left:250px;     padding-top: 60px;     padding-right: 25px;     padding-bottom: 25px;     padding-left: 25px;     position: absolute; }  #sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {     padding-top: 10px;     padding-right: 25px;     padding-bottom: 10px;     padding-left: 25px; } #sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited { font-family: 'open sans', sans-serif;   font-size: 80%;     color: #fff;     text-decoration: none; } #logo {     height: 90px;     width: 200px;     margin-top: 0px;     margin-right: 25px;     margin-bottom: 25px;     margin-left: 25px; }  #sidebar #menubar li:hover {     padding-top: 10px;     padding-right: 25px;     padding-bottom: 10px;     padding-left: 25px;     background-color: #06c; } #sidebar #menubar li a:hover { font-family: 'open sans', sans-serif;   font-size: 80%;     color: #fff;     text-decoration: none; }  #sidebar    #menubar li#active{ font-family: 'open sans', sans-serif;        color: #fff;     text-decoration: none;     padding-top: 10px;     padding-right: 25px;     padding-bottom: 10px;     padding-left: 25px;     background-color: #0066cc; }  #sidebar #menubar  {     padding: 0px;     margin: 0px;     list-style-type: none; } h1 { font-family: 'open sans', sans-serif;   font-size: 150%;     color: #fff;     text-decoration: none; } h2 { font-family: 'open sans', sans-serif;   font-size: 150%;     color: #fff;     text-decoration: none; } h3 { font-family: 'open sans', sans-serif;   font-size: 125%;     color: #fff;     text-decoration: none; } p { font-family: 'open sans', sans-serif;   font-size: 100%;     text-decoration: none;     color: #fff;     line-height: 125%; }

html

<body> <section id="sidebar"> <div id="logo"><img src="logo" width="200" height="89" alt="logo" /></div> <ul id="menubar">       <li><a href="#">item 1</a></li>         <li><a href="#">item 2</a></li>       <li><a href="#">item 3</a></li>       <li><a href="#">item 4</a></li>       <li><a href="#">item 5</a></li>       <li><a href="#">item 6</a></li>      </ul>          </section>  <section id="settings">   <h1>heading 1</h1>   <p>sed ultricies ut massa vehicula. nullam consequat lectus ut mauris venenatis, quis tincidunt urna malesuada. donec pellentesque, lectus eleifend tempus, dui ante porta tellus, nec lacinia tellus quam sed sem. integer lorem nibh, pulvinar nec est ac, consectetur tincidunt dolor. etiam fermentum aliquam sapien, nec eleifend arcuus dui, et vehicula tellus viverra ut. interdum et malesuada fames ac ante ipsum primis in faucibus. duis semper tellus eget est faucibus, et euismod quam viverra. sed dapibus felis mi mattis, eu ultrices tortor ultricies. nulla facilisi. duis blandit leo sed volutpat condimentum. nullam molestie dictum est, quis volutpat augue faucibus eu. pellentesque turpis ante, hendrerit id felis sit amet, semper elementum erat. maecenas vitae justo ullamcorper, ultrices felis at, volutpat erat. proin diam enim, ultricies ut erat sed, eleifend sagittis dui. pellentesque diam magna, mattis non nulla nec, varius commodo tortor.   </p><p> curabitur mollis nunc eu adipiscing interdum. nunc nec eleifend enim. morbi congue metus justo, nec facilisis mauris vulputate id. sed id laoreet arcu. aliquam sed nunc ligula. vivamus bibendum dictum nisi, in placerat lacus convallis vitae. quisque placerat orci non quam fringilla, ac dictum ligula imperdiet. proin vel nibh tellus. sed pellentesque feugiat augue sed convallis. nunc lobortis sem odio, eget tempor urna suscipit at. vivamus accumsan, enim id cursus elementum, quam velit cursus sapien, in semper nulla ligula nec mi. proin pretium nunc vel leo ultricies placerat.   </p><p> integer sed leo auctor, lobortis dui ut, sodales nunc. aliquam mi risus, rutrum sit amet ultrices faucibus, tincidunt eget sapien. nam vel purus eu dolor rutrum dapibus. phasellus euismod erat ac gravida adipiscing. sed ligula quam, ultricies id mollis vitae, consequat eget libero. lorem ipsum dolor sit amet, consectetur adipiscing elit. donec quam velit, feugiat in facilisis vitae, gravida ac enim. nunc venenatis enim eu aliquam ultrices. curabitur et lorem non leo pretium vulputate in @ ligula. quisque dignissim pretium erat non suscipit. phasellus aliquet dolor @ sapien egestas sollicitudin. fusce eget est sed tellus mollis eleifend laoreet lectus.  </p> </section> <div style='clear:both;'></div>  </body> </html>

use css @media change styles based on window width, eg:

@media (max-width: 600px){  #sidebar{     position:relative;     height:auto;     width:100%;     float:left;   }  #menubar li{  display:inline;     }

http://jsfiddle.net/x4yc8/2/


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more