4 replies [Last post]
john kabbi
john kabbi's picture
Offline
newbie
Last seen: 3 years 12 weeks ago
Timezone: GMT+3
Joined: 2014-05-19
Posts: 7
Points: 12

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Left padding

Left padding provides the space within the ul for the bullets. When you did this,

*
{
    padding: 0;
    margin: 0;
}
you broke the indention. That's one example of why css resets are silly opportunities for error. See Global resets considered harmful for more.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

john kabbi
john kabbi's picture
Offline
newbie
Last seen: 3 years 12 weeks ago
Timezone: GMT+3
Joined: 2014-05-19
Posts: 7
Points: 12

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 ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

john kabbi wrote: when you

john kabbi wrote:

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;}
to inline the bullets. Even so it is considered good form to indent lists to provide separation from normal text flow.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

john kabbi
john kabbi's picture
Offline
newbie
Last seen: 3 years 12 weeks ago
Timezone: GMT+3
Joined: 2014-05-19
Posts: 7
Points: 12

thank you very much, that did

thank you very much, that did it.