3

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!

Improve this question
4
  • 2
    If you are starting out I would consider using a reset stylesheet. I always use one and it definitely helps. It strips out all the browser related styles and makes it a lot easier by giving you a "blank canvas". I always use this one meyerweb.com/eric/tools/css/reset Commented Jun 23, 2011 at 13:30
  • Looks alright to me - Sample Commented Jun 23, 2011 at 13:32
  • 2
    Keep in mind though that if you use a CSS reset, you'd better replace the sensible defaults you're unsetting with others. There's default styling for a reason. Commented Jun 23, 2011 at 13:36
  • Thanks @kiz. I used Jose Faeti's method for reseting, though. Commented Jun 23, 2011 at 14:06

5 Answers 5

Reset to default
3

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 */ }
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Using a reset stylesheet may be of good use, but it does not help OP in this case.
Reading the question, there is a div which doesn't fit the page (body padding maybe?), and also "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." So I think resetting would be a great start, just to be sure.
Thanks. That did the trick. Margin and padding work now like I want them to. One question: can I exclude the body element from that?
Reading the question is something completely different than studying or understanding the question.
+1 was wondering how long it'd take for someone to mention defining margin and padding as 0 with *{}
|
1

The total height of every list item is height + padding + border + margin.

Change the padding of #MenuItems li into:

 padding: 0 10px 0 10px;

See http://jsfiddle.net/NGLN/rBjrD/1/

Improve this answer

Comments

0

Add margin:0; padding:0 for body

In #MenuItems li replace:

padding: 4px 10px 4px 10px;

with:

margin: 4px 10px 4px 10px;

This will make the distance equal to 40px between buttons.

Improve this answer

1 Comment

It does, but not for the reason you declare. Further down the declarations is another margin-bottom that results in the desired 40px margin, not yóur margin declaration. Forthermore: this answer still gives no solution for the other part of the question, which is to set a specific margin at the top.
0

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; }
Improve this answer

6 Comments

Total height = height + padding + border + margin
You're right @NGLN but padding is within the border of an element and is not accounted for in the gap between two elements.
I changed the .Menu margin to padding, but there are still about 20px more than I want there to be.
When you work with fixed layouts like this i guess absolute positioning and layers are working best here. Try absolute positioning.
The absolute makes it float to the left
|
0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.