0

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>

TGB314
  • 1
  • 2
  • 1
    Please show corresponding HTML. – kiner_shah Apr 03 '23 at 11:08
  • A mere snippet of CSS tells us rather little. Please get into the habit of providing a proper [mre] when you ask this type of question here. – CBroe Apr 03 '23 at 12:07
  • Of course everything else that follows the table in the normal layout flow, will also move "up", when you drag the table to a higher position using a negative margin-top. But based on the minimal info you have given so far, it is impossible for us to tell why your table would not be "in the right place" to begin with here. – CBroe Apr 03 '23 at 12:09
  • Giving the table the same amount of _positive_ margin at the bottom might perhaps already help (although it will probably rather not be a "good" solution, regarding responsiveness.) – CBroe Apr 03 '23 at 12:11
  • just pasted html – TGB314 Apr 03 '23 at 13:41
  • (the website's about making a mince pie) – TGB314 Apr 03 '23 at 13:42
  • Ok so adding the same amount of positive margin at the bottom worked, text didn't move up with the table. Ignore the whole 'not in the right plave' thing that's just personal preference, what do you mean by responsiveness? – TGB314 Apr 08 '23 at 12:06

0 Answers0