html - Trying to make a site mobile responsive -
hi have site i'm trying make mobile responsive reason right pan portion of site appeared down. , header became footer
it looked http://www.templatesbox.com/data/free.templates/images/web/full.preview/14032018641yd.jpg
i messed css while following tutorial here's code
/* css document */ body{padding:0px; margin:0px; background:#fff; color:#848484; font:11px/14px tahoma, geneva, sans-serif} div, p, ul, h2, h3, h4, img, form, input, textarea{padding:0px; margin:0px; border:0} ul{list-style-type:none;} .clear {clear: both; margin: 0px; height:0} p a{ font:11px/14px tahoma, geneva, sans-serif; color:#17afdb; text-decoration:none;} p a:hover{ color:#fe0600; text-decoration:none;} .headline{font:11px/14px tahoma, geneva, sans-serif; color:#fe0600; font-weight:bold} #container{width:775px; margin:0 auto 0 auto; background:url(../images/b_body.jpg) 0 0 no-repeat} #incontainer{width:90%; margin:0 auto 0 auto;} /* header */ #headerpan{width:100%; height:337px; position:relative; background:url(../images/header.png) 0 0 no-repeat; margin-bottom:10px} #headerpan img#logo{position:absolute; top:156px; left:434px} #headerpan ul.menu{position:absolute; top:28px; left:24px; width:95.84664536741214%; height:27px} #headerpan ul.menu li{float:left; height:27px; margin-right:40px } #headerpan ul.menu li a{height:27px; display:block; text-indent:-20000px; } #headerpan ul.menu li a:hover{height:27px; } #headerpan ul.menu li.b01 a{ width:13.25878594249201%; background:url(../images/btn_1.png) 0 0 no-repeat; } #headerpan ul.menu li.b01 a:hover{ width:13.25878594249201%; background:url(../images/btn_1_over.png) 0 0 no-repeat;} #headerpan ul.menu li.b02 a{ width:11.34185303514377%; background:url(../images/btn_2.png) 0 0 no-repeat; } #headerpan ul.menu li.b02 a:hover{ width:11.34185303514377%; background:url(../images/btn_2_over.png) 0 0 no-repeat;} #headerpan ul.menu li.b03 a{ width:8.626198083067093%; background:url(../images/btn_3.png) 0 0 no-repeat; } #headerpan ul.menu li.b03 a:hover{ width:8.626198083067093%; background:url(../images/btn_3_over.png) 0 0 no-repeat;} #headerpan ul.menu li.b04 a{ width:18.05111821086262%; background:url(../images/btn_4.png) 0 0 no-repeat; } #headerpan ul.menu li.b04 a:hover{ width:18.05111821086262%; background:url(../images/btn_4_over.png) 0 0 no-repeat;} #headerpan ul.menu li.b05{margin-right:0 } #headerpan ul.menu li.b05 a{ width:11.82108626198083%; background:url(../images/btn_5.png) 0 0 no-repeat; } #headerpan ul.menu li.b05 a:hover{ width:11.82108626198083%; background:url(../images/btn_5_over.png) 0 0 no-repeat;} /* content */ #contentpan{width:100%; position:relative; background:#fff; padding-top:20px;} #contentpanpages{padding:200px 0; text-align:center; background:#fff;} #leftpan{width:57.50798722044728&; float:left; margin:0 34px 0 2.236421725239617%;} #rightpan{width:32.74760383386581%; float:left;} #welcome{width:57.50798722044728%; margin:0 0 32px 0;} #welcome h2{width:57.50798722044728%; height:62px; background:url(../images/h_welcome.png) 0 0 no-repeat; margin-bottom:10px} #welcome img{float:left; margin-right:15px; max-width:100&;} #next_events{width:57.50798722044728%;} #next_events h2{width:57.50798722044728%; height:32px; background:url(../images/h_events.png) 0 0 no-repeat; margin-bottom:10px} #next_events img{float:left; margin-right:15px;} #history{width:32.74760383386581%; margin:0 0 0 0;} #history h2{width:32.74760383386581%; height:34px; background:url(../images/h_history.png) 0 0 no-repeat; margin-bottom:10px} #history p.maintext{margin-bottom: 12px; padding-bottom:12px; border-bottom:#a9a9a9 1px dotted } #history img{float:left; margin-right:10px; /* footer */ #footerpan{width:626px; height:63px; margin:0 auto; background:url(../images/b_footer.jpg) 0 0 no-repeat} #footerpan p{padding: 18px 0 0 0; font:10px/14px tahoma, geneva, sans-serif; font-weight:normal; color:#848484; text-align:center} #footerpan p span{ font:10px/14px tahoma, geneva, sans-serif; color:#848484;} #footerpan p a{ font:10px/14px tahoma, geneva, sans-serif; color:#848484; text-decoration:none; padding: 0 3px; font-style:normal; font-weight:normal; text-transform:uppercase } #footerpan p a:hover{ font:10px/14px tahoma, geneva, sans-serif; text-decoration:underline; font-style:normal; font-weight:normal; text-transform:uppercase} here's html in case
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>sky diving club</title> <link href="css/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="pngfix.js"></script> </head> <body> <div id="container"> <div id="incontainer"> <div id="headerpan"> <ul class="menu"> <li class="b01"><a href="index.html" title="home">home</a></li> <li class="b02"><a href="about.html" title="about me">about us</a></li> <li class="b03"><a href="events.html" title="events">events</a></li> <li class="b04"><a href="gallery.html" title="photo gallery">photo gallery</a></li> <li class="b05"><a href="contacts.html" title="contacts">contacts</a></li> </ul> <img src="images/logo.png" alt="" name="logo" width="154" height="96" id="logo" /> </div> <div id="contentpan"> <div id="leftpan"> <div id="welcome"> <h2></h2> <img src="images/img_welcome.jpg" width="135" height="87" alt="" /> <p><span class="headline">lorem ipsum dolor sit amet, consectetuer lobortis purus vel </span><br /> nunc laoreet lacinia nunc. in volutpat sodales ipsum. sed vestibulum. integer in ante. mauris tincidunt, quam ac porta viverra, turpis sapien <a href="#">| more</a></p> <div class="clear"></div> </div> <div id="next_events"> <h2></h2> <img src="images/img_events.jpg" width="135" height="87" alt="" /> <p><span class="headline">lorem ipsum dolor sit amet, consectetuer lobortis purus vel </span><br /> nunc laoreet lacinia nunc. in volutpat sodales ipsum. sed vestibulum. integer in ante. mauris tincidunt, quam ac porta viverra, turpis sapien <a href="#">| more</a></p> <div class="clear" style="height:15px"></div> <p class="maintext">mauris tincidunt, quam ac porta viverra, turpis sapien egestas mauris, et suscipit nulla orci sed odio. in ac sem mauris tincidunt</p> </div> </div> <div id="rightpan"> <div id="history"> <h2></h2> <p class="maintext">mauris tincidunt, quam ac porta viverra, turpis sapien egestas mauris, et suscipit nulla orci sed odio. in ac sem mauris tincidunt, quam ac porta viverra</p> <img src="images/img_history.jpg" alt="" width="66" height="66" /> <p><span class="headline">donec lobortis </span><br /> lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. nam eu </p> <div class="clear" style="height:15px"></div> <img src="images/img_history-03.jpg" alt="" width="66" height="66" /> <p><span class="headline">donec lobortis </span><br /> lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. nam eu </p> <div class="clear" style="height:15px"></div> <img src="images/img_history-05.jpg" alt="" width="66" height="66" /> <p><span class="headline">donec lobortis </span><br /> lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. nam eu </p> <div class="clear" style="height:15px"></div> </div> </div> <div class="clear" style="height:20px"></div> </div> <div id="footerpan"> <p><a href="index.html">home</a> | <a href="about.html">about us</a> | <a href="events.html">events</a> | <a href="gallery.html">gallery</a> | <a href="contacts.html">contacts</a><br/> <span>copyright © sky diving club. rights reserved.</span></p> </div> </div> </div> </body> </html> any ideas?
Comments
Post a Comment