Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Moving Text To Top

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 28, 2016 at 10:03 am #247159
    TV
    Participant

    I’m having trouble with getting my text to get to the top and slightly to the left. I’ve googled it and tried ‘Relative Positioning” “Absolute Positioning” and “Fixed Positioning.” Nothing works. I’m sure I messed up my css code, but I’m not seeing it.

    <!DOCTYPE html>
    <html>
    <head>
    <link href=”../css/about.css” type=”text/css”
    rel=”stylesheet” />
    <style type=”text/css”>
    * {
    margin:0;
    padding:0;
    }
    table {
    width: 100%;
    height: 100%;
    }
    html, body {
    height: 100%;
    }

        &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table border="1";&gt;
       &lt;td colspan="2" align="center" class="abadayTitle"&gt;Abaday
        Strawbear Productions&lt;/td&gt;                            
&lt;tr&gt;
    &lt;td width="12%" class="abadayMenu"&gt;Menu&lt;/td&gt;        
    &lt;td rowspan="5" align="left"&gt;
         <p>Abaday Strawbear 
            Productions</p> 
         <p>AboutAboutAbout</p>
         <p>AboutAboutAbout</p>
         <p>AboutAboutAbout</p>
     &lt;/td&gt;
&lt;/tr&gt; 
&lt;tr&gt;
    &lt;td class= "abadayMenu"&gt;About&lt;/td&gt;

&lt;/tr&gt;
&lt;tr&gt;
    &lt;td class="abadayMenu"&gt;Services&lt;/td&gt;
&lt;/tr&gt;
    &lt;td class="abadayMenu"&gt;Portfolio&lt;/td&gt;
 &lt;/tr&gt;   
 &lt;tr&gt;
    &lt;td class="abadayMenu"&gt;Contact Us&lt;/td&gt; 
 &lt;/tr&gt;
 &lt;tr&gt;
    &lt;td colspan="2" class= 
    "abadayCopyright"&gt;<p>&copy;2016 Abaday Strawbear 
        Productions</p>&lt;/td&gt;
&lt;/table&gt;
&lt;/body&gt;

    td.abadayTitle {
    font-family: Impact;
    color: #8e2323;
    background-color: #d3d9de;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    word-spacing: 0.2em;}

    p.abadayContent {
    font-family: Baskerville, serif;
    color: #000000;
    font-size: 18px
    position: fixed;
    margin-top: 18px;}

    td.abadayMenu {
    font-family: Baskerville, serif;
    color: #b8860b;
    background-color: #d3d9de;
    font-size: 16px;
    text-align: center;}

    td.abadayCopyright {
    font-family:”American Typewriter”, monospace;
    color: #8e2323;
    background-color: #d3d9de;
    font-size: 11px;
    text-align: center;}

    October 28, 2016 at 10:21 am #247161
    Shikkediel
    Participant

    Like this perhaps?

    Demo

    October 28, 2016 at 10:39 am #247162
    Shikkediel
    Participant

    There’s a glitch in the Codepen matrix…
    Follow the white rabbit.

    October 28, 2016 at 10:43 am #247163
    Beverleyh
    Participant

    [EDIT] Typing an answer on mobile takes a bit of time… simultaneous posting ahoy! Evening, Shikk :D

    You should really provide a demo in codepen.io so that we can see what’s happening.

    Briefly looking at your code, I’m assuming you’re referring to the text in the main table cell (the paragraph elements). You should know that the default vertical alignment of table cells is the middle. In HTML4 you could make contents sit towards the top of a td using the valign attribute with a ‘top’ value. Unfortunately, it isn’t supported in HTML5 (the version of HTML you’re using as per the doctype). Instead you can use the CSS equivelant vertical-align property https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

    That said, you shouldn’t be using tables for web layouts at all anymore. Might be a good opportunity to move to a div based layout http://learnlayout.com

    To answer your positioning observation;

    I’ve googled it and tried ‘Relative Positioning” “Absolute Positioning” and “Fixed Positioning.” Nothing works.

    You can’t position in a table cell unless you use a wrapper element https://css-tricks.com/absolutely-position-element-within-a-table-cell/

    But I wouldn’t even go there when you can use divs for the whole shebang. Tables are for statistical data, not layout.

    October 28, 2016 at 10:53 am #247165
    Shikkediel
    Participant

    Hi there, Bev. A much better answer than my quick fix of course. :-)

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.