Created
November 15, 2012 16:26
-
-
Save bootandy/4079524 to your computer and use it in GitHub Desktop.
HTML Vertical Layout - Like a table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html> | |
| <head> | |
| <style type="text/css"> | |
| .from_to_text { | |
| position: relative; /*Parent is relative */ | |
| } | |
| .from_to_text_real_name { | |
| /*No position - this sets the spacing for the html */ | |
| } | |
| .from_to_text_handle { | |
| /* Absolute but relative to parent node */ | |
| color: #46A; | |
| position:absolute; | |
| top:20px; | |
| width:100%; | |
| font-style: italic; | |
| font-size: smaller; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>CSS Vertical layout (like a table):</p><br/> | |
| <a class="from_to_text"> | |
| <span class="from_to_text_handle"> additional </span> | |
| <span class="from_to_text_real_name"> top_part part </span> | |
| </a> | |
| <a class="from_to_text"> | |
| <span class="from_to_text_handle"> extra info</span> | |
| <span class="from_to_text_real_name"> top_part part </span> | |
| </a> | |
| </body> | |
| </html> | |
| Demo: http://jsfiddle.net/cmjmb/29/ | |
| CSS Positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment