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
andposition: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>