Mon, 2016-07-11 11:43
i am creating a page as a training :
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html lang="en"> <head> <title>chapter 1 me!</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <nav> <img src="images/SOC-Logo.png" alt=""/> </nav> <main> <p>Scones: the most resplendent of snacks</p> <p>Occasionally maligned and misunderstood; the scone is a quintessentially British classic</p> <img class="dish-image" src="images/scones.jpg" alt=""/> <p>Recipe and serving suggestions follow.</p> <h1>Ingredients</h1> <ul> <li>350g self-raising flour, and a little spare for dusting</li> <li>¼ tsp salt</li> <li>1 tsp baking powder</li> <li>85g butter, cut into cubes</li> <li>3 tbsp caster sugar</li> <li>175ml milk</li> <li>1 tsp vanilla extract</li> <li>squeeze lemon juice (see Know-how below)</li> <li>beaten egg, to glaze</li> <li>jam and clotted cream, to serve</li> </ul> <p>Method</p> <ol> <li>Heat the oven to 220°C (or gas mark 7). Tip the flour into a large bowl along with the salt and baking powder, then mix it all up. Add the butter in, then rub the butter in with your fingers until the mix looks like fine crumbs. When that is done, stir in the sugar.</li> <li>Put the milk into a jug and heat in the microwave for about 20-30 seconds. It should be warm but not hot. Add the vanilla and lemon juice to the milk and then put that to one side and but a baking tray in the oven to warm.</li> <li>Make a well in the dry mix, then add the liquid and combine it quickly with a cutlery knife – it will seem pretty wet at first. Spread some flour onto the work surface and tip the dough out. Dredge the dough and your hands with a little more flour, then fold the dough over 2-3 times until it's smoother. Now pat it into a round shape about 4cm deep.</li> <li>Take a 5cm cutter (Pro-tip – smooth-edged cutters tend to cut more cleanly, giving a better rise) and dip it into some flour. Plunge into the dough, then repeat until you have four scones. By this point you’ll probably need to press what's left of the dough back into a round to cut out another four.</li> <li>Brush the tops with beaten egg, then place onto the hot baking tray.</li> <li>Bake for 10 minutes until risen and golden on the top. Eat just warm or cold on the day of baking, generously (and I do mean generously) topped with jam and clotted cream.</li> <li>If freezing, freeze once cool. Defrost, then put in a low oven (about 160°C) for a few minutes to refresh.</li> </ol> </main> </body> </html>
and css :
* { padding: 0; margin: 0; } main { border: 1px dashed red; } .dish-image { max-width: 100%; }
in my iphone the page appear like this :
the question is : why the bullets appear outside the box ? it is inside the box so it should appear in.
i can fix this by adding padding but i want to know why.
Mon, 2016-07-11 20:37
#1
Left padding
Left padding provides the space within the ul for the bullets. When you did this,
* { padding: 0; margin: 0; }
cheers,
gary
Wed, 2016-07-13 07:39
#2
when you set padding to zero
when you set padding to zero you expect left aligned elements to "just touch" the left border of the container. no ?
Wed, 2016-07-13 08:56
#3
john kabbi wrote: when you
when you set padding to zero you expect left aligned elements to "just touch" the left border of the container. no ?
And, they do. But there's no space to the left of the list-items for the bullets, so they are outside the ul container.
You can do
ul { list-style: inside;}
cheers,
gary
Sun, 2016-07-17 08:00
#4
thank you very much, that did
thank you very much, that did it.