настройка полей поля css

Начну с того, что мои навыки css очень слабы.настройка полей поля css

Вот сайт, и я пытался добавить поля на этот фон, чтобы я мог видеть весь контент. Теперь я понимаю, что я не могу использовать поля на фоне, так какие у меня варианты?

Вот мой HTML

<body> 
    <div id="container"> 
     <nav id="navigation"> 
      <ul> 
       <li><a href="index.html" id="btn">Homepage</a></li> 
      </ul> 
     </nav> 
    </div>   
</body>

и вот мой CSS

body { 
    background: url('images/prices.jpg'); 
    min-height: 100%; 
    height: 100%; 
} 

#btn { 
    color: #FAF3BC; 
    background: #4FB69F url('images/texture.png') no-repeat right bottom; 
    padding: 15px 30px; 
    margin: 150px 0px; 
    border-top: 5px; 
    border-radius: 25px; 
    text-decoration: none; 
    text-transform: uppercase; 
}

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

Я был бы признателен за любую помощь .... вот страница в прямом эфире, если вы любите пик http://brewstahs.com/menu.html

источник

2013-11-13 Lucky500

Я знаю, почему ваш css не работает. Наиболее простым использованием CSS является создание макета, но даже если ваш DOM содержит div, представляющий контейнер и нижний колонтитул, высота, занимаемая каждым, равна , равной высоте его содержимого (поскольку вы не указали высоту контейнеров div). Вкратце,

margin: 150px 0px не работает, потому что родительский контейнер (nav) не имеет этой высоты, чтобы обеспечить его значение. Поэтому обеспечиваем высоту nav и div, и это будет работать.

Используйте инструменты, такие как Firebug, чтобы увидеть макет и посмотреть, где вы ошибетесь. Все самое лучшее !!

источник

2013-11-13 14:29:13 Pratik

Спасибо, Пратик! что сделал для кнопки. но что можно сделать, чтобы я мог видеть все содержимое моего фона? – Lucky500

Может быть, вы должны попробовать с атрибутом фон-позиции:

http://www.w3.org/wiki/CSS/Properties/background-position

источник

2013-11-13 14:14:44 opalenzuela

Я попробовал, и он просто режет мой фон в два раза ... Я пытаюсь централизовать поэтому все цены можно увидеть. – Lucky500

Я где-то читал, что должен поместить этот фон в дочерний div, чтобы добавить к нему поля, но у меня все еще есть трудности. – Lucky500

Что вы хотите сделать? В случае перемещения кнопки попробуйте margin-top: 50px; например, в css of btn. Таким образом, кнопка перемещается на 50 пикселей вниз. Margin-left перемещает кнопку вправо, ...

источник

2013-11-13 14:18:06 STheFox

если вы пытаетесь переместить кнопку вниз, то вам нужно сначала положить его в обертку

, если не попробовать это.

body { 
    background: url('images/prices.jpg'); 
    min-height: 100%; 
    height: 100%; 
} 

#navigation { 
    position:relative; 
    display:block; 
    margin:40px 0px 0px 0px; 
    padding:0px; 
    width:auto; 
    height:auto; 
} 

#navigation ul { 
    display:block; 
    position:relative; 
    margin:auto; 
    padding:0px; 
} 

#navigation ul li { 
    list-style:none; 
} 

#btn { 
    color: #FAF3BC; 
    background: #4FB69F url('images/texture.png') no-repeat right bottom; 
    padding: 15px 30px; 
    margin: 150px 0px; 
    border-top: 5px; 
    border-radius: 25px; 
    text-decoration: none; 
    text-transform: uppercase; 
}

и о вашем прошлом вы можете попробовать. У вас есть петлевая фоновая текстура, подобная той, которая у вас есть прямо сейчас с background-repeat: repeat; а затем поместите основное фоновое изображение над ним с z-индексом и центрируйте, если потребуется. Просто чтобы дать вам простой пример

body { 
    background-image:url('images/loop.jpg); 
    background-repeat:repeat; 
    } 

#backgroundimg { 
    background-image:url('images/prices.jpg); 
    background-repeat:no-repeat; 
    display:block; 
    position:relative; 
    width:980px; 
    height:700px; 
    margin:auto; 
    padding:0px; 
}

надеюсь, что это помогает :)

источник

2013-11-13 14:30:41 Anando

Спасибо за код Anando! что сделал для кнопки. но что можно сделать, чтобы я мог видеть все содержимое моего фона? – Lucky500

Так что мне нужно было добавить маржу и дополнение к моему div и nav ... еще раз спасибо, у кого-нибудь есть идея, что можно сделать на фоне? – Lucky500

Я только что объяснил возможную идею выше :) используйте два изображения, а не один ... как постоянный цикл в фоновом режиме, а ваше изображение цены выше его по центру и ваша кнопка поверх него – Anando

ответ

Смежные вопросы