The title explains a-lot of the issue. I am an unable to get the text to overlay the image. I wish to have the text in the centre of image inside the div I've put it in.
CSS:
#charset "UTF-8";
#main-page-content {
max-width:960px;
margin:auto;
max-height: 500px;
position: relative;
}
#bitcoin-price-space {
width: 960px;
padding-top:20px;
height: 40px;
margin:auto;
}
.bitcoin-price-content {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 0px;
right: 100;
width: 100%;
}
HTML (Sorry about how this is formatted):
<div id="bitcoin-price-space">
</div>
<div id="main-page-content">
<table align="center" width="960px" border="0">
<tbody>
<tr>
<div class="bitcoin-price-content"> <td align="center">
<img src="data/design/images/buy-bitcoins.png" width="80%" height="275" align="center" onMouseOver="this.src='data/design/images/buy-bitcoins-hover.png'"
onMouseOut="this.src='data/design/images/buy-bitcoins.png'"alt=""/></td>
<h2 align="right">Test</h2>
</div>
<td background=align="center"><img src="data/design/images/sell-bitcoins.png" width="80%" height="275" align="center" onMouseOver="this.src='data/design/images/sell-bitcoins-hover.png'" onMouseOut="this.src='data/design/images/sell-bitcoins.png'" alt="" id="bitcoin-sell-image"/></td>
</tr>
</tbody>
</table>
</div>
Result of the above code:
No tables, only 1 image the rest is CSS version. The hover effect is also handled by CSS. It isn't exactly what you started with but should give you something to think about.
.bitcoin-transaction
{
width:900px;
padding:0 30px;
}
.bitcoin-transaction>div
{
height:310px; /*Height + Margin*/
width:384px; /*0.8 * 960 / 2 */
margin-left:auto;
margin-right:auto;
margin-top:35px;
border:solid 2px #000;
border-radius: 10px;
box-sizing: border-box;
float:left;
text-align:center;
-webkit-box-shadow: 10px 10px 13px -7px rgba(34,34,34,1);
-moz-box-shadow: 10px 10px 13px -7px rgba(34,34,34,1);
box-shadow: 10px 10px 13px -7px rgba(34,34,34,1);
position:relative;
padding-top:32px;
}
.bitcoin-transaction>div:hover
{
-webkit-box-shadow: 7px 7px 10px -5px rgba(34,34,34,1);
-moz-box-shadow: 7px 7px 10px -5px rgba(34,34,34,1);
box-shadow: 7px 7px 10px -5px rgba(34,34,34,1);
}
.bitcoin-transaction .sell
{
float:left;
background-color:#F00;
}
.bitcoin-transaction .sell:hover
{
background-color:#F33;
}
.bitcoin-transaction .buy
{
float:right;
background-color:#0F0;
}
.bitcoin-transaction .buy:hover
{
background-color:#3F3;
}
.bitcoin-transaction>div:hover:before
{
transform:rotate(15deg);
}
.bitcoin-transaction>div:before /*bitcoin logo*/
{
transform:rotate(30deg);
transition: all 0.5s ease-out;
position:absolute;
top:-32px;
left:160px;
height:64px;
width:64px;
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMEY4RjU4RjU1RTMxMUUzQTQyQkJGQjhCRDQ4MUU2QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMEY4RjU5MDU1RTMxMUUzQTQyQkJGQjhCRDQ4MUU2QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIwRjhGNThENTVFMzExRTNBNDJCQkZCOEJENDgxRTZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIwRjhGNThFNTVFMzExRTNBNDJCQkZCOEJENDgxRTZBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+97FYDgAAI0hJREFUeNrEe2mwJWd53tN9+uzr3de5986+axZJI2lGAiHEDLKBYGxjEicEUziplPmRpFwhJLGDUw6xYxeuAhsb2VUB2WaVsQ1CERIWQpbQCJgZaXbNcme7+3L2fenO875fn1kkgR0QyYXWndvndPf3vcvzPs/7fW194WNr8cN+bNtCo9HSAxbQbLb1vOt68DwP4VAQbbeDoOOg3e6g03H5mYtIOKT/bnXasCxrh+d27rHlN7ABnruGVw/yazELnnzOe/EfwIrrecv89yX+dcqzrJfC4dALTiCwGpLntFr6TF4g/9cxyE80EtJx8n4oV5qoN1s6nqXVEhzHxobJAf4d0PG83o+DN+xHp6MDazSbB/nXexzbegsHsQkeR6yzlAnYsHk4AQd2IEAr8xp+5rY7Kbfjrut0Ond1eA8ZcL1Wq7TanReCQed/RyLhr0bD4cueOqDzho36JzaAeFAm3+60Bzqd9gdDocC/CAUD2z26hL4CB45kMol4PIZYLIpoNAp6lp6LwInF4IbDjCIXzVoN1UIB1VwB5XIJpUIJhWIp3mi2Hmy13QfLpcrvl8vVr0Qj4T9LJuJPdSyXRur8fzSAZX61Wu2I2+n8ejQc+Ag8OyETj4ajGBjox0B/D/p6e5BOZxBPxOFw0hCvMwIYl4D8HY6YG7WZXvU647iMeqWCPI2xvLyCleVlHqvI5vJWtdF8b4NHrVb/Lg3732mIxx2G+08SEc6PO3vJedtqfTgeC38Ebmdc7DE41I+hoWGMjgxjeKgPgWiY8cpP2q6GuqaCWE7SscrJcqKeR9wQT8ocJL5tsUsQw6kxDE+Mo12rqiGWFlewOL+A2dk5FCv1/Uyzbywu1Z/o68v8bjoVf6bV6kiW/XQNIMMX7Gm1W5vi0fCXYtHQ7mazgUxPEls3r8faqUlEMr3QGTaqcOs1XhSELd52gvR+2ESAAhiPOgG2VTcGEEPRSBIcXpufMSUkuwL8/sjoKEam1qNTqeLS5cu48MormJ2fF9B7+8LiyttLpcofjYwMfJhYQRBs/l8ZIPAL9/f8yPwWMJLD4uCa9Hq73X5/Jh1/MhIKjNJ52LJlA/YfuBOj69bQix7a9QYC4u1QCBYnbdmcfIiTdnxbt1lROGn5LVXCdduKFZbl6QH9bevkFVh5ym0xPRpNOMSL3jVrMDU2qpBbq5YQ4qTLldq+XL54MBgMPW3bTl4urdSaWh16M3GOxzYV5MeNAEFtLXPt9u/19SR/XTyWiCWw787bMbp+El6jgUq2ClYdhINBk9cEOtAYEO96th/fLZmNWMFMlE8P2kEDJ8QOrQYetFp4nkzeZgQ4vC8rh0ZGA95qjYYI4fYDd2N0dARHjxxlRbGQLVT2Lywun0qmUr+USsQfs6w3KAVk8s1Wk0Nqf5qe/zedTgtjwyN40733IpxKoF1gHnMAoVAYAQl9LW28rczO4eTtgMn5WgMt5nNFQK5R11OWjwkWv+MEbHozhGA0xmyJ8jZBQgY/o0VsmY1tuIfnddCo8Xrix8jEJA4OjeLIiy/ilVfOivFjSyvFr/NLv2JZgc8ao/+YBhAviPUb9Fi73fxSMhl9r4TdbTt2Ys/tezmpNlrlAoJhyWv/NhyculPyXaKmXEV+JYd8No9apcYobujhEvEj0SCCNFaLExRjOE4IIR5OMAwnFEWCVaOnfwCRviF+yGfUKyZ1wChwhVa00SjXEe5J4+53vgsZOuXoiy/QEQHMLeb/V7UZmEolYx+z/oFQ+KEGCHJSNXqtXK1+OZ2O/aJYfx8nvmXPHgUoyd1grFvWAsrQEIro77qg9vwi8qtZlMo1RlBba7aUSFtCnxETdIOaoy1JLRqBwIqmJVjT5i0bqFerqJcriOXzSAxOIN4zBCtE45WymlFBpkGQ1UKdTItsOfg2RDMpvPDUtxSzrs0V/2uL7DFgBz4m6dPpXK/crwLBN/X4N7lxWMroXBRLld+Jx6P/Smjo3l07sH3fHTp5mbRFgqOhLteQaiKVhFep4+qp85g+e5Fez8H12WGTZTCXy2N1ZYXkpohKVapDiBVAzhf0fK5QRJUGDwYjLINR5Q5RpkOjVER+YRZevcTJyKRTmh5OmM8WBzD1NCSkGm3ajBQjcmlmhrjRwWquej8tPt+Tih9pd0yZfNVUmaWu+5paF2D4lsrV/bF49CMu83/Hlk24TSbPCSrARfyHcsBat4j4uYvXcPHkeWQZ7sl0DNF4nNqhxQiqYW5uDtv2HcTozn3CnFBauIbnn/givVzEXQ/+PMZ43hUgXZnHie8+wXQIqgEcEirXDiMepEtaJSyeP4Zk7xh6NmwB0lHeq2LG0WbpY0UBo2Xinvuxl0Z+4VvfwshAB1euZT9D9vh3fZnYxUq1odXsFoxrMR+vHxKq9BYnnwk4gSc8huWG9VPYd/BBE+YSS5LvAmxCXBgJHg104fvHcez5I7yugjDJj9hUNEGT96xzYisrWfQOT2J880GM73gQU1t2E7WLmJsvoofhPbrxbTz/ANas38EIqajRGhxLpdKAML3e/j6k+kaRyvShXpjD6rmjQr0ZdSPGGVJ5JBJkjK0atj54CNv27mEJTGCwN4iLlxeertbbwRhxRwBVynT3sC3c+J/NCWquet7XWNKS/QN9uPehQ3wAS5qoKanl9KAwOBUxJDo/OHwUZxj2Nj8LhhxldmJIMaj8SD5KClRKBf61wOsXyPOzVJhEc7lVucjzi8S2RZSLOYJkyxys+4IPMglbqkMkhszIGIbWbYTdqSP74nfQIh4gPCySkAaQ8htUviCGuPsd78TY1AQGeuMkl97ElZmlRx1yhlBQSuuNw3Z4Qg/OOMQJuF7nfRQt91k0xj377wWSxIhSxXhekoZlUOiqS8Fy9PAxLC5mkUjGYYDG1HfWLrREOl+vQu7r1pnXExeSkuIE4R29ZJjBvl6TdhROICbYmR5k1m9QY2dfeBqtIo0aHDC8QwBZyAhTAMkE7nrgzUzHJMaGYljN1t51dTb3DkcqT8vcX+l8mx6SQwhIuVZjZXIe7lBcrNu8Db3bWe6KkufC6W2TbwHh8h0c/8FxLC6tarmSAiCIW2EKFItlFBjeEvZylEpl6pu2r9xsrRIeH1Zj9BDojdHkvG3OVxn+TEG9X4QKUkuq4g5zPuRoGlo0RHpqikWH2PPiM2hXVzmuXpOaYkjxRjaL9OYNuO2u26k+ySDTNuYXc5+r1Ns21aqyXDmckCC4Nj9sie73O8FQUijnnv3307J8qFUxKO+2TY4FPUwffQnXri3QyHHFeTUexU0+X9CGhFBmKXkdcvoGAYq4KBT6hgEYEZWKx3yHeqE7aKk883OsCKwKnWYdNic8TtKT6e+n86MsfQFzDzrCplHS4+PITk8jf/Qw+u89yHHSYM2SskoFRRKuTTu34ezLp/icFi5cKfcurhTfPz6c/myd+adG+OxHxzX4JG+DoeBlapLJPQfux66Hfg5YWVJ+rzMUycmyU7x4FqeP/EAhQbwnk1lZWkB8YBJ7D72P5arOiGr5PN7zla6L/sFBxNO9OvgWvb8wd00V8OCwf553apIpTp8/Q45f4b2byK0uYHXhimbftp27MD45zoiLKPXV8ZBSt0ol5KcvIzyxFqntrFSsLCwvHBwd57JqZZI4/dSzeO7p57C4UkC57l3dMDU6KZki6eZI+Isl6KH3hKKRyVRPL7bfcbfh7LYJTUV81l+3lMcMH5ZI9WgO1umdakVCuYkEo2Vw0x3+g29iHSrpTF661bKWzVAkgonb7zbf6Z7nH2GG+dY3HzJeFtyolDF/dRovHX4az5DgbLttO7bt2KYCR8JYjBbkNQkatzB9gdS8B+FRirJaCTpoYaasQpt2bsH5s+cVmJenixPFcv19k6PpL1YpmByj+DoEwOC/lzCd2LQNzsAEUFgyIS9eDKguxdJF3qTRRowAI55MpELML9b8REq9TEQydFXUW9sovVv4lwKpp+lh5bM+FnqK8hL+roTt8vyN8yKFWfNHtt6Bl7/5ZTz52CNq3B07tmKgP2W6URxehKlYZ4qULp5DWOS4uLfRMWMnLjnDQ1i7aQPmZxaQilM45YofGeyNf1HElx0Ni9rCWDAUPhCJJ7B24xZjfZVlnskneqy1soDs3CxCVIGq1OhJXo4Q634fkVoal61Cnvyf4khim5Fkx5ImF28Bf05eQE2MSKIDljck0rAHxniMaG7rMy3DRt3cCpCbxa5Dv4y7D/wMjn7v+9oYEUFkxteBVKxYTw+fXUJl9qrpNsk9lO7ZCuATBM1UOsXoiUgfYXeuUN8kMtnpmA7v+yQKhkfH0TdG71cL/sXedYDKz8/R+y1EKVSgBNfW70hhGBgaIe0s4PHP/QHyrAJV4kCEk3/nP/0g+sbXkiIXbzCv3hEceepv8K2vf5P5T9rLCYugSmYGMLxmLW67817YfQNwBX8CRmO4RGe7uoD7Dr0HZ058H+fPnMXoYC+vdcwAXOFCFFPRKKqkzbG+jOlDdCtMqYrM4BBGx0awQp0i4y5Wau/v743+F1voasB2fl7ArG+QpCKeNDq+20Agw/KYp4WFBQ40ogGtodc9eCbKNOihdVMRG71xBwFS1MNPfw/nTx6DFcu8SmUlcO3SBbzwzGksTJ9CefECVi6fxMt//xge//NP4lP/7d8yT8+rEa6PQSoHvUvayFDegZmrV0msiBtSQSRS/eZoiFxBIrCxwrJIZWmwBKoTJIpHRkc0rRIMOuqR97ZZpRyGWSoUDu7z+EGmt+8mmWDyi0nOsLpG6VlBiCliuje+EewbBCaRSCLmfz48Mk4F2FJRw6e/ivC0iB0prN9IZN+xA+smhhmtNCIprTDGrz32DTz2+c/gA//xd4kNQZXOmjmWSjSkM/0KZg1GmcdnSPgrdvBzzoMTtDnWAiJD0ukKmAiRktVqoL+vB0mmXonAvZxrbSQYTgl3vYM3CURicfQO0Oqdpu9Z+MTCQyWX1QkLV+gSCMt0S3xOZ/lgb+sRj3OSiYTyeLxabPkMUOh7goPJMHeT8SgypN3lYhV7992FC5dmUZ+fQZRhi3b7luukRyiTclnX202iOP8W/WKTqwjVjRCTWkLV603TlBGhJABNFZthSezpzShBE15Qrbfusxllu4S/x5JJgkTahIvtly7h1yQkIkkD0uOTiYsRpEXFB9NuelBza1fnRmqYCgrrH+iwsspYrAyZfiI3UbzFcZQKOb2fk0heD239uqaDQ+m8oEY1q0Ed01BVOLY0YmKMb0+0iEhu5ecwEUCNEOAzejJpvVamSDK0h+LI2ipom+DkLUFmsbh86vCgNdvVisrOeCKq1hW0F8/asrKjEREwRrHMYashzOx/6Pw5GemNFqn8KsSbLH9fOnsRf//sczj+8knccd9BBPsH4DXqvpRg5aASdLOzOH3sBYyPURlyoqI8A1LFgrYSshYn2aAGqYmarFThr6H5zLCj/YsEr5NxS6FoNtvbGUH2pLS/YomE5jtNZy4UI3AyrUYFAU9aWCFRTqasyH09gxFSS6WSmPVC+Clia1q8fgiEUSoWcPYMK2HyGI2wTLwKUjPU6MEY3vOh/4A9D/wMPPIEZZJSq6U0hgbxxFc+ifzyDO7e+1btIdZIv1stUm56XBoeLkNduEyLwN4SINdU9jFNM8j0HbsG4DXDDsc4KIMWdmbC17ue22p8poAgrd95orc99bhjBa4vi5lx+gbgZyJ0JDdfT/V5FC479t6FD3w4hP7+hFkmY+VJ9QxgYv0WOP3U+NkFBTgVPky9VjCMb3zqo3j8q9/A/v0b1CglerjZ7KgjVONr9hGDHLPmqK30TrcF1MU0S9ckDZZIUHgJqQLxIEPDcQL+YA0J0dlKYEmsvjaCTdvUt2p3DcHmKGQAYaKxSOsuU7vl2sIyNu69Gxv3v91vk/t5Lr8rJbhLM34E+iWMUdcsFzFLHiIEL59dZrRNKCYErBt4rYu/QrLUJbZGBZr+got0BAxUa5fb8psibsuNOwyHjuev7erkhT/rmYCKDc80SPxDPg+YKFED8cbU/rYfBWJpTymtp8frdqWlssiK0c1s07Kus05dLr/ZYNQDcabAr338D3Hl5Rfx5Of/GCdPnEAsvJe44KlHXX84ikEyJvm74ws47+YO4I1HKTx4Xkiix/J8fk4O66/ctA2L8ju5HVmwcDumWSHI65oegjYVGKrS0fUXTvTuEgXStZXu72sW7KQhQQPUlpdRXV1GhUeZarKWXVVvWwPjpMRDmqcKXlLnJQ2pDCd33Ytf/a1PI94/hZePn0CZuOHyubJ2II6SiiBY0HZdP++tm9LQe1VGmqUnp9NxLYfKSsmETL5benQRsGWc7Rlw8SyfICnam7RxWHoExISKSql0YmSO0SDCrCiWLufcagC7bwzPfvEz+PIjX8bkVIbXBVWMifeSFDIDJFG77jyA9ftIiUsFoxQZNWJ0LE7DHprAu3/5w3jkk/8ZC0srLFRjpMT8XNt5Jg2ksSJlGQFZj2ybyDJLTow7YwxX08VuixosurKbg1pc2JJ63jLhLQaxde3fRZAXSV7LgGWy4mGZeEAqgxCebrOU8GoRoLoI/tr671BCl1EuVBEJ9pCYJNRTIq2LKzOYPv0SnvnGY3jw3T+Hd33g12BxDF6XDPH+3soc4pPrML5hJ6YvHKMQ6/NJq+0TMtMVCkhFE6hvGV7SJSZaLaRqdTRl6mSCWBKAkIUIbSiKhPUMcIiWDqXI1npTiPN3lGxRrSo3s+wbZUYGKBYOuEqgvG6yvW4ZbFP3RzA2ZmHzlq0YHx/VLSyVck2rR7lcxpXLl/DkX/01tmzdiU3kBF5XIquDBSccjIyvw4WXvwvR9CFGY8cydJm0TNvxA+IU27qRCnIQEKVXKd7vaHZZZYfhcilAq5WLFBsSBVIfWj54cEDBeAwRCWfX5JblNhVlhXNfb5Vb/vE6GyheC4QmjUKMoFQ6SQ/26z6ferpOtlrXbnCMhl5enMfZk0dpgEP+PqIbwkiwKp5Ka5irR23L71oxkmWcjGKJVM7WNHG7+4NInauMTol42ohRbOdkyfGU5Gq5VEJNjKBkxwcN8mhLev/MbV2QlBaYACLMZiiNoy7gdGfd1Qy2/SOpcFdTiCEl/4XVxanmREOkqSzj8bgvprzXZpI0cdrGk1q/uo5WYdjSbTnxaEwjWNLHk3GKf8hqc/m8grn4OBh0pm2WgpfkPpICudWsyRvPvTEx6ZzGEnwgc5GW65ZE1z+usyw/azQfzaYns5PrhxjBc01o6qAVxQ0wSVd4duaarg3s2HuPETM3h5FnSnQ+t6IOERFkdELH0GF6XfYjWdJBJpX23LYupIr6KjG9VrNZxTS5JBIOHicI2keJ8NVOpx3Lrq5g9PpDfCBkSIYoTOqyVY1GCIrHOABP8fSmMidWJbjVVlcxu7CMK9MXMTJ5m1lUubUOMjIbyOUauiYYi0Z0gUJ2mghFvnrpMuYWFvCmd/wzjG7frZT4VhohHeom5q5Ok55HlBLrNhuvc30hJk51SSrJ6K+ZyiXklobK5nPIFUq6LiCZFIs4LzpkbY1ms/kcmdHBovSvhUPDJxFChigjA8xVhznXylGp0ZK6A8Sy/Y0MnuKD5NYSI2g5V8KVq9dIwiz0D435Hrz5x9W9BNJSW1xeYSi6fsoQvpwQRjfuwn3v/hVMkS2CBtHw7eKL1DnyhPL0GVx65TjWT40rBJnUNKU6GAoglaQB6mVNByl2ItElHRYXl2joJmoNEqhgoJ6IhQ87ttZY71F64eDiwjwa8wsID1CeSlXQcmiUVCiZRonkRcmOY2l5FJIg2qjFm168cA7x4a3Y+ua3Y11+RStGLJWhglu5wVflbqvz2P+Wt2P3nfeZzq1yCooUlq1oLAmrp9dEFa9zXzV5e4jx2Wngc3/yexTGbQwO9GmTRFLI0m1FNSrFYUQSETQrNbQ9Q+kjvHeV0XZ1Zk5vJfuzUunI47FosOHI2Chvv8Ly8rAsYV++fBmbR4d8FuaPulhEmOBUZTVoViokOUltjAr3t/k9aY0LKdm2oQ+JoXFtdCg01CqvUwWbHGASkcFB06hQBupHnHhydekmsuYvgkgaDaxDu7yEz/6Pj2Dm4hns27cXNsM+YKSp7kEQATYy2K/3FeD3fAogK0tzC+c14upaBoF0IvwFwShR/UTNUL5SqT5GRH7HpctXsHnnTq0GLd0a41IO83CjiJGi5i+eR6AVNptCZAcc/1OTaGEtjkkTo1ai4qv6DQ9Lq4iCtA+eyuqY77Yvsq6fv74916SDtoyEd9hE804Vp777OB7/8z9GnkRo9+6d1ALEJIZ1nUaTXSH1ehUT42N0TpyKvmEqjPQJeR+PTrt8bVZLZrGk368N9iX+VhojIofVcnzw7/OidywSgK5cmCbv3onm0pLW+bZUAkZHuK8HETKv2soqopme643jdquOVKoX6f5R3SVidRdUuh0iWssq5VXYaJmkvIX2H62bztvG0+mM8o8a83/x3BmC4nmcP3UMl0/+gM9I4va9e1jigog4pktUJ0iXSk1eFsfYmiHtIEt10jIrjmO0zpw7j6uz82b9kuE/NBD/HO/R0oURLfe0DGvnd0hEXmZc7Tpx8jjGJieYlxFatq7b19oiI4tlJIdHKU/LqJM3hJgWASknrN/JegdHv/1X2nCUawRpZblNSlshX8VbDhEbbt+vPcf83DU89vAfEONcHHrXIazbu19XovKzV/HVP/wdzr/CrzVQKWTRZERJSu3YuR2pRBwh2V4TMCkjkSPLcy2Of+26CQRZ/+sVs+anTS1p4TdaeOXitGz1Qb5YZ8WxMNAb+3i90dZy6HTxSXZYNyz8Bu36NYmCU8dfxq577lblZkq2SzJUJe20kV4zidXz59DkTcMkHMLqMqkoStKuXl5FmaQpmy3SEA3dDnP+XBXbdm7D+v2HOPCaaoHvfPNZLBKTdt++FevvkfNVVMslHHnuRWTSFqYmpzC1ZSPCJGHUgxyfTf1vdK+Ao3B/Ma7sY9q+bSMGJ8bQqTRZBUL+blRpo/Vi7swZXLh8VcdC/zFSYn8RiwSvlSRNbt4kJewoGo1+vVgqXw5HQlOvnD2LDRvWK+UUlqhwT7PWywTEZIpGWIMcAVOsHYxGkSD52LhpE7ZsIUkplLFCA8hW+tVsjuh+SlvhssNLBJbQ1LXr+9GTWaF3U6Z1zuoiynJq3RB6qDvGRobQy/IrJazJMNdNlCLFYbpOMsEqleJGjnHdjq0KfIGg6WoJ1bU5njaZ7ZETJ5RcFYoN7Y+ODqZ+OxxybuFu18FIsICR8M+Fj4soefml47r/R3Zjdmm8AIekgBNNIjMxqSpS9vPKmBKxCHl8RPf49PX2ciJpJOMJ3SFuWzeksXRmdIeG3d1tftO2tYCjwKWHEyZRipGzRxmBDnFWwJf3soO6ILt23XpsufMO9aPbkeYMAc8j6Mq2ulAcx469xNI3SwpQR47e7+9NfGGoP/6K0HiJKNkUcouCkWZHMhF/nhN9RML+3LlzuHjiJEK9/dfXBOCvAUirPBRPoYeDkKaI/C1G0KWxhuz2CijPDxijGnHCAQozDNCgcl5YXUC30AYV9XWvIBmnqMVwJK4TlzyO0ojBUIwgGaXjbeZ5Axu3bse2u0mVXbJSWSYUZkDy1eJhpQZw5fQZnDh9SonPUlYos93eMNH3Id366zdw5XBu3jRlZKwnRviX+ULxrkA0uvnw4cM6gFGGWo082rVuiBlZgIgmM3A27UBlcQYrxI5yy+waFQIl95amp4ibgG6oqmmtlxBNMfRt19Rur1PT9Qhhc70SOSRDqVQPy2pcwz0MecGihiwVYigax/o7DmBo7aS/hslCHE5oqRZGag8MI3vpAp4//BzpSxGruQpoL9y2eeBnk4kQCWvTMNku1fj8b655TcNTvEdwGStX6jMiLMSDD73zXehZM4Ym9YJnmz3/0nygHxFIpHUPzwo5wgqBUJbuwxwos5KhSt7PqGgTQzrSrJTXaPiQFuu2TC5JtiifSZ5LSojKyLB0JRMpVtSoAl67uKQ01xnaiNHb9iKUJtmpLpnNEF0iJejQP4zW6gL5wp/gEpkp8Qxzq8Ca0fRv79g49BuygVpL5M3K5Bff0nt9UcPyaalRSuESw+dKvdl6t3hvfnYG69avQ3h4CIF6UzcrygqO3V3+YmjGSFWTTBfpyDaKWd3mEmDIR6OypE412agy2F2KkLC+V9DXN8CyZpO4lBkdDUSJN319g/pmiSB+q8x71AoI9wyhf/dbMbjjQQQiSdkLbkSWSF7dP8QjvQlNt4ynv/CnmD57SvcmLeZkzTJ89LbNw+/THalt9zVNGn+7vPW6RywefUnAkBffLyg8Q5EzNkEjrJmCRUahUkEoYcBXfM0OHHouMThOokTccCIa7m6zpvuC40yltCzBkTGGBFx5LsoUEb4h2j/Ow5YUobeloRofHkfPtv3o2/kAtciUcHJTSbRjHTJrf/LswBRL61V8+5FPYPr4MZW9SznRKfbinq2j+1j26vLClzjXtqxbjh+5WVocG4uGfyubL4b55Y96Xg5PPvoo9j3wEMa37wFkyVryV/YI63q8dJHa2vaKZChK+teQFkujJYcGvyvvBbkiUaVLo31s0y+QZfdAJKXgF6QgCmf6dJN0MDlkJgpCuMfJd/yGg+2HvNBkpLE6+yKe+8qncOXsadnpppOnY2bu3D5yIJUM56v11mt2iP6jtst7/rIXNft/Yu7OFArFP+owlJ79+qPYRsKz+2d/id+SDU5Zs57QpnfKdbNJSTdTCvAHERseQ0zLTFvbU9IMMTvlbWM4WxZRgrAEPGXXiG7NoZGaqyYYBRwEfV37Rsc61KepcOrZP8PxZ76K+aszpLlE/IJgWPDkrq0j96XiobzuBvtJX5kRkpROJj5dqzfy2Xz+L9Pk5Ce/9zSW81nseuD9GBw5wIHm+eSruo1Oem9GjvlGqTZv1QXBoCEzEsqBwHXmRqppjNf9rr8+SR5+g7ZEJWUjWL12BMf/7lFMUyNIvufKTa310Wj48NrxzFtZ56vC9QOO/ca8MyR6IZVMfD4cCp5YXs3/ZbTZ2ume/gGys9NYt/sQth94iJgxwhHIlpSSWWSxOjc6sl1s6fi9xG7/rNs9tgI3SWDbf4FKIqRtjBSXnSZJluKruHDk2zh9+AmWxQXatoXlbAMlBl46HXt4ciT9r+WOdYa9bqF5I1+aEiCJRiIn1owN37a4tPqni4vLH0qRZp7OPYKF889jYvNdpLLbqAp7zSZLWWkWr7b9bbO2P1ldYrvJAJa/3Ob3INUIwuYImgjEFVPKS1dx6dQRXH7pBcxfuaA9Q1lWz8oW5IDVmBrv+WAmFfl8u2XePwg6gZ/CW2Py+ixZn3D2yTUjv0rW9xfZbOHfFUudf1IqncTypXOYZgUYmtyIvsEBDAwOope/mT8GuLXpIdvbPdxgVNJaD5pq4nRTwtZ3CHNXySsW5pBbmsXsuRM6cZmc1HNhd3KLVDr+aWr7/5mMB68IyfF8KfxTe2/Q8reviQcy6dR3ejOZ76xkcweXllZ/s1iuHihW61hZvKalTTZdZPoH0MN6n8qkEU/KPqIY2aF5J8hSNW6bHeXSqyMfKBcLJDAFFLKrWJ2/xskvqApt8jtFAmyuZNq1lO9fGhlMfbwnGT7ebFEV1ts//fcGX/0jRpBaOjjQ+2Qmk3pycTn/tmw2/6FisfoL0UjIFnASeqxSVni+cvyI9v9s7RSZVSRZG2xRsNRZwhoEwSalq5wT8JX+QqHY0erqOFYllY59JRmPPEy2+YI0RmRHSLvjqc7/f/7ucPeRoh6FYg70Z56iLH5qJVuaqlQq76nmKg9RYO2n8ouFVBAFfBXob7TyFzR0jUG3yXu62bpWl8NUO066HAyHn+9Nhf62LxN7NB4JLguryxdrCPF3wLZ+kim8cW+PS+7p1hTSYLK7y1R1n6B0/kSj3uxn+dzfarf31iut7fTsOCcsLyol5E17WU2XIJB3rWiRMul41nHCs+lM6BQ1CL0c+n4kHMh2CJzy/qDxuPuGvT3+fwQYAAGTIyw1V6kAAAAAAElFTkSuQmCC");
}
<div id="main-page-content">
<div class="bitcoin-transaction">
<div class="sell">
<h2>Sell Bitcoins</h2>
<h3>Test</h3>
</div>
<div class="buy">
<h2>Buy Bitcoins</h2>
<h3>Test</h3>
</div>
</div>
</div>
Insert your h2 inside the <td> element then set position:relative to your <td> element.
Maybe you wanted something like this :
#charset "UTF-8";
#main-page-content {
max-width:960px;
margin:auto;
max-height: 500px;
position: relative;
}
#bitcoin-price-space {
width: 960px;
padding-top:20px;
height: 40px;
margin:auto;
}
.bitcoin-price-content {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 0px;
width: 100%;
color:#fff;
z-index: 2;
color:#fff;
text-align: center;
}
td {
position:relative;
}
td img {
margin: 0 auto;
display: block;
}
<div id="bitcoin-price-space">
</div>
<div id="main-page-content">
<table align="center" width="960px" border="0">
<tbody>
<tr>
<div class="bitcoin-price-content"> <td align="center">
<h2 align="right">Test</h2>
<img src="http://dummyimage.com/200x200/000/fff" width="80%" height="275" align="center" alt=""/>
</td>
<td background=align="center">
<h2 align="right">Another Test</h2>
<img src="http://dummyimage.com/200x200/000/fff" width="80%" height="275" align="center" alt="" id="bitcoin-sell-image"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Wrap your H2 in an absolute positioned div, don't try to make your H2 absolute. You'll need to tweak the padding based off the actual size of your image.
CSS
#main-page-content {
max-width:960px;
margin:auto;
max-height: 500px;
position: relative;
}
#bitcoin-price-space {
width: 960px;
padding-top:20px;
height: 40px;
margin:auto;
}
.bitcoin-price-content {
position: relative;
width: 100%; /* for IE 6 */
}
.bitcoin-text {
position: absolute;
padding: 80px 60px;
}
HTML
<div id="bitcoin-price-space"></div>
<div id="main-page-content">
<table align="center" width="960px" border="1">
<tbody>
<tr>
<td align="center"><div class="bitcoin-text"><h2 align="right">Test</h2></div>
<img src="data/design/images/buy-bitcoins.png" width="80%" height="275" align="center" onMouseOver="this.src='data/design/images/buy-bitcoins-hover.png'" onMouseOut="this.src='data/design/images/buy-bitcoins.png'" alt=""/></td>
<td background=align="center"><img src="data/design/images/sell-bitcoins.png" width="80%" height="275" align="center" onMouseOver="this.src='data/design/images/sell-bitcoins-hover.png'" onMouseOut="this.src='data/design/images/sell-bitcoins.png'" alt="" id="bitcoin-sell-image"/></td>
</tr>
</tbody>
</table>
</div>
Although your better alternative is to use the background image of the td...
CSS
#main-page-content {
max-width:960px;
margin:auto;
max-height: 500px;
position: relative;
}
#bitcoin-price-space {
width: 960px;
padding-top:20px;
height: 40px;
margin:auto;
}
.bitcoin-price-content {
position: relative;
width: 100%; /* for IE 6 */
}
HTML
<div id="bitcoin-price-space"></div>
<div id="main-page-content">
<table align="center" width="960px" border="1">
<tbody>
<tr>
<td align="center" style="background-image:url('data/design/images/buy-bitcoins.png')" onmouseover="this.style.backgroundImage='url(data/design/images/buy-bitcoins-hover.png)';" onmouseover="this.style.backgroundImage='url(data/design/images/buy-bitcoins.png)';">Test</td>
<td align="center" style="background-image:url('data/design/images/sell-bitcoins.png')" onmouseover="this.style.backgroundImage='url(data/design/images/sell-bitcoins-hover.png)';" onmouseover="this.style.backgroundImage='url(data/design/images/sell-bitcoins.png)';">Test</td>
</tr>
</tbody>
</table>
</div>
Related
I'm trying to reproduce this for a Newsletter, with the text and images centred.
This is what I have so far
I was trying to add the border-collapse: collapse; property and also to add border left and right but I'm stacked. If you have any suggestions how to create the vertical lines and cantered the text and images I would deeply appreciate any help.
<table class="outer-table-2">
<tr>
<td class="three-column">
<div class="section">
<table width="100%">
<tr>
<td class="inner-td">
<table class="content">
<tr>
<td class="text">
<p>01628531300</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="section">
<table width="100%">
<tr>
<td class="inner-td">
<table class="content">
<tr>
<td>
<div id="callout">
<ul class="social">
<li><img src="facebook.png"></li>
<li><img src="twitter.png"></li>
<li><img src="linkedin.png"></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="section">
<table width="100%">
<tr>
<td class="inner-td">
<table class="content">
<tr>
<td class="text">
<p>www.cdvi.co.uk<p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<style>
.outer-table-2 {
width: 100%;
max-width: 670px;
margin: 12px auto;
border: 3px solid #00467f;
}
.three-column {
}
.three-column .section {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
background-color: #FFFFf;
}
.three-column .social {
width: 100%;
height: 10px;
margin: 0 0 5px 0;
}
.outer-table-2 p {
margin:10px 10px 10px 40px;
color: #00467f;
font-size: 12px;
font-weight: 1000 !important;
line-height: 10px;
}
.middle-table {
margin: auto;
padding-top: 10px;
}
.middle-table img{
width: 120px;
height: 80px;
}
</style>
I think you are massively over-complicating this. You only need one table to recreate a layout similar to your image.
table {
width: 100%;
border-collapse: collapse;
}
tr {
height: 60px;
}
td {
text-align: center;
}
.b-t {
border-top: 5px solid darkblue;
}
.b-l {
border-left: 5px solid darkblue;
}
.b-r {
border-right: 5px solid darkblue;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
<table>
<tr>
<td class="b-t b-r">01628531300</td>
<td class="b-t">
<ul class="social">
<li><img src="facebook.png"></li>
<li><img src="twitter.png"></li>
<li><img src="linkedin.png"></li>
</ul>
</td>
<td class="b-t b-l">
www.cdvi.co.uk
</td>
</tr>
</table>
I have a page which has other sub-tables inside one big table that divides the whole page into 2 parts. My question is how can I change position of all elements inside td tags in order to look it nice? The result I have now is here:
Current result with no position formatting
I want it to look like like this:
The way it's supposed to look
I've tried to do it with CSS formatting using relative position feature like this
.leftSide
{
position: relative;
bottom:250px;
}
And it works so well, but when I zoom in- zoom out this page in the browser it becomes a one big mess(elements by default in the middle of td tag, but then I do it, elements are out of the table). How can I avoid it?
My whole code below:
.splitTable {
width: 100%;
height: 100%;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
border-collapse: collapse;
width: 30%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
position: relative;
bottom: 250px;
}
.rightSide {
position: relative;
bottom: 250px;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest" width="25%">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>
Hope, this helps :)
.splitTable {
width: 100%;
height: 100vh;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
position: relative;
width: 50%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
margin-top:30px;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
display: flex;
flex-direction:flex-end;
position: absolute;
top: 20px;
width:90%;
left:50%;
transform:translateX(-50%);
}
.leftSide>* {
flex: 1;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
margin: 5px;
border-collapse: collapse;
}
.rightSide {
position: absolute;
top: 20px;
left:50%;
transform:translateX(-50%);
width:90%;
}
.addButton {
float:right;
margin-right:5%;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>
I have the following tooltip:
#left_div {
max-height:170px;
overflow-x:hidden;
overflow-y:scroll;
}
a.tditems_tooltip {
position: relative;
display: inline-block;
text-decoration:none;
}
a.tditems_tooltip span {
position: absolute;
max-width:400px;
color:#FFFFFF;
line-height:16px;
padding:0;
background:url('/layouts/background.gif');
border: 1px solid #CFB57C;
text-align: center;
display: none;
text-decoration:none;
font-size: 12px;
box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 0%;
margin-left: 150px;
max-width:800px;
text-decoration:none;
}
a:hover.tditems_tooltip span {
display: inline-block;
bottom: 100%;
left: 0%;
margin-left: -3px;
z-index: 1000;
text-decoration:none;
}
<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">
<tr>
<td width="50%">
<div id="left_div">
</br>
</br>
</br>
</br>
<a class="tditems_tooltip">
<font color="red">TRIGGER</font>
<span>
<table border="0" cellspacing="0" cellpadding="1" width="300">
<tr bgcolor="green">
<td>CONTENT OF TOOLTIP</td>
</tr>
</table>
</span>
</a>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
</td>
<td width="50%">INSIGNIFICANT CONTENT</td>
</tr>
</table>
And so far It is working almost perfectly to what I intend to... Except for one thing: The tooltip (span) doesn't show on the top of all other elements of the page, instead shows behind it. Checkout the snippet above.
UPDATE:
When I remove from the CSS the overflow-x and overflow-y from the td it shows the way intended, but I still need to specify a max-height to that td...
Any ideas?
I suggest to take it off the element <table> and instead put a <div> that wrap everything <div style="display:table"> more over if you want it to be at the top of the table margin:8px is like you wrote:
margin-top:8px
margin-bottom:8px
margin-left:8px
margin-right:8px
So I guess it's better you'll put margin-top:0;
Another option to put an element at the top is
position:relative;
top:100%
First I wanted to thank all who came here and tried to help me! So I found the solution and I'm posting the whole snippet below.
Note that the changes were only in the CSS:
a.tditems_tooltip span > table {
position: fixed;
transform: translateY(-100%);
}
#left_div {
max-height:170px;
overflow-x:hidden;
overflow-y:scroll;
}
a.tditems_tooltip {
position: relative;
display: inline-block;
text-decoration:none;
}
a.tditems_tooltip span {
position: absolute;
max-width:400px;
color:#FFFFFF;
line-height:16px;
padding:0;
background:url('/layouts/background.gif');
border: 1px solid #CFB57C;
text-align: center;
display: none;
text-decoration:none;
font-size: 12px;
box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 0%;
margin-left: 150px;
max-width:800px;
text-decoration:none;
}
a:hover.tditems_tooltip span {
display: inline-block;
bottom: 100%;
left: 0%;
margin-left: -3px;
z-index: 1000;
text-decoration:none;
}
a.tditems_tooltip span > table {
position: fixed;
transform: translateY(-100%);
}
<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">
<tr>
<td width="50%">
<div id="left_div">
</br>
</br>
</br>
</br>
<a class="tditems_tooltip">
<font color="red">TRIGGER</font>
<span>
<table border="0" cellspacing="0" cellpadding="1" width="300">
<tr bgcolor="green">
<td>CONTENT OF TOOLTIP</td>
</tr>
</table>
</span>
</a>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
</td>
<td width="50%">INSIGNIFICANT CONTENT</td>
</tr>
</table>
Here is the result I need to achieve:
Here is what I have thus far:
As you can see, there are several updates to be made.
My questions are:
1./ How do I get the text next to the avatar to line up 10px to the right of the avatar. Currently its being thrown below the avatar.
2./ Once I align up the text next to the avatar, how do I then line up my text that sits at the very right? I believe I can create a div and float right
I'm only a few days into CSS so I'm still a newbie so please any details would be phenomenial
Here is my HTML:
<div class="page">
<table class="reviewsouter" cellspacing="0" cellpadding="0">
<tr>
<td class="reviewleft">
<div id="reviews">
<table cellpadding="0" cellspacing="0">
<tr class="reviewuserinfo">
<td>
<div>test</div>
<img class="avatar" src="/avatar/35274"/>
</td>
</tr>
<tr class="reviewuserdata">
<td></td>
</tr>
</table>
</div>
</td>
<td class="reviewright"></td>
</tr>
</table>
</div>
And Here is my CSS:
#CHARSET "UTF-8";
.page {
position: relative;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
box-sizing: border-box;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
table {
border:0px;
width:100%
}
table.reviewsouter .reviewleft{
width:800px
}
table.reviewsouter .reviewright{
width:400px
}
#reviewspotlight {
position: relative;
background-color:#000000;
height:111px;
z-index:19997;
font-family: DinWebCond, Sans-serif;
color:#ffffff;
}
#reviews {
position: relative;
background-color:#ffffff;
color:#000000;
border-right:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo {
background-color:#f0f0f0;
height:60px;
border-left:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo img.avatar{
position:relative;
width:40px;
height:40px;
margin:10px 0px 10px 10px;
}
#reviews table tr.reviewuserinfo div {
display:block
}
#reviews table tr.reviewuserdata {
background-color:#ffffff;
height: 315px;
border-left:1px solid #ffffff;
}
Any help would be great.
UPDATE
Ok so I got this far now:
Here is my new HTML for this div(the reviewuserinfo div):
<tr class="reviewuserinfo">
<td width="60px"><img class="avatar" src="/act/avatar/35274"/></td>
<td>Text2</td>
<td align="right" style="padding-right:15px">Text3</td>
</tr>
What I need now is to move the text up so it starts at the same position as the top of the avatar - basically horizontal to the top of the image avatar
What do you think about this https://jsfiddle.net/2Lzo9vfc/107/
HTML
<div class="page">
<div class="left">
<img src="http://placehold.it/50x50" alt="">
<div class="left-content">
<h4>Lorem ipsum</h4>
<p>Posted bla bla</p>
</div>
</div>
<div class="right">
<p>Joined lorem ipsum</p>
<p>12 reviews bla lorem ipsum</p>
</div>
</div>
CSS
body, h4, p {
margin: 0;
padding: 0;
}
.page {
padding: 20px;
background: #F0F0F0;
clear: both;
display:inline-block;
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.left-content, img {
display: inline-block;
vertical-align: middle;
}
What if you simply add horizontal cells and include the image and text in each one of them?
My page is centered horizontally and vertically, the page works in all browsers but for IE the page works only in IE11 (Latest). In IE 10, 9 and 8 the table is vertical aligned at the top of the page. How can I make the vertical align work in IE 10,9 and 8, what do I need to change?
Html
<body>
<div class="container">
<div class="content">
<table width="350px">
<tr>
<td>
<img border='0' src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg' width='300' height='300' style="margin:25px 25px 50px 25px;">
</td>
</tr>
<tr>
<td align="center">
<p style="margin: 0px 0px 50px 0px;">Street<br>
0000AA City
</p>
</td>
</tr>
<tr>
<td align="center" class="contact">
<p style="margin: 0px 0px 50px 0px;">
<span style="color:#DDB4A4;">T</span> 000000<br>
<span style="color:#DDB4A4;">E</span> info#info.nl<br>
</p>
</td>
</tr>
<tr>
<td align="center">
<p style="color:#999999; margin: 0px 0px 25px 0px; font-size: 16px;">Text</p>
</td>
</tr>
</table>
</div>
</div>
<body>
Css
html, body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
text-align: left;
}
table {
font-size:18px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #4D4D4D;
}
.contact a:link
{
color: #4D4D4D;
text-decoration: none;
}
.contact a:hover
{
color: #1a0dab;
text-decoration: underline;
}
JSFiddle: https://jsfiddle.net/64ys7j6n/
Older IEs can't handle display:table for both html and body very well. Besides, it's not needed.
Solution: don't assign display:table to html, only to body. The html only needs height:100%.
html {
height:100%;
}
body
{
margin: 0;
width: 100%;
height: 100%;
display: table;
}
New fiddle