Reputation: 2967

CSS Margin problem

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!

Upvotes: 3

Answers (5)

Jose Faeti

Reputation: 12302

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 */
}

Upvotes: 3

kleinohad

Reputation: 5912

try this:

<style> 
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;
}
.secLi{
   text-align:center;  
   position:relative;  
   padding: 0px 10px 0px 10px;  
   margin-right:30px;  
   margin-top: 40px;  
   border:none;  
}
.firstLi{
   text-align:center;  
   position:relative;  
   padding: 0px 10px 0px 10px;  
   margin-right:30px;  
   margin-top: -16px;  
   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;  
}
</style>

<body>
    <div class="Hashta">

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

Upvotes: 0

Andreas

Reputation: 737

Try absolute positioning:

.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;
   position:relative;
}
.Menu {
       position:absolute;
       top:227px;
       right:0;
       padding-right: 50px;
       float:right;
    }

Upvotes: 0