How do I stop my text from moving up with my table (CSS)?

113 Views Asked by At

So i'm coding up a website and i have a table that isn't in the right place. I want to move it up. For context, there's also some text underneath the table.

I added margin-top: -150px; in my CSS code for my table to do this but when i did, the text below the table moves up with it. I dont want this to happen, I want to move the table up but also keep the text in the same place.

Here's the code for the table (in CSS):

      th,
      td {
        border: 3px solid black;
        background-color: antiquewhite;
        border-collapse: collapse;
        width: 10%;
        position: relative;
        margin-left: 500px;
        margin-top: -150px;
      }

And the code for the text under the table (the text is held in a Steps class):

.Steps {
        font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
        position: relative;
        top: -15px;
        font-size: large;
        color: blueviolet;
        font-weight: bold;
      }

I haven't messed with the positioning with the text or table in HTML either.

  • Like I said, at first i added margin-top: -150px but the text still moved up.

  • I also tried to use position:fixed and position:absolute to move just the table and not the text, again didn't work. The table just collapsed or went all the way to the top and shrunk, not what i wanted as you may guess.

  • I used top: -150px but this doesn't really work well with tables as you may know, the borders and background colour just went all over the website.

  • I tried to search up the solution but all that came up was 'how to move text' or 'how to move a table' in CSS. I don't want that, i already know how but I just need a solution on how to move just the table whilst not affecting the text.

all HTML:

    <table>
      <tr>
        <th>Ingredients:</th>
        <th>Amount:</th>
      </tr>
    </table>
    <h2>Step 1 - Making the sugar and zest</h2>
    <p class="Steps">
      Put the apples, citrus zest, juice and cider into a pan. Bring to the boil
      and then simmer for 10 min. Add the brown sugar, spice, raisins and
      currants and stir over a low heat until the sugar dissolves. Simmer
      rapidly for 15 min. Remove from the heat, add cherries and liqeur, if
      using, cool completely.
    </p>
    <h2>Step 2 - Making the pastry</h2>
    <p class="Steps">
      To make the pastry, put the flour into a food processor with the butter
      and whiz until the mixture resmbles breadcrumbs. Briefly whiz in the sugar
      and zest. Combine egg yolks, cream and with the motor running, pour into
      the flour. Stop when the mixture clumps together and knead briefly. Wrap
      in clingfilm and chill for 30min.
    </p>
    <h2>Step 3 - Piecing the Pie</h2>
    <p class="Steps">
      Dust your work area and roll out the pastry to 3mm (or 1/8 inch)
      thickness. Stamp out 24 rounds with a 9cm (3.5 inch) cutter and line 24
      deep bun tin holes. Fill each with one 1dsp of mincmeat.
    </p>

0

There are 0 best solutions below