html - CSS - Styling table -


i need make this: enter image description here

i not 100% sure how make decide table can usefull, terrible scatter did, try looks like:

    <table>       <tr>           <td rowspan="2" class="img-position"><a href="#"><img src="images/foto.png"></a></td>           <td class="topic-name"><a href="#">název topicu nebo článku </a></td>           <td class="date">28.8.2014 / 19:30</td>       </tr>     </table>

my css:

#sub-content .left{     width: 326px;     height: 145px;     display: inline-block;     float:left;         }  #sub-content img{     width: 122px;     height: 121px;     display: inline-block;     margin-top: 0px;     margin-left: 5px;         }  #sub-content .topic-name{     width: 150px;     height: 14px;     line-height 14px;     margin-bottom: 130px;     margin-left: 10px;     display: inline-block;     vertical-align: top;     text-decoration: underline;     font-weight: 14px;          }  #sub-content table{     width:326px;     height:145px;          }  #sub-content tr{     margin: 10px 0px 0px 0px;     padding: 0px;     height: 36px;          }  #sub-content .date{             }  #sub-content .img-position{     margin: 0px;     padding: 0px;     width: 122px;     height: 121px;     display: inline-block;          }

and cant move position style atleast 1 of part , copy 3 times. hope find here can me fix it.

live preview can found on: http://funedit.com/andurit/try1/

thanks reading post

first of recommend read : why not use tables layout in html? how should not create layout.

i prepared basic jsfiddle example given stuff make catch on things faster. check out. example layout

i changed given layout divs , spans , more or less this: 

<div class='article-container'>   <div class='article'>     <div class="img-position">     <a href="#"><img src="http://funedit.com/andurit/try1/images/foto.png"/></a>    </div>   <span class="topic-name"><a href="#">název topicu nebo článku </a></span>   <span class="date">28.8.2014 / 19:30</span>   </div>   .   .    . </div>

Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more