I have a table of links for an image gallery that I want to be able to fit to the screen size if the window size is reduced. At the moment it just stays the 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 my 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 I try to reduce the size, all other features fit to the screen size, but the gallery stays the same size, despite using the same code for the other features (width:%).
This is what it looks like full screen:
http://i.imgur.com/wbFzPnS.jpg
And this is what it looks like when I reduce the window size:
http://i.imgur.com/hNfBFD5.jpg
You need to make the images responsive
#albums img {
width:100%;
max-width:100%;
}
However the padding, text and the fact its a table will stop it from downsizing all the way.
Also semantically using a table in this way is quite bad. It looks like you're using it solely for layout purposes. You could achieve the same effect with a few divs and you'll have a lot more flexibility and be semantically correct.
Here's a codepen with a better way of doing it. You would probably want to turn it into a 2 column or single column layout with a media query around 600px.
Related
So, I have the code below and ideally the goal is to have any images present hit a maximum width of 120px for browsers with viewports of 641px+ and then only a maximum width of 27px. The odd part is that if I remove the resizing coding and put it in a separate code block at the bottom of my site it will resize all images on the page, but not how it's supposed to. When I remove the portion of coding, the coding seems to try and work a little more, but not exactly. Maybe there's a different way to do the resizing coding?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media screen and ( min-width: 641px ){
img {
width: 120px;
height: auto;
}
}
#media screen and ( max-width: 640px ){
img {
width: 27px;
height: auto;
}
</style>
</head>
<body>
<!--VGC Year-->
<p style="font-size: 30px">
<b>
VGC 2015
</b>
</p>
<!-- Acronym-->
<table>
<tr>
<td>
<b style="font-size: 20px">
CHALK - - -
</b>
</td>
<!--Arconym Pokemon-->
<td>
<img src="https://www.serebii.net/art/th/488.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/485.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/591.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/645-s.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/115-m.png">
</td>
</tr>
</table>
<!--Arconym descption-->
<p>
This acronym refers to a five Pokemon core consisting of Cresselia, Heatran, Amoonguss, Landorus-Therian, and Mega Kangaskhan with the sixth and final Pokemon being up to a Trainer's personal preference. This sixth Pokemon was typically added on to the end of the acronym and was considered a variant on this standard core. For example, Thundurus-Incarnate was a popular sixth option resulting in the term CHALK-T.
</p>
<!-- Acronym-->
<table>
<tbody>
<tr>
<td>
<p style="font-size: 20px">
<b>
Japan Sand - - -
</b>
</p>
</td>
<!--Arconym Pokemon-->
<td>
<img src="https://www.serebii.net/art/th/373-m.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/248.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/530.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/591.png">
</td>
</tr>
</tbody>
</table>
<!--Arconym descption-->
<p>
Japan Sand was a team popularized in Japan - hence the name - and almost always featured the four Pokemon core of Mega Salamence, Tyranitar, Excadrill and Amoonguss. A common fifth Pokemon added to the team was Belly Drum Huge Power Azumarill to pair with Amoonguss.
</p>
</body>
</html>
I'm trying to get the social media sprites in this HTML table at https://www.alexcurriemedia.com/video/ to press up flush with the image above it. Cannot figure out a way to do this.
Can't add another table above it because the upper image is a wordpress shortcode that doesn't seem to work within the table.
Here is the code:
<table><center>[wds id="3"]
<td nowrap><a href="http://www.facebook.com/alexcurriemedia" target="_blank">
<div class='sprite Facebook1' width="100"></div></a></td>
<td nowrap><a href="http://www.twitter.com/alexcurriemedia" target="_blank">
<div class='sprite Twitter1'></div></a></td>
<td nowrap><a href="http://www.flickr.com/alexcurrie" target="_blank">
<div class='sprite Flickr1'></div></a></td>
<td nowrap><a href="http://www.alexcurriemedia.tumblr.com" target="_blank">
<div class='sprite Tumblr1'></div></a></td>
<td nowrap><a href="http://www.instagram.com/alex.currie" target="_blank">
<div class='sprite Instagram1'></div></a></td><td></td>
</center></table>
Thanks so much!!
The stray <p> tags that you see are likely a result of Wordpress automatically inserting them through the text editor. You should not place a <div> inside of an <a> tag if at all possible. While technically valid, I've seen it cause problems with things such as Wordpress's text editor. If you look at the source code in your browser, you will notice that the link is actually being rendered twice, like so:
<td nowrap="">
<a href="http://www.twitter.com/alexcurriemedia" target="_blank"><p></p>
<div class="sprite Twitter1"></div>
</a>
<p>
</p>
</td>
The following code should work better:
<table>
<tbody><tr>
<td nowrap>
</td>
<td nowrap>
<a class="sprite Twitter1" href="http://www.twitter.com/alexcurriemedia" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Flickr1" href="http://www.flickr.com/alexcurrie" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Tumblr1" href="http://www.alexcurriemedia.tumblr.com" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Instagram1" href="http://www.instagram.com/alex.currie" target="_blank"></a>
</td>
</tr>
</tbody>
</table>
Once you change that, simply add the following to your CSS:
.sprite {
display: block;
}
This will cause the content in each <td> to align at the top, rather than in the center as they are doing currently.
If you still have trouble with the <p> tags being automatically inserted, you may look into this function.
End result:
I am creating a newsletter template with full CodePen example
I have a few Table rows as follows:
<tr>
<td class="snip" valign="top">
<table class="snip" style="padding-left: 8px;">
<tr>
<td>
<img src="http://placehold.it/40x32" style="padding: 4px">
</td>
</tr>
<tr>
<td>
THIS IS THE TITLE 1
</td>
</tr>
<tr>
<td>
<span>THIS IS THE LINK 1 FOR TITLE 1</span>
<br>
<span>THIS IS THE LINK 2 FOR TITLE 1</span>
<br>
<span>YET ANOTHER LINK FOR TITLE 1</span>
<br>
<span>ONE MORE LINK FOR TITLE 1</span>
<br>
<span>AND THE LAST LINK FOR TITLE 1</span>
</td>
</tr>
</table>
</td>
</tr>
Somehow when I resize the browser to a specific width I get:
You can see that the last TD goes to a next row ...
How can I solve this problem? I can't find the solution ...
look this, I set two different tr with class
http://codepen.io/anon/pen/iyEmK
#media only screen and (max-width : 600px) {
tr.myTR {float:none;display:block;clear:both} }
Use min-width instead of width
table[class="snip"] {
min-width: 50% !important;
}
http://codepen.io/anon/pen/dzGKo
You can add
td[class="snip"]:nth-child(2n+1) {
clear: left;
}
so that the narrow screens have rows of two elements.
Demo at http://codepen.io/gpetrioli/pen/lbxEe
Ok, so I have several problems with this table. I need it to look like as lose as possible to this:
However, when I try to achieve this, there ends up being a ton of space between the table cells that contain the text and for some reason valign="top" is not working nor is vertical-align:middle for the text portions so they don't line up with the top of the image. This is what it looks like right now: http://imgur.com/KKIGrhQ
Not sure how to fix any of this or get it to look like the original. :( Please help! Thanks in advance!!!
<table width="570" align="center" style="padding-top:10px; background-color:#FFF; border-top:dotted 1px #000;">
<tr>
<td width="190" valign="top">
<img src="images/plant.jpg" />
</td>
<td width="199" valign="top" style="vertical-align:top;">
<p style="font-size:14px; color:#646f9a; line-height:15px;">DEFYING THE RECESSION<br>
<span style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Sarah Walker</strong>, CNNMoney.com staff writer</span></p>
<p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;">When metal worker Ken Kash was laid off in July from his job at a theatre set company, he decided not to look for another full-time position. Instead, he's pursing a <span style="text-decoration:underline;">longtime dream</span>: launching his own company.</p>
<p style="font-size:11px; color:#646f9a;">STRATEGIC <strong>INVESTMENT</strong> <span style="color:#c0d84d;">•</span></p>
</td>
<td width="121" valign="top" rowspan="1" style="background-color:#eff2d9; border-bottom:solid #c0d84d 8px; padding-left:10px; padding-right:10px; padding-top:2px;">
<p style="font-size:14px; color:#646f9a; line-height:15px;">ASK AN EXPERT</p>
<p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Q: Is there anything in this massive federal economic stimulus plan for small business? <br>
— Rick<br><br>
A: Yes, lots.</strong><br><br>
There is going to be a lot of federal, state and local money available. Get ready to take advantage of it. <span style="text-decoration:underline;">Read more...</span></p>
<p style="font-size:11px; color:#646f9a;">ASK THE <strong>EXPERT</strong> <span style="color:#c0d84d;">•</span></p>
</td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;"><img src="images/video.jpg" />
</td>
<td valign="top" style="vertical-align:top;">
<p style="font-size:14px; color:#646f9a; line-height:15px;">DEFYING THE RECESSION<br>
<span style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Sarah Walker</strong>, CNNMoney.com staff writer</span></p>
<p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;">When metal worker Ken Kash was laid off in July from his job at a theatre set company, he decided not to look for another full-time position. Instead, he's pursing a <span style="text-decoration:underline;">longtime dream</span>: launching his own company.</p>
<p style="font-size:11px; color:#646f9a;">STRATEGIC <strong>INVESTMENT</strong> <span style="color:#c0d84d;">•</span></p>
</td>
<td rowspan="2"> </td>
</tr>
</table>
You shouldnt be using tables for that. Try twitter bootstrap or 960 Gs or sny other css grid system.
I've the below HTML Code.
<div class="main">
<div class="para">
<a name="I1-87A"></a><span class="phrase">I1/87A</span> <span class="font-style-bold">Punitive costs</span>—Proceedings which are an abuse of process in that they
are scandalous or vexacious or have been initiated maliciously or for an ulterior
motive may not only be struck out, the petitioner may also face an order to pay
costs on an indemnity basis (<span class="font-style-italic">Re Tang Hong Yuen, ex p.
Leung Yee Cheung</span> [2004] H.K.E.C. 972 <span class="font-style-italic">Bank of
China (Hong Kong) Ltd v. Lee Lin Heung</span> [2002] 1 H.K.L.R.D. A3 and
<span class="font-style-italic">Choy Yee Chun v. Bond Star Development Ltd</span>
[1997] H.K.L.R.D. 1327). This provides a salutory reminder to practitioners that
the bankruptcy jurisdiction should not be lightly invoked nor looked to for the
determination of disputes between parties.
</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="3">
<colgroup>
<col class="colname-c1 colwidth-8.80%"></col>
<col class="colname-c2 colwidth-12.68%"></col>
<col class="colname-c3 colwidth-59.33%"></col>
<col class="colname-c3 colwidth-19.19%"></col>
</colgroup>
<tbody>
<tr>
<td class="null"><div class="para"><a name="I1-89"></a>
<span class="phrase">I1/89</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Stages of a voluntary arrangement</span>
</div>
</td>
<td rowspan="align-center">
<div class="para">
<span class="font-style-bold">Procedures</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">of the Bankruptcy Ordinance (BO)/Rule of the Bankruptcy Rules (BR)/Form in the Bankruptcy (Forms) Rules (BFR)</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89A"></a>
<span class="phrase">I1/89A</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Debtor prepares proposal</span>
</div>
</td>
<td>
<div class="para">The proposal should include:</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122B and C</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89B"></a>
<span class="phrase">I1/89B</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Notice to intended nominee</span>
</div>
</td>
<td>
<div class="para">Written notice of the debtor’s proposal and a copy of the proposal is passed to the intended nominee or a person authorised to take delivery on his behalf (BR 122D (1) and (2)). If the nominee agrees to act, he shall cause a copy of the notice to be endorsed to the effect that it has been received by him on a specified date (BR 122D(3)). The copy of the notice shall be returned by the intended nominee to the debtor (BR 122D(4)).</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122D BFR 167 </span>
<span class="font-style-italic">[Notice to Intended Nominee]</span>
</div>
</td>
</tr>
<tr>
<td class="auto-style1">
<div class="para">
<a name="I1-89C"></a>
<span class="phrase">I1/89C</span>
</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">Application for an interim order</span>
</div>
</td>
<td class="auto-style1">
<div class="para">An application for an interim order may be made when the debtor intends to make a proposal and the proposal must provide for a nominee to act in relation to the voluntary arrangement for the purposes of supervising its implementation (BO 20A). Two or more persons can be appointed as joint nominees in a voluntary arrangement. The court normally will not object to any proposal to appoint solicitors and certified public accountants provided such persons are able to demonstrate sufficient experience and knowledge in dealing with insolvency matters. For persons not coming from these two professions, a more cautious approach will be taken (see <span class="font-style-italic">Re Ng Hing Kwong</span> [2003] 3 H.K.L.R.D. 230).</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">BO 20A BFR 165 </span>
<span class="font-style-italic">[Application for Interim Order]</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"></div>
</td>
<td class="null"><div class="para"></div>
</td>
<td>
<div class="para">An application for an interim order may be made by:</div>
</td>
<td class="null"><div class="para"></div>
</td>
</tr>
</tbody>
</table>
</div>
here, i want to hide the first cell by using a css attribute and set the number in table first cell equal to the number in the para above. please refer the below screenshot.
There is a gap between the number start and also there is an extra cell(for which i gave class as 'null'), it should be hidden please refer to my second screen shot. please let me know how i can do this.
JsFiddle is here
you can modifie your css like this :
.main{
margin-left: 5.0em;
margin-right: 0.2em;
}
table.frame-all{
width: 97%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
padding: 10px 10px 10px 10px;
}
.frame-all td {
border: 0.080em solid;
padding-right: 0.4em;
padding: 7px 7px 7px 7px;
}
td.null {
border:none; !important
}
.para span.phrase {
text-indent: 0em;
font-weight: bold;
}
you may need some "adjustment", but it seems to be what you need.
Padding properties caused the gap between first row, and dates, also, i used "border : none;" on this first column to hide the border around the date. (it exist but you don't see it)
I Hope it may help you,
Best regards