CSS - HTML - How to align images properly across the page -

-

i want make images aligned if can appreciated images 100% same size not problem

enter image description here

            .box {           float: left;           width: 20%;           padding-bottom: 20%;        }          .top-left {          position:absolute;          top: 10px; left: 10px;          width: 50%;          overflow: hidden;        }          .top-right {          position:absolute;          top: 10px; right: 10px;          width: 50%;          overflow: hidden;        }        .bottom-left {          position:absolute;          bottom: 10px; left: 10px;          width: 50%;          overflow: hidden;        }        .bottom-right {          position:absolute;          bottom: 10px; right: 10px;          width: 50%;        }              @media screen , (max-width : 480px) {           .box {              width: 100%;           }           .box a{              position: relative;           }             .top-left, .top-right, .bottom-left, .bottom-right {              width:100%;           }          }
<!doctype html>  <html>    <head>      <title>deluzens</title>      <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">      <link href="main.css" rel="stlesheet" type="text/css">      <style>      .wrap {        overflow:hidden;      }            </style>    </head>    <body bgcolor="black">      <div class="section-links">      <div class="wrap">      <div class="box">          <a href="teams.html" class="top-left">          <img style="width: 100%;" style="height: 100%" src="icon1.jpg" alt="">        </a>        </div>          <div class="box">        <a href="store.html" class="top-right">          <img style="width: 100%;" style="height: 100%"  src="icon2.jpg" alt="">        </a>        </div>          <div class="box">        <a href="sponsors.html" class="bottom-left">          <img style="width: 100%;" style="height: 100%" src="icon4.jpg" alt="">        </a>        </div>          <div class="box">        <a href="aboutus.html" class="bottom-right">          <img style="width: 100%;" style="height: 100%" src="icon3.jpg" alt="">        </a>        </div>      </div>      </div>    </body>  </html>

so if can see @ top pointy end isn't touching other 1 same 2 sides

kind regards creepyc appreciated

you're setting height , width of <a> elements 50% you're positioning them 10px each edge, means overlap.

you can use css calc() size images 10 pixels less 50% compensate:

width: calc(50% - 10px);

(note spaces important, don't leave them out).

calc() relatively new, check http://caniuse.com/#feat=calc browser support if it's concern.


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more