Проблема CSS Margin - PullRequest
Новая
       8

Проблема CSS Margin

3 голосов
/ 23 июня 2011

Я начинаю с HTML и CSS.
У меня есть элемент div на странице, который не заполняет всю страницу.
В нем есть элемент ul и несколько элементов списка.
Я хочу поместить список 227px сверху элемента div, но мне не удается этого добиться - он толкает его больше.
Кроме того, между элементами списка я хочу поле в 40 пикселей, но это также делает больше.
В чем проблема?
Вот мой код:
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;  
}

Если вы хотите измерить пиксели, вы можете установить это: http://www.mioplanet.com/products/pixelruler/ (нажмите, чтобы повернуть)
Спасибо!

Ответы [ 5 ]

3 голосов
/ 23 июня 2011

Вы должны начать свой стиль с сброса всех элементов, чтобы каждый браузер показывал их идентично.

Вы можете проверить одну из множества библиотек сброса CSS, но для запуска что-то вроде этого было бы хорошо: 

* {
  margin: 0;
  padding: 0;
}

Это, появившееся первым в вашей таблице стилей CSS, удалит все поля и отступы для каждого элемента, поэтому вы можете добавить их позже только в нужные элементы.

Обновление Если вы хотите восстановить некоторые поля или отступы элементов после этого кода (например, в теле), просто напишите новое правило после предыдущего, например 

body {
  padding:10px; /* Add 10px to body only */
}
1 голос
/ 23 июня 2011

Общая высота каждого элемента списка: высота + отступ + граница + поля.

Измените отступ #MenuItems li на: 

 padding: 0 10px 0 10px;

См. http://jsfiddle.net/NGLN/rBjrD/1/

0 голосов
/ 23 июня 2011

попробуйте это: 

<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>
0 голосов
/ 23 июня 2011

Добавить margin:0; padding:0 для body

В #MenuItems li заменить: 

padding: 4px 10px 4px 10px;

на: 

margin: 4px 10px 4px 10px;

Это сделает расстояние равным40px между кнопками.

0 голосов
/ 23 июня 2011

Попробуйте абсолютное позиционирование: 

.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;
    }
...