html - Table Content Misaligning -
for whatever reason, text in table isn't aligning properly. believe deals content-differences between each column, trying put white-space within each table doesn't seem fix it.
edit: woops! ddenhartog letting me know forgot add in heck wanted!
for instance, text on left column starts further down page compared middle column, starts want to, table starts. right-most column starts in middle of left , center column. i'd columns aligned start @ same position, beginning of each column.
i hope explanation makes sense! fiddle gives better visualization.
and here's html:
<title>liberty | las vegas | home</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <!-- start wowslider.com head section --> <link rel="stylesheet" type="text/css" href="engine4//style.css" media="screen" /> <script type="text/javascript" src="engine4//jquery.js"></script> <!-- end wowslider.com head section --> <link href="stylesheet_2.css" rel="stylesheet" type="text/css" /> <style type="text/css"> a:visited { color: #666; } a:active { color: #d00e16; } a:hover { color: #33bdff; } </style> </head> <body> <div id="banner"> <a href="index.html"><h1>liberty</h1> <hr color=white /> <h3>high school</h3></a> </div> <div id="schedule"> <p> </p> </div> <div id="wrap"> <ul class="navbar"> <li><a href="index.html">lhs home</a></li> <li><a target="_blank" href="pdfs/2014/lhs course catalog 2013-2014.pdf">courses</a> </li> <li><a href="faculty.html">faculty</a></li> <li><a href="programs.html">programs , athletics</a></li> <li><a href="">information ▽</a> <ul> <li><a target="_blank" href="https://parentlink.ccsd.net/html/contentbase/content/home/login">parentlink</a></li> <li><a target="_blank" href="https://twitter.com/">twitter</a></li> <li><a target="_blank" href="https://www.facebook.com/">facebook</a></li> <li><a href="handouts.html">important handouts</a> </ul> </li> </ul> </div> <br /> <div id="slide_background"> <!-- start wowslider.com body section id=wowslider-container4 --> <div id="wowslider-container4"> <div class="ws_images"><ul> <li><img src="#" alt="photo by" title="photo krystel tirso" id="wows4_0"/></li> <li><img src="#" alt="photo " title="photo christine fuhler" id="wows4_1"/></li> <li><img src="#" alt="photo by" title="photo sharon deleon" id="wows4_2"/></li> <li><img src="#" alt="photo " title="photo sharon deleon" id="wows4_3"/></li> <li><img src="#" alt="photo " title="photo jessica lopez" id="wows4_4"/></li> </ul></div> <div class="ws_bullets"><div> <a href="#" title="photo o">1</a> <a href="#" title="photo ">2</a> <a href="#" title="photo n">3</a> <a href="#" title="photo eon">4</a> <a href="#" title="photo z">5</a> </div></div> <div class="ws_shadow"></div> </div> <script type="text/javascript" src="engine4//wowslider.js"></script> <script type="text/javascript" src="engine4//script.js"></script> <!-- end wowslider.com body section --> </div> <div id="frontpage"> <table border="0" cellspacing="10" cellpadding="10"> <!-- row 1 --> <tr> <th style="width:20em;" align="left">announcements</th> <th style="width:20em;" align="center">weekly schedule</th> <th style="width:20em;" align="right">celebrations</th> </tr> <!-- row 2 --> <tr> <td style="width:20em;" align="left"> <h2 class="schedule_day"><a href="#" title="l6tv" target="_blank" dir="ltr" data-sessionlink="ei=dl8ru_bbdsil-qobpydoca">morning announcements l6tv</a></h2> <p class="schedule_day"><a href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php?l=product_detail&p=485#.uxoma86pob6#.uydqu6hdv8e" target="_blank">spring reverse tickets!</a></p> <br /> <a href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php?l=product_detail&p=485#.uxoma86pob6#.uydqu6hdv8e" target="_blank"><img src="images\2014 spring reverse tickets.jpg" /></a> <p>purchase tickets <a style="text-decoration:underline" href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php? l=product_detail&p=485#.uxoma86pob6#.uydqu6hdv8e">here!</a></p> </td> <td style="width:20em;" align="center"> <p class="schedule_day">march 24th - 28th<br /> spring reverse<br /> spirit days<br /></p> <p><span class="bold_pink">mocking jay monday – 3/24</span><br /> stuco hand out mocking jay stickers <br /> </p> <p><span class="bold_pink">crowning victor tuesday – 3/25</span><br /> students decorate crowns @ home wear today. @ lunch, there competition best decorated crown. winner receive free spring reverse ticket</p> <p><span class="bold_pink">crazy capitol wednesday – 3/26</span><br /> crazy hair , outfits bright with elaborate, crazy, exotic patterns, etc.<br /> </p> <p><span class="bold_pink">peacekeeper thursday – 3/27</span><br /> camouflage/army wear</p> <p><span class="bold_pink">catching fire friday – 3/28</span><br /> wear class colors</p> <p><span class="bold_red">freshmen: red</span> – <span class="bold_blue">sophomore: blue</span></p> <p><span class="bold_orange">junior: orange</span> – <span class="bold_yellow">seniors: yellow</span></p> <p class="schedule_day">friday (3/21)</p> <p> <span class="bold">last day of 3rd quarter</span><br /> 2p - orchestra festival - unlv<br /> 3:30p - baseball varsity vs. green valley - home<br /> 5p - swim/diving vs. del sol - unlv<br /> </p> <p class="schedule_day">saturday (3/22)</p> <p> baseball junior varsity tournament <br /> track - chandler, az <br /> track - faith lutheran high school <br /> save/law club - ca<br /> 9a - state theater conference - liberty <br /> 12p - swim vs. del sol - multi gen pool <br /> 6p - rotc - revere country club <br /> </p> </td> <td style="width:20em;" align="right"> <p class="schedule_day">photography contest winners!</p> <p>liberty's own name , name have won first , second place, respectively, in landscape, nature, , cityscape category of annual louis j. hendrickson memorial photography contest! please congratulate them! can view work <a href="#" target="_blank" style="text-decoration:underline;">here!</a> (warning: bug!)</p> <p class="schedule_day">hard rock pin contest winner!</p> <img style="width:20em; height:13em;" src="images\2014 hard rock pin contest winner.png" /> <p>please congratulate name - won hard rock hotel's pin design contest! super cool design chosen out of 2,000 designs submitted year. proceeds pin made design go public ed foundation.</p> </td> </tr> </table> </div> <footer> <p align="center">this website created liberty high school career , technical education program web design & development students. ©2014-2015<br /> photos taken liberty high school photography students. <br /> web design advisor – </p> <p align="center">#</p> </footer> and css
body { background-image:url(images/images/banner_repeat_01.jpg); width:auto; height:auto; background-repeat:repeat-x; } footer { background-color:#c3c3c3; background-repeat:repeat-x; background-position:bottom; width:100%; left:0; right:0; position:absolute; } #banner { width:auto; height:auto; margin-left:auto; margin-right:auto; text-align:center; color:white; text-shadow: 2px 2px 5px #000; font-family:"times new roman", times, serif; } #schedule { color:white; margin-left:auto; margin-right:auto; text-align:center; margin-top:2.9em; } #slide_background { background-color:#c3c3c3; margin-left:auto; margin-right:auto; width:100%; position:absolute; left:0; right:0; } #slides { background-color:#000; margin-left:auto; margin-right:auto; text-align:center; height:13em; width:70%; margin-top:-1em; color:white; } #frontpage { margin-left:auto; margin-right:auto; width:100%; color:#333; margin-top:23em; } #banner hr { width:15em; margin-top:-1.8em } #frontpage table th { color:#333; border-collapse:collapse; font-size:2em; text-decoration:underline; font-variant:small-caps; } #frontpage table td { color:#161616; border-collapse:collapse; font-size:1.3em; } h1 { font-size:2.8em; margin-top:-.1em; } h3 { font-variant:small-caps; margin-top:-.2em; letter-spacing:4px; } a:link { text-decoration: none; color:black; } a:visited { text-decoration:none; font-weight:bold; color:black; } a:active { text-decoration:underline; color: #00f; } table a:hover { text-decoration:underline; font-weight:bold; color:#33f; } #banner a:active { text-decoration:none; } h3 { color: #fff; text-decoration: none; } h1 { color: #fff; text-decoration: none; } table { font-family:"times new roman", times, serif; font-size:1em; margin-left:auto; margin-right:auto; letter-spacing:2px; margin-top:-.5em; } body table td:nth-child(n) { border-right:solid thin; } #programs_content table td:nth-child(1) { border-left:solid thin; } td:nth-child(1) { border-right:solid thin; } td:nth-child(2) { border-right:solid thin; } td:nth-child(3) { border-right:solid thin; } #frontpage td:nth-child(3) { border-right:none; } .schedule_day { font-weight:bold; font-size:1.3em; text-decoration:underline; color:black; font-variant:small-caps; } #banner h1 { text-decoration: none; } .bold { font-weight: bold; color: #333; } .bold_pink { font-weight: bold; color: #cf016e; } .bold_red { font-weight: bold; color: #f00; } .bold_blue { font-weight: bold; color: #00f; } .bold_yellow { font-weight: bold; color: #fc0; } .bold_orange { font-weight: bold; color: #d94f26; } #wrap { width: 100%; /* spans width of page */ height: 3.8em; margin: 0; /* ensures there no space between sides of screen , menu */ z-index: 99; /* makes sure menu remains on top of other page elements */ position: absolute; background-color:#fff; left:-3px; right:0; top: 153px; margin-left:auto; margin-right:auto; text-align:center; } body { width:100%; height:100%; } .navbar { display:inline-block; } .navbar li { height: 1.5em;; width: 10em; /* each menu item 150px wide */ float:left; text-align: center; /* text placed in center of box */ list-style: none; /* removes default styling (bullets) list */ font: "times new roman", times, serif; font-size:1em; padding: 0; margin:0; border-left:thin solid #000; border-right:thin solid #000; } .navbar { padding: 0; /* adds padding on top , bottom text appears centered vertically */ text-decoration: none; /* removes default hyperlink styling. */ color: #000; /* text color white */ display: block; } .navbar li ul { display: none; /* hides drop-down menu */ height: auto; margin: 0; /* aligns drop-down box underneath menu item */ } .navbar li:hover ul { display: block; /* displays drop-down box when menu item hovered on */ border: none; padding: .7em; } li:nth-child(1) { border-right:solid thin; } li:nth-child(2) { border-right:solid thin; } li:nth-child(3) { border-right:solid thin; } li:nth-child(4) { border-right:solid thin; } .navbar li ul li { border:none; background-color:#ccc; border:thin solid #000; padding:5px; width:130px; } .navbar li ul li a:hover { background-color: #ccc; } #programs_content { text-align:center; } thanks everyone!
the problem default tables vertical-align: middle, content middle aligned
adding vertical align top td should want
#frontpage table td { vertical-align: top; color:#161616; border-collapse:collapse; font-size:1.3em; } side note:
however, in case, tables might not semantic choice since isn't tabular data, @ point i'm curious, using table evenly distribute columns? divs, , wouldn't have unstyle of default table styles.
Comments
Post a Comment