Why is my css Class not being applied consistently?
Question
I am new to html and CSS and wanted to apply a class for my html code. The purpose of this class tag was so that all the pictures in my table would be the correct size and aligned properly. Oddly enough, the banana and avocado pictures are not aligned. I can't figure out what I've done wrong and any help from the Stack Overflow community would be appreciated.
My question is what do I do in the CSS code to get my images to all come out to 70% width? or what do I fix in the HTML code so that the CSS part can work properly.
.food {
vertical-align: top;
width: 70%;
margin: auto;
display: block;
}
CSS CODE ABOVE
HTML CODE BELOW
<h3>Favorite Fruits</h3>
<table class="table">
<tr>
<td> Strawberries
<p><img class="food" src= "http://cdn-media-2.lifehack.org/wp-content/files/2015/05/02.jpg" width="20%"/></p>
</td>
<td> Bananas
<p><img class = "food" src= "http://www.md-health.com/images/1HT03553/Banana21.jpg"width="50%"/></p>
</td>
<td> Blueberries
<p><img class="food" src= "http://www.blueberrycouncil.org/wp-content/uploads/Basket-of-blueberries.jpg"width="20%"/></p>
</td>
</tr>
<tr>
<td> Pineapples
<p><img class="food" src= "http://www.lapanday.com/images/jpg/pines/sliced%20pineappleb.jpg"width="20%"/></p>
</td>
<td> Avocados
<p><img class="food" src= "http://www.medicalnewstoday.com/content/images/articles/295/295427/avocado.jpg"width="75%"/></p>
</td>
</tr>
</table>
This is the link for my HTML code in its whole context if that is needed: http://codepen.io/biniyam18/pen/zBPjgQ?editors=1100
3 answers
solution1
1 ACCPTED 2016-07-15 01:04:01
I tested this, and adding min-width / max-height fixed it.
.food {
vertical-align: top;
width: 70%;
margin: auto;
display: block;
min-width: 515px;
max-height: 292px;
}
.table {
background-color: #95E7F0 ;
border-style: ridge;
border-color: #2F6CED;
border-width: 4.5px;
width: 100%;
padding: .5em;
}
Try this:
http://codepen.io/jsanatar/pen/pbpwyz
I have it working here, if you want the gray section to span the entire page, taking out the padding on the table class.
solution2
0 2016-07-15 01:51:48
Try add width to td.
td, th {
width:30%;
}
body { background-color: #ECEAE0; } h1 { text-align: center; color: blue; } h3 { text-align: center; } .bookpictures { margin: auto; display: block; float: right; } .table { background-color: #95E7F0; border-style: ridge; border-color: #2F6CED; border-width: 4.5px; width:100%; } .food { vertical-align: top; width: 70%; margin: auto; display: block; } td, th { width:30%; }
<html> <head> <title>Things I Like</title> <style> td{ vertical-align: top } </style> </head> <body> <h1>BINIYAM ASNAKE</h1> <h3>Favorite Books</h3> <ol><em> <li>Lysistrata by Aristophanes</li> <img class="bookpictures" src= "https://dykiegirl.files.wordpress.com/2015/08/lysistrata.png" width="20%"/> <li>The Millionaire Mind by Thomas J. Stanley</li> <li>The Art of the Deal by Donald J. Trump</li> <li>Oedipus Rex by Sophocles</li> <li>The Catcher in the Rye by JD Salinger <p><img class="bookpictures" src= "http://vignette2.wikia.nocookie.net/catcher-in-the-rye-mike-and-will/images/8/86/Catcher-in-the-rye-2.jpg/revision/latest?cb=20150109020831"width="15%"/></p> </li> </ol></em> <h3>Favorite Fruits</h3> <table class="table"> <tr> <td> Strawberries <p><img class="food" src= "http://cdn-media-2.lifehack.org/wp-content/files/2015/05/02.jpg" width="20%"/></p> </td> <td> Bananas <p><img class = "food" src= "http://www.md-health.com/images/1HT03553/Banana21.jpg"width="50%"/></p> </td> <td> Blueberries <p><img class="food" src= "http://www.blueberrycouncil.org/wp-content/uploads/Basket-of-blueberries.jpg"width="20%"/></p> </td> </tr> <tr> <td> Pineapples <p><img class="food" src= "http://www.lapanday.com/images/jpg/pines/sliced%20pineappleb.jpg"width="20%"/></p> </td> <td> Avocados <p><img class="food" src= "http://www.medicalnewstoday.com/content/images/articles/295/295427/avocado.jpg"width="75%"/></p> </td> </tr> </table> <h3> Sports I Like To Play</h3> <h5>-All Orginal Pictures</h5> <table> <tr> <td> <ul><li>Soccer</li></ul> <img src= https://photos-2.dropbox.com/t/2/AAApYv6cymI83AOK17hx5hTP04XN-Bhn4WTLmyBJiOtKHw/12/583885615/jpeg/32x32/1/_/1/2/IMG_9632.JPG/EO62u9kEGAcgAigC/FN-wfMtkhX2hcCQjaH3JoDGsowBSenaaQm798B0iDec?dl=0&size=2048x1536&size_mode=3 width="45%"/> </td> <td> <ul><li>Hiking</li></ul> <img src= "https://photos-2.dropbox.com/t/2/AAAbRyW-YYHwX8dO7w8SKj60HJ-hrEMZXPns_R4iHUVUOQ/12/583885615/jpeg/32x32/1/_/1/2/IMG_7606.JPG/EO62u9kEGAcgAigC/LKTvxXYyxQYLIs1hM4kgvUBxRyT2f4FEmlr2dQSJ4Ko?dl=0&size=2048x1536&size_mode=3"width="25%"/> </td> </tr> <tr> <td> <ul><li>Volleyball</li></ul> <img src="https://photos-3.dropbox.com/t/2/AAD_za0XYOXIalkeLRO11YmyiUUT573qsw1ZLPO6QWvocw/12/583885615/jpeg/32x32/1/_/1/2/Volleyball.jpg/EO62u9kEGAggAigC/qTg_mqtUX6tYAVbj80G7vpWx0kz36UhRf-_U1Enn28c%2C0evA90YUBklbgPBGFLshizwb5xGwBWMtguCUX6THNVc?dl=0&size=2048x1536&size_mode=3" width="50%"/> </td> <td> <ul><li>Basketball</li></ul> <img src= "https://photos-6.dropbox.com/t/2/AABx2XzBoI3I-l__-ME_JmQHOnn6Vv7vu6vuuKlLiF6CHQ/12/583885615/jpeg/32x32/1/_/1/2/Basketball.jpg/EO62u9kEGBMgAigC/bsjN_0sGYxO1aK8I90n_pHgMBTpBu5m9_F81jdGtQdI%2C9bfhKULb-lU_y1yjELqB5mb_oqZljdCy9CduAl4p3Qs?dl=0&size=2048x1536&size_mode=3" width = 50%"/> </td> </tr> </table> <h3> Classes I'd Like to Take in College</h3> <ul><em> <li>Leading Entrepreneurial Ventures </li> <img src= "http://neatoday.org/wp-content/uploads/2012/09/college-student-in-a-classroom-e1444221948397.jpg"width="25%"/> <li>Mao's China: Revolutionary Leadership and Its Consqequences</li> <li>Philanthropy, Voluntarism, and Nonprofits: Law, Public Policy and Leadership</li> <li>Inequality, Politics, and Public Policy: Class, Race, and Gender</li> <li>Speech and Debate</li> </ul></em> <h3> Places I've Visited</h3> <ul><em> <li>Bangkok, Thailand (including the beautiful islands of Ko Samui, Ko Tao & Ko Pha Ngan)</li> <img src= "https://cdn.kiwicollection.com/media/property/PR007321/xl/007321-01-aerial-island-view-daytime.jpg"width="35%"/> <li>Addis Ababa, Ethiopia</li> <img src= "http://africanarguments.org/wp-content/uploads/2015/08/Addis-Ababa-Bole-e1438697121290.jpeg"width="35%"/> <li>Charlottesville, Virgina</li> <img src= "https://photos-3.dropbox.com/t/2/AAAW1q3ijU18S5eb_p_i4k_rs3D5gSVPzP46HR5eGx2pXw/12/583885615/jpeg/256x256/1/_/1/2/office-page-charlottesville.jpg/EO62u9kEGAMgAigC/4Wb2uANGyY_P22ps8CCxFwegrSXESXB7J7eZ1Y2r5zg?size_mode=3&size=2048x1536"width="30%"/> <li>Silver Springs, Maryland</li> <img src= "http://www.downtownsilverspring.com/system/site_images/photos/000/000/213/original/StreetScape.jpg?1368736499"width="35%"/> <li>Lake Tahoe, California</li> <img src= "https://photos-5.dropbox.com/t/2/AADTSKA_akb1FAE1Y44DmtM3ZV7nxHXxM1fyGIA8AcUqjw/12/583885615/jpeg/32x32/1/_/1/2/Emerald_Bay.jpg/EO62u9kEGAQgAigC/2qtQfYhy1dwqfBVn8UuUVZv0BUqtGvIJYvyU0xNcZgo%2Cr_ng7n16zs5NN9_I-F6DnMCGNgGXxdjJIapIxYIrLM8%2CYl4XRnwyj6JPCRT-K4xbgjL-AUmgJqtXjGLqEyMjb_M?dl=0&size=2048x1536&size_mode=3"width="35%"/> </ul></em> </body> </html>
solution3
0 2016-07-15 02:01:22
you have just missed up your width sizes for avocados and bananas. Change the width of both corresponding tags to get the answer.If you want to have the width of all images to 70% then try changing width of all to 100 % ,this will change your image size to 70% because of your "food" class
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS transition not being applied consistently
Why is my css not being applied?
Why is my CSS class not being applied to the specified element?
Why is only some of my CSS being applied?
Why my external css is not being applied?
Why is my CSS not being applied with HTML in Shopify?
Why is my CSS responsive rule not being applied?
Why is my CSS Sprites not being applied?
Why is my CSS style not being applied?
Why is my External CSS is not being applied properly?
Related Tags