css - HTML Display table to fit screen size -

-

i have table of links image gallery want able fit screen size if window size reduced. @ moment stays same size.

<table class="images" id="albums">   <tr>     <td>       <a href="academy-blitz-may-2014.html" ><img id="academy-blitz-may-2014" src="img/album-covers/academy-blitz-may-2014.jpg" title="academy blitz may 2014"/></a>     </td>      <td>       <a href="academy-blitz-october-2014.html" ><img id="academy-blitz-october-2014" src="img/album-covers/academy-blitz-october-2014.jpg" title="academy blitz october 2014"/></a>     </td>      <td>       <a href="academy-blitz-november-2012.html" ><img id="academy-blitz-november-2012" src="img/album-covers/academy-blitz-november-2012.jpg" title="academy blitz november 2012"/></a>     </td>      <td>       <a href="summer-camp-2014.html" ><img id="summer-camp-2014" src="img/album-covers/summer-camp-2014.jpg" title="summer camp 2014"/></a>     </td>      <td>       <a href="academy-on-tour-tullamore-2015.html" ><img id="academy-on-tour-tullamore-2015" src="img/album-covers/academy-on-tour-tullamore-2015.jpg" title="academy on tour - tullamore 2015"/></a>     </td>     </tr>    <tr>     <td>       academy blitz may 2014     </td>      <td>       academy blitz october 2014     </td>      <td>       academy blitz november 2012     </td>      <td>       summer camp 2014     </td>      <td>       academy on tour - tullamore 2015     </td>   </tr>    <tr>     <td>       <a href="u18s-v-mullingar-2013.html" ><img id="u18s-v-mullingar-2013" src="img/album-covers/u18s-v-mullingar-2013.jpg" title="u18's v mullingar 2013"/></a>     </td>      <td>       <a href="u18s-league-win-2014.html" ><img id="u18s-league-win-2014" src="img/album-covers/u18s-league-win-2014.jpg" title="u18's league win 2014"/></a>     </td>      <td>       <a href="u12s-v-tullamore-2014.html" ><img id="u12s-v-tullamore-2014" src="img/album-covers/u12s-v-tullamore-2014.jpg" title="u12's v tullamore 2014"/></a>     </td>      <td>       <a href="u11-lions-semi-final-2015.html" ><img id="u11-lions-semi-final-2015" src="img/album-covers/u11-lions-semi-final-2015.jpg" title="u11 lions semi-final 2015"/></a>     </td>      <td>       <a href="easter-camp-2015.html" ><img id="easter-camp-2015" src="img/album-covers/easter-camp-2015.jpg" title="easter camp 2015"/></a>     </td>   </tr>    <tr>     <td>       u18's v mullingar 2013     </td>      <td>       u18's league win 2014     </td>      <td>       u12's v tullamore 2014     </td>      <td>       u11 lions semi-final 2015     </td>      <td>       easter camp 2015     </td>   </tr>       </table>

and css:

#albums {width:70%;}  #albums img {opacity: 0.9;}  #albums img:hover {opacity:1.0;}  #albums td {text-align:center;padding-top:14px;padding-right:14px;padding-bottom:0px;padding-left:14px;}

whenever try reduce size, other features fit screen size, gallery stays same size, despite using same code other features (width:%).

this looks full screen: http://i.imgur.com/wbfzpns.jpg

and looks when reduce window size: http://i.imgur.com/hnfbfd5.jpg

you need make images responsive

#albums img {     width:100%;     max-width:100%; }

however padding, text , fact table stop downsizing way.

also semantically using table in way quite bad. looks you're using solely layout purposes. achieve same effect few divs , you'll have lot more flexibility , semantically correct.

here's a codepen better way of doing it. want turn 2 column or single column layout media query around 600px.


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more