Как разместить элементы сетки

У меня возникла проблема, где для example у меня есть заголовок, расположенный на странице в определенном месте, используя i.e. top: 150px; Однако, как только я начну уменьшать размер своего окна, он отсекает мой фон. Я понял, что использование тегов, таких как top/bottom/left/right или margin-top, приводит к тому, что это происходит, поскольку он хочет оставаться в определенном месте и не уменьшает размер вместе с окном.Как разместить элементы сетки

Я пробовал использовать background-size: cover; в моих body и различных положениях в моем #title, но все еще не мог исправить эту проблему.

CSS

html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#gradient {  
    background: #00BFFF; 
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF); 
    background: linear-gradient(to right bottom, #086A87, #00BFFF); 
    border-radius: 2px; 
    /* background-size:cover;*/ 
    background-size:100% 100%; 
    background-repeat: no-repeat; 
} 

#title { 
    font-size: 60px; 
    color: #FF8000; 
    /* margin-top: 150px;*/ 
    /* position: fixed;*/ 
    /* position: relative;*/ 
    top: 150px; 
}

HTML

<html> 
<body id="gradient"> 

<!-- Title --> 
<div class="row "> 

    <div id="title" class="small-16 large-12 large-centered text-center columns">Example</div> 

    </div> 
</body> 
</html>

Какой самый лучший способ для позиционирования элементов сетки, что исключает такого рода проблемы?

У меня возникают элементы позиционирования на странице с использованием сетки.

Спасибо!

EDIT: Обновленный HTML

EDIT 2: При изменении размера высоты действительно мало, вы можете увидеть мою проблему. http://codepen.io/anon/pen/RNXrMM

источник

2015-04-13 user3128376

Вы также можете разместить свой html? – AnnieMac

Прошу прощения за это, я подумал, что я его положил. Обновлен вопрос с HTML – user3128376

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

<div class="gradient"> 
    <div class="row header"> 
     <div class="small-16 large-12 large-centered text-center columns"> 
      <div id="title">Example</div> 
     </div> 
    </div> 
</div>

Demo

Обратите внимание, что я переместил фон в сНу элемент, а не тело, и я использовал класс, который является предпочтительным для CSS, потому что это делает его более многоразовым и надежный.

источник

2015-04-14 00:04:32 isherwood

Что было бы хорошим способом переместить «Пример» или любые другие элементы сетки в определенное место? Например, я хочу переместить его примерно на 3/4 ниже. Если я использую что-то вроде 'top' или' margin-top', это снова испортит весь фон. Только что начал изучать систему сетки, поэтому у меня возникли проблемы с позиционированием. – user3128376

Как вы можете видеть в представленном мной демо, я добавил верхний край элемента заголовка, который не влияет на сетку. Я также добавил минимальную высоту в div с фоном, чтобы он покрывал всю страницу. – isherwood

Спасибо, просто интересно, можете ли вы помочь мне с еще одной проблемой, которую я испытываю. Однако фоновый эффект отлично работает, если у меня есть заголовок в поле margin-top: 250; 'он будет выглядеть нормально, когда окно будет полноразмерным, но когда я уменьшу размер окна несколько меньше, тогда заголовок' Example' всегда будет внизу. Есть ли способ, которым я могу располагать заголовок на основе размера окна? – user3128376

По вопросу градиента 'исчезающей' на изменение размера, если вы измените

html { 
    width: 100%; 
    height: 100%;

html { 
    width: 100%; 
    min-height: 100%;

он должен решить, что. Кроме того, позволяет использовать

#title {margin-top: 150px;

без обрезания - хотя, если вы хотите, чтобы ваш дизайн будет реагировать (и это звучит немного, как ты) - я бы рекомендовал использовать СЭМ или% для краев, чтобы сделать это немного более последовательное.

вы можете увидеть fiddle here

источник

2015-04-13 17:43:58 AnnieMac

У меня все еще проблема, даже когда я изменил ее на 'min-height: 100%;'. Не было никакой разницы. – user3128376

Можете ли вы создать скрипку с полным CSS и html? Или ссылку на живой пример? Это работает на моей скрипке, так что в вашем коде может быть что-то еще. Просто чтобы подтвердить свою проблему только при отключении фона, а не о фактическом размещении вашего элемента #title? – AnnieMac

Проблема, с которой я столкнулась, - это отрезание фона, или я считаю, что проблема, с которой я столкнулась, заключается в том, что позиция моего элемента выходит за пределы фона. Я не думаю, что это мой фон, отрезанный, но не так ли? Если вы изменяете размер до очень маленького, вы можете увидеть мою проблему. http://codepen.io/anon/pen/RNXrMM – user3128376

Попробуйте добавить min-width:1000px Вы можете установить пиксели в соответствии с вашими потребностями

CSS-код для этого: -

html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    min-width: 1000px; 
} 

#gradient {  
    background: #00BFFF; 
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF); 
    background: linear-gradient(to right bottom, #086A87, #00BFFF); 
    border-radius: 2px; 
    /* background-size:cover;*/ 
    background-size:100% 100%; 
    background-repeat: no-repeat; 
} 

#title { 
    font-size: 60px; 
    color: #FF8000; 
    /* margin-top: 150px;*/ 
    /* position: fixed;*/ 
    /* position: relative;*/ 
    top: 150px; 
}

источник

2015-04-13 17:57:10

Как разместить элементы сетки

ответ

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