javascript - Div Overlapping each other - HTML -
i position social icons @ bottom of screen , position image gallery in middle of screen however, social icons move middle of screen , image gallery seems overlapping social icons , cannot position stay @ bottom of screen
every time add new page, tends affect social icon
code:
<!doctype html> <html lang="en"> <head> <title>images</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, inital-scale=1"> <link rel="stylesheet" type="text/css" href="reset.css"/> <link rel="icon" type="image/png" href="images/ace.png"/> <link rel="stylesheet" type="text/css" href="style.css" media="all"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="script.js"></script> <link href="example/imagestyle.css" rel="stylesheet" type="text/css" media="all" /> <link href="example/jphotogrid.css" rel="stylesheet" type="text/css" media="screen" /> <!--[if ie]> <link href="jphotogrid.ie.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="example/jphotogrid.js"></script> <script src="example/jflickrfeed.js"></script> <script src="example/setup.js"></script> </head> <body> <div class="header"> </div> <span class="menu-trigger" align="center" >☰ menu</span> <div class="nav-menu"> <ul> <li><a href="index.html">home</a></li> <li><a href=#>videos</a></li> <li class="current"><a href="images.html">images</a></li> <li><a href=#>events</a></li> <li><a href=#>testimonials</a></li> <li><a href="contact.html">enquiries</a></li> </ul> </div> <div class="main"> <ul id="pg"> <li> <img src="http://farm4.static.flickr.com/3647/3435384001_9ed9864bb4.jpg" alt="dsc_0660"> <p>dsc_0660</p> </li> <li> <img src="http://farm4.static.flickr.com/3311/3436188742_caaa28c689.jpg" alt="dsc_0698"> <p>dsc_0698</p> </li> <li> <img src="http://farm4.static.flickr.com/3371/3436188466_418a0d8a06.jpg" alt="dsc_0668"> <p>dsc_0668</p> </li> <li> <img src="http://farm4.static.flickr.com/3397/3436188128_5e503cefcd.jpg" alt="dsc_0704"> <p>dsc_0704</p> </li> <li> <img src="http://farm4.static.flickr.com/3300/3436187796_4d228a5bde.jpg" alt="dsc_0699"> <p>dsc_0699</p> </li> <li> <img src="http://farm4.static.flickr.com/3386/3435382439_68b5e3742b.jpg" alt="dsc_0602"> <p>dsc_0602</p> </li> <li> <img src="http://farm4.static.flickr.com/3657/3436187288_e84058f54b.jpg" alt="dsc_0603"> <p>dsc_0603</p> </li> <li> <img src="http://farm4.static.flickr.com/3405/3436187010_c731dea9a3.jpg" alt="dsc_0604"> <p>dsc_0604</p> </li> <li> <img src="http://farm4.static.flickr.com/3403/3435381659_ea615ecf14.jpg" alt="dsc_0607"> <p>dsc_0607</p> </li> <li> <img src="http://farm4.static.flickr.com/3570/3436186474_4e35487600.jpg" alt="dsc_0619"> <p>dsc_0619</p> </li> <li> <img src="http://farm4.static.flickr.com/3339/3434101571_30f6f2bffd.jpg" alt="dsc_0620"> <p>dsc_0620</p> </li> <li> <img src="http://farm4.static.flickr.com/3134/3434099407_32da82e761.jpg" alt="dsc_0590"> <p>dsc_0590</p> </li> <li> <img src="http://farm4.static.flickr.com/3538/3434096369_e2de95b252.jpg" alt="dsc_0562"> <p>dsc_0562</p> </li> <li> <img src="http://farm4.static.flickr.com/3348/3434093487_f5a5b8fdb3.jpg" alt="dsc_0544"> <p>dsc_0544</p> </li> <li> <img src="http://farm4.static.flickr.com/3652/3434091639_dccdc6342a.jpg" alt="dsc_0541"> <p>dsc_0541</p> </li> <li> <img src="http://farm4.static.flickr.com/3537/3434089449_cde6162fa7.jpg" alt="dsc_0532"> <p>dsc_0532</p> </li> <li> <img src="http://farm4.static.flickr.com/3385/3434895530_4bf2857b49.jpg" alt="dsc_0531"> <p>dsc_0531</p> </li> <li> <img src="http://farm4.static.flickr.com/3411/3434069355_7df0d65490.jpg" alt="dog dogs"> <p>dogs</p> </li> <li> <img src="http://farm4.static.flickr.com/3349/3434870890_3b51171084.jpg" alt="dsc_0693"> <p>dsc_0693</p> </li> <li> <img src="http://farm4.static.flickr.com/3544/3434061033_ba1be12cce.jpg" alt="dsc_0691"> <p>dsc_0691</p> </li> </ul> </div> <section> <div id="middle"> </div> </section> <div class="si"> <div class="icons"> <a class="socialicons" href="http://www.youtube.com" title="subscribe on youtube" alt="arshdeep on youtube"><img src="images/social/youtube.png"/></a> <a class="socialicons" href="http://www.instagram.com/arshsoni" title="subscribe!" alt="arshdeep soni"><img src="images/social/instagram.png" /></a> <a class="socialicons" href="http://www.facebook.com/magicarsh" title="arshdeep soni on facebook" alt="facebook"><img src="images/social/fb.png" /></a> <a class="socialicons" href="http://twitter.com/arshsoni" title="follow arshdeep on twitter" alt="twitter"><img src="images/social/twitter.png" /></a> </div> </div> </body> </html> css:
<style type="text/css"> body { background-color: black; } .icons { text-align: center; position:absolute; bottom:0px; left:0; width: 100%; border:2px solid red; } .main { width: 700px; margin: 0 auto; text-align: left; } #middle { height:100px; } </style> jsfiddle: https://jsfiddle.net/dzx9v25b/
removing "position:absolute;" in class .icons should solve problem. make position element static default. link has discussion of different ways of positioning elements through css.
Comments
Post a Comment