Home/ Questions/Q 6072591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T10:10:37+00:00

I’m starting out in HTML and CSS. I have a div element on the

  • 0

I’m starting out in HTML and CSS.
I have a div element on the page, which doesn’t fill the whole page.
In it- there’s a ul element and some list items in it.
I want to put the list 227px from the top of the div element, but I can’t manage to accomplish this- it pushes it more.
Also- between the list items I want a margin of 40 pixels, but it also does more.
What’s the problem?
Here’s my code:
Html:

<body>
    <div class="Hashta">
        <div class="Menu">
            <ul id="MenuItems">
              <li><a href="#" >ONE</a></li>
              <li><a href="#" >TWO</a></li>
              <li><a href="#" >THREE</a></li>
              <li><a href="#" >FOUR</a></li>
            </ul>
        </div>
    </div>
</body>

CSS: 

body {
   background-color: Gray;
}
.Hashta{
   width:874px;
   height:650px;
   background-color:black;
   margin: auto auto 50px auto;
   border-radius: 20px;
   border: 3px solid darkgray;
   moz-box-shadow: 2px 2px 10px black;
   webkit-box-shadow: 2px 2px 10px black;
   box-shadow: 2px 2px 10px black;
}
.Menu {
   margin-top: 227px;
   padding-right: 50px;
   float:right;
}

#MenuItems {
   list-style:none;
}
#MenuItems li {
   text-align:center;  
   position:relative;  
   padding: 4px 10px 4px 10px;  
   margin-right:30px;  
   margin-bottom: 40px;  
   border:none;  
}

#MenuItems li a{
   width: 280px;
   height: 70px;
   background-color: green;
   color:White;
   font-family:Arial, Helvetica, sans-serif;  
   font-size:24px;  
   display:block;  
   outline:0;  
   text-decoration:none;  
   text-shadow: 1px 1px 1px #000;
   line-height: 70px;  
}

If you want to measure the pixels- you can install this: http://www.mioplanet.com/products/pixelruler/
(click to rotate)
Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should start your styling by resetting all elements so that each browser shows them identical.

    You can check one of the many CSS reset libraries around there, but for starting something like this would be already good:

    * {
  margin: 0;
  padding: 0;
}

    This, appearing for first in your CSS stylesheet, will remove all margins and paddings for each element, so you can add them later only in the elements you want.

    Update
    If you want to restore some element margins or paddings after that code (for example in body) simply write a new rule after the one before, like

    body {
  padding:10px; /* Add 10px to body only */
}
    • 0